From bb8d5eeb8c23b89db2d3518b9e2ba62a9023bc69 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Fri, 15 Mar 2019 16:22:27 +0300
Subject: [PATCH] [sailfish] changed styles. svg mask in stylesheet doesn't
 work

---
 .../less/material/_sailfish_fix.less          | 41 ++++++++++
 .../mobile/app/controller/Editor.js           |  6 +-
 apps/documenteditor/mobile/index.html         | 12 +++
 .../mobile/resources/css/app-material.css     | 82 +++++++++++++++++++
 .../mobile/resources/less/app-material.less   |  1 +
 5 files changed, 141 insertions(+), 1 deletion(-)
 create mode 100644 apps/common/mobile/resources/less/material/_sailfish_fix.less

diff --git a/apps/common/mobile/resources/less/material/_sailfish_fix.less b/apps/common/mobile/resources/less/material/_sailfish_fix.less
new file mode 100644
index 000000000..83cf4c080
--- /dev/null
+++ b/apps/common/mobile/resources/less/material/_sailfish_fix.less
@@ -0,0 +1,41 @@
+
+.icon-redefine (@name; @svgres) {
+    i.icon {
+        &.@{name} {
+            background-color: transparent;
+            -webkit-mask-image: none;
+            .encoded-svg-background(@svgres);
+
+            .button.active & {
+                background-color: transparent;
+            }
+        }
+    }
+}
+
+.sailfish {
+    .icon-redefine(icon-text-align-center, '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M4,7v1h14V7H4z M1,12h21v-1H1V12z M4,15v1h14v-1H4z M1,20h21v-1H1V20z"/></g></svg>');
+    .icon-redefine(icon-text-align-jast, '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M1,8h21V7H1V8z M1,12h21v-1H1V12z M1,16h21v-1H1V16z M1,20h21v-1H1V20z"/></g></svg>');
+    .icon-redefine(icon-text-align-left, '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M15,7H1v1h14V7z M1,12h21v-1H1V12z M15,15H1v1h14V15z M1,20h21v-1H1V20z"/></g></svg>');
+    .icon-redefine(icon-text-align-right, '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,3v1h21V3H1z M8,8h14V7H8V8z M22,11H1v1h21V11z M8,16h14v-1H8V16z M22,19H1v1h21V19z"/></g></svg>');
+    .icon-redefine(icon-de-indent, '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M11,15h11v1H11V15z M11,11h11v1H11V11z M11,7h11v1H11V7z M6.3,7L7,7.7l-3.8,3.8L7,15.3L6.3,16L2,11.8l-0.2-0.3L2,11.2L6.3,7z M1,3h21v1H1V3z"/></g></svg>');
+    .icon-redefine(icon-in-indent, '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M1,20v-1h21v1H1z M12,16H1v-1h11V16z M12,12H1v-1h11V12z M12,8H1V7h11V8z M21,11.2l0.2,0.3L21,11.8L16.7,16L16,15.3l3.8-3.8L16,7.7L16.7,7L21,11.2z M22,4H1V3h21V4z"/></g></svg>');
+    .icon-redefine(icon-block-align-left, '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect x="1" y="1" width="26" height="1"/><rect x="1" y="4" width="26" height="1"/><rect x="1" y="25" width="26" height="1"/><rect x="1" y="22" width="26" height="1"/><rect x="1" y="8" width="12" height="11"/></g></svg>');
+    .icon-redefine(icon-block-align-center, '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect y="1" width="26" height="1"/><rect y="4" width="26" height="1"/><rect y="25" width="26" height="1"/><rect y="22" width="26" height="1"/><rect x="7" y="8.08" width="12" height="10.92"/></g></svg>');
+    .icon-redefine(icon-block-align-right, '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" fill="@{themeColor}"><g><rect x="1" y="1" width="26" height="1"/><rect x="1" y="4" width="26" height="1"/><rect x="1" y="25" width="26" height="1"/><rect x="1" y="22" width="26" height="1"/><rect x="15" y="8" width="12" height="11"/></g></svg>');
+
+    .item-content.buttons .item-inner > .row .button.active {
+        background-color: #a2bdde;
+    }
+}
+
+.dataview.shapes {
+    .thumb {
+        -webkit-mask-image: none !important;
+    }
+
+    [data-type=textRect] .thumb {
+        background-image: url('../img/shapes/shape-01.svg');
+        background-color: transparent;
+    }
+}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/app/controller/Editor.js b/apps/documenteditor/mobile/app/controller/Editor.js
index b968233bf..a48c17dbc 100644
--- a/apps/documenteditor/mobile/app/controller/Editor.js
+++ b/apps/documenteditor/mobile/app/controller/Editor.js
@@ -98,9 +98,13 @@ define([
                 var phone = isPhone();
                 // console.debug('Layout profile:', phone ? 'Phone' : 'Tablet');
 
+                if ( isSailfish() ) {
+                    Common.SharedSettings.set('sailfish', true);
+                    $('html').addClass('sailfish');
+                }
+
                 Common.SharedSettings.set('android', Framework7.prototype.device.android);
                 Common.SharedSettings.set('phone', phone);
-                Common.SharedSettings.set('sailfish', isSailfish());
 
                 $('html').addClass(phone ? 'phone' : 'tablet');
 
diff --git a/apps/documenteditor/mobile/index.html b/apps/documenteditor/mobile/index.html
index adca9ea79..795c25dcb 100644
--- a/apps/documenteditor/mobile/index.html
+++ b/apps/documenteditor/mobile/index.html
@@ -246,6 +246,18 @@
 
         <script type="text/javascript" src="../sdk_dev_scripts.js"></script>
         <script>
+            function isSailfish() {
+                var ua = navigator.userAgent;
+                return /Sailfish/.test(ua) || /Jolla/.test(ua);
+            }
+
+            if (isSailfish()) {
+                var ua = navigator.userAgent + ';Android 5.0;';
+                Object.defineProperty(navigator, 'userAgent', {
+                    get: function () { return ua; }
+                });
+            }
+
             window.sdk_dev_scrpipts.forEach(function(item){
                 document.write('<script type="text/javascript" src="' + item + '"><\/script>');
             });
diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css
index 8963da8e9..03df06b41 100644
--- a/apps/documenteditor/mobile/resources/css/app-material.css
+++ b/apps/documenteditor/mobile/resources/css/app-material.css
@@ -6254,6 +6254,88 @@ i.icon.icon-format-html {
   height: 22px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpolygon%20points%3D%2210.9%2C16.9%202%2C8.1%204.1%2C6%2011.1%2C12.8%2017.9%2C6%2020%2C8.1%2011.2%2C16.9%2011.1%2C17%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
+.sailfish i.icon.icon-text-align-center {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M4%2C7v1h14V7H4z%20M1%2C12h21v-1H1V12z%20M4%2C15v1h14v-1H4z%20M1%2C20h21v-1H1V20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+.button.active .sailfish i.icon.icon-text-align-center {
+  background-color: transparent;
+}
+.sailfish i.icon.icon-text-align-jast {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M1%2C8h21V7H1V8z%20M1%2C12h21v-1H1V12z%20M1%2C16h21v-1H1V16z%20M1%2C20h21v-1H1V20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+.button.active .sailfish i.icon.icon-text-align-jast {
+  background-color: transparent;
+}
+.sailfish i.icon.icon-text-align-left {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M15%2C7H1v1h14V7z%20M1%2C12h21v-1H1V12z%20M15%2C15H1v1h14V15z%20M1%2C20h21v-1H1V20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+.button.active .sailfish i.icon.icon-text-align-left {
+  background-color: transparent;
+}
+.sailfish i.icon.icon-text-align-right {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M8%2C8h14V7H8V8z%20M22%2C11H1v1h21V11z%20M8%2C16h14v-1H8V16z%20M22%2C19H1v1h21V19z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+.button.active .sailfish i.icon.icon-text-align-right {
+  background-color: transparent;
+}
+.sailfish i.icon.icon-de-indent {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C20v-1h21v1H1z%20M11%2C15h11v1H11V15z%20M11%2C11h11v1H11V11z%20M11%2C7h11v1H11V7z%20M6.3%2C7L7%2C7.7l-3.8%2C3.8L7%2C15.3L6.3%2C16L2%2C11.8l-0.2-0.3L2%2C11.2L6.3%2C7z%20M1%2C3h21v1H1V3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+.button.active .sailfish i.icon.icon-de-indent {
+  background-color: transparent;
+}
+.sailfish i.icon.icon-in-indent {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C20v-1h21v1H1z%20M12%2C16H1v-1h11V16z%20M12%2C12H1v-1h11V12z%20M12%2C8H1V7h11V8z%20M21%2C11.2l0.2%2C0.3L21%2C11.8L16.7%2C16L16%2C15.3l3.8-3.8L16%2C7.7L16.7%2C7L21%2C11.2z%20M22%2C4H1V3h21V4z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+.button.active .sailfish i.icon.icon-in-indent {
+  background-color: transparent;
+}
+.sailfish i.icon.icon-block-align-left {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%2225%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%2222%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%2212%22%20height%3D%2211%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+.button.active .sailfish i.icon.icon-block-align-left {
+  background-color: transparent;
+}
+.sailfish i.icon.icon-block-align-center {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Crect%20y%3D%221%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%224%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%2225%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20y%3D%2222%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%228.08%22%20width%3D%2212%22%20height%3D%2210.92%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+.button.active .sailfish i.icon.icon-block-align-center {
+  background-color: transparent;
+}
+.sailfish i.icon.icon-block-align-right {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%23446995%22%3E%3Cg%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%2225%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%2222%22%20width%3D%2226%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%228%22%20width%3D%2212%22%20height%3D%2211%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+.button.active .sailfish i.icon.icon-block-align-right {
+  background-color: transparent;
+}
+.sailfish .item-content.buttons .item-inner > .row .button.active {
+  background-color: #a2bdde;
+}
+.dataview.shapes .thumb {
+  -webkit-mask-image: none !important;
+}
+.dataview.shapes [data-type=textRect] .thumb {
+  background-image: url('../img/shapes/shape-01.svg');
+  background-color: transparent;
+}
 * {
   -webkit-user-select: none;
   user-select: none;
diff --git a/apps/documenteditor/mobile/resources/less/app-material.less b/apps/documenteditor/mobile/resources/less/app-material.less
index 79b5b7acc..78d7a2978 100644
--- a/apps/documenteditor/mobile/resources/less/app-material.less
+++ b/apps/documenteditor/mobile/resources/less/app-material.less
@@ -55,6 +55,7 @@
 
 @import url('material/_search.less');
 @import url('material/_icons.less');
+@import url('../../../../common/mobile/resources/less/material/_sailfish_fix.less');
 
 // Disable text select
 * {