Merge pull request #734 from ONLYOFFICE/feature/pr1-fixed-some-stylesheets

Feature/pr1 fixed some stylesheets

apps/common/main/lib/component/Window.js

@@ -455,7 +455,7 @@ define([
             if (!options.width) options.width = 'auto';
             
             var template =  '<div class="info-box">' +
-                                '<% if (typeof iconCls !== "undefined") { %><div class="icon img-commonctrl img-no-theme-filter <%= iconCls %>"></div><% } %>' +
+                                '<% if (typeof iconCls !== "undefined") { %><div class="icon img-commonctrl img-colored <%= iconCls %>"></div><% } %>' +
                                 '<div class="text" <% if (typeof iconCls == "undefined") { %> style="padding-left:10px;" <% } %>><span><%= msg %></span>' +
                                     '<% if (dontshow) { %><div class="dont-show-checkbox"></div><% } %>' +
                                 '</div>' +

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 {

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 {

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');

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,

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

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)";

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);
 

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 {

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 {

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

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

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 {

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;

apps/common/main/resources/less/window.less

@@ -313,12 +313,6 @@
             }
         }
     }
-
-    .img-commonctrl {
-        &.img-no-theme-filter {
-            filter: none;
-        }
-    }
 }
 
 .modal-dlg {

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,

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,

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

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;

apps/spreadsheeteditor/main/app/view/Spellcheck.js

@@ -64,7 +64,7 @@ define([
                 '<label class="header" style="display: block;"><%= scope.txtDictionaryLanguage %></label>',
                 '<div id="spellcheck-dictionary-language"></div>',
                 '<div id="spellcheck-complete" class="hidden">',
-                    '<i class="img-commonctrl img-complete" style="display: inline-block;margin-right: 10px;"></i>',
+                    '<i class="img-commonctrl img-colored img-complete" style="display: inline-block;margin-right: 10px;"></i>',
                     '<%= scope.txtComplete %>' ,
                 '</div>',
             '</div>'

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -1315,7 +1315,7 @@ define([
 
                 me.mnuCustomScale = new Common.UI.MenuItem({
                     template: _.template([
-                        '<div class="checkable custom-scale" style="padding: 5px 20px;font-weight: normal;line-height: 1.42857143;color: #444444;font-size: 11px;height: 32px;"',
+                        '<div class="checkable custom-scale" style="padding: 5px 20px;font-weight: normal;line-height: 1.42857143;font-size: 11px;height: 32px;"',
                         '<% if(!_.isUndefined(options.stopPropagation)) { %>',
                         'data-stopPropagation="true"',
                         '<% } %>', '>',

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