From 10e10ca77b09eeb260ddc3309eac9a957de6027e Mon Sep 17 00:00:00 2001
From: SergeyEzhin <ezhin@mail.ru>
Date: Fri, 18 Jun 2021 16:06:53 +0300
Subject: [PATCH] [DE PE SSE mobile] Fix Bug 50897

---
 apps/documenteditor/mobile/src/view/edit/Edit.jsx         | 2 +-
 apps/documenteditor/mobile/src/view/edit/EditChart.jsx    | 2 ++
 apps/documenteditor/mobile/src/view/edit/EditShape.jsx    | 8 +++++---
 apps/documenteditor/mobile/src/view/edit/EditTable.jsx    | 8 +++++---
 apps/presentationeditor/mobile/src/view/edit/Edit.jsx     | 2 +-
 .../presentationeditor/mobile/src/view/edit/EditChart.jsx | 2 ++
 .../presentationeditor/mobile/src/view/edit/EditShape.jsx | 2 ++
 .../presentationeditor/mobile/src/view/edit/EditTable.jsx | 8 +++++---
 apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx      | 2 +-
 apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx | 2 ++
 apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx | 2 ++
 11 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx
index bd9bb4c7a..42001e455 100644
--- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx
@@ -202,7 +202,7 @@ const EditLayoutNavbar = ({ editors, inPopover }) => {
             editors.length > 1 ?
                 <div className='tab-buttons tabbar'>
                     {editors.map((item, index) => <Link key={"de-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
-                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.lenght + '%'}}></span>}
+                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
                 </div> :
                 <NavTitle>{ editors[0].caption }</NavTitle>
         }
diff --git a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
index a539c9339..6d0981d07 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx
@@ -147,6 +147,7 @@ const PageStyle = props => {
     const types = storeChartSettings.types;
     const curType = chartProperties ? chartProperties.getType() : null;
     const chartStyles = storeChartSettings.chartStyles;
+    const isAndroid = Device.android;
     // console.log(chartStyles, curType);
     // console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
 
@@ -184,6 +185,7 @@ const PageStyle = props => {
                     {chartStyles ? <Link key={"de-link-chart-style"}  tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
                     <Link key={"de-link-chart-fill"}  tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
                     <Link key={"de-link-chart-border"}  tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
+                    {isAndroid && <span className='tab-link-highlight'></span>}
                 </div>
                 {Device.phone &&
                     <NavRight>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
index 227dc6f1f..b4c785b50 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
@@ -144,6 +144,7 @@ const PageStyle = props => {
     const _t = t('Edit', {returnObjects: true});
     const storeShapeSettings = props.storeShapeSettings;
     const shapeObject = props.storeFocusObjects.shapeObject;
+    const isAndroid = Device.android;
 
     let borderSize, borderType, transparent;
     if (shapeObject) {
@@ -177,9 +178,10 @@ const PageStyle = props => {
         <Page>
             <Navbar backLink={_t.textBack}>
                 <div className='tab-buttons tabbar'>
-                    <Link key={"de-link-shape-fill"}  tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
-                    <Link key={"de-link-shape-border"}  tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
-                    <Link key={"de-link-shape-effects"}  tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
+                    <Link key={"de-link-shape-fill"} tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
+                    <Link key={"de-link-shape-border"} tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
+                    <Link key={"de-link-shape-effects"} tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
+                    {isAndroid && <span className='tab-link-highlight'></span>}
                 </div>
                 {Device.phone &&
                     <NavRight>
diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
index 528c3bf23..d17639b5b 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
@@ -466,6 +466,7 @@ const PageStyle = props => {
     const _t = t('Edit', {returnObjects: true});
     const storeTableSettings = props.storeTableSettings;
     const templates = storeTableSettings.styles;
+    const isAndroid = Device.android;
 
     const tableObject = props.storeFocusObjects.tableObject;
     if (!tableObject && Device.phone) {
@@ -477,9 +478,10 @@ const PageStyle = props => {
         <Page>
             <Navbar backLink={_t.textBack}>
                 <div className="tab-buttons tabbar">
-                    <Link key={"de-link-table-style"}  tabLink={"#edit-table-style"} tabLinkActive={true}>{_t.textStyle}</Link>
-                    <Link key={"de-link-table-fill"}  tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
-                    <Link key={"de-link-table-border"}  tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
+                    <Link key={"de-link-table-style"} tabLink={"#edit-table-style"} tabLinkActive={true}>{_t.textStyle}</Link>
+                    <Link key={"de-link-table-fill"} tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
+                    <Link key={"de-link-table-border"} tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
+                    {isAndroid && <span className='tab-link-highlight'></span>}
                 </div>
                 {Device.phone &&
                     <NavRight>
diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx
index 3f9537494..f4d43fb8a 100644
--- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx
@@ -231,7 +231,7 @@ const EditLayoutNavbar = ({ editors, inPopover }) => {
                 editors.length > 1 ?
                     <div className='tab-buttons tabbar'>
                         {editors.map((item, index) => <Link key={"pe-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
-                        {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.lenght + '%'}}></span>}
+                        {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
                     </div> :
                     <NavTitle>{ editors[0].caption }</NavTitle>
             }
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
index 2112aa589..a9929cc34 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx
@@ -159,6 +159,7 @@ const PageStyle = props => {
     const styles = storeChartSettings.styles;
     const shapeObject = props.storeFocusObjects.shapeObject;
     const chartStyles = storeChartSettings.chartStyles;
+    const isAndroid = Device.android;
 
     let borderSize, borderType, borderColor;
 
@@ -194,6 +195,7 @@ const PageStyle = props => {
                     {chartStyles ? <Link key={"pe-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
                     <Link key={"pe-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
                     <Link key={"pe-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
+                    {isAndroid && <span className='tab-link-highlight'></span>}
                 </div>
                 {Device.phone &&
                     <NavRight>
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
index 71210945c..39a55a8b4 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
@@ -89,6 +89,7 @@ const PageStyle = props => {
     const storeFocusObjects = props.storeFocusObjects;
     const storeShapeSettings = props.storeShapeSettings;
     const shapeObject = storeFocusObjects.shapeObject;
+    const isAndroid = Device.android;
 
     let borderSize, borderType, transparent;
     if (shapeObject) {
@@ -125,6 +126,7 @@ const PageStyle = props => {
                     <Link key={"pe-link-shape-fill"}  tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
                     <Link key={"pe-link-shape-border"}  tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
                     <Link key={"pe-link-shape-effects"}  tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
+                    {isAndroid && <span className='tab-link-highlight'></span>}
                 </div>
                 {Device.phone &&
                     <NavRight>
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
index 2377f9295..789ba0a45 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
@@ -313,14 +313,16 @@ const PageStyle = props => {
     const _t = t('View.Edit', {returnObjects: true});
     const storeTableSettings = props.storeTableSettings;
     const templates = storeTableSettings.styles;
+    const isAndroid = Device.android;
 
     return (
         <Page>
             <Navbar backLink={_t.textBack}>
                 <div className="tab-buttons tabbar">
-                    <Link key={"pe-link-table-style"}  tabLink={"#edit-table-style"} tabLinkActive={true}>{_t.textStyle}</Link>
-                    <Link key={"pe-link-table-fill"}  tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
-                    <Link key={"pe-link-table-border"}  tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
+                    <Link key={"pe-link-table-style"} tabLink={"#edit-table-style"} tabLinkActive={true}>{_t.textStyle}</Link>
+                    <Link key={"pe-link-table-fill"} tabLink={"#edit-table-fill"}>{_t.textFill}</Link>
+                    <Link key={"pe-link-table-border"} tabLink={"#edit-table-border"}>{_t.textBorder}</Link>
+                    {isAndroid && <span className='tab-link-highlight'></span>}
                 </div>
                 {Device.phone &&
                     <NavRight>
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
index 3df3425df..2115c773d 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
@@ -296,7 +296,7 @@ const EditLayoutNavbar = ({ editors, inPopover }) => {
                 editors.length > 1 ?
                     <div className='tab-buttons tabbar'>
                         {editors.map((item, index) => <Link key={"sse-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
-                        {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.lenght + '%'}}></span>}
+                        {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
                     </div> :
                     <NavTitle>{ editors[0].caption }</NavTitle>
             }
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
index 7662e68fa..66e0d6e43 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx
@@ -147,6 +147,7 @@ const PageBorderColor = props => {
 const PageStyle = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
+    const isAndroid = Device.android;
     const storeChartSettings = props.storeChartSettings;
     const storeFocusObjects = props.storeFocusObjects;
     const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
@@ -195,6 +196,7 @@ const PageStyle = props => {
                     {chartStyles ? <Link key={"sse-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
                     <Link key={"sse-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
                     <Link key={"sse-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
+                    {isAndroid && <span className='tab-link-highlight'></span>}
                 </div>
                 {Device.phone &&
                     <NavRight>
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx
index dd3eeb6e5..ef6ffd9d7 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx
@@ -83,6 +83,7 @@ const PaletteFill = inject("storeFocusObjects", "storeShapeSettings", "storePale
 const PageStyle = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
+    const isAndroid = Device.android;
     const storeShapeSettings = props.storeShapeSettings;
     const storeFocusObjects = props.storeFocusObjects;
     const shapeObject = storeFocusObjects.shapeObject.get_ShapeProperties();
@@ -121,6 +122,7 @@ const PageStyle = props => {
                     <Link key={"se-link-shape-fill"}  tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
                     <Link key={"se-link-shape-border"}  tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
                     <Link key={"se-link-shape-effects"}  tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
+                    {isAndroid && <span className='tab-link-highlight'></span>}
                 </div>
                 {Device.phone &&
                     <NavRight>