Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE] Change header of the Spelling panel

Browse source
This commit is contained in:
JuliaSvinareva 2022-06-02 01:16:19 +03:00
parent 4afaf8178b
commit d20c9f86a9
4 changed files with 151 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/spreadsheeteditor/main/app/controller/LeftMenu.js
View file

@ -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);
}
}
},

64
apps/spreadsheeteditor/main/app/view/Spellcheck.js
View file

@ -51,21 +51,28 @@ define([
el: '#left-panel-spellcheck',
template: _.template([
'<div id="spellcheck-box" class="layout-ct vbox active">',
'<div id="spellcheck-header" style="font-size: 14px; padding-bottom: 16px;"><%= scope.txtSpelling %></div>',
'<div style="display: flex; width: 100%; padding-bottom: 8px;">',
'<div id="spellcheck-current-word"></div>',
'<div id="spellcheck-next" style=""></div>',
'<div id="spellcheck-box" class="layout-ct active">',
'<div class="spellcheck-settings">',
'<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>',
'<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-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 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'),
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 || {}));
});

1
apps/spreadsheeteditor/main/locale/en.json
View file

@ -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",

161
apps/spreadsheeteditor/main/resources/less/spellcheck.less
View file

@ -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;
}
}
}