Refactoring internal editors. Make diagramm editor resizable

apps/common/main/lib/controller/ExternalDiagramEditor.js

@@ -98,10 +98,13 @@ define([
                         'drag': _.bind(function(o, state){
                             externalEditor && externalEditor.serviceCommand('window:drag', state == 'start');
                         },this),
+                        'resize': _.bind(function(o, state){
+                            externalEditor && externalEditor.serviceCommand('window:resize', state == 'start');
+                        },this),
                         'show': _.bind(function(cmp){
                             var h = this.diagramEditorView.getHeight(),
                                 innerHeight = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
-                            if (innerHeight>h && h<700 || innerHeight<h) {
+                            if (innerHeight<h) {
                                 h = Math.min(innerHeight, 700);
                                 this.diagramEditorView.setHeight(h);
                             }
@@ -226,12 +229,20 @@ define([
                     if (eventData.type == "processMouse") {
                         if (eventData.data.event == 'mouse:up') {
                             this.diagramEditorView.binding.dragStop();
+                            if (this.diagramEditorView.binding.resizeStop)  this.diagramEditorView.binding.resizeStop();
                         } else
                         if (eventData.data.event == 'mouse:move') {
                             var x = parseInt(this.diagramEditorView.$window.css('left')) + eventData.data.pagex,
                                 y = parseInt(this.diagramEditorView.$window.css('top')) + eventData.data.pagey + 34;
                             this.diagramEditorView.binding.drag({pageX:x, pageY:y});
+                            if (this.diagramEditorView.binding.resize)  this.diagramEditorView.binding.resize({pageX:x, pageY:y});
                         }
+                    } else
+                    if (eventData.type == "resize") {
+                        var w = eventData.data.width,
+                            h = eventData.data.height;
+                        if (w>0 && h>0)
+                            this.diagramEditorView.setInnerSize(w, h);
                     } else
                         this.diagramEditorView.fireEvent('internalmessage', this.diagramEditorView, eventData);
                 }

apps/common/main/lib/view/ExternalDiagramEditor.js

@@ -39,59 +39,29 @@
  */
 
 define([
-    'common/main/lib/component/Window'
+    'common/main/lib/view/ExternalEditor'
 ], function () { 'use strict';
 
-    Common.Views.ExternalDiagramEditor = Common.UI.Window.extend(_.extend({
+    Common.Views.ExternalDiagramEditor = Common.Views.ExternalEditor.extend(_.extend({
         initialize : function(options) {
             var _options = {};
-            var _inner_height = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
             _.extend(_options,  {
                 title: this.textTitle,
-                width: 910,
+                storageName: 'diagram-editor',
-                height: (_inner_height - 700)<0 ? _inner_height : 700,
+                sdkplaceholder: 'id-diagram-editor-placeholder',
-                cls: 'advanced-settings-dlg',
+                initwidth: 900,
-                header: true,
+                initheight: 700,
-                toolclose: 'hide',
+                minwidth: 730,
-                toolcallback: _.bind(this.onToolClose, this)
+                minheight: 275
             }, options);
 
-            this.template = [
-                '<div id="id-diagram-editor-container" class="box" style="height:' + (_options.height-85) + 'px;">',
-                    '<div id="id-diagram-editor-placeholder" style="width: 100%;height: 100%;"></div>',
-                '</div>',
-                '<div class="separator horizontal"></div>',
-                '<div class="footer" style="text-align: center;">',
-                    '<button id="id-btn-diagram-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
-                    '<button id="id-btn-diagram-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
-                '</div>'
-            ].join('');
-
-            _options.tpl = _.template(this.template)(_options);
-
-            this.handler = _options.handler;
             this._chartData = null;
-            this._isNewChart = true;
+            Common.Views.ExternalEditor.prototype.initialize.call(this, _options);
-            Common.UI.Window.prototype.initialize.call(this, _options);
-        },
-
-        render: function() {
-            Common.UI.Window.prototype.render.call(this);
-
-            this.btnSave = new Common.UI.Button({
-                el: $('#id-btn-diagram-editor-apply'),
-                disabled: true
-            });
-            this.btnCancel = new Common.UI.Button({
-                el: $('#id-btn-diagram-editor-cancel')
-            });
-
-            this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
         },
 
         show: function() {
             this.setPlaceholder();
-            Common.UI.Window.prototype.show.apply(this, arguments);
+            Common.Views.ExternalEditor.prototype.show.apply(this, arguments);
         },
 
         setChartData: function(data) {
@@ -100,55 +70,6 @@ define([
                 this.fireEvent('setchartdata', this);
         },
 
-        setEditMode: function(mode) {
-            this._isNewChart = !mode;
-        },
-
-        isEditMode: function() {
-            return !this._isNewChart;
-        },
-
-        setControlsDisabled: function(disable) {
-            this.btnSave.setDisabled(disable);
-            this.btnCancel.setDisabled(disable);
-            (disable) ? this.$window.find('.tool.close').addClass('disabled') : this.$window.find('.tool.close').removeClass('disabled');
-        },
-
-        onDlgBtnClick: function(event) {
-            if ( this.handler ) {
-                this.handler.call(this, event.currentTarget.attributes['result'].value);
-                return;
-            }
-            this.hide();
-        },
-
-        onToolClose: function() {
-            if ( this.handler ) {
-                this.handler.call(this, 'cancel');
-                return;
-            }
-            this.hide();
-        },
-
-        setHeight: function(height) {
-            if (height >= 0) {
-                var min = parseInt(this.$window.css('min-height'));
-                height < min && (height = min);
-                this.$window.height(height);
-
-                var header_height = (this.initConfig.header) ? parseInt(this.$window.find('> .header').css('height')) : 0;
-
-                this.$window.find('> .body').css('height', height-header_height);
-                this.$window.find('> .body > .box').css('height', height-85);
-
-                var top  = (Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top') - parseInt(height)) / 2;
-                var left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
-
-                this.$window.css('left',left);
-                this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top') + top);
-            }
-        },
-
         setPlaceholder: function(placeholder) {
             this._placeholder = placeholder;
         },
@@ -157,8 +78,6 @@ define([
             return this._placeholder;
         },
 
-        textSave: 'Save & Exit',
-        textClose: 'Close',
         textTitle: 'Chart Editor'
     }, Common.Views.ExternalDiagramEditor || {}));
 });

apps/common/main/lib/view/ExternalEditor.js

@@ -0,0 +1,201 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2022
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ *  ExternalEditor.js
+ *
+ *  Created by Julia Radzhabova on 22/06/22
+ *  Copyright (c) 2022 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/component/Window'
+], function () { 'use strict';
+
+    Common.Views.ExternalEditor = Common.UI.Window.extend(_.extend({
+        initialize : function(options) {
+            var filter = Common.localStorage.getKeysFilter(),
+                appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';
+            this.storageName = appPrefix + (options.storageName || 'external-editor');
+
+            var _options = {},
+                width = options.initwidth || 900,
+                height = options.initheight || 700;
+            var value = Common.localStorage.getItem(this.storageName + '-width');
+            value && (width = parseInt(value));
+            value = Common.localStorage.getItem(this.storageName + '-height');
+            value && (height = parseInt(value));
+
+            var _inner_height = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
+            _.extend(_options,  {
+                width: width,
+                height: (_inner_height - height)<0 ? _inner_height : height,
+                cls: 'advanced-settings-dlg',
+                header: true,
+                toolclose: 'hide',
+                toolcallback: _.bind(this.onToolClose, this),
+                resizable: true
+            }, options);
+
+            this._headerFooterHeight = 85;
+
+            this.template = [
+                '<div id="id-editor-container" class="box" style="height:' + (_options.height-this._headerFooterHeight) + 'px; padding: 0 5px;">',
+                    '<div id="' + (_options.sdkplaceholder || '') + '" style="width: 100%;height: 100%;"></div>',
+                '</div>',
+                '<div class="separator horizontal"></div>',
+                '<div class="footer" style="text-align: center;">',
+                    '<button id="id-btn-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
+                    '<button id="id-btn-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
+                '</div>'
+            ].join('');
+
+            _options.tpl = _.template(this.template)(_options);
+
+            this.handler = _options.handler;
+            this._isNewObject = true;
+            this.on('resize', _.bind(this.onWindowResize, this));
+            Common.UI.Window.prototype.initialize.call(this, _options);
+        },
+
+        render: function() {
+            Common.UI.Window.prototype.render.call(this);
+            this.boxEl = this.$window.find('.body > .box');
+
+            this.btnSave = new Common.UI.Button({
+                el: this.$window.find('#id-btn-editor-apply'),
+                disabled: true
+            });
+            this.btnCancel = new Common.UI.Button({
+                el: this.$window.find('#id-btn-editor-cancel')
+            });
+
+            this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
+        },
+
+        show: function() {
+            Common.UI.Window.prototype.show.apply(this, arguments);
+        },
+
+        setEditMode: function(mode) {
+            this._isNewObject = !mode;
+        },
+
+        isEditMode: function() {
+            return !this._isNewObject;
+        },
+
+        setControlsDisabled: function(disable) {
+            this.btnSave.setDisabled(disable);
+            this.btnCancel.setDisabled(disable);
+            (disable) ? this.$window.find('.tool.close').addClass('disabled') : this.$window.find('.tool.close').removeClass('disabled');
+        },
+
+        onDlgBtnClick: function(event) {
+            if ( this.handler ) {
+                this.handler.call(this, event.currentTarget.attributes['result'].value);
+                return;
+            }
+            this.hide();
+        },
+
+        onToolClose: function() {
+            if ( this.handler ) {
+                this.handler.call(this, 'cancel');
+                return;
+            }
+            this.hide();
+        },
+
+        setHeight: function(height) {
+            if (height >= 0) {
+                var min = parseInt(this.$window.css('min-height'));
+                height < min && (height = min);
+                this.$window.height(height);
+
+                var header_height = (this.initConfig.header) ? parseInt(this.$window.find('> .header').css('height')) : 0;
+
+                this.$window.find('> .body').css('height', height-header_height);
+                this.$window.find('> .body > .box').css('height', height-this._headerFooterHeight);
+
+                // var top  = (Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top') - parseInt(height)) / 2;
+                // var left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
+                //
+                // this.$window.css('left',left);
+                // this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top') + top);
+            }
+        },
+
+        setInCenter: function() {
+            var height = this.$window.height(),
+                top  = (Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top') - parseInt(height)) / 2,
+                left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
+
+            this.$window.css('left',left);
+            this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top') + top);
+        },
+
+        setInnerSize: function(width, height) {
+            var maxHeight = Common.Utils.innerHeight(),
+                maxWidth = Common.Utils.innerWidth(),
+                borders_width = (parseInt(this.$window.css('border-left-width')) + parseInt(this.$window.css('border-right-width'))),
+                paddings = (parseInt(this.boxEl.css('padding-left')) + parseInt(this.boxEl.css('padding-right')));
+            height += 90; // add toolbar and statusbar height
+            if (maxHeight<height + this._headerFooterHeight)
+                height = maxHeight - this._headerFooterHeight;
+            if (maxWidth<width + paddings + borders_width)
+                width = maxWidth - paddings - borders_width;
+
+            this.boxEl.css('height', height);
+
+            this.setHeight(height + this._headerFooterHeight);
+            this.setWidth(width + paddings + borders_width);
+
+            if (this.getLeft()<0)
+                this.$window.css('left', 0);
+            if (this.getTop() < Common.Utils.InternalSettings.get('window-inactive-area-top') )
+                this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top'));
+        },
+
+        onWindowResize: function (args) {
+            if (args && args[1]=='end') {
+                var value = this.getSize();
+                Common.localStorage.setItem(this.storageName + '-width', value[0]);
+                Common.localStorage.setItem(this.storageName + '-height', value[1]);
+            }
+        },
+
+        textSave: 'Save & Exit',
+        textClose: 'Close'
+    }, Common.Views.ExternalEditor || {}));
+});

apps/common/main/lib/view/ExternalOleEditor.js

@@ -39,74 +39,24 @@
  */
 
 define([
-    'common/main/lib/component/Window'
+    'common/main/lib/view/ExternalEditor'
 ], function () { 'use strict';
 
-    Common.Views.ExternalOleEditor = Common.UI.Window.extend(_.extend({
+    Common.Views.ExternalOleEditor = Common.Views.ExternalEditor.extend(_.extend({
         initialize : function(options) {
-            var filter = Common.localStorage.getKeysFilter();
+            var _options = {};
-            this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';
-
-            var _options = {}, width = 900, height = 700;
-            var value = Common.localStorage.getItem(this.appPrefix + 'ole-editor-width');
-            value && (width = parseInt(value));
-            value = Common.localStorage.getItem(this.appPrefix + 'ole-editor-height');
-            value && (height = parseInt(value));
-
-            var _inner_height = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
             _.extend(_options,  {
                 title: this.textTitle,
-                width: width,
+                storageName: 'ole-editor',
-                height: (_inner_height - height)<0 ? _inner_height : height,
+                sdkplaceholder: 'id-ole-editor-placeholder',
+                initwidth: 900,
+                initheight: 700,
                 minwidth: 840,
-                minheight: 275,
+                minheight: 275
-                cls: 'advanced-settings-dlg',
-                header: true,
-                toolclose: 'hide',
-                toolcallback: _.bind(this.onToolClose, this),
-                resizable: true
             }, options);
 
-            this._headerFooterHeight = 85;
-
-            this.template = [
-                '<div id="id-ole-editor-container" class="box" style="height:' + (_options.height-this._headerFooterHeight) + 'px; padding: 0 5px;">',
-                    '<div id="id-ole-editor-placeholder" style="width: 100%;height: 100%;"></div>',
-                '</div>',
-                '<div class="separator horizontal"></div>',
-                '<div class="footer" style="text-align: center;">',
-                    '<button id="id-btn-ole-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
-                    '<button id="id-btn-ole-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
-                '</div>'
-            ].join('');
-
-            _options.tpl = _.template(this.template)(_options);
-
-            this.handler = _options.handler;
             this._oleData = null;
-            this._isNewOle = true;
+            Common.Views.ExternalEditor.prototype.initialize.call(this, _options);
-            this.on('resize', _.bind(this.onWindowResize, this));
-            Common.UI.Window.prototype.initialize.call(this, _options);
-        },
-
-        render: function() {
-            Common.UI.Window.prototype.render.call(this);
-            this.boxEl = this.$window.find('.body > .box');
-
-            this.btnSave = new Common.UI.Button({
-                el: $('#id-btn-ole-editor-apply'),
-                disabled: true
-            });
-            this.btnCancel = new Common.UI.Button({
-                el: $('#id-btn-ole-editor-cancel')
-            });
-
-            this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
-        },
-
-        show: function() {
-            this.setPlaceholder();
-            Common.UI.Window.prototype.show.apply(this, arguments);
         },
 
         setOleData: function(data) {
@@ -115,98 +65,6 @@ define([
                 this.fireEvent('setoledata', this);
         },
 
-        setEditMode: function(mode) {
-            this._isNewOle = !mode;
-        },
-
-        isEditMode: function() {
-            return !this._isNewOle;
-        },
-
-        setControlsDisabled: function(disable) {
-            this.btnSave.setDisabled(disable);
-            this.btnCancel.setDisabled(disable);
-            (disable) ? this.$window.find('.tool.close').addClass('disabled') : this.$window.find('.tool.close').removeClass('disabled');
-        },
-
-        onDlgBtnClick: function(event) {
-            if ( this.handler ) {
-                this.handler.call(this, event.currentTarget.attributes['result'].value);
-                return;
-            }
-            this.hide();
-        },
-
-        onToolClose: function() {
-            if ( this.handler ) {
-                this.handler.call(this, 'cancel');
-                return;
-            }
-            this.hide();
-        },
-
-        setHeight: function(height) {
-            if (height >= 0) {
-                var min = parseInt(this.$window.css('min-height'));
-                height < min && (height = min);
-                this.$window.height(height);
-
-                var header_height = (this.initConfig.header) ? parseInt(this.$window.find('> .header').css('height')) : 0;
-
-                this.$window.find('> .body').css('height', height-header_height);
-                this.$window.find('> .body > .box').css('height', height-this._headerFooterHeight);
-            }
-        },
-
-        setInCenter: function() {
-            var height = this.$window.height(),
-                top  = (Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top') - parseInt(height)) / 2,
-                left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
-
-            this.$window.css('left',left);
-            this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top') + top);
-        },
-
-        setInnerSize: function(width, height) {
-            var maxHeight = Common.Utils.innerHeight(),
-                maxWidth = Common.Utils.innerWidth(),
-                borders_width = (parseInt(this.$window.css('border-left-width')) + parseInt(this.$window.css('border-right-width'))),
-                paddings = (parseInt(this.boxEl.css('padding-left')) + parseInt(this.boxEl.css('padding-right')));
-            height += 90; // add toolbar and statusbar height
-            if (maxHeight<height + this._headerFooterHeight)
-                height = maxHeight - this._headerFooterHeight;
-            if (maxWidth<width + paddings + borders_width)
-                width = maxWidth - paddings - borders_width;
-
-            this.boxEl.css('height', height);
-
-            this.setHeight(height + this._headerFooterHeight);
-            this.setWidth(width + paddings + borders_width);
-
-            if (this.getLeft()<0)
-                this.$window.css('left', 0);
-            if (this.getTop() < Common.Utils.InternalSettings.get('window-inactive-area-top') )
-                this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top'));
-        },
-
-        setPlaceholder: function(placeholder) {
-            this._placeholder = placeholder;
-        },
-
-        getPlaceholder: function() {
-            return this._placeholder;
-        },
-
-        onWindowResize: function (args) {
-            if (args && args[1]=='end') {
-                var value = this.getSize();
-                Common.localStorage.setItem(this.appPrefix + 'ole-editor-width', value[0]);
-                Common.localStorage.setItem(this.appPrefix + 'ole-editor-height', value[1]);
-            }
-        },
-
-        textSave: 'Save & Exit',
-        textClose: 'Close',
         textTitle: 'Spreadsheet Editor'
     }, Common.Views.ExternalOleEditor || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -279,12 +279,15 @@
   "Common.Views.CopyWarningDialog.textToPaste": "for Paste",
   "Common.Views.DocumentAccessDialog.textLoading": "Loading...",
   "Common.Views.DocumentAccessDialog.textTitle": "Sharing Settings",
-  "Common.Views.ExternalDiagramEditor.textClose": "Close",
+  "Common.Views.ExternalEditor.textClose": "Close",
-  "Common.Views.ExternalDiagramEditor.textSave": "Save & Exit",
+  "Common.Views.ExternalEditor.textSave": "Save & Exit",
+  "del_Common.Views.ExternalDiagramEditor.textClose": "Close",
+  "del_Common.Views.ExternalDiagramEditor.textSave": "Save & Exit",
   "Common.Views.ExternalDiagramEditor.textTitle": "Chart Editor",
-  "Common.Views.ExternalMergeEditor.textClose": "Close",
+  "del_Common.Views.ExternalMergeEditor.textClose": "Close",
-  "Common.Views.ExternalMergeEditor.textSave": "Save & Exit",
+  "del_Common.Views.ExternalMergeEditor.textSave": "Save & Exit",
   "Common.Views.ExternalMergeEditor.textTitle": "Mail Merge Recipients",
+  "Common.Views.ExternalOleEditor.textTitle": "Spreadsheet Editor",
   "Common.Views.Header.labelCoUsersDescr": "Users who are editing the file:",
   "Common.Views.Header.textAddFavorite": "Mark as favorite",
   "Common.Views.Header.textAdvSettings": "Advanced settings",

apps/presentationeditor/main/locale/en.json

@@ -366,9 +366,12 @@
   "Common.Views.CopyWarningDialog.textToPaste": "for Paste",
   "Common.Views.DocumentAccessDialog.textLoading": "Loading...",
   "Common.Views.DocumentAccessDialog.textTitle": "Sharing Settings",
-  "Common.Views.ExternalDiagramEditor.textClose": "Close",
+  "Common.Views.ExternalEditor.textClose": "Close",
-  "Common.Views.ExternalDiagramEditor.textSave": "Save & Exit",
+  "Common.Views.ExternalEditor.textSave": "Save & Exit",
+  "del_Common.Views.ExternalDiagramEditor.textClose": "Close",
+  "del_Common.Views.ExternalDiagramEditor.textSave": "Save & Exit",
   "Common.Views.ExternalDiagramEditor.textTitle": "Chart Editor",
+  "Common.Views.ExternalOleEditor.textTitle": "Spreadsheet Editor",
   "Common.Views.Header.labelCoUsersDescr": "Users who are editing the file:",
   "Common.Views.Header.textAddFavorite": "Mark as favorite",
   "Common.Views.Header.textAdvSettings": "Advanced settings",

apps/spreadsheeteditor/main/app/template/ToolbarAnother.template

@@ -23,7 +23,7 @@
                 <div class="elset">
                     <span class="btn-slot split" id="slot-btn-digit-dec"></span>
                     <span class="btn-slot split" id="slot-btn-digit-inc"></span>
-                    <span class="btn-slot" id="slot-btn-format" style="width: 84px; vertical-align: middle;"></span>
+                    <span class="btn-slot" id="slot-btn-format" style="width: 80px; vertical-align: middle;"></span>
                 </div>
             </div>
             <div class="separator short"></div>