diff --git a/apps/common/main/lib/component/Window.js b/apps/common/main/lib/component/Window.js index 55b52c4ed..ec1175730 100644 --- a/apps/common/main/lib/component/Window.js +++ b/apps/common/main/lib/component/Window.js @@ -455,7 +455,7 @@ define([ if (!options.width) options.width = 'auto'; var template = '
' + - '<% if (typeof iconCls !== "undefined") { %>
<% } %>' + + '<% if (typeof iconCls !== "undefined") { %>
<% } %>' + '
style="padding-left:10px;" <% } %>><%= msg %>' + '<% if (dontshow) { %>
<% } %>' + '
' + diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js index 949e7185c..d277e4df4 100644 --- a/apps/common/main/lib/util/utils.js +++ b/apps/common/main/lib/util/utils.js @@ -140,7 +140,7 @@ Common.Utils = _.extend(new(function() { if ( scale.devicePixelRatio < 1.5 ) { $root.removeClass('pixel-ratio__1_5 pixel-ratio__2'); } else - if ( !(scale.devicePixelRatio < 1.5) && !(scale.devicePixelRatio > 2) ) { + if ( !(scale.devicePixelRatio < 1.5) && scale.devicePixelRatio < 2 ) { $root.removeClass('pixel-ratio__2'); $root.addClass('pixel-ratio__1_5'); } else { diff --git a/apps/common/main/resources/img/toolbar/1x/huge/.css.handlebars b/apps/common/main/resources/img/toolbar/1x/huge/.css.handlebars index c1f895dd9..58fd2acc4 100644 --- a/apps/common/main/resources/img/toolbar/1x/huge/.css.handlebars +++ b/apps/common/main/resources/img/toolbar/1x/huge/.css.handlebars @@ -1,5 +1,10 @@ {{#spritesheet}} .btn { + .options__icon.options__icon-huge { + background-position-x: 0; + background-position-x: var(--button-huge-normal-icon-offset-x,0); + } + &.active, &:active { &:not(:disabled):not(.disabled) { .options__icon.options__icon-huge { diff --git a/apps/common/main/resources/less/asc-mixins.less b/apps/common/main/resources/less/asc-mixins.less index 295bea008..87872228a 100644 --- a/apps/common/main/resources/less/asc-mixins.less +++ b/apps/common/main/resources/less/asc-mixins.less @@ -211,14 +211,20 @@ } } +.img-commonctrl { + &.img-colored { + filter: none; + } +} + @common-controls-width: 100px; -.img-commonctrl, +.img-commonctrl, .dropdown-menu li .checked:before, .input-error:before, .input-warning:before, .btn-toolbar .icon.img-commonctrl, .list-item div.checked:before { background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/@{common-controls}')), ~"url(@{common-image-const-path}/@{common-controls})"); background-repeat: no-repeat; - filter: @component-normal-icon-filer; + filter: @component-normal-icon-filter; @1d5ximage: replace(@common-controls, '\.png$', '@1.5x.png'); @2ximage: replace(@common-controls, '\.png$', '@2x.png'); diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index b513eba07..8e4c9776e 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -170,6 +170,12 @@ } } + &:not(:disabled) { + .icon { + opacity: @button-icon-opacity; + } + } + &:active:not(.disabled), &.active:not(.disabled) { .caret-up, .caret-down { @@ -301,6 +307,12 @@ .border-radius(1px); background-color: transparent; + .masked & { + &:disabled { + opacity: 1; + } + } + .btn.small; &.bg-white { @@ -885,6 +897,12 @@ vertical-align: middle; width: 52px; padding: 5px; + + fill: @icon-normal; + + .btn& { + opacity: 1; + } } &:hover, diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less index 15159908d..3a4d63ae5 100644 --- a/apps/common/main/resources/less/colors-table-dark.less +++ b/apps/common/main/resources/less/colors-table-dark.less @@ -101,12 +101,15 @@ --button-huge-active-icon-offset-x: -40px; --button-xhuge-normal-icon-offset-x: -28px; --button-xhuge-active-icon-offset-x: -28px; + //--button-xhuge-normal-icon-offset-x: -37px; + //--button-xhuge-active-icon-offset-x: -37px; --modal-window-mask-opacity: 0.6; --image-border-types-filter: invert(100%) brightness(4); --image-border-types-filter-selected: invert(100%) brightness(4); --component-normal-icon-filter: invert(100%); --component-disabled-opacity: .3; + --button-icon-opacity: .8; --menu-icon-item-checked-offset-x: -20px; } diff --git a/apps/common/main/resources/less/colors-table-ie-fix.less b/apps/common/main/resources/less/colors-table-ie-fix.less index 4891f7817..a4a941270 100644 --- a/apps/common/main/resources/less/colors-table-ie-fix.less +++ b/apps/common/main/resources/less/colors-table-ie-fix.less @@ -52,6 +52,8 @@ @button-header-active-icon-offset-x-ie: -20px; @scaled-one-px-value-ie: 1px; +@component-disabled-opacity-ie: .4; + .ie { .toolbar__icon.toolbar__icon-big { @big-icon-background-image-ie: ~"url(@{app-image-const-path}/iconsbig.png)"; diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index dd743c5cd..5bff0dfd2 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -121,6 +121,7 @@ --image-border-types-filter-selected: none; --component-normal-icon-filter: none; --component-disabled-opacity: .4; + //--button-icon-opacity: 1; } // Background @@ -182,14 +183,18 @@ @button-small-active-icon-offset-x: var(--button-small-active-icon-offset-x,0); @button-large-normal-icon-offset-x: var(--button-large-normal-icon-offset-x, 0); @button-large-active-icon-offset-x: var(--button-large-active-icon-offset-x, 0); +@button-huge-normal-icon-offset-x: var(--button-huge-normal-icon-offset-x, 0); @button-xhuge-normal-icon-offset-x: var(--button-xhuge-normal-icon-offset-x, 0); @button-xhuge-active-icon-offset-x: var(--button-xhuge-active-icon-offset-x, 0); +//@button-huge-normal-icon-offset-x: var(--button-huge-normal-icon-offset-x, 0); +//@button-huge-active-icon-offset-x: var(--button-huge-active-icon-offset-x, 0); @button-header-normal-icon-offset-x: var(--button-header-normal-icon-offset-x, -20px); @button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -20px); -@component-normal-icon-filer: var(--component-normal-icon-filter); +@component-normal-icon-filter: var(--component-normal-icon-filter); @component-disabled-opacity: var(--component-disabled-opacity, .4); +@button-icon-opacity: var(--button-icon-opacity, 1); @menu-icon-item-checked-offset-x: var(--menu-icon-item-checked-offset-x, 0); diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less index d3cc6d36a..3bc08d1db 100644 --- a/apps/common/main/resources/less/combo-dataview.less +++ b/apps/common/main/resources/less/combo-dataview.less @@ -308,6 +308,11 @@ } } } + + .combo-wrap-item.options__icon { + background-position-x: 0; + background-position-x: @button-huge-normal-icon-offset-x; + } } .combo-pivot-template { diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less index 325b28de9..9d60d8493 100644 --- a/apps/common/main/resources/less/dropdown-menu.less +++ b/apps/common/main/resources/less/dropdown-menu.less @@ -1,11 +1,3 @@ -.dropdown-menu > .disabled > a { - cursor: default; - - color: @text-normal-ie; - color: @text-normal; - - opacity: @component-disabled-opacity; -} .dropdown-menu { background-color: @background-normal-ie; @@ -47,9 +39,6 @@ &:focus, &.focus { outline: 0; - } - - &.focus { color: @text-normal-pressed-ie; color: @text-normal-pressed; background-color: @highlight-button-hover-ie; @@ -115,6 +104,22 @@ } } + > .disabled { + > a { + cursor: default; + + color: @text-normal-ie; + color: @text-normal; + + opacity: @component-disabled-opacity; + + &:hover, &:focus { + color: @text-normal-ie; + color: @text-normal; + } + } + } + &.shifted-right { li { & > a { diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less index a7995b8a8..24b6e5d01 100644 --- a/apps/common/main/resources/less/header.less +++ b/apps/common/main/resources/less/header.less @@ -371,7 +371,8 @@ &:active { &:not(.disabled) { - background-color: rgba(0,0,0,0.2); + background-color: @highlight-header-button-pressed-ie; + background-color: @highlight-header-button-pressed; } } diff --git a/apps/common/main/resources/less/input.less b/apps/common/main/resources/less/input.less index 9a7bc2b06..6944e57a5 100644 --- a/apps/common/main/resources/less/input.less +++ b/apps/common/main/resources/less/input.less @@ -46,6 +46,7 @@ width: 16px; height: 16px; background-position: @input-error-offset-x @input-error-offset-y; + filter: none; } } diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less index 8757d2a25..6aace8386 100644 --- a/apps/common/main/resources/less/listview.less +++ b/apps/common/main/resources/less/listview.less @@ -24,8 +24,8 @@ } &:not(.no-focus):focus { - border-color: @border-preview-select-ie; - border-color: @border-preview-select; + border-color: @border-control-focus-ie; + border-color: @border-control-focus; } & > .item { diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index 1fd780939..80e9df178 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -406,6 +406,7 @@ // TODO: move to appropriate module .btn-header, .btn-users { &:not(:active) .icon--inverse { + background-position-x: 0; background-position-x: @button-small-normal-icon-offset-x; } @@ -429,6 +430,10 @@ background-color: @highlight-button-pressed-ie; background-color: @highlight-button-pressed; + .icon--inverse { + background-position-x: @button-small-active-icon-offset-x; + } + svg.icon { fill: @icon-toolbar-header-ie; fill: @icon-toolbar-header; diff --git a/apps/common/main/resources/less/window.less b/apps/common/main/resources/less/window.less index 87745f2ce..89ad03f21 100644 --- a/apps/common/main/resources/less/window.less +++ b/apps/common/main/resources/less/window.less @@ -313,12 +313,6 @@ } } } - - .img-commonctrl { - &.img-no-theme-filter { - filter: none; - } - } } .modal-dlg { diff --git a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js index 1dec27f11..e524be875 100644 --- a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js @@ -369,8 +369,8 @@ define([ this.btnFrameNone = new Common.UI.Button({ parentEl: $('#frame-advanced-button-none'), - cls : 'btn huge btn-options', - iconCls : 'icon-right-panel btn-frame-none', + cls : 'btn huge-1 btn-options', + iconCls : 'options__icon options__icon-huge none', enableToggle: true, toggleGroup : 'frameAdvGroup', allowDepress: false, @@ -385,8 +385,8 @@ define([ this.btnFrameInline = new Common.UI.Button({ parentEl: $('#frame-advanced-button-inline'), - cls : 'btn huge btn-options', - iconCls : 'icon-right-panel btn-frame-inline', + cls : 'btn huge-1 btn-options', + iconCls : 'options__icon options__icon-huge table-align-center', enableToggle: true, toggleGroup : 'frameAdvGroup', allowDepress: false, @@ -401,8 +401,8 @@ define([ this.btnFrameFlow = new Common.UI.Button({ parentEl: $('#frame-advanced-button-flow'), - cls : 'btn huge btn-options', - iconCls : 'icon-right-panel btn-frame-flow', + cls : 'btn huge-1 btn-options', + iconCls : 'options__icon options__icon-huge table-flow', enableToggle: true, toggleGroup : 'frameAdvGroup', allowDepress: false, diff --git a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js index d7d13475a..4bf8600a4 100644 --- a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js @@ -508,8 +508,8 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat this.btnWrapNone = new Common.UI.Button({ parentEl: $('#tableadv-button-wrap-none'), - cls: 'btn-options huge', - iconCls: 'icon-right-panel btn-wrap-none', + cls: 'btn-options huge-1', + iconCls: 'options__icon options__icon-huge table-align-center', posId: c_tableWrap.TABLE_WRAP_NONE, hint: this.textWrapNoneTooltip, enableToggle: true, @@ -520,8 +520,8 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat this.btnWrapParallel = new Common.UI.Button({ parentEl: $('#tableadv-button-wrap-parallel'), - cls: 'btn-options huge', - iconCls: 'icon-right-panel btn-wrap-parallel', + cls: 'btn-options huge-1', + iconCls: 'options__icon options__icon-huge table-flow', posId: c_tableWrap.TABLE_WRAP_PARALLEL, hint: this.textWrapParallelTooltip, enableToggle: true, @@ -532,8 +532,8 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat this.btnAlignLeft = new Common.UI.Button({ parentEl: $('#tableadv-button-align-left'), - cls: 'btn-options huge', - iconCls: 'icon-right-panel btn-table-align-left', + cls: 'btn-options huge-1', + iconCls: 'options__icon options__icon-huge table-align-left', posId: c_tableAlign.TABLE_ALIGN_LEFT, hint: this.textLeftTooltip, enableToggle: true, @@ -551,8 +551,8 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat this.btnAlignCenter = new Common.UI.Button({ parentEl: $('#tableadv-button-align-center'), - cls: 'btn-options huge', - iconCls: 'icon-right-panel btn-table-align-center', + cls: 'btn-options huge-1', + iconCls: 'options__icon options__icon-huge table-align-center', posId: c_tableAlign.TABLE_ALIGN_CENTER, hint: this.textCenterTooltip, enableToggle: true, @@ -570,8 +570,8 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat this.btnAlignRight = new Common.UI.Button({ parentEl: $('#tableadv-button-align-right'), - cls: 'btn-options huge', - iconCls: 'icon-right-panel btn-table-align-right', + cls: 'btn-options huge-1', + iconCls: 'options__icon options__icon-huge table-align-right', posId: c_tableAlign.TABLE_ALIGN_RIGHT, hint: this.textRightTooltip, enableToggle: true, diff --git a/apps/documenteditor/main/resources/img/right-panels/LargeBorders.png b/apps/documenteditor/main/resources/img/right-panels/LargeBorders.png deleted file mode 100644 index d5db3a84a..000000000 Binary files a/apps/documenteditor/main/resources/img/right-panels/LargeBorders.png and /dev/null differ diff --git a/apps/documenteditor/main/resources/img/right-panels/LargeBorders@2x.png b/apps/documenteditor/main/resources/img/right-panels/LargeBorders@2x.png deleted file mode 100644 index df4b20295..000000000 Binary files a/apps/documenteditor/main/resources/img/right-panels/LargeBorders@2x.png and /dev/null differ diff --git a/apps/documenteditor/main/resources/img/right-panels/RightPanelBigBtns.png b/apps/documenteditor/main/resources/img/right-panels/RightPanelBigBtns.png deleted file mode 100644 index 32d68b64d..000000000 Binary files a/apps/documenteditor/main/resources/img/right-panels/RightPanelBigBtns.png and /dev/null differ diff --git a/apps/documenteditor/main/resources/img/right-panels/RightPanelBigBtns@2x.png b/apps/documenteditor/main/resources/img/right-panels/RightPanelBigBtns@2x.png deleted file mode 100644 index 0c67ea63f..000000000 Binary files a/apps/documenteditor/main/resources/img/right-panels/RightPanelBigBtns@2x.png and /dev/null differ diff --git a/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_btns.png b/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_btns.png deleted file mode 100644 index dc76ad627..000000000 Binary files a/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_btns.png and /dev/null differ diff --git a/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_btns@2x.png b/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_btns@2x.png deleted file mode 100644 index 15231e500..000000000 Binary files a/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_btns@2x.png and /dev/null differ diff --git a/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_icons.png b/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_icons.png deleted file mode 100644 index 0c5cab5c4..000000000 Binary files a/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_icons.png and /dev/null differ diff --git a/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_icons@2x.png b/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_icons@2x.png deleted file mode 100644 index 2862d7ff7..000000000 Binary files a/apps/documenteditor/main/resources/img/right-panels/right_panel_wrap_icons@2x.png and /dev/null differ diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less index f20be4908..cefe993a5 100644 --- a/apps/documenteditor/main/resources/less/rightmenu.less +++ b/apps/documenteditor/main/resources/less/rightmenu.less @@ -14,69 +14,12 @@ } } -.icon-right-panel { - .background-ximage-v2('right-panels/RightPanelBigBtns.png', 74px, @commonimage: false); -} - .ie { .options__icon.options__icon-huge { .background-ximage('@{app-image-path}/iconshuge.png', '@{app-image-path}/iconshuge@2x.png', 40px); } } -.button-normal-icon(btn-wrap-none, 9, @huge-icon-size, @button-xhuge-normal-icon-offset-x); -.button-normal-icon(btn-wrap-parallel, 10, @huge-icon-size, @button-xhuge-normal-icon-offset-x); - -.button-normal-icon(btn-table-align-left, 0, @huge-icon-size, @button-xhuge-normal-icon-offset-x); -.button-normal-icon(btn-table-align-center, 1, @huge-icon-size, @button-xhuge-normal-icon-offset-x); -.button-normal-icon(btn-table-align-right, 2, @huge-icon-size, @button-xhuge-normal-icon-offset-x); - -.button-normal-icon(btn-frame-inline, 9, @huge-icon-size, @button-xhuge-normal-icon-offset-x); -.button-normal-icon(btn-frame-flow, 10, @huge-icon-size, @button-xhuge-normal-icon-offset-x); -.button-normal-icon(btn-frame-none, 11, @huge-icon-size, @button-xhuge-normal-icon-offset-x); - -.button-otherstates-icon(icon-right-panel, @huge-icon-size); - -.combo-wrap-item { - // TODO: dublicate .item-wrap - .background-ximage-v2('right-panels/right_panel_wrap_icons.png', 350px, @commonimage: false); -} - -.item-wrap { - .background-ximage-v2('right-panels/right_panel_wrap_icons.png', 350px, @commonimage: false); - width:50px; - height:50px; - background-size: cover !important; -} - -.wrap-inline { - background-position: 0 0; -} - -.wrap-square { - background-position: -50px 0; -} - -.wrap-tight { - background-position: -100px 0; -} - -.wrap-through { - background-position: -150px 0; -} - -.wrap-topAndBottom { - background-position: -200px 0; -} - -.wrap-behind { - background-position: -300px 0; -} - -.wrap-inFront { - background-position: -250px 0; -} - .combo-pattern-item { .background-ximage-v2('right-panels/patterns.png', 112px); } diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index ca446cd93..2e9523dc0 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -2,7 +2,7 @@ .toolbar { &.masked { button.disabled .icon:not(.no-mask) { - background-position-x: 0px !important; + //background-position-x: 0px !important; } .group:not(.no-mask) { opacity: 0.4; diff --git a/apps/spreadsheeteditor/main/app/view/Spellcheck.js b/apps/spreadsheeteditor/main/app/view/Spellcheck.js index 9936afa21..e32675a48 100644 --- a/apps/spreadsheeteditor/main/app/view/Spellcheck.js +++ b/apps/spreadsheeteditor/main/app/view/Spellcheck.js @@ -64,7 +64,7 @@ define([ '', '
', '', '
' diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 193bf123d..b020bb5e8 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -1315,7 +1315,7 @@ define([ me.mnuCustomScale = new Common.UI.MenuItem({ template: _.template([ - '
', 'data-stopPropagation="true"', '<% } %>', '>', diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less index 42eebbcdb..a0abb7a2a 100644 --- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less +++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less @@ -54,8 +54,8 @@ .selected { .listitem-icon { - background-position-x: -20px; - --bgX: -20px; + background-position-x: 0; + background-position-x: @button-small-normal-icon-offset-x; } }