From c60cc871c021a18e6449ba6e588a6b0fdb7b21c9 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Sun, 27 Dec 2020 16:27:38 +0300
Subject: [PATCH 1/3] [DE] fix open palette console error

---
 .../lib/component/ThemeColorPalette.jsx       | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx
index 7ae2efa6d..de6312f40 100644
--- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx
+++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx
@@ -8,13 +8,13 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
         <div className='palette'>
             {themeColors.map((row, rowIndex) => {
                 return(
-                    <div className='row'>
+                    <div key={`tc-row-${rowIndex}`} className='row'>
                         {row.map((effect, index) => {
                             return(
-                                <a key={'tc-' + rowIndex + '-' + index}
+                                <a key={`tc-${rowIndex}-${index}`}
                                    className={curColor && curColor.color === effect.color && curColor.effectId === effect.effectId ? 'active' : ''}
                                    data-effectvalue={effect.effectValue}
-                                   style={{ background: '#' + effect.color}}
+                                   style={{ background: `#${effect.color}`}}
                                    onClick={() => {onColorClick(effect.color, effect.effectId)}}
                                 ></a>
                             )
@@ -31,16 +31,16 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) =>
         <div className='palette'>
             {standartColors.map((color, index) => {
                 return(
-                index === 0 && options.transparent ?
-                    <a key={'sc-' + index}
-                       className={'transparent' + ('transparent' === curColor ? ' active' : '')}
-                       onClick={() => {onColorClick('transparent')}}
-                    ></a> :
-                    <a key={'sc-' + index}
-                       className={curColor && curColor === color ? ' active' : ''}
-                       style={{ background: '#' + color}}
-                       onClick={() => {onColorClick(color)}}
-                    ></a>
+                    index === 0 && options.transparent ?
+                        <a key={`sc-${index}`}
+                           className={`transparent ${'transparent' === curColor ? 'active' : ''}`}
+                           onClick={() => {onColorClick('transparent')}}
+                        ></a> :
+                        <a key={`sc-${index}`}
+                           className={curColor && curColor === color ? ' active' : ''}
+                           style={{ background: `#${color}` }}
+                           onClick={() => {onColorClick(color)}}
+                        ></a>
                 )
             })}
         </div>
@@ -52,9 +52,9 @@ const DynamicColors = ({ options, onColorClick, curColor }) => {
     const emptyItems = [];
     if (dynamicColors.length < options.dynamiccolors) {
         for (let i = dynamicColors.length; i < options.dynamiccolors; i++) {
-            emptyItems.push(<a key={'dc-empty' + i}
-                               style={{background: '#ffffff'}}
-                               onClick={() => {onColorClick('empty')}}
+            emptyItems.push(<a className='empty-color'
+                                key={`dc-empty${i}`}
+                                onClick={() => {onColorClick('empty')}}
             ></a>)
         }
     }
@@ -62,7 +62,7 @@ const DynamicColors = ({ options, onColorClick, curColor }) => {
         <div className='palette'>
             {dynamicColors && dynamicColors.length > 0 && dynamicColors.map((color, index) => {
                 return(
-                    <a key={'dc-' + index}
+                    <a key={`dc-${index}`}
                        className={curColor && curColor === color ? 'active' : ''}
                        style={{background: '#' + color}}
                        onClick={() => {onColorClick(color)}}

From e9abada366bafebb1a6faed14feff2f024d2caa5 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Sun, 27 Dec 2020 16:28:16 +0300
Subject: [PATCH 2/3] [DE] remove unused elements

---
 apps/documenteditor/mobile/src/css/app.less | 32 ----------------
 apps/documenteditor/mobile/src/view/app.jsx | 42 ---------------------
 2 files changed, 74 deletions(-)

diff --git a/apps/documenteditor/mobile/src/css/app.less b/apps/documenteditor/mobile/src/css/app.less
index 6e73cb840..39a4c6a80 100644
--- a/apps/documenteditor/mobile/src/css/app.less
+++ b/apps/documenteditor/mobile/src/css/app.less
@@ -10,38 +10,6 @@
 @import './icons-ios.less';
 @import './icons-material.less';
 
-/* Left Panel right border when it is visible by breakpoint */
-.panel-left.panel-in-breakpoint:before {
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 100%;
-  width: 1px;
-  background: rgba(0,0,0,0.1);
-  content: '';
-  z-index: 6000;
-}
-
-/* Hide navbar link which opens left panel when it is visible by breakpoint */
-.panel-left.panel-in-breakpoint ~ .view .navbar .panel-open[data-panel="left"] {
-  display: none;
-}
-
-/*
-  Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)
-*/
-.ios .panel-left:not(.panel-in-breakpoint).panel-in ~ .view-main:before,
-.ios .panel-left:not(.panel-in-breakpoint).panel-closing ~ .view-main:before {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 1px;
-  background: rgba(0,0,0,0.1);
-  content: '';
-  z-index: 6000;
-}
-
 :root {
     --f7-popover-width: 360px;
 }
diff --git a/apps/documenteditor/mobile/src/view/app.jsx b/apps/documenteditor/mobile/src/view/app.jsx
index 64a7a3ab9..da82af4b7 100644
--- a/apps/documenteditor/mobile/src/view/app.jsx
+++ b/apps/documenteditor/mobile/src/view/app.jsx
@@ -31,51 +31,9 @@ export default class extends React.Component {
     return (
       <App params={ this.state.f7params } >
 
-        {/* Left panel with cover effect when hidden */}
-        <Panel left cover themeDark visibleBreakpoint={960}>
-          <View>
-            <Page>
-              <Navbar title="Left Panel"/>
-              <BlockTitle>Left View Navigation</BlockTitle>
-              <List>
-                <ListItem link="/left-page-1/" title="Left Page 1"/>
-                <ListItem link="/left-page-2/" title="Left Page 2"/>
-              </List>
-            </Page>
-          </View>
-        </Panel>
-
-
-        {/* Right panel with reveal effect*/}
-        <Panel right reveal themeDark>
-          <View>
-            <Page>
-              <Navbar title="Right Panel"/>
-              <Block>Right panel content goes here</Block>
-            </Page>
-          </View>
-        </Panel>
-
-
         {/* Your main view, should have "view-main" class */}
         <View main className="safe-areas" url="/" />
           <MainController />
-
-        {/* Popup */}
-        <Popup id="my-popup">
-          <View>
-            <Page>
-              <Navbar title="Popup">
-                <NavRight>
-                  <Link popupClose>Close</Link>
-                </NavRight>
-              </Navbar>
-              <Block>
-                <p>Popup content goes here.</p>
-              </Block>
-            </Page>
-          </View>
-        </Popup>
       </App>
     )
   }

From 58bc75cef36880b7d42ce9a106b4968ba818db68 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Sun, 27 Dec 2020 16:31:40 +0300
Subject: [PATCH 3/3] [stylesheets] refactoring

---
 apps/common/mobile/resources/less/common.less | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index 0409ea53b..52a180058 100644
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@@ -3,7 +3,7 @@
 @black: #000000;
 @gray: #c4c4c4;
 @green: #4cd964;
-
+@background-normal: @white;
 
 .popup, .popover, .sheet-modal {
     .list:first-child {
@@ -53,7 +53,7 @@
     }
     &.active {
         .color-auto {
-            box-shadow: 0 0 0 1px #fff, 0 0 0 4px @themeColor;
+            box-shadow: 0 0 0 1px @background-normal, 0 0 0 4px @themeColor;
             border-radius: 1px;
         }
     }
@@ -74,7 +74,7 @@
                 position: absolute;
                 width: 100%;
                 height: 100%;
-                box-shadow: 0 0 0 1px #fff, 0 0 0 4px @themeColor;
+                box-shadow: 0 0 0 1px @background-normal, 0 0 0 4px @themeColor;
                 z-index: 1;
                 border-radius: 1px;
             }
@@ -91,4 +91,10 @@
             display: flex;
         }
     }
+
+    .dynamic-colors {
+        .empty-color {
+            background-color: @background-normal;
+        }
+    }
 }