[SSE] Change header of the Spelling panel

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

@@ -883,6 +883,9 @@ define([
                 } else if (this.leftMenu.btnSearchBar.isActive() && this.api) {
                     this.leftMenu.btnSearchBar.toggle(false);
                     this.leftMenu.onBtnMenuClick(this.leftMenu.btnSearchBar);
+                } else if (this.leftMenu.btnSpellcheck.isActive() && this.api) {
+                    this.leftMenu.btnSpellcheck.toggle(false);
+                    this.leftMenu.onBtnMenuClick(this.leftMenu.btnSpellcheck);
                 }
             }
         },

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

@@ -51,9 +51,10 @@ define([
         el: '#left-panel-spellcheck',
 
         template: _.template([
-            '<div id="spellcheck-box" class="layout-ct vbox active">',
+            '<div id="spellcheck-box" class="layout-ct active">',
-                '<div id="spellcheck-header" style="font-size: 14px; padding-bottom: 16px;"><%= scope.txtSpelling %></div>',
+                '<div class="spellcheck-settings">',
-                '<div style="display: flex; width: 100%; padding-bottom: 8px;">',
+                    '<div class="spellcheck-settings-inner">',
+                        '<div style="display: flex; width: 100%; padding-bottom: 8px; padding-top: 16px;">',
                             '<div id="spellcheck-current-word"></div>',
                             '<div id="spellcheck-next" style=""></div>',
                         '</div>',
@@ -67,6 +68,12 @@ define([
                             '<i class="btn-resolve" style="display: inline-block;margin-right: 10px;"></i>',
                             '<%= scope.txtComplete %>' ,
                         '</div>',
+                    '</div>',
+                '</div>',
+                '<div id="spellcheck-header">',
+                    '<label><%= scope.txtSpelling %></label>',
+                    '<div id="spellcheck-btn-close" style="float:right; margin-left: 4px;"></div>',
+                '</div>',
             '</div>'
         ].join('')),
 
@@ -80,6 +87,17 @@ define([
             this.$el = $(el);
             this.$el.html(this.template({scope: this}));
 
+            this.buttonClose = new Common.UI.Button({
+                parentEl: $('#spellcheck-btn-close', this.$el),
+                cls: 'btn-toolbar',
+                iconCls: 'toolbar__icon btn-close',
+                hint: this.txtClosePanel,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big'
+            });
+            this.buttonClose.on('click', _.bind(this.onClickClosePanel, this));
+
             this.currentWord = new Common.UI.InputField({
                 el : $('#spellcheck-current-word'),
                 allowBlank  : true,
@@ -97,7 +115,7 @@ define([
                 iconCls: 'toolbar__icon btn-nextitem',
                 hint: this.txtNextTip,
                 dataHint: '1',
-                dataHintDirection: 'top'
+                dataHintDirection: 'bottom'
             });
 
             this.suggestionList = new Common.UI.ListView({
@@ -185,11 +203,16 @@ define([
 
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
-                    el: this.$el.find('#spellcheck-box'),
+                    el: this.$el.find('.spellcheck-settings-inner'),
-                    suppressScrollX: true
+                    suppressScrollX: true,
+                    alwaysVisibleY: true
                 });
             }
 
+            $(window).on('resize', _.bind(function() {
+                this.scroller.update({alwaysVisibleY: true});
+            }, this));
+
             return this;
         },
 
@@ -206,6 +229,10 @@ define([
         ChangeSettings: function(props) {
         },
 
+        onClickClosePanel: function() {
+            Common.NotificationCenter.trigger('leftmenu:change', 'hide');
+        },
+
         txtSpelling: 'Spelling',
         noSuggestions: 'No spelling suggestions',
         textChange: 'Change',
@@ -215,7 +242,8 @@ define([
         txtAddToDictionary: 'Add To Dictionary',
         txtDictionaryLanguage: 'Dictionary Language',
         txtComplete: 'Spellcheck has been complete',
-        txtNextTip: 'Go to the next word'
+        txtNextTip: 'Go to the next word',
+        txtClosePanel: 'Close spelling'
 
     }, SSE.Views.Spellcheck || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -3202,6 +3202,7 @@
   "SSE.Views.Spellcheck.txtDictionaryLanguage": "Dictionary Language",
   "SSE.Views.Spellcheck.txtNextTip": "Go to the next word",
   "SSE.Views.Spellcheck.txtSpelling": "Spelling",
+  "SSE.Views.Spellcheck.txtClosePanel": "Close spelling",
   "SSE.Views.Statusbar.CopyDialog.itemCopyToEnd": "(Copy to end)",
   "SSE.Views.Statusbar.CopyDialog.itemMoveToEnd": "(Move to end)",
   "SSE.Views.Statusbar.CopyDialog.textCopyBefore": "Paste before sheet",

apps/spreadsheeteditor/main/resources/less/spellcheck.less

@@ -1,55 +1,93 @@
 
 #spellcheck-box {
-    padding: 20px 15px 0;
+    display: table;
-    width: 100%;
     position: relative;
-    overflow: hidden;
-}
 
-#spellcheck-current-word {
+    #spellcheck-header {
+        position: absolute;
+        height: 45px;
+        left: 0;
+        top: 0;
+        right: 0;
+        padding: 12px;
+        overflow: hidden;
+        border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
+        border-bottom: @scaled-one-px-value solid @border-toolbar;
+
+        label {
+            font-size: 12px;
+            .font-weight-bold();
+            margin-top: 2px;
+        }
+    }
+
+    .spellcheck-settings {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 100%;
+        padding-top: 45px;
+        overflow: hidden;
+
+        .spellcheck-settings-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            padding: 0 15px 12px 15px;
+            overflow: hidden;
+
+            .ps-scrollbar-y-rail {
+                margin-top: 5px;
+                margin-bottom: 5px;
+                right: 4px !important;
+            }
+        }
+    }
+
+    #spellcheck-current-word {
         vertical-align: top;
         width: 100%;
         display: inline-block;
-}
+    }
 
-#spellcheck-next {
+    #spellcheck-next {
         display: inline-block;
-}
+    }
 
-#spellcheck-suggestions-list {
+    #spellcheck-suggestions-list {
         width: 100%;
         height: 116px;
         background-color: @background-normal-ie;
         background-color: @background-normal;
         margin-bottom: 8px;
-}
+    }
 
-#spellcheck-change {
+    #spellcheck-change {
         display: inline-block;
         padding-bottom: 16px;
-}
+    }
 
-#spellcheck-ignore {
+    #spellcheck-ignore {
         margin-left: 9px;
         display: inline-block;
-}
+    }
 
-#spellcheck-add-to-dictionary {
+    #spellcheck-add-to-dictionary {
         min-width: 110px;
         display: block;
         margin-bottom: 16px;
-}
+    }
 
-#spellcheck-dictionary-language {
+    #spellcheck-dictionary-language {
         margin-top: 3px;
         padding-bottom: 16px;
         display: flex;
-}
+    }
 
-#spellcheck-complete {
+    #spellcheck-complete {
         display: flex;
-}
+    }
-.btn-resolve
+    .btn-resolve
     {
         position: relative;
 
@@ -67,4 +105,5 @@
         }
 
 
+    }
 }