Merge pull request #1999 from ONLYOFFICE/feature/textbox

Feature/textbox

apps/documenteditor/main/app/controller/Toolbar.js

@@ -212,8 +212,10 @@ define([
                 if (this.toolbar.btnInsertShape.pressed)
                     this.toolbar.btnInsertShape.toggle(false, true);
 
-                if (this.toolbar.btnInsertText.pressed)
+                if (this.toolbar.btnInsertText.pressed) {
                     this.toolbar.btnInsertText.toggle(false, true);
+                    this.toolbar.btnInsertText.menu.clearAll();
+                }
 
                 $(document.body).off('mouseup', checkInsertAutoshape);
             };
@@ -335,6 +337,7 @@ define([
             toolbar.mnuInsertTable.on('show:after',                _.bind(this.onInsertTableShow, this));
             toolbar.mnuInsertImage.on('item:click',                     _.bind(this.onInsertImageClick, this));
             toolbar.btnInsertText.on('click',                           _.bind(this.onBtnInsertTextClick, this));
+            toolbar.btnInsertText.menu.on('item:click',                 _.bind(this.onMenuInsertTextClick, this));
             toolbar.btnInsertShape.menu.on('hide:after',                _.bind(this.onInsertShapeHide, this));
             toolbar.btnDropCap.menu.on('item:click',                    _.bind(this.onDropCapSelect, this));
             toolbar.btnContentControls.menu.on('item:click',            _.bind(this.onControlsSelect, this));
@@ -1649,8 +1652,35 @@ define([
         },
 
         onBtnInsertTextClick: function(btn, e) {
+            btn.menu.items.forEach(function(item) {
+                if(item.value == btn.options.textboxType) 
+                item.setChecked(true);
+            });
+            if(!this.toolbar.btnInsertText.pressed) {
+                this.toolbar.btnInsertText.menu.clearAll();
+            } 
+            this.onInsertText(btn.options.textboxType, btn, e);
+        },
+
+        onMenuInsertTextClick: function(btn, e) {
+            var oldType = this.toolbar.btnInsertText.options.textboxType;
+            var newType = e.value;
+            this.toolbar.btnInsertText.toggle(true);
+
+            if(newType != oldType){
+                this.toolbar.btnInsertText.changeIcon({
+                    next: e.options.iconClsForMainBtn,
+                    curr: this.toolbar.btnInsertText.menu.items.filter(function(item){return item.value == oldType})[0].options.iconClsForMainBtn
+                });
+                this.toolbar.btnInsertText.updateHint([e.caption, this.views.Toolbar.prototype.tipInsertText]);
+                this.toolbar.btnInsertText.options.textboxType = newType;
+            }
+            this.onInsertText(newType, btn, e);
+        },
+
+        onInsertText: function(type, btn, e) {
             if (this.api)
-                this._addAutoshape(btn.pressed, 'textRect');
+                this._addAutoshape(this.toolbar.btnInsertText.pressed, type);
 
             if (this.toolbar.btnInsertShape.pressed)
                 this.toolbar.btnInsertShape.toggle(false, true);

apps/documenteditor/main/app/view/Toolbar.js

@@ -682,9 +682,11 @@ define([
                             _set.lostConnect, _set.disableOnStart],
                         caption: me.capBtnInsTextbox,
                         enableToggle: true,
+                        split: true,
                         dataHint: '1',
                         dataHintDirection: 'bottom',
-                        dataHintOffset: 'small'
+                        dataHintOffset: 'small',
+                        textboxType: 'textRect'
                     });
                     this.paragraphControls.push(this.btnInsertText);
 
@@ -2011,7 +2013,7 @@ define([
                 this.btnInsertTable.updateHint(this.tipInsertTable);
                 this.btnInsertImage.updateHint(this.tipInsertImage);
                 this.btnInsertChart.updateHint(this.tipInsertChart);
-                this.btnInsertText.updateHint(this.tipInsertText);
+                this.btnInsertText.updateHint([this.tipInsertHorizontalText ,this.tipInsertText]);
                 this.btnInsertTextArt.updateHint(this.tipInsertTextArt);
                 this.btnEditHeader.updateHint(this.tipEditHeader);
                 this.btnInsDateTime.updateHint(this.tipDateTime);
@@ -2221,6 +2223,29 @@ define([
                 };
                 this.btnInsertTextArt.menu.on('show:before', onShowBeforeTextArt);
 
+                this.btnInsertText.setMenu(new Common.UI.Menu({
+                    items: [
+                        {
+                            caption: this.tipInsertHorizontalText,
+                            checkable: true,
+                            checkmark: false,
+                            iconCls     : 'menu__icon btn-text',
+                            toggleGroup: 'textbox',
+                            value: 'textRect',
+                            iconClsForMainBtn: 'btn-text'
+                        },
+                        {
+                            caption: this.tipInsertVerticalText,
+                            checkable: true,
+                            checkmark: false,
+                            iconCls     : 'menu__icon btn-text-vertical',
+                            toggleGroup: 'textbox',
+                            value: 'textRectVertical',
+                            iconClsForMainBtn: 'btn-text-vertical'
+                        },
+                    ]
+                }));
+
                 // set dataviews
 
                 var _conf = this.mnuMarkersPicker.conf;
@@ -2710,7 +2735,9 @@ define([
             textAutoColor: 'Automatic',
             tipInsertChart: 'Insert Chart',
             tipColorSchemas: 'Change Color Scheme',
-            tipInsertText: 'Insert Text',
+            tipInsertHorizontalText: 'Insert horizontal text box',
+            tipInsertVerticalText: 'Insert vertical text box',
+            tipInsertText: 'Insert text box',
             tipInsertTextArt: 'Insert Text Art',
             mniEditDropCap: 'Drop Cap Settings',
             textNone: 'None',

apps/documenteditor/main/locale/en.json

@@ -2890,6 +2890,8 @@
   "DE.Views.Toolbar.tipInsertShape": "Insert autoshape",
   "DE.Views.Toolbar.tipInsertSymbol": "Insert symbol",
   "DE.Views.Toolbar.tipInsertTable": "Insert table",
+  "DE.Views.Toolbar.tipInsertHorizontalText": "Insert horizontal text box",
+  "DE.Views.Toolbar.tipInsertVerticalText": "Insert vertical text box",
   "DE.Views.Toolbar.tipInsertText": "Insert text box",
   "DE.Views.Toolbar.tipInsertTextArt": "Insert Text Art",
   "DE.Views.Toolbar.tipLineNumbers": "Show line numbers",

apps/documenteditor/main/locale/ru.json

@@ -2890,6 +2890,8 @@
   "DE.Views.Toolbar.tipInsertShape": "Вставить автофигуру",
   "DE.Views.Toolbar.tipInsertSymbol": "Вставить символ",
   "DE.Views.Toolbar.tipInsertTable": "Вставить таблицу",
+  "DE.Views.Toolbar.tipInsertHorizontalText": "Вставить горизонтальную надпись",
+  "DE.Views.Toolbar.tipInsertVerticalText": "Вставить вертикальную надпись",
   "DE.Views.Toolbar.tipInsertText": "Вставить надпись",
   "DE.Views.Toolbar.tipInsertTextArt": "Вставить объект Text Art",
   "DE.Views.Toolbar.tipLineNumbers": "Показывать номера строк",

apps/presentationeditor/main/app/controller/Toolbar.js

@@ -127,7 +127,8 @@ define([
             this.addListeners({
                 'Toolbar': {
                     'insert:image'      : this.onInsertImageClick.bind(this),
-                    'insert:text'       : this.onInsertText.bind(this),
+                    'insert:text-btn'   : this.onBtnInsertTextClick.bind(this),
+                    'insert:text-menu'  : this.onMenuInsertTextClick.bind(this),
                     'insert:textart'    : this.onInsertTextart.bind(this),
                     'insert:shape'      : this.onInsertShape.bind(this),
                     'add:slide'         : this.onAddSlide.bind(this),
@@ -226,8 +227,12 @@ define([
                 if ( this.toolbar.btnsInsertShape.pressed() )
                     this.toolbar.btnsInsertShape.toggle(false, true);
 
-                if ( this.toolbar.btnsInsertText.pressed() )
+                if ( this.toolbar.btnsInsertText.pressed() ) {
                     this.toolbar.btnsInsertText.toggle(false, true);
+                    this.toolbar.btnsInsertText.forEach(function(button) {
+                        button.menu.clearAll();
+                    });
+                }
 
                 if ( this.toolbar.cmbInsertShape.isComboViewRecActive() )
                     this.toolbar.cmbInsertShape.deactivateRecords();
@@ -1784,14 +1789,39 @@ define([
             Common.NotificationCenter.trigger('storage:image-insert', data);
         },
 
-        onInsertText: function(status) {
+        onBtnInsertTextClick: function(btn, e) {
-            if ( status == 'begin' ) {
+            btn.menu.items.forEach(function(item) {
-                this._addAutoshape(true, 'textRect');
+                if(item.value == btn.options.textboxType) 
+                item.setChecked(true);
+            });
+            if(!btn.pressed) {
+                btn.menu.clearAll();
+            } 
+            this.onInsertText(btn.options.textboxType, btn, e);
+        },
 
-                if ( !this.toolbar.btnsInsertText.pressed() )
+        onMenuInsertTextClick: function(btn, e) {
-                    this.toolbar.btnsInsertText.toggle(true, true);
+            var self = this;
-            } else
+            var oldType = btn.options.textboxType;
-                this._addAutoshape(false, 'textRect');
+            var newType = e.value;
+
+            btn.toggle(true);
+            if(newType != oldType){
+                this.toolbar.btnsInsertText.forEach(function(button) {
+                    button.updateHint([e.caption, self.views.Toolbar.prototype.tipInsertText]);
+                    button.changeIcon({
+                        next: e.options.iconClsForMainBtn,
+                        curr: button.menu.items.filter(function(item){return item.value == oldType})[0].options.iconClsForMainBtn
+                    });
+                    button.options.textboxType = newType; 
+                });
+            }
+            this.onInsertText(newType, btn, e);
+        },
+
+        onInsertText: function(type, btn, e) {
+            if (this.api) 
+                this._addAutoshape(btn.pressed, type);
 
             if ( this.toolbar.btnsInsertShape.pressed() )
                 this.toolbar.btnsInsertShape.toggle(false, true);

apps/presentationeditor/main/app/view/Toolbar.js

@@ -1283,7 +1283,7 @@ define([
                 this.btnsInsertImage = Common.Utils.injectButtons($host.find('.slot-insertimg'), 'tlbtn-insertimage-', 'toolbar__icon btn-insertimage', this.capInsertImage,
                     [Common.enumLock.slideDeleted, Common.enumLock.lostConnect, Common.enumLock.noSlides, Common.enumLock.disableOnStart], false, true, undefined, '1', 'bottom', 'small');
                 this.btnsInsertText = Common.Utils.injectButtons($host.find('.slot-instext'), 'tlbtn-inserttext-', 'toolbar__icon btn-text', this.capInsertText,
-                    [Common.enumLock.slideDeleted, Common.enumLock.lostConnect, Common.enumLock.noSlides, Common.enumLock.disableOnStart], false, false, true, '1', 'bottom', 'small');
+                    [Common.enumLock.slideDeleted, Common.enumLock.lostConnect, Common.enumLock.noSlides, Common.enumLock.disableOnStart], true, false, true, '1', 'bottom', 'small');
                 this.btnsInsertShape = Common.Utils.injectButtons($host.find('.slot-insertshape'), 'tlbtn-insertshape-', 'toolbar__icon btn-insertshape', this.capInsertShape,
                     [Common.enumLock.slideDeleted, Common.enumLock.lostConnect, Common.enumLock.noSlides, Common.enumLock.disableOnStart], false, true, true, '1', 'bottom', 'small');
                 this.btnsAddSlide = Common.Utils.injectButtons($host.find('.slot-addslide'), 'tlbtn-addslide-', 'toolbar__icon btn-addslide', this.capAddSlide,
@@ -1318,10 +1318,37 @@ define([
                     btn.menu.items[2].setVisible(config.canRequestInsertImage || config.fileChoiceUrl && config.fileChoiceUrl.indexOf("{documentType}")>-1);
                 });
 
-                me.btnsInsertText.forEach(function (btn) {
+                me.btnsInsertText.forEach(function (button) {
-                    btn.updateHint(me.tipInsertText);
+                    button.updateHint([me.tipInsertHorizontalText, me.tipInsertText]);
-                    btn.on('click', function (btn, e) {
+                    button.options.textboxType = 'textRect';
-                        me.fireEvent('insert:text', [btn.pressed ? 'begin' : 'end']);
+                    button.setMenu(new Common.UI.Menu({
+                        items: [
+                            {
+                                caption: me.tipInsertHorizontalText,
+                                checkable: true,
+                                checkmark: false,
+                                iconCls     : 'menu__icon btn-text',
+                                toggleGroup: 'textbox',
+                                value: 'textRect',
+                                iconClsForMainBtn: 'btn-text'
+                            },
+                            {
+                                caption: me.tipInsertVerticalText,
+                                checkable: true,
+                                checkmark: false,
+                                iconCls     : 'menu__icon btn-text-vertical',
+                                toggleGroup: 'textbox',
+                                value: 'textRectVertical',
+                                iconClsForMainBtn: 'btn-text-vertical'
+                            },
+                        ]
+                    }));
+                    button.on('click', function (btn, e) {
+                        me.fireEvent('insert:text-btn', [btn, e]);
+                    });
+                    button.menu.on('item:click', function(btn, e) {
+                        button.toggle(true);
+                        me.fireEvent('insert:text-menu', [button, e]);
                     });
                 });
 
@@ -1936,6 +1963,8 @@ define([
             mniImageFromUrl: 'Image from url',
             mniCustomTable: 'Insert Custom Table',
             tipInsertHyperlink: 'Add Hyperlink',
+            tipInsertHorizontalText: 'Insert horizontal text box',
+            tipInsertVerticalText: 'Insert vertical text box',
             tipInsertText: 'Insert Text',
             tipInsertTextArt: 'Insert Text Art',
             tipInsertShape: 'Insert Autoshape',

apps/presentationeditor/main/locale/en.json

@@ -2298,6 +2298,8 @@
   "PE.Views.Toolbar.tipInsertImage": "Insert image",
   "PE.Views.Toolbar.tipInsertShape": "Insert autoshape",
   "PE.Views.Toolbar.tipInsertSymbol": "Insert symbol",
+  "PE.Views.Toolbar.tipInsertHorizontalText": "Insert horizontal text box",
+  "PE.Views.Toolbar.tipInsertVerticalText": "Insert vertical text box",
   "PE.Views.Toolbar.tipInsertTable": "Insert table",
   "PE.Views.Toolbar.tipInsertText": "Insert text box",
   "PE.Views.Toolbar.tipInsertTextArt": "Insert Text Art",

apps/presentationeditor/main/locale/ru.json

@@ -2299,6 +2299,8 @@
   "PE.Views.Toolbar.tipInsertShape": "Вставить автофигуру",
   "PE.Views.Toolbar.tipInsertSymbol": "Вставить символ",
   "PE.Views.Toolbar.tipInsertTable": "Вставить таблицу",
+  "PE.Views.Toolbar.tipInsertHorizontalText": "Вставить горизонтальную надпись",
+  "PE.Views.Toolbar.tipInsertVerticalText": "Вставить вертикальную надпись",
   "PE.Views.Toolbar.tipInsertText": "Вставить надпись",
   "PE.Views.Toolbar.tipInsertTextArt": "Вставить объект Text Art",
   "PE.Views.Toolbar.tipInsertVideo": "Вставить видео",

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -255,7 +255,10 @@ define([
 
             this.onApiEndAddShape = function() {
                 if (this.toolbar.btnInsertShape.pressed) this.toolbar.btnInsertShape.toggle(false, true);
-                if (this.toolbar.btnInsertText.pressed)  this.toolbar.btnInsertText.toggle(false, true);
+                if (this.toolbar.btnInsertText.pressed) {
+                    this.toolbar.btnInsertText.toggle(false, true);
+                    this.toolbar.btnInsertText.menu.clearAll();
+                }
                 $(document.body).off('mouseup', checkInsertAutoshape);
             };
         },
@@ -401,6 +404,7 @@ define([
                 toolbar.btnInsertImage.menu.on('item:click',                _.bind(this.onInsertImageMenu, this));
                 toolbar.btnInsertHyperlink.on('click',                      _.bind(this.onHyperlink, this));
                 toolbar.btnInsertText.on('click',                           _.bind(this.onBtnInsertTextClick, this));
+                toolbar.btnInsertText.menu.on('item:click',                 _.bind(this.onMenuInsertTextClick, this));
                 toolbar.btnInsertShape.menu.on('hide:after',                _.bind(this.onInsertShapeHide, this));
                 toolbar.btnInsertEquation.on('click',                       _.bind(this.onInsertEquationClick, this));
                 toolbar.btnInsertSymbol.on('click',                         _.bind(this.onInsertSymbolClick, this));
@@ -1248,8 +1252,35 @@ define([
         },
 
         onBtnInsertTextClick: function(btn, e) {
+            btn.menu.items.forEach(function(item) {
+                if(item.value == btn.options.textboxType) 
+                item.setChecked(true);
+            });
+            if(!this.toolbar.btnInsertText.pressed) {
+                this.toolbar.btnInsertText.menu.clearAll();
+            } 
+            this.onInsertText(btn.options.textboxType, btn, e);
+        },
+        
+        onMenuInsertTextClick: function(btn, e) {
+            var oldType = this.toolbar.btnInsertText.options.textboxType;
+            var newType = e.value;
+            this.toolbar.btnInsertText.toggle(true);
+
+            if(newType != oldType){
+                this.toolbar.btnInsertText.changeIcon({
+                    next: e.options.iconClsForMainBtn,
+                    curr: this.toolbar.btnInsertText.menu.items.filter(function(item){return item.value == oldType})[0].options.iconClsForMainBtn
+                });
+                this.toolbar.btnInsertText.updateHint([e.caption, this.views.Toolbar.prototype.tipInsertText]);
+                this.toolbar.btnInsertText.options.textboxType = newType;
+            }
+            this.onInsertText(newType, btn, e);
+        },
+
+        onInsertText: function(type, btn, e) {
             if (this.api)
-                this._addAutoshape(btn.pressed, 'textRect');
+                this._addAutoshape(this.toolbar.btnInsertText.pressed, type);
 
             if (this.toolbar.btnInsertShape.pressed)
                 this.toolbar.btnInsertShape.toggle(false, true);

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -1229,9 +1229,11 @@ define([
                     caption     : me.capInsertText,
                     lock        : [_set.editCell, _set.lostConnect, _set.coAuth, _set['Objects']],
                     enableToggle: true,
+                    split       : true,
                     dataHint    : '1',
                     dataHintDirection: 'bottom',
-                    dataHintOffset: 'small'
+                    dataHintOffset: 'small', 
+                    textboxType: 'textRect',
                 });
 
                 me.btnInsertTextArt = new Common.UI.Button({
@@ -2342,7 +2344,7 @@ define([
             _updateHint(this.btnInsertImage, this.tipInsertImage);
             _updateHint(this.btnInsertChart, this.tipInsertChartSpark);
             _updateHint(this.btnInsertSparkline, this.tipInsertSpark);
-            _updateHint(this.btnInsertText, this.tipInsertText);
+            _updateHint(this.btnInsertText, [this.tipInsertHorizontalText ,this.tipInsertText]);
             _updateHint(this.btnInsertTextArt, this.tipInsertTextart);
             _updateHint(this.btnInsertHyperlink, this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
             _updateHint(this.btnInsertShape, this.tipInsertShape);
@@ -2581,6 +2583,31 @@ define([
                 this.btnInsertSparkline.menu.on('show:before', onShowBefore);
             }
 
+            if(this.btnInsertText) {
+                this.btnInsertText.setMenu(new Common.UI.Menu({
+                    items: [
+                        {
+                            caption: this.tipInsertHorizontalText,
+                            checkable: true,
+                            checkmark: false,
+                            iconCls     : 'menu__icon btn-text',
+                            toggleGroup: 'textbox',
+                            value: 'textRect',
+                            iconClsForMainBtn: 'btn-text'
+                        },
+                        {
+                            caption: this.tipInsertVerticalText,
+                            checkable: true,
+                            checkmark: false,
+                            iconCls     : 'menu__icon btn-text-vertical',
+                            toggleGroup: 'textbox',
+                            value: 'textRectVertical',
+                            iconClsForMainBtn: 'btn-text-vertical'
+                        },
+                    ]
+                }));
+            }
+
             if (this.btnInsertTextArt) {
                 var onShowBeforeTextArt = function (menu) {
                     var collection = SSE.getCollection('Common.Collections.TextArt');
@@ -3143,7 +3170,9 @@ define([
         tipSynchronize:     'The document has been changed by another user. Please click to save your changes and reload the updates.',
         tipIncFont:         'Increment font size',
         tipDecFont:         'Decrement font size',
-        tipInsertText:      'Insert Text',
+        tipInsertHorizontalText: 'Insert horizontal text box',
+        tipInsertVerticalText: 'Insert vertical text box',
+        tipInsertText: 'Insert text box',
         tipInsertTextart:   'Insert Text Art',
         tipInsertShape:     'Insert Autoshape',
         tipDigStylePercent: 'Percent Style',

apps/spreadsheeteditor/main/locale/en.json

@@ -3575,6 +3575,8 @@
   "SSE.Views.Toolbar.tipInsertSpark": "Insert sparkline",
   "SSE.Views.Toolbar.tipInsertSymbol": "Insert symbol",
   "SSE.Views.Toolbar.tipInsertTable": "Insert table",
+  "SSE.Views.Toolbar.tipInsertHorizontalText": "Insert horizontal text box",
+  "SSE.Views.Toolbar.tipInsertVerticalText": "Insert vertical text box",
   "SSE.Views.Toolbar.tipInsertText": "Insert text box",
   "SSE.Views.Toolbar.tipInsertTextart": "Insert Text Art",
   "SSE.Views.Toolbar.tipMerge": "Merge and center",

apps/spreadsheeteditor/main/locale/ru.json

@@ -3566,6 +3566,8 @@
   "SSE.Views.Toolbar.tipInsertSpark": "Вставить спарклайн",
   "SSE.Views.Toolbar.tipInsertSymbol": "Вставить символ",
   "SSE.Views.Toolbar.tipInsertTable": "Вставить таблицу",
+  "SSE.Views.Toolbar.tipInsertHorizontalText": "Вставить горизонтальную надпись",
+  "SSE.Views.Toolbar.tipInsertVerticalText": "Вставить вертикальную надпись",
   "SSE.Views.Toolbar.tipInsertText": "Вставить надпись",
   "SSE.Views.Toolbar.tipInsertTextart": "Вставить объект Text Art",
   "SSE.Views.Toolbar.tipMerge": "Объединить и поместить в центре",