[DE][PE] Fix Bug 50031. Change set language button

apps/common/main/resources/less/buttons.less

@@ -1019,57 +1019,6 @@
     }
 }
 
-.cnt-lang {
-    color: @text-normal-ie;
-    color: @text-normal;
-    height: 20px;
-    line-height: 18px;
-    border: 0;
-    .border-radius(1px);
-    vertical-align: middle;
-
-    .dropdown-toggle {
-        margin: 0 6px 0 4px;
-    }
-
-    &:hover:not(.disabled) {
-        background-color: @highlight-button-hover-ie;
-        background-color: @highlight-button-hover;
-    }
-
-    &[disabled], &.disabled {
-        opacity: @component-disabled-opacity;
-    }
-
-    .caret {
-        width: 4px;
-        height: 4px;
-        border: solid 1px @icon-normal-ie;
-        border: solid 1px @icon-normal;
-        border-bottom: none;
-        border-right: none;
-        background-image: none;
-
-        transition: transform 0.2s ease;
-        transform: rotate(-135deg) translate(1px,1px);
-    }
-
-    &.open:not(.disabled){
-        &, .status-label {
-            color: @text-normal-pressed-ie;
-            color: @text-normal-pressed;
-        }
-
-        background-color: @highlight-button-pressed-ie;
-        background-color: @highlight-button-pressed;
-
-        .caret {
-            transform: rotate(45deg);
-            border-color: @icon-normal-pressed-ie;
-            border-color: @icon-normal-pressed;
-        }
-    }
-}
 // Dialog buttons
 // ------------------------
 

apps/documenteditor/main/app/template/StatusBar.template

@@ -12,12 +12,7 @@
     </div>
     <div class="status-group" style="">
         <div class="separator short el-edit"></div>
-        <div class="cnt-lang el-edit">
+        <span id="btn-cnt-lang" class="el-edit"></span>
-            <div class="dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top">
-                <label id="status-label-lang" class="status-label">English (United States)</label>
-                <div class="caret"></div>
-            </div>
-        </div>
         <span id="btn-doc-lang" class="el-edit"></span>
         <span id="btn-doc-spell" class="el-edit"></span>
         <div class="separator short el-edit"></div>

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

@@ -67,10 +67,8 @@ define([
         }
 
         function _clickLanguage(menu, item) {
-            var $parent = menu.$el.parent();
-            $parent.find('#status-label-lang').text(item.caption);
             this.langMenu.prevTip = item.value.value;
-
+            this.btnLanguage.setCaption(item.caption);
             this.fireEvent('langchanged', [this, item.value.code, item.caption]);
         }
 
@@ -83,23 +81,6 @@ define([
 
             if (me.btnLanguage && me.btnLanguage.cmpEl) {
                 me.btnLanguage.updateHint(me.tipSetLang);
-                me.btnLanguage.cmpEl.on({
-                    'show.bs.dropdown': function () {
-                        _.defer(function () {
-                            me.btnLanguage.cmpEl.find('ul').focus();
-                        }, 100);
-                    },
-                    'hide.bs.dropdown': function () {
-                        _.defer(function () {
-                            me.api.asc_enableKeyEvents(true);
-                        }, 100);
-                    },
-                    'click': function (e) {
-                        if (me.btnLanguage.isDisabled()) {
-                            return false;
-                        }
-                    }
-                });
                 me.langMenu.on('item:click', _.bind(_clickLanguage, this));
             }
 
@@ -223,9 +204,14 @@ define([
                 });
 
                 this.btnLanguage = new Common.UI.Button({
-                    // el: panelLang,
+                    cls         : 'btn-toolbar',
-                    hintAnchor: 'top-left',
+                    caption     : 'English (United States)',
-                    disabled: true
+                    hintAnchor  : 'top-left',
+                    style       : 'margin-left: 6px;',
+                    disabled: true,
+                    dataHint    : '0',
+                    dataHintDirection: 'top',
+                    menu: true
                 });
 
                 this.langMenu = new Common.UI.MenuSimple({
@@ -299,11 +285,8 @@ define([
                 _btn_render(me.txtGoToPage, $('#status-goto-page', me.$layout));
 
                 if ( !config || config.isEdit ) {
-                    var panelLang = $('.cnt-lang', me.$layout);
+                    me.btnLanguage.render($('#btn-cnt-lang', me.$layout));
-                    _btn_render(me.btnLanguage, panelLang);
+                    me.btnLanguage.setMenu(me.langMenu);
-
-                    me.langMenu.render(panelLang);
-                    me.langMenu.cmpEl.attr({tabindex: -1});
                     me.langMenu.prevTip = 'en';
                 }
 
@@ -360,9 +343,7 @@ define([
 
             setLanguage: function(info) {
                 if (this.langMenu.prevTip != info.value && info.code !== undefined) {
-                    var $parent = $(this.langMenu.el.parentNode, this.$el);
+                    this.btnLanguage.setCaption(info.displayValue);
-                    $parent.find('#status-label-lang').text(info.displayValue);
-
                     this.langMenu.prevTip = info.value;
 
                     var lang = _.find(this.langMenu.items, function(item) { return item.caption == info.displayValue; });
@@ -384,8 +365,7 @@ define([
             },
 
             SetDisabled: function(disable) {
-                var langs = this.langMenu.items.length>0;
+                this.btnLanguage.setDisabled(disable || this.langMenu.items.length<1);
-                this.btnLanguage.setDisabled(disable || !langs);
             },
 
             onApiCoAuthoringDisconnect: function() {

apps/documenteditor/main/resources/less/statusbar.less

@@ -66,20 +66,9 @@
         }
     }
 
-    .cnt-lang {
+    #btn-cnt-lang {
-        display: inline-block;
+        button {
-        cursor: pointer;
+            font-weight: 700;
-        margin-left: 6px;
-
-        label {
-            cursor: pointer;
-        }
-
-        &.disabled {
-            cursor: default;
-            label {
-                cursor: default;
-            }
         }
     }
 

apps/presentationeditor/main/app/template/StatusBar.template

@@ -27,12 +27,7 @@
         <label id="status-label-action" class="status-label"></label>
     </div>
     <div class="status-group" style="">
-        <div class="cnt-lang el-edit">
+        <span id="btn-cnt-lang" class="el-edit"></span>
-            <div class="dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top">
-                <label id="status-label-lang" class="status-label">English (United States)</label>
-                <div class="caret"></div>
-            </div>
-        </div>
         <span id="btn-doc-lang" class="el-edit"></span>
         <span id="btn-doc-spell" class="el-edit"></span>
         <div class="separator short el-edit"></div>

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

@@ -70,8 +70,7 @@ define([
         }
 
         function _clickLanguage(menu, item) {
-            var $parent = menu.$el.parent();
+            this.btnLanguage.setCaption(item.caption);
-            $parent.find('#status-label-lang').text(item.caption);
             this.langMenu.prevTip = item.value.value;
 
             this.fireEvent('langchanged', [this, item.value.code, item.caption]);
@@ -250,7 +249,6 @@ define([
                     dataHintOffset: '0, -16'
                 });
 
-                var panelLang = $('.cnt-lang',this.el);
                 this.langMenu = new Common.UI.MenuSimple({
                     cls: 'lang-menu',
                     style: 'margin-top:-5px;',
@@ -266,31 +264,17 @@ define([
                 });
 
                 this.btnLanguage = new Common.UI.Button({
-                    el: panelLang,
+                    parentEl: $('#btn-cnt-lang', this.el),
+                    cls         : 'btn-toolbar',
+                    caption     : 'English (United States)',
                     hint: this.tipSetLang,
-                    hintAnchor: 'top-left',
+                    hintAnchor  : 'top-left',
-                    disabled: true
+                    style       : 'margin-left: 6px;',
+                    disabled: true,
+                    dataHint    : '0',
+                    dataHintDirection: 'top',
+                    menu: this.langMenu
                 });
-                this.btnLanguage.cmpEl.on({
-                    'show.bs.dropdown': function () {
-                        _.defer(function(){
-                            me.btnLanguage.cmpEl.find('ul').focus();
-                        }, 100);
-                    },
-                    'hide.bs.dropdown': function () {
-                        _.defer(function(){
-                            me.api.asc_enableKeyEvents(true);
-                        }, 100);
-                    },
-                    'click': function (e) {
-                        if (me.btnLanguage.isDisabled()) {
-                            return false;
-                        }
-                    }
-                });
-
-                this.langMenu.render(panelLang);
-                this.langMenu.cmpEl.attr({tabindex: -1});
                 this.langMenu.prevTip = 'en';
                 this.langMenu.on('item:click', _.bind(_clickLanguage,this));
 
@@ -351,9 +335,7 @@ define([
 
             setLanguage: function(info) {
                 if (this.langMenu.prevTip != info.value && info.code !== undefined) {
-                    var $parent = $(this.langMenu.el.parentNode, this.$el);
+                    this.btnLanguage.setCaption(info.displayValue);
-                    $parent.find('#status-label-lang').text(info.displayValue);
-
                     this.langMenu.prevTip = info.value;
                     var lang = _.find(this.langMenu.items, function(item) { return item.caption == info.displayValue; });
                     if (lang) {
@@ -366,8 +348,7 @@ define([
             },
 
             SetDisabled: function(disable) {
-                var langs = this.langMenu.items.length>0;
+                this.btnLanguage.setDisabled(disable || this.langMenu.items.length<1 || this._state.no_paragraph);
-                this.btnLanguage.setDisabled(disable || !langs || this._state.no_paragraph);
             },
 
             onApiFocusObject: function(selectedObjects) {

apps/presentationeditor/main/resources/less/statusbar.less

@@ -67,20 +67,9 @@
         }
     }
 
-    .cnt-lang {
+    #btn-cnt-lang {
-        display: inline-block;
+        button {
-        cursor: pointer;
+            font-weight: 700;
-        margin-left: 6px;
-
-        label {
-            cursor: pointer;
-        }
-
-        &.disabled {
-            cursor: default;
-            label {
-                cursor: default;
-            }
         }
     }