From e25c7171db3d12e83591815a70fd3d3a20756ca2 Mon Sep 17 00:00:00 2001
From: ShimaginAndrey <andrey.shimagin@onlyoffice.com>
Date: Fri, 20 Aug 2021 17:01:08 +0300
Subject: [PATCH] [SSE] Fix Bug 52060

---
 .../spreadsheeteditor/mobile/src/less/icons-ios.less |  5 ++++-
 .../mobile/src/less/icons-material.less              | 12 +++++++++++-
 apps/spreadsheeteditor/mobile/src/view/add/Add.jsx   | 10 +++++++---
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
index 719610da7..9f308f240 100644
--- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
@@ -126,7 +126,7 @@
         &.icon-link {
             width: 22px;
             height: 22px;
-            .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
+            .encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
         }
 
         &.icon-insimage {
@@ -467,6 +467,9 @@
                 height: 24px;
                 .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.00049 18C7.00049 18.8284 6.32892 19.5 5.50049 19.5C4.67206 19.5 4.00049 18.8284 4.00049 18C4.00049 17.1716 4.67206 16.5 5.50049 16.5C6.32892 16.5 7.00049 17.1716 7.00049 18ZM13.5005 18C13.5005 18.8284 12.8289 19.5 12.0005 19.5C11.1721 19.5 10.5005 18.8284 10.5005 18C10.5005 17.1716 11.1721 16.5 12.0005 16.5C12.8289 16.5 13.5005 17.1716 13.5005 18ZM18.5005 19.5C19.3289 19.5 20.0005 18.8284 20.0005 18C20.0005 17.1716 19.3289 16.5 18.5005 16.5C17.6721 16.5 17.0005 17.1716 17.0005 18C17.0005 18.8284 17.6721 19.5 18.5005 19.5Z" fill="white"/></svg>');
             }
+            &.icon-link {
+                background: #fff;
+            }
         }
     }
 }
diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less
index 74821ae31..928c5806f 100644
--- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less
@@ -105,7 +105,7 @@
         &.icon-link {
             width: 24px;
             height: 24px;
-            .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.0235 7C18.4006 7 19.5743 7.49845 20.5446 8.49534C21.5149 9.46108 22 10.6293 22 12C22 13.3708 21.5149 14.5546 20.5446 15.5515C19.5743 16.5172 18.4006 17.0001 17.0235 17.0001H13V15H17C17.8451 15 18.5884 14.7882 19.1831 14.1963C19.8091 13.5733 20 12.8411 20 12C20 11.1589 19.8091 10.4424 19.1831 9.85049C18.5884 9.22743 17.8685 9 17.0235 9H13V7H17.0235ZM8.00939 12.9814V11.0187H15.9906V12.9814H8.00939ZM4.76995 9.85049C4.17527 10.4424 4 11.1589 4 12C4 12.8411 4.17527 13.5733 4.76995 14.1963C5.39593 14.7882 6.15493 15 7 15H11.0141V17.0001H6.97653C5.59937 17.0001 4.42567 16.5172 3.4554 15.5515C2.48513 14.5546 2 13.3708 2 12C2 10.6293 2.48513 9.46108 3.4554 8.49534C4.42567 7.49845 5.59937 7 6.97653 7H11.0141V9H6.97653C6.13146 9 5.39593 9.22743 4.76995 9.85049Z" fill="@{themeColor}"/></svg>');
+            .encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.0235 7C18.4006 7 19.5743 7.49845 20.5446 8.49534C21.5149 9.46108 22 10.6293 22 12C22 13.3708 21.5149 14.5546 20.5446 15.5515C19.5743 16.5172 18.4006 17.0001 17.0235 17.0001H13V15H17C17.8451 15 18.5884 14.7882 19.1831 14.1963C19.8091 13.5733 20 12.8411 20 12C20 11.1589 19.8091 10.4424 19.1831 9.85049C18.5884 9.22743 17.8685 9 17.0235 9H13V7H17.0235ZM8.00939 12.9814V11.0187H15.9906V12.9814H8.00939ZM4.76995 9.85049C4.17527 10.4424 4 11.1589 4 12C4 12.8411 4.17527 13.5733 4.76995 14.1963C5.39593 14.7882 6.15493 15 7 15H11.0141V17.0001H6.97653C5.59937 17.0001 4.42567 16.5172 3.4554 15.5515C2.48513 14.5546 2 13.3708 2 12C2 10.6293 2.48513 9.46108 3.4554 8.49534C4.42567 7.49845 5.59937 7 6.97653 7H11.0141V9H6.97653C6.13146 9 5.39593 9.22743 4.76995 9.85049Z" fill="@{themeColor}"/></svg>');
         }
         &.icon-insimage, &.icon-image-library {
             width: 24px;
@@ -398,6 +398,16 @@
         }
     }
 
+    .tabbar {
+        .link.tab-link {
+            i.icon {
+                &.icon-link {
+                    background: #fff;
+                }
+            }
+        }
+    }
+
     // Overwrite color for toolbar
     .navbar {
         i.icon {
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
index 0ba851392..8721cad25 100644
--- a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
@@ -91,6 +91,7 @@ const AddTabs = props => {
     const _t = t('View.Add', {returnObjects: true});
     const showPanels = props.showPanels;
     const tabs = [];
+    
     if (!showPanels) {
         tabs.push({
             caption: _t.textChart,
@@ -131,10 +132,11 @@ const AddTabs = props => {
             component: <AddOtherController/>
         });
     }
-    if (showPanels && showPanels === 'hyperlink') {
+    if ((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) {
         tabs.push({
             caption: _t.textAddLink,
             id: 'add-link',
+            icon: 'icon-link',
             component: <AddLinkController/>
         });
     }
@@ -162,10 +164,10 @@ class AddView extends Component {
         return (
             show_popover ?
                 <Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
-                    <AddTabs inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/>
+                    <AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/>
                 </Popover> :
                 <Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <AddTabs onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/>
+                    <AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/>
                 </Popup>
         )
     }
@@ -193,6 +195,7 @@ const Add = props => {
     const cellinfo = api.asc_getCellInfo();
     const seltype = cellinfo.asc_getSelectionType();
     const iscelllocked = cellinfo.asc_getLocked();
+    const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
     let options;
 
     if ( !iscelllocked ) {
@@ -217,6 +220,7 @@ const Add = props => {
     return <AddView usePopover={!Device.phone}
                     onclosed={onviewclosed}
                     showPanels={options ? options.panels : undefined}
+                    isAddShapeHyperlink = {isAddShapeHyperlink}
     />
 };