[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,21 +51,28 @@ 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 id="spellcheck-current-word"></div>',
+                        '<div style="display: flex; width: 100%; padding-bottom: 8px; padding-top: 16px;">',
-                    '<div id="spellcheck-next" style=""></div>',
+                            '<div id="spellcheck-current-word"></div>',
+                            '<div id="spellcheck-next" style=""></div>',
+                        '</div>',
+                        '<div id="spellcheck-suggestions-list"></div>',
+                        '<div id="spellcheck-change" style=""></div>',
+                        '<div id="spellcheck-ignore" class="padding-large"></div>',
+                        '<button class="btn btn-text-default auto" id="spellcheck-add-to-dictionary" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.txtAddToDictionary %></button>',
+                        '<label class="header" style="display: block;"><%= scope.txtDictionaryLanguage %></label>',
+                        '<div id="spellcheck-dictionary-language"></div>',
+                        '<div id="spellcheck-complete" class="hidden">',
+                            '<i class="btn-resolve" style="display: inline-block;margin-right: 10px;"></i>',
+                            '<%= scope.txtComplete %>' ,
+                        '</div>',
+                    '</div>',
                 '</div>',
-                '<div id="spellcheck-suggestions-list"></div>',
+                '<div id="spellcheck-header">',
-                '<div id="spellcheck-change" style=""></div>',
+                    '<label><%= scope.txtSpelling %></label>',
-                '<div id="spellcheck-ignore" class="padding-large"></div>',
+                    '<div id="spellcheck-btn-close" style="float:right; margin-left: 4px;"></div>',
-                '<button class="btn btn-text-default auto" id="spellcheck-add-to-dictionary" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.txtAddToDictionary %></button>',
-                '<label class="header" style="display: block;"><%= scope.txtDictionaryLanguage %></label>',
-                '<div id="spellcheck-dictionary-language"></div>',
-                '<div id="spellcheck-complete" class="hidden">',
-                    '<i class="btn-resolve" style="display: inline-block;margin-right: 10px;"></i>',
-                    '<%= scope.txtComplete %>' ,
                 '</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,70 +1,109 @@
 
 #spellcheck-box {
-    padding: 20px 15px 0;
+    display: table;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-}
-
-#spellcheck-current-word {
-    vertical-align: top;
-    width: 100%;
-    display: inline-block;
-}
-
-#spellcheck-next {
-    display: inline-block;
-}
-
-#spellcheck-suggestions-list {
-    width: 100%;
-    height: 116px;
-    background-color: @background-normal-ie;
-    background-color: @background-normal;
-    margin-bottom: 8px;
-}
-
-#spellcheck-change {
-    display: inline-block;
-    padding-bottom: 16px;
-}
-
-#spellcheck-ignore {
-    margin-left: 9px;
-    display: inline-block;
-}
-
-#spellcheck-add-to-dictionary {
-    min-width: 110px;
-    display: block;
-    margin-bottom: 16px;
-}
-
-#spellcheck-dictionary-language {
-    margin-top: 3px;
-    padding-bottom: 16px;
-    display: flex;
-}
-
-#spellcheck-complete {
-    display: flex;
-}
-.btn-resolve
- {
     position: relative;
 
-    &:after {
+    #spellcheck-header {
-        content: '';
         position: absolute;
-        border: solid @text-normal-ie;
+        height: 45px;
-        border: solid @text-normal;
+        left: 0;
-        border-color: @icon-success-ie;
+        top: 0;
-        border-color: @icon-success;
+        right: 0;
-        border-width: 0 3px 3px 0;
+        padding: 12px;
-        transform: rotate(40deg);
+        overflow: hidden;
-        width: 6px;
+        border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
-        height: 10px;
+        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 {
+        display: inline-block;
+    }
+
+    #spellcheck-suggestions-list {
+        width: 100%;
+        height: 116px;
+        background-color: @background-normal-ie;
+        background-color: @background-normal;
+        margin-bottom: 8px;
+    }
+
+    #spellcheck-change {
+        display: inline-block;
+        padding-bottom: 16px;
+    }
+
+    #spellcheck-ignore {
+        margin-left: 9px;
+        display: inline-block;
+    }
+
+    #spellcheck-add-to-dictionary {
+        min-width: 110px;
+        display: block;
+        margin-bottom: 16px;
+    }
+
+    #spellcheck-dictionary-language {
+        margin-top: 3px;
+        padding-bottom: 16px;
+        display: flex;
+    }
+
+    #spellcheck-complete {
+        display: flex;
+    }
+    .btn-resolve
+    {
+        position: relative;
+
+        &:after {
+            content: '';
+            position: absolute;
+            border: solid @text-normal-ie;
+            border: solid @text-normal;
+            border-color: @icon-success-ie;
+            border-color: @icon-success;
+            border-width: 0 3px 3px 0;
+            transform: rotate(40deg);
+            width: 6px;
+            height: 10px;
+        }
+
+
+    }
 }