Merge branch 'feature/mobile-apps-on-reactjs' of https://github.com/ONLYOFFICE/web-apps into feature/mobile-apps-on-reactjs

apps/common/mobile/lib/component/ThemeColorPalette.jsx

@@ -7,12 +7,12 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
         <div className='palette'>
             {themeColors.map((row, rowIndex) => {
                 return(
-                    <div className='row' key={'row-'+rowIndex}>
+                    <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.effectValue === effect.effectValue ? 'active' : ''}
-                                   style={{ background: '#' + effect.color}}
+                                   style={{ background: `#${effect.color}`}}
                                    onClick={() => {onColorClick(effect.color, effect.effectId)}}
                                 ></a>
                             )
@@ -30,13 +30,13 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) =>
             {standartColors.map((color, index) => {
                 return(
                     index === 0 && options.transparent ?
-                    <a key={'sc-' + index}
+                        <a key={`sc-${index}`}
-                       className={'transparent' + ('transparent' === curColor ? ' active' : '')}
+                           className={`transparent ${'transparent' === curColor ? 'active' : ''}`}
                            onClick={() => {onColorClick('transparent')}}
                         ></a> :
-                    <a key={'sc-' + index}
+                        <a key={`sc-${index}`}
                            className={curColor && curColor === color ? ' active' : ''}
-                       style={{ background: '#' + color}}
+                           style={{ background: `#${color}` }}
                            onClick={() => {onColorClick(color)}}
                         ></a>
                 )
@@ -46,12 +46,12 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) =>
 };
 
 const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
-    const colors = customColors.length > 0 ? customColors : [];//dynamiColors;
+    const colors = customColors.length > 0 ? customColors : [];
     const emptyItems = [];
     if (colors.length < options.customcolors) {
         for (let i = colors.length; i < options.customcolors; i++) {
-            emptyItems.push(<a key={'dc-empty' + i}
+            emptyItems.push(<a className='empty-color'
-                               style={{background: '#ffffff'}}
+                                key={`dc-empty${i}`}
                                 onClick={() => {onColorClick('empty')}}
             ></a>)
         }
@@ -60,7 +60,7 @@ const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
         <div className='palette'>
             {colors && colors.length > 0 && colors.map((color, index) => {
                 return(
-                    <a key={'dc-' + index}
+                    <a key={`dc-${index}`}
                        className={curColor && curColor === color ? 'active' : ''}
                        style={{background: '#' + color}}
                        onClick={() => {onColorClick(color)}}

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 @white, 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 @white, 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,6 +91,12 @@
             display: flex;
         }
     }
+
+    .dynamic-colors {
+        .empty-color {
+            background-color: @background-normal;
+        }
+    }
 }
 
 #color-picker {

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;
 }

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>
     )
   }