Merge pull request #1134 from ONLYOFFICE/feature/sprite-to-svg

Feature/sprite to svg

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-colored <%= iconCls %>"></div><% } %>' +
+                                '<% if (typeof iconCls !== "undefined") { %><div class="icon <%= 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/view/OpenDialog.js

@@ -99,7 +99,7 @@ define([
                     '<% if (type == Common.Utils.importTextType.DRM) { %>',
                         '<% if (warning) { %>',
                         '<div>',
-                            '<div class="icon img-commonctrl warn"></div>',
+                            '<div class="icon warn"></div>',
                             '<div style="padding-left: 50px;"><div style="font-size: 12px;">' + (typeof _options.warningMsg=='string' ? _options.warningMsg : t.txtProtected) + '</div>',
                                 '<label class="header" style="margin-top: 15px;">' + t.txtPassword + '</label>',
                                 '<div id="id-password-txt" style="width: 290px;"></div></div>',

apps/common/main/resources/img/controls/warnings.svg

@@ -0,0 +1,26 @@
+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style>
+        svg>g {display: none}
+        :target {display: inline}
+    </style>
+    <g id="attention" >
+        <path d="M3.25245 31.1904L18.366 4.94276C19.0898 3.68575 20.9102 3.68575 21.634 4.94275L36.7475 31.1904C37.4678 32.4412 36.5612 34 35.1136 34H4.88642C3.43881 34 2.53225 32.4412 3.25245 31.1904Z" fill="#FFD112"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M21 25H19L18 18V12H22V18L21 25ZM22 31H18V27H22V31Z" fill="white"/>
+    </g>
+
+
+    <g id="done" >
+        <circle cx="20" cy="20" r="16" fill="#009900"/>
+        <path d="M12 20L18 26L29 15" stroke="white" stroke-width="4"/>
+    </g>
+
+    <g id="info">
+        <circle cx="20" cy="20" r="16" fill="#007DF1"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M22 10H18V14H22V10ZM22 17H18V30H22V17Z" fill="white"/>
+    </g>
+
+    <g id="warning">
+        <circle cx="20" cy="20" r="16" fill="#F62211"/>
+        <rect x="10" y="17" width="20" height="6" fill="white"/>
+    </g>
+</svg>

apps/common/main/resources/less/opendialog.less

@@ -77,14 +77,13 @@
         }
       }
 
-      .icon.img-commonctrl {
+      .icon {
         float: left;
-        width: 35px;
+        width: 40px;
-        height: 35px;
+        height: 40px;
 
         &.warn {
-          height: 32px;
+          background: ~"url('@{common-image-const-path}/controls/warnings.svg#attention')" no-repeat center;
-          background-position: @alerts-offset-x @alerts-offset-y - 105px;
         }
       }
     }

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

@@ -172,26 +172,24 @@
 
     .icon {
         &.warn {
-            width: 35px;
+            background: ~"url('@{common-image-const-path}/controls/warnings.svg#attention')" no-repeat center;
-            height: 32px;
-            background-position: @alerts-offset-x @alerts-offset-y - 105px;
         }
 
-        &.error, &.info, &.confirm {
+        &.error, &.info, &.confirm, &.warn {
-            width: 35px;
+            width: 40px;
-            height: 35px;
+            height: 40px;
         }
 
         &.error {
-            background-position: @alerts-offset-x @alerts-offset-y - 0;
+            background: ~"url('@{common-image-const-path}/controls/warnings.svg#warning')" no-repeat center;
         }
 
         &.info {
-            background-position: @alerts-offset-x @alerts-offset-y - 35px;
+            background: ~"url('@{common-image-const-path}/controls/warnings.svg#info')" no-repeat center;
         }
 
         &.confirm {
-            background-position: @alerts-offset-x @alerts-offset-y - 70px;
+            background: ~"url('@{common-image-const-path}/controls/warnings.svg#done')" no-repeat center;
         }
     }
 

apps/spreadsheeteditor/main/app/template/DataValidationDialog.template

@@ -89,7 +89,7 @@
             <tr>
                 <td class="padding-small">
                     <div style="display: inline-block; margin-right: 5px;vertical-align: bottom;">
-                        <div id="data-validation-img-style" class="icon img-commonctrl error" style="margin-bottom: -1px;"></div>
+                        <div id="data-validation-img-style" class="icon  error" style="margin-bottom: -1px;"></div>
                     </div>
                     <div style="display: inline-block;">
                         <label class="input-label"><%= scope.textStyle %></label>