[DE] national's flags were moved to separate sprite

This commit is contained in:
Maxim Kadushkin 2017-04-04 17:47:21 +03:00
parent 09942d8d43
commit 3784eb0717
14 changed files with 94 additions and 91 deletions

View file

@ -281,7 +281,7 @@ define([
me.btnGoBack = new Common.UI.Button({ me.btnGoBack = new Common.UI.Button({
id: 'btn-goback', id: 'btn-goback',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'img-commonctrl review-prev', iconCls: 'btn-goback',
split: true, split: true,
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
style: 'min-width: 60px;', style: 'min-width: 60px;',

View file

@ -481,13 +481,13 @@ define([
this.btnPrev = new Common.UI.Button({ this.btnPrev = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'img-commonctrl review-prev', iconCls: 'review-prev',
caption: this.txtPrev caption: this.txtPrev
}); });
this.btnNext = new Common.UI.Button({ this.btnNext = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'img-commonctrl review-next', iconCls: 'review-next',
caption: this.txtNext caption: this.txtNext
}); });
@ -495,14 +495,14 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
caption: this.txtAccept, caption: this.txtAccept,
split: true, split: true,
iconCls: 'img-commonctrl review-close' iconCls: 'review-save'
}); });
this.btnReject = new Common.UI.Button({ this.btnReject = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
caption: this.txtReject, caption: this.txtReject,
split: true, split: true,
iconCls: 'img-commonctrl review-close' iconCls: 'review-deny'
}); });
this.btnTurnOn = new Common.UI.Button({ this.btnTurnOn = new Common.UI.Button({

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -179,3 +179,18 @@
background-size: @img-colorpicker-width auto; background-size: @img-colorpicker-width auto;
} }
} }
@img-flags-width: 48px;
.icon.lang-flag {
width: 16px;
height: 12px;
background: data-uri(%("%s",'@{common-image-path}/controls/flags.png')) no-repeat;
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx),
only screen and (min-resolution: 192dpi) {
background-image: data-uri(%("%s",'@{common-image-path}/controls/flags@2x.png'));
background-size: @img-flags-width auto;
}
}

View file

@ -41,15 +41,3 @@
// height: 19px; // height: 19px;
//} //}
} }
.review-prev {background-position: -40px -250px;}
button.active > .review-prev,
button:active > .review-prev {background-position: -60px -250px !important;}
.review-next {background-position: -40px -270px;}
button.active > .review-next,
button:active > .review-next {background-position: -60px -270px !important;}
.review-close {background-position: -40px -290px;}
button.active > .review-close,
button:active > .review-close {background-position: -60px -290px !important;}

View file

@ -14,7 +14,7 @@
<div class="separator short el-edit"></div> <div class="separator short el-edit"></div>
<div class="cnt-lang el-edit"> <div class="cnt-lang el-edit">
<div class="dropdown-toggle" data-toggle="dropdown" style="margin-right: 6px;"> <div class="dropdown-toggle" data-toggle="dropdown" style="margin-right: 6px;">
<span class="icon-lang-flag img-toolbarmenu lang-flag" data-vertical-offset="10" /> <span class="icon lang-flag en" data-vertical-offset="10" />
<label id="status-label-lang" class="status-label">English (United States)</label> <label id="status-label-lang" class="status-label">English (United States)</label>
<div class="caret up img-commonctrl" /> <div class="caret up img-commonctrl" />
</div> </div>

View file

@ -70,7 +70,7 @@ define([
var $parent = menu.$el.parent(); var $parent = menu.$el.parent();
$parent.find('#status-label-lang').text(item.caption); $parent.find('#status-label-lang').text(item.caption);
$parent.find('.icon-lang-flag') $parent.find('.dropdown-toggle > .icon.lang-flag')
.removeClass(this.langMenu.prevTip) .removeClass(this.langMenu.prevTip)
.addClass(item.value.tip); .addClass(item.value.tip);
@ -251,7 +251,7 @@ define([
maxHeight: 300, maxHeight: 300,
itemTemplate: _.template([ itemTemplate: _.template([
'<a id="<%= id %>" tabindex="-1" type="menuitem">', '<a id="<%= id %>" tabindex="-1" type="menuitem">',
'<span class="lang-item-icon img-toolbarmenu lang-flag <%= iconCls %>"></span>', '<i class="icon lang-flag <%= iconCls %>"></i>',
'<%= caption %>', '<%= caption %>',
'</a>' '</a>'
].join('')), ].join('')),
@ -377,7 +377,7 @@ define([
setLanguage: function(info) { setLanguage: function(info) {
if (this.langMenu.prevTip != info.tip) { if (this.langMenu.prevTip != info.tip) {
var $parent = $(this.langMenu.el.parentNode, this.$el); var $parent = $(this.langMenu.el.parentNode, this.$el);
$parent.find('.icon-lang-flag') $parent.find('.dropdown-toggle > .icon.lang-flag')
.removeClass(this.langMenu.prevTip) .removeClass(this.langMenu.prevTip)
.addClass(info.tip); .addClass(info.tip);
@ -463,13 +463,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="input-lang-icon img-toolbarmenu lang-flag" style="position: absolute;"></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">',
'<% _.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: 26px !important;">',
'<span class="lang-item-icon img-toolbarmenu lang-flag <%= item.value %>" style="position: absolute;margin-left:-21px;"></span>', '<i class="icon lang-flag <%= item.value %>" style="position: absolute;margin-left:-21px;"></i>',
'<%= scope.getDisplayValue(item) %>', '<%= scope.getDisplayValue(item) %>',
'</a>', '</a>',
'</li>', '</li>',
@ -502,7 +502,7 @@ define([
}, },
onLangSelect: function(cmb, rec, e) { onLangSelect: function(cmb, rec, e) {
var icon = cmb.$el.find('.input-lang-icon'), var icon = cmb.$el.find('.input-icon'),
plang = icon.attr('lang'); plang = icon.attr('lang');
if (plang) icon.removeClass(plang); if (plang) icon.removeClass(plang);

View file

@ -1092,32 +1092,32 @@ define([
me.btnImgAlign = new Common.UI.Button({ me.btnImgAlign = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-hidenchars', iconCls: 'btn-img-align',
caption: me.capImgAlign, caption: me.capImgAlign,
menu: true menu: true
}); });
me.btnImgGroup = new Common.UI.Button({ me.btnImgGroup = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-hidenchars', iconCls: 'btn-img-group',
caption: me.capImgGroup, caption: me.capImgGroup,
menu: true menu: true
}); });
me.btnImgForward = new Common.UI.Button({ me.btnImgForward = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-hidenchars', iconCls: 'btn-img-frwd',
caption: me.capImgForward, caption: me.capImgForward,
menu: true menu: true
}); });
me.btnImgBackward = new Common.UI.Button({ me.btnImgBackward = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-hidenchars', iconCls: 'btn-img-bkwd',
caption: me.capImgBackward, caption: me.capImgBackward,
menu: true menu: true
}); });
me.btnImgWrapping = new Common.UI.Button({ me.btnImgWrapping = new Common.UI.Button({
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'btn-hidenchars', iconCls: 'btn-img-wrap',
caption: me.capImgWrapping, caption: me.capImgWrapping,
menu: true menu: true
}); });

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 40 KiB

View file

@ -20,7 +20,7 @@ button.notify .btn-menu-comments {background-position: -0*@toolbar-icon-size -60
.button-normal-icon(btn-menu-chat, 62, @toolbar-icon-size); .button-normal-icon(btn-menu-chat, 62, @toolbar-icon-size);
.button-normal-icon(btn-menu-about, 68, @toolbar-icon-size); .button-normal-icon(btn-menu-about, 68, @toolbar-icon-size);
.button-normal-icon(btn-menu-support, 70, @toolbar-icon-size); .button-normal-icon(btn-menu-support, 70, @toolbar-icon-size);
.button-normal-icon(btn-menu-plugin, 84, @toolbar-icon-size); .button-normal-icon(btn-menu-plugin, 77, @toolbar-icon-size);
.tool-menu-btns { .tool-menu-btns {
width: 40px; width: 40px;

View file

@ -78,13 +78,11 @@
color: #000; color: #000;
margin-left: 6px; margin-left: 6px;
.icon-lang-flag { .dropdown-toggle > .icon.lang-flag {
position: relative; position: relative;
top: 3px; top: 3px;
margin-left: 3px; margin-left: 3px;
margin-right: 2px; margin-right: 2px;
width: 16px;
height: 12px;
display: inline-block; display: inline-block;
} }
@ -101,10 +99,7 @@
} }
.dropdown-menu { .dropdown-menu {
li .lang-item-icon { > li .icon {
width: 16px;
height: 12px;
display: inline-block; display: inline-block;
vertical-align: text-bottom; vertical-align: text-bottom;
margin: 1px 5px 0 2px; margin: 1px 5px 0 2px;
@ -113,7 +108,7 @@
&.disabled { &.disabled {
cursor: default; cursor: default;
label, .icon-lang-flag { label, .icon.lang-flag {
cursor: default; cursor: default;
opacity: 0.4; opacity: 0.4;
} }
@ -219,18 +214,13 @@
.combo-langs { .combo-langs {
.dropdown-menu { .dropdown-menu {
li .lang-item-icon { li .lang.item-icon {
margin-top: 1px; margin-top: 1px;
width: 16px;
height: 12px;
} }
} }
.input-lang-icon { .input-icon {
position: absolute; position: absolute;
width: 16px;
height: 12px;
left: 5px; left: 5px;
top: 5px; top: 5px;
} }
@ -243,49 +233,49 @@
.lang-flag { .lang-flag {
background-position: -16px -1608px; background-position: -16px -1608px;
&.ca, &.ca-ES {background-position: 0 -1499px;} &.ca, &.ca-ES {background-position: 0 0;}
&.cs, &.cs-CZ {background-position: -16px -1500px;} &.cs, &.cs-CZ {background-position: -16px 0;}
&.da, &.da-DK {background-position: -32px -1500px;} &.da, &.da-DK {background-position: -32px 0;}
&.de, &.de-DE {background-position: 0 -1512px;} &.de, &.de-DE {background-position: 0 -12px;}
&.el, &.el-GR {background-position: -16px -1512px;} &.el, &.el-GR {background-position: -16px -12px;}
&.en, &.en-US {background-position: -32px -1512px;} &.en, &.en-US {background-position: -32px -12px;}
&.fr, &.fr-FR {background-position: 0 -1524px;} &.fr, &.fr-FR {background-position: 0 -24px;}
&.hu, &.hu-HU {background-position: -16px -1524px;} &.hu, &.hu-HU {background-position: -16px -24px;}
&.it, &.it-IT {background-position: -32px -1524px;} &.it, &.it-IT {background-position: -32px -24px;}
&.ko, &.ko-KR {background-position: 0 -1536px;} &.ko, &.ko-KR {background-position: 0 -36px;}
&.nl, &.nl-NL {background-position: -16px -1536px;} &.nl, &.nl-NL {background-position: -16px -36px;}
&.nb, &.nb-NO {background-position: -32px -1536px;} &.nb, &.nb-NO {background-position: -32px -36px;}
&.pl, &.pl-PL {background-position: 0 -1548px;} &.pl, &.pl-PL {background-position: 0 -48px;}
&.pt, &.pt-BR {background-position: -16px -1548px;} &.pt, &.pt-BR {background-position: -16px -48px;}
&.ro, &.ro-RO {background-position: -32px -1548px;} &.ro, &.ro-RO {background-position: -32px -48px;}
&.ru, &.ru-RU {background-position: 0 -1560px;} &.ru, &.ru-RU {background-position: 0 -60px;}
&.sv, &.sv-SE {background-position: -32px -1560px;} &.sv, &.sv-SE {background-position: -32px -60px;}
&.tr, &.tr-TR {background-position: 0 -1572px;} &.tr, &.tr-TR {background-position: 0 -72px;}
&.uk, &.uk-UA {background-position: -16px -1572px;} &.uk, &.uk-UA {background-position: -16px -72px;}
&.lv, &.lv-LV {background-position: -32px -1572px;} &.lv, &.lv-LV {background-position: -32px -72px;}
&.lt, &.lt-LT {background-position: 0 -1584px;} &.lt, &.lt-LT {background-position: 0 -84px;}
&.vi, &.vi-VN {background-position: -16px -1584px;} &.vi, &.vi-VN {background-position: -16px -84px;}
&.de-CH {background-position: -32px -1584px;} &.de-CH {background-position: -32px -84px;}
&.nn, &.nn-NO {background-position: 0 -1596px;} &.nn, &.nn-NO {background-position: 0 -96px;}
&.pt-PT {background-position: -16px -1596px;} &.pt-PT {background-position: -16px -96px;}
&.de-AT {background-position: -32px -1596px;} &.de-AT {background-position: -32px -96px;}
&.es, &.es-ES {background-position: 0 -1608px;} &.es, &.es-ES {background-position: 0 -108px;}
&.en-GB {background-position: -32px -1608px;} &.en-GB {background-position: -32px -108px;}
&.en-AU {background-position: 0 -1620px;} &.en-AU {background-position: 0 -120px;}
&.az-Latn-AZ {background-position: -16px -1620px;} &.az-Latn-AZ {background-position: -16px -120px;}
&.bg, &.bg-BG {background-position: 0 -1720px;} &.bg, &.bg-BG {background-position: 0 -132px;}
&.ca-ES-valencia {background-position: -16px -1720px;} &.ca-ES-valencia {background-position: -16px -132px;}
&.en-CA {background-position: -32px -1720px;} &.en-CA {background-position: -32px -132px;}
&.en-ZA {background-position: 0 -1732px;} &.en-ZA {background-position: 0 -144px;}
&.eu, &.eu-ES {background-position: -16px -1732px;} &.eu, &.eu-ES {background-position: -16px -144px;}
&.gl, &.gl-ES {background-position: -32px -1732px;} &.gl, &.gl-ES {background-position: -32px -144px;}
&.hr, &.hr-HR {background-position: 0 -1744px;} &.hr, &.hr-HR {background-position: 0 -156px;}
&.lb, &.lb-LU {background-position: -16px -1744px;} &.lb, &.lb-LU {background-position: -16px -156px;}
&.mn, &.mn-MN {background-position: -32px -1744px;} &.mn, &.mn-MN {background-position: -32px -156px;}
&.sl, &.sl-SI {background-position: 0 -1756px;} &.sl, &.sl-SI {background-position: 0 -168px;}
&.sr, &.sr-Cyrl-RS, &.sr-Latn-RS {background-position: -16px -1756px;} &.sr, &.sr-Cyrl-RS, &.sr-Latn-RS {background-position: -16px -168px;}
&.sk, &.sk-SK {background-position: -32px -1756px;} &.sk, &.sk-SK {background-position: -32px -168px;}
} }
.button-normal-icon(btn-ic-zoomtowidth, 55, @toolbar-icon-size); .button-normal-icon(btn-ic-zoomtowidth, 55, @toolbar-icon-size);

View file

@ -483,14 +483,24 @@
//.toolbar-btn-icon(btn-bold, 5, @toolbar-icon-size); //.toolbar-btn-icon(btn-bold, 5, @toolbar-icon-size);
.button-normal-icon(btn-zoomin, 57, @toolbar-icon-size); .button-normal-icon(btn-zoomin, 57, @toolbar-icon-size);
.button-normal-icon(btn-zoomout, 58, @toolbar-icon-size); .button-normal-icon(btn-zoomout, 58, @toolbar-icon-size);
.button-normal-icon(btn-columns, 82, @toolbar-icon-size);
.button-normal-icon(btn-pagemargins, 83, @toolbar-icon-size);
.button-normal-icon(btn-notes, 85, @toolbar-icon-size);
.button-normal-icon(mmerge-next, 71, @toolbar-icon-size); .button-normal-icon(mmerge-next, 71, @toolbar-icon-size);
.button-normal-icon(mmerge-last, 72, @toolbar-icon-size); .button-normal-icon(mmerge-last, 72, @toolbar-icon-size);
.button-normal-icon(mmerge-prev, 73, @toolbar-icon-size); .button-normal-icon(mmerge-prev, 73, @toolbar-icon-size);
.button-normal-icon(mmerge-first, 74, @toolbar-icon-size); .button-normal-icon(mmerge-first, 74, @toolbar-icon-size);
.button-normal-icon(btn-columns, 75, @toolbar-icon-size);
.button-normal-icon(btn-pagemargins, 76, @toolbar-icon-size);
.button-normal-icon(btn-notes, 78, @toolbar-icon-size);
.button-normal-icon(review-prev, 79, @toolbar-icon-size);
.button-normal-icon(review-next, 80, @toolbar-icon-size);
.button-normal-icon(review-save, 81, @toolbar-icon-size);
.button-normal-icon(review-deny, 82, @toolbar-icon-size);
.button-normal-icon(btn-img-frwd, 83, @toolbar-icon-size);
.button-normal-icon(btn-img-bkwd, 84, @toolbar-icon-size);
.button-normal-icon(btn-img-wrap, 85, @toolbar-icon-size);
.button-normal-icon(btn-img-group, 86, @toolbar-icon-size);
.button-normal-icon(btn-img-align, 87, @toolbar-icon-size);
.button-normal-icon(btn-goback, 88, @toolbar-icon-size);
.button-otherstates-icon2(btn-toolbar, @toolbar-icon-size); .button-otherstates-icon2(btn-toolbar, @toolbar-icon-size);