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

Change icon for languages with spell check

Browse source
This commit is contained in:
Julia Radzhabova 2019-02-07 17:34:37 +03:00
parent 9b5ae84f58
commit d0d24eabab
9 changed files with 78 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/common/main/lib/view/LanguageDialog.js
View file

@ -90,13 +90,13 @@ define([
template: _.template([ template: _.template([
'<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">', '<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control">', '<input type="text" class="form-control">',
'<span class="icon input-icon lang-flag"></span>', '<span class="icon input-icon spellcheck-lang img-toolbarmenu"></span>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>">', '<li id="<%= item.id %>" data-value="<%= item.value %>">',
'<a tabindex="-1" type="menuitem" style="padding-left: 26px !important;">', '<a tabindex="-1" type="menuitem" style="padding-left: 28px !important;">',
'<i class="icon <% if (item.spellcheck) { %> lang-flag <% } %>" style="position: absolute;margin-left:-21px;"></i>', '<i class="icon <% if (item.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
'<%= scope.getDisplayValue(item) %>', '<%= scope.getDisplayValue(item) %>',
'</a>', '</a>',
'</li>', '</li>',
@ -130,7 +130,7 @@ define([
}, },
onLangSelect: function(cmb, rec, e) { onLangSelect: function(cmb, rec, e) {
cmb.$el.find('.input-icon').toggleClass('lang-flag', rec.spellcheck); cmb.$el.find('.input-icon').toggleClass('spellcheck-lang', rec.spellcheck);
cmb._input.css('padding-left', rec.spellcheck ? 25 : 3); cmb._input.css('padding-left', rec.spellcheck ? 25 : 3);
}, },

48
apps/common/main/resources/less/language-dialog.less
View file

@ -1,3 +1,37 @@
// spell check indicator
.icon.spellcheck-lang {
width: 20px;
height: 20px;
position: absolute;
}
li {
.icon.spellcheck-lang {
margin: -3px 4px 0 -24px;
}
&.selected, a.checked {
.icon.spellcheck-lang {
background-position-x: -20px; --bgX: -20px;
}
}
}
.dropdown-menu.lang-menu {
> li {
a.checked {
&:before {
display: none;
}
background-color: @primary;
&, &:hover, &:focus {
color: @dropdown-link-active-color;
}
}
}
}
.combo-langs { .combo-langs {
.dropdown-menu { .dropdown-menu {
li .icon.lang-flag { li .icon.lang-flag {
@ -7,9 +41,15 @@
.input-icon { .input-icon {
position: absolute; position: absolute;
&.spellcheck-lang { // spell check indicator
left: 2px;
top: 1px;
}
&.lang-flag { // language flags
left: 5px; left: 5px;
top: 5px; top: 5px;
} }
}
} }
.lang-flag { .lang-flag {
@ -64,11 +104,3 @@
&.ja, &.ja-JP {background-position: 0 -192px;} &.ja, &.ja-JP {background-position: 0 -192px;}
&.es-MX {background-position: -16px -192px;} &.es-MX {background-position: -16px -192px;}
} }
.dropdown-menu.lang-menu {
> li .icon {
display: inline-block;
vertical-align: text-bottom;
margin: 1px 5px 0 2px;
}
}

8
apps/documenteditor/main/app/view/DocumentHolder.js
View file

@ -3620,8 +3620,8 @@ define([
langid : lang.code, langid : lang.code,
spellcheck : lang.spellcheck, spellcheck : lang.spellcheck,
template: _.template([ template: _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem">', '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;">',
'<i class="icon <% if (options.spellcheck) { %> lang-flag <% } %>"></i>', '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
'<%= caption %>', '<%= caption %>',
'</a>' '</a>'
].join('')) ].join(''))
@ -3644,8 +3644,8 @@ define([
langid : lang.code, langid : lang.code,
spellcheck : lang.spellcheck, spellcheck : lang.spellcheck,
template: _.template([ template: _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem">', '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;">',
'<i class="icon <% if (options.spellcheck) { %> lang-flag <% } %>"></i>', '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
'<%= caption %>', '<%= caption %>',
'</a>' '</a>'
].join('')) ].join(''))

4
apps/documenteditor/main/app/view/Statusbar.js
View file

@ -234,8 +234,8 @@ define([
maxHeight: 300, maxHeight: 300,
restoreHeight: 300, restoreHeight: 300,
itemTemplate: _.template([ itemTemplate: _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem">', '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;">',
'<i class="icon <% if (options.spellcheck) { %> lang-flag <% } %>"></i>', '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
'<%= caption %>', '<%= caption %>',
'</a>' '</a>'
].join('')), ].join('')),

19
apps/documenteditor/main/resources/less/statusbar.less
View file

@ -78,14 +78,6 @@
color: #000; color: #000;
margin-left: 6px; margin-left: 6px;
.dropdown-toggle > .icon.lang-flag {
position: relative;
top: 3px;
margin-left: 3px;
margin-right: 2px;
display: inline-block;
}
.caret.up { .caret.up {
background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y; background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y;
@ -98,17 +90,9 @@
cursor: pointer; cursor: pointer;
} }
.dropdown-menu {
> li .icon {
display: inline-block;
vertical-align: text-bottom;
margin: 1px 5px 0 2px;
}
}
&.disabled { &.disabled {
cursor: default; cursor: default;
label, .icon.lang-flag { label {
cursor: default; cursor: default;
opacity: 0.4; opacity: 0.4;
} }
@ -215,3 +199,4 @@
.button-normal-icon(btn-ic-zoomtowidth, 55, @toolbar-icon-size); .button-normal-icon(btn-ic-zoomtowidth, 55, @toolbar-icon-size);
.button-normal-icon(btn-ic-zoomtopage, 56, @toolbar-icon-size); .button-normal-icon(btn-ic-zoomtopage, 56, @toolbar-icon-size);
.button-normal-icon(btn-ic-changes, 30, @toolbar-icon-size); .button-normal-icon(btn-ic-changes, 30, @toolbar-icon-size);
.button-normal-icon(spellcheck-lang, 69, @toolbar-icon-size);

8
apps/presentationeditor/main/app/view/DocumentHolder.js
View file

@ -3265,8 +3265,8 @@ define([
langid : lang.code, langid : lang.code,
spellcheck : lang.spellcheck, spellcheck : lang.spellcheck,
template: _.template([ template: _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem">', '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;">',
'<i class="icon <% if (options.spellcheck) { %> lang-flag <% } %>"></i>', '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
'<%= caption %>', '<%= caption %>',
'</a>' '</a>'
].join('')) ].join(''))
@ -3289,8 +3289,8 @@ define([
langid : lang.code, langid : lang.code,
spellcheck : lang.spellcheck, spellcheck : lang.spellcheck,
template: _.template([ template: _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem">', '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;">',
'<i class="icon <% if (options.spellcheck) { %> lang-flag <% } %>"></i>', '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
'<%= caption %>', '<%= caption %>',
'</a>' '</a>'
].join('')) ].join(''))

4
apps/presentationeditor/main/app/view/Statusbar.js
View file

@ -268,8 +268,8 @@ define([
maxHeight: 300, maxHeight: 300,
restoreHeight: 300, restoreHeight: 300,
itemTemplate: _.template([ itemTemplate: _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem">', '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;">',
'<i class="icon <% if (options.spellcheck) { %> lang-flag <% } %>"></i>', '<i class="icon <% if (options.spellcheck) { %> img-toolbarmenu spellcheck-lang <% } %>"></i>',
'<%= caption %>', '<%= caption %>',
'</a>' '</a>'
].join('')), ].join('')),

20
apps/presentationeditor/main/resources/less/statusbar.less
View file

@ -91,14 +91,6 @@
color: #000; color: #000;
margin-left: 6px; margin-left: 6px;
.dropdown-toggle > .icon.lang-flag {
position: relative;
top: 3px;
margin-left: 3px;
margin-right: 2px;
display: inline-block;
}
.caret.up { .caret.up {
background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y; background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y;
@ -111,17 +103,9 @@
cursor: pointer; cursor: pointer;
} }
.dropdown-menu {
> li .icon {
display: inline-block;
vertical-align: text-bottom;
margin: 1px 5px 0 2px;
}
}
&.disabled { &.disabled {
cursor: default; cursor: default;
label, .icon.lang-flag { label {
cursor: default; cursor: default;
opacity: 0.4; opacity: 0.4;
} }
@ -215,3 +199,5 @@
} }
} }
} }
.button-normal-icon(spellcheck-lang, 76, @toolbar-icon-size);

2
apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
View file

@ -696,7 +696,7 @@ define([
data : regdata, data : regdata,
template: _.template([ template: _.template([
'<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">', '<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control">', '<input type="text" class="form-control" style="padding-left: 25px !important;">',
'<span class="icon input-icon lang-flag"></span>', '<span class="icon input-icon lang-flag"></span>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',