From a5eccc9c82d86571f38d7224335c679eba624fda Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Wed, 27 Nov 2019 19:43:44 +0300
Subject: [PATCH] [all] header svg icons go to png

---
 apps/common/main/lib/view/Header.js          | 24 ++++++++------------
 apps/common/main/resources/less/header.less  | 21 ++++++++++++++---
 apps/common/main/resources/less/toolbar.less |  4 ++++
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index 156b67cde..790e62386 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -86,10 +86,6 @@ define([
                                 // '<span class="btn-slot text" id="slot-btn-users"></span>' +
                                 '<section id="tlb-box-users" class="box-cousers dropdown"">' +
                                     '<div class="btn-users">' +
-                                        '<svg class="icon">' +
-                                            '<use class="zoom-int" xlink:href="#svg-btn-users"></use>' +
-                                            '<use class="zoom-grit" xlink:href="#svg-btn-users-150"></use>' +
-                                        '</svg>' +
                                         '<label class="caption">&plus;</label>' +
                                     '</div>' +
                                     '<div class="cousers-menu dropdown-menu">' +
@@ -400,7 +396,7 @@ define([
                 me.btnGoBack = new Common.UI.Button({
                     id: 'btn-goback',
                     cls: 'btn-header',
-                    iconCls: 'svgicon svg-btn-goback',
+                    iconCls: 'toolbar__icon icon--inverse btn-goback',
                     split: true
                 });
 
@@ -413,7 +409,7 @@ define([
 
                 me.btnOptions = new Common.UI.Button({
                     cls: 'btn-header no-caret',
-                    iconCls: 'svgicon svg-btn-options',
+                    iconCls: 'toolbar__icon icon--inverse btn-options',
                     menu: true
                 });
 
@@ -440,7 +436,7 @@ define([
                 function createTitleButton(iconid, slot, disabled) {
                     return (new Common.UI.Button({
                         cls: 'btn-header',
-                        iconCls: 'svgicon ' + iconid,
+                        iconCls: iconid,
                         disabled: disabled === true
                     })).render(slot);
                 }
@@ -492,13 +488,13 @@ define([
 
                     if ( !config.isEdit ) {
                         if ( (config.canDownload || config.canDownloadOrigin) && !config.isOffline  )
-                            this.btnDownload = createTitleButton('svg-btn-download', $html.findById('#slot-hbtn-download'));
+                            this.btnDownload = createTitleButton('toolbar__icon icon--inverse btn-download', $html.findById('#slot-hbtn-download'));
 
                         if ( config.canPrint )
-                            this.btnPrint = createTitleButton('svg-btn-print', $html.findById('#slot-hbtn-print'));
+                            this.btnPrint = createTitleButton('toolbar__icon icon--inverse btn-print', $html.findById('#slot-hbtn-print'));
 
                         if ( config.canEdit && config.canRequestEditRights )
-                            this.btnEdit = createTitleButton('svg-btn-edit', $html.findById('#slot-hbtn-edit'));
+                            this.btnEdit = createTitleButton('toolbar__icon icon--inverse btn-edit', $html.findById('#slot-hbtn-edit'));
                     }
                     me.btnOptions.render($html.find('#slot-btn-options'));
 
@@ -522,12 +518,12 @@ define([
                     me.setUserName(me.options.userName);
 
                     if ( config.canPrint && config.isEdit ) {
-                        me.btnPrint = createTitleButton('svg-btn-print', $html.findById('#slot-btn-dt-print'), true);
+                        me.btnPrint = createTitleButton('toolbar__icon icon--inverse btn-print', $html.findById('#slot-btn-dt-print'), true);
                     }
 
-                    me.btnSave = createTitleButton('svg-btn-save', $html.findById('#slot-btn-dt-save'), true);
-                    me.btnUndo = createTitleButton('svg-btn-undo', $html.findById('#slot-btn-dt-undo'), true);
-                    me.btnRedo = createTitleButton('svg-btn-redo', $html.findById('#slot-btn-dt-redo'), true);
+                    me.btnSave = createTitleButton('toolbar__icon icon--inverse btn-save', $html.findById('#slot-btn-dt-save'), true);
+                    me.btnUndo = createTitleButton('toolbar__icon icon--inverse btn-undo', $html.findById('#slot-btn-dt-undo'), true);
+                    me.btnRedo = createTitleButton('toolbar__icon icon--inverse btn-redo', $html.findById('#slot-btn-dt-redo'), true);
 
                     if ( me.btnSave.$icon.is('svg') ) {
                         me.btnSave.$icon.addClass('icon-save');
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index d81d23c55..2c5497d8f 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -70,16 +70,20 @@
     .btn-users,
     .btn-header {
         &:hover {
-            &:not(.disabled) {
+            &:not(.disabled):not(.icon) {
                 background-color: rgba(255,255,255,0.2);
             }
         }
 
         &:active, &.active {
-            &:not(.disabled) {
+            &:not(.disabled):not(.icon) {
                 background-color: rgba(0,0,0,0.2);
             }
         }
+
+        &.icon {
+            pointer-events:none;
+        }
     }
 
     #box-doc-name {
@@ -183,6 +187,12 @@
         display: inline-block;
         width: 20px;
         height: 20px;
+        background-repeat: no-repeat;
+        padding: 0;
+
+        &.icon--inverse {
+            background-position-x: -20px;
+        }
     }
 
     .caption {
@@ -286,10 +296,15 @@
     .icon {
         width: 20px;
         height: 20px;
+        display: inline-block;
+        position: relative;
+
+        &.icon--inverse {
+            background-position-x: -20px;
+        }
     }
 
     svg.icon {
-        display: inline-block;
         vertical-align: middle;
 
         @media
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 720fcbd72..ab26033de 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -383,6 +383,10 @@
 
         // TODO: move to appropriate module
         .btn-header, .btn-users {
+            &:not(:active) .icon--inverse {
+                background-position-x: 0;
+            }
+
             svg.icon {
                 fill: @gray-deep;
             }