From 2bbfe4d1f4c8d0b7408179102a65f9c8919e3f2e Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Thu, 20 Apr 2017 16:36:15 +0300
Subject: [PATCH] [PE] svg icon in button

---
 apps/common/main/lib/component/Button.js        | 14 ++++++++++++--
 apps/common/main/lib/view/Header.js             |  2 +-
 apps/common/main/resources/less/toolbar.less    | 14 ++++++++++++++
 .../main/app/controller/Toolbar.js              |  2 +-
 apps/presentationeditor/main/index.html         | 17 ++++++++++++++++-
 5 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 7b06a4e47..48f6abc36 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -125,7 +125,11 @@ define([
                 '<% if ( iconImg ) { %>' +
                     '<img src="<%= iconImg %>">' +
                 '<% } else { %>' +
-                    '<i class="icon <%= iconCls %>">&nbsp;</i>' +
+                    '<% if (/svgicon/.test(iconCls)) {' +
+                        'print(\'<svg class=\"icon\"><use xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use></svg>\');' +
+                    '} else ' +
+                        'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); %>' +
+                    // '<i class="icon <%= iconCls %>">&nbsp;</i>' +
                 '<% } %>' +
                 '</div>' +
                 '<span class="caption"><%= caption %></span>' +
@@ -182,7 +186,13 @@ define([
         template: _.template([
             '<% var applyicon = function() { %>',
                 '<% if (iconImg) { print(\'<img src=\"\' + iconImg + \'\">\'); } else { %>',
-                '<% if (iconCls != "") { print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); }} %>',
+                // '<% if (iconCls != "") { print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); }} %>',
+                '<% if (iconCls != "") { ' +
+                    ' if (/svgicon/.test(iconCls)) {' +
+                        'print(\'<svg class=\"icon\"><use xlink:href=\"#\' + /svgicon\\s(\\S+)/.exec(iconCls)[1] + \'\"></use></svg>\');' +
+                    '} else ' +
+                        'print(\'<i class=\"icon \' + iconCls + \'\">&nbsp;</i>\'); ' +
+                '}} %>',
             '<% } %>',
             '<% if ( !menu ) { %>',
                 '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>">',
diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index c13303413..91821db3e 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -281,7 +281,7 @@ define([
                 me.btnGoBack = new Common.UI.Button({
                     id: 'btn-goback',
                     cls: 'btn-toolbar',
-                    iconCls: 'btn-goback',
+                    iconCls: 'svgicon svg-btn-goback',
                     split: true,
                     menu: new Common.UI.Menu({
                         style: 'min-width: 60px;',
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 3c6a8d5af..3e144a10c 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -229,3 +229,17 @@
     width: 100%;
     z-index: 995;
 }
+
+.btn-toolbar {
+    &:active {
+        svg.icon {
+            fill: #fff;
+        }
+    }
+
+    svg.icon {
+        background-image: none;
+
+        fill: @gray-deep;
+    }
+}
diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js
index e8e2bc085..da789bf98 100644
--- a/apps/presentationeditor/main/app/controller/Toolbar.js
+++ b/apps/presentationeditor/main/app/controller/Toolbar.js
@@ -2059,7 +2059,7 @@ define([
 
                     var button = new Common.UI.Button({
                         cls: _cls,
-                        iconCls: 'btn-menu-comments',
+                        iconCls: 'svgicon svg-btn-comments',
                         caption: 'Comment'
                     }).render( slots.eq(index) );
 
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index b7fbec434..d6dd69033 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -258,13 +258,28 @@
 
     <div id="viewport"></div>
 
+    <svg style="display: none;">
+        <symbol id="svg-btn-comments" viewBox="0 0 20 20">
+            <path d="M16,4H4C3.45,4,3,4.45,3,5v9c0,0.55,0.45,1,1,1h2l2,2h1l2-2h5c0.55,0,1-0.45,1-1V5C17,4.45,16.55,4,16,4z
+                            M16,14h-5h-0.414l-2,2H8.414l-2-2H6H4V5h12V14z"/>
+            <rect x="6" y="7" width="8" height="1"/>
+            <rect x="6" y="9" width="8" height="1"/>
+            <rect x="6" y="11" width="8" height="1"/>
+        </symbol>
+        <symbol id="svg-btn-goback" viewBox="0 20 20 20">
+            <path d="M17,26h-6v-1c0-0.553-0.448-1-1-1H3c-0.552,0-1,0.447-1,1v11c0,0.553,0.448,1,1,1h14
+                c0.552,0,1-0.447,1-1v-9C18,26.447,17.552,26,17,26z M17,36H3V25h7v1c0,0.553,0.448,1,1,1h6v1V36z"/>
+            <polygon points="13,31 10,28 10,30 6,30 6,32 10,32 10,34 	"/>
+        </symbol>
+    </svg>
+
     <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
     <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
 
     <script type="text/javascript">
         window.g_debug_mode = true;
     </script>
-	
+
     <!-- debug begin -->
     <script type="text/javascript">var less=less||{};less.env='development';</script>
     <script src="../../../vendor/less/dist/less-2.7.1.js" type="text/javascript"></script>