From 5a42e745f34796bb879d3066c1f6326f23fc9e98 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 2 Aug 2019 13:56:21 +0300 Subject: [PATCH] [SSE] Spelling (add layout) --- apps/common/main/resources/less/buttons.less | 4 + .../main/app/view/Spellcheck.js | 116 +++++++++++++++++- .../main/resources/less/leftmenu.less | 6 + .../main/resources/less/toolbar.less | 3 + 4 files changed, 125 insertions(+), 4 deletions(-) diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 3a57c3225..e85961ac6 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -198,6 +198,10 @@ .btn.small; + &.bg-white { + background-color: #fff; + } + &:before, &:after { content: ""; diff --git a/apps/spreadsheeteditor/main/app/view/Spellcheck.js b/apps/spreadsheeteditor/main/app/view/Spellcheck.js index b6e5f3367..1de5b2acc 100644 --- a/apps/spreadsheeteditor/main/app/view/Spellcheck.js +++ b/apps/spreadsheeteditor/main/app/view/Spellcheck.js @@ -38,7 +38,12 @@ define([ 'common/main/lib/util/utils', 'common/main/lib/component/BaseView', - 'common/main/lib/component/Layout' + 'common/main/lib/component/Layout', + 'common/main/lib/component/Button', + 'common/main/lib/component/ListView', + 'common/main/lib/component/InputField', + 'common/main/lib/component/ComboBox', + 'common/main/lib/component/ComboDataView' ], function (template) { 'use strict'; @@ -46,8 +51,16 @@ define([ el: '#left-panel-spellcheck', template: _.template([ - '
', - '
<%= scope.txtSpelling %>
', + '
', + '', + '', + '', + '', + '', + '', + '', + '
<%= scope.txtSpelling %>
', + '
<%= scope.txtComplete %>
', '
' ].join('')), @@ -61,6 +74,92 @@ define([ this.$el = $(el); this.$el.html(this.template({scope: this})); + this.currentWord = new Common.UI.InputField({ + el : $('#spellcheck-current-word'), + allowBlank : true, + validateOnBlur: false + }); + + this.buttonPreview = new Common.UI.Button({ + style: 'margin-left: 5px; width: 22px; height: 22px; border: 1px solid #cfcfcf;', + cls: 'btn-toolbar bg-white', + iconCls: 'btn-spellcheck-preview' + }); + this.buttonPreview.render($('#spellcheck-preview')); + + this.buttonNext = new Common.UI.Button({ + style: 'margin-left: 5px; width: 22px; height: 22px; border: 1px solid #cfcfcf;', + cls: 'btn-toolbar bg-white', + iconCls: 'btn-spellcheck-next' + }); + this.buttonNext.render($('#spellcheck-next')); + + this.suggestionList = new Common.UI.ListView({ + el: $('#spellcheck-suggestions-list'), + emptyText: this.noSuggestions, + store: new Common.UI.DataViewStore() + }); + + this.btnChange = new Common.UI.Button({ + cls: 'btn-text-split-default', + caption: this.textChange, + split: true, + enableToggle: true, + allowDepress: true, + width: 105, + menu : new Common.UI.Menu({ + style : 'min-width: 105px;', + items: [ + { + caption: this.textChange, + checkable: true, + allowDepress: true, + value: 0 + }, + { + caption: this.textChangeAll, + value: 1 + } + ] + }) + }); + this.btnChange.render( $('#spellcheck-change')) ; + + this.btnIgnore = new Common.UI.Button({ + cls: 'btn-text-split-default', + caption: this.textIgnore, + split: true, + enableToggle: true, + allowDepress: true, + width: 105, + menu : new Common.UI.Menu({ + style : 'min-width: 105px;', + items: [ + { + caption: this.textIgnore, + checkable: true, + allowDepress: true, + value: 0 + }, + { + caption: this.textIgnoreAll, + value: 1 + } + ] + }) + }); + this.btnIgnore.render( $('#spellcheck-ignore')) ; + + this.cmbDictionaryLanguage = new Common.UI.ComboBox({ + el : $('#spellcheck-dictionary-language'), + style : 'width: 230px', + menuStyle : 'min-width: 230px;', + editable : false, + cls : 'input-group-nr', + data : [] + }); + + this.trigger('render:after', this); return this; }, @@ -78,6 +177,15 @@ define([ ChangeSettings: function(props) { }, - txtSpelling: 'Spelling' + txtSpelling: 'Spelling', + noSuggestions: 'No spelling suggestions', + textChange: 'Change', + textChangeAll: 'Change All', + textIgnore: 'Ignore', + textIgnoreAll: 'Ignore All', + txtAddToDictionary: 'Add To Dictionary', + txtDictionaryLanguage: 'Dictionary Language', + txtComplete: 'Spellcheck has been complete' + }, SSE.Views.Spellcheck || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less index 31c9a58eb..37c1a1cc1 100644 --- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less +++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less @@ -561,3 +561,9 @@ transform: rotate(180deg); cursor: default; } + +.img-complete { + background-position: -42px -234px; + height: 16px; + width: 16px; +} diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less index 859290c2b..ae498bc86 100644 --- a/apps/spreadsheeteditor/main/resources/less/toolbar.less +++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less @@ -146,6 +146,9 @@ .button-normal-icon(btn-border-diagup, 42, @toolbar-icon-size); .button-normal-icon(btn-border-diagdown, 43, @toolbar-icon-size); +.button-normal-icon(btn-spellcheck-next, 70, @toolbar-icon-size); +.button-normal-icon(btn-spellcheck-preview, 72, @toolbar-icon-size); + .button-normal-icon(btn-named-range, 77, @toolbar-icon-size); .button-normal-icon(btn-strikeout, 84, @toolbar-icon-size); .button-normal-icon(btn-subscript, 85, @toolbar-icon-size);