',
+ '
',
+ '
',
+ '
',
+ '
',
+ '
',
+ '
',
+ '
',
+ '',
+ '
',
+ '
',
+ '',
+ '<%= scope.txtComplete %>' ,
+ '
',
+ '
',
'
',
- '
',
- '
',
- '
',
- '
',
- '',
- '
',
- '
',
- '',
- '<%= scope.txtComplete %>' ,
+ '',
'
'
].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'),
- suppressScrollX: true
+ el: this.$el.find('.spellcheck-settings-inner'),
+ 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 || {}));
});
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json
index f01b8bc32..54c4eeb6d 100644
--- a/apps/spreadsheeteditor/main/locale/en.json
+++ b/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",
diff --git a/apps/spreadsheeteditor/main/resources/less/spellcheck.less b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
index 1b217871b..2f7f4cebf 100644
--- a/apps/spreadsheeteditor/main/resources/less/spellcheck.less
+++ b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
@@ -1,70 +1,109 @@
#spellcheck-box {
- padding: 20px 15px 0;
- 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
- {
+ display: table;
position: relative;
- &:after {
- content: '';
+ #spellcheck-header {
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;
+ 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 {
+ 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;
+ }
+
+
+ }
}
\ No newline at end of file