From 122d4b16feda83f75afcadc418b731c341e8d33c Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 23 Dec 2020 21:00:59 +0300
Subject: [PATCH] [common] Added ThemeColorPalette component

---
 .../lib/component/ThemeColorPalette.jsx       | 139 ++++++++++++++++++
 apps/common/mobile/resources/less/common.less |  48 ++++++
 apps/documenteditor/mobile/locale/en.json     |  12 +-
 .../mobile/src/controller/Main.jsx            |   4 +
 4 files changed, 202 insertions(+), 1 deletion(-)
 create mode 100644 apps/common/mobile/lib/component/ThemeColorPalette.jsx

diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx
new file mode 100644
index 000000000..7ae2efa6d
--- /dev/null
+++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { ListItem, List } from 'framework7-react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
+    return (
+        <div className='palette'>
+            {themeColors.map((row, rowIndex) => {
+                return(
+                    <div className='row'>
+                        {row.map((effect, index) => {
+                            return(
+                                <a key={'tc-' + rowIndex + '-' + index}
+                                   className={curColor && curColor.color === effect.color && curColor.effectId === effect.effectId ? 'active' : ''}
+                                   data-effectvalue={effect.effectValue}
+                                   style={{ background: '#' + effect.color}}
+                                   onClick={() => {onColorClick(effect.color, effect.effectId)}}
+                                ></a>
+                            )
+                        })}
+                    </div>
+                )
+            })}
+        </div>
+    )
+};
+
+const StandartColors = ({ options, standartColors, onColorClick, curColor }) => {
+    return (
+        <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>
+                )
+            })}
+        </div>
+    )
+};
+
+const DynamicColors = ({ options, onColorClick, curColor }) => {
+    const dynamicColors = [];//dynamiColors;
+    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')}}
+            ></a>)
+        }
+    }
+    return (
+        <div className='palette'>
+            {dynamicColors && dynamicColors.length > 0 && dynamicColors.map((color, index) => {
+                return(
+                    <a key={'dc-' + index}
+                       className={curColor && curColor === color ? 'active' : ''}
+                       style={{background: '#' + color}}
+                       onClick={() => {onColorClick(color)}}
+                    ></a>
+                )
+            })}
+            {emptyItems.length > 0 && emptyItems}
+        </div>
+    )
+};
+
+const ThemeColorPalette = props => {
+    const {t} = useTranslation();
+    const _t = t('Common.ThemeColorPalette', {returnObjects: true});
+    const options = {
+        dynamiccolors: props.dynamiccolors || 10,
+        standardcolors: props.standardcolors || 10,
+        themecolors: props.themecolors || 10,
+        effects: props.effects || 5,
+        allowReselect: props.allowReselect !== false,
+        transparent: props.transparent || false,
+        value: props.value || '000000',
+        cls: props.cls || ''
+    };
+    const curColor = props.curColor;
+    const changeCurColor = props.changeCurColor;
+    const themeColors = [];
+    const effectColors = Common.Utils.ThemeColor.getEffectColors();
+    let row = -1;
+    effectColors.forEach((effect, index) => {
+        if (0 == index % options.themecolors) {
+            themeColors.push([]);
+            row++;
+        }
+        themeColors[row].push(effect);
+    });
+    const standartColors = Common.Utils.ThemeColor.getStandartColors();
+    // custom color
+    //const dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom');
+    //dynamicColors = this.dynamicColors ? this.dynamicColors.toLowerCase().split(',') : [];
+
+    const onColorClick = ( color, effectId ) => {
+        if (color !== 'empty') {
+            if (effectId !==undefined ) {
+                changeCurColor({color: color, effectId: effectId});
+            } else {
+                changeCurColor(color);
+            }
+        } else {
+            // open custom color menu
+        }
+    };
+
+    return (
+        <div className={'color-palettes' + (props.cls ? (' ' + props.cls) : '')}>
+            <List>
+                <ListItem className='theme-colors'>
+                    <div>{ _t.textThemeColors }</div>
+                    <ThemeColors themeColors={themeColors} onColorClick={onColorClick} curColor={curColor}/>
+                </ListItem>
+                <ListItem className='standart-colors'>
+                    <div>{ _t.textStandartColors }</div>
+                    <StandartColors options={options} standartColors={standartColors} onColorClick={onColorClick} curColor={curColor}/>
+                </ListItem>
+                <ListItem className='dynamic-colors'>
+                    <div>{ _t.textCustomColors }</div>
+                    <DynamicColors options={options} onColorClick={onColorClick} curColor={curColor}/>
+                </ListItem>
+            </List>
+        </div>
+    )
+};
+
+export default ThemeColorPalette;
\ No newline at end of file
diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index d2ca0f40b..0409ea53b 100644
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@@ -44,3 +44,51 @@
     padding: 0 16px;
     box-sizing: border-box;
 }
+
+.font-color-auto {
+    .color-auto {
+        width:22px;
+        height: 22px;
+        background-color: #000;
+    }
+    &.active {
+        .color-auto {
+            box-shadow: 0 0 0 1px #fff, 0 0 0 4px @themeColor;
+            border-radius: 1px;
+        }
+    }
+}
+
+.color-palettes {
+    .palette {
+        padding: 8px 0px;
+        a {
+            flex-grow: 1;
+            position: relative;
+            min-width: 10px;
+            min-height: 26px;
+            margin: 1px 1px 0 0;
+            box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
+            &.active:after {
+                content: ' ';
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                box-shadow: 0 0 0 1px #fff, 0 0 0 4px @themeColor;
+                z-index: 1;
+                border-radius: 1px;
+            }
+        }
+    }
+    .row {
+        padding: 0;
+    }
+    .list .item-inner {
+        display: block;
+    }
+    .standart-colors, .dynamic-colors {
+        .palette {
+            display: flex;
+        }
+    }
+}
diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index 68b5eaa6e..84cf4e0c4 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -1,4 +1,11 @@
 {
+  "Common": {
+    "ThemeColorPalette": {
+      "textThemeColors": "Theme Colors",
+      "textStandartColors": "Standart Colors",
+      "textCustomColors": "Custom Colors"
+    }
+  },
   "Settings": {
     "textCancel": "Cancel",
     "textSettings": "Settings",
@@ -164,7 +171,10 @@
     "textDifferentOddAndEvenPages": "Different odd and even pages",
     "textLinkToPrevious": "Link to Previous",
     "textContinueFromPreviousSection": "Continue from previous section",
-    "textStartAt": "Start at"
+    "textStartAt": "Start at",
+    "textFontColors": "Font Colors",
+    "textAutomatic": "Automatic",
+    "textAddCustomColor": "Add Custom Color"
   },
   "Add": {
     "textTable": "Table",
diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx
index ea56c12ff..2a9db0372 100644
--- a/apps/documenteditor/mobile/src/controller/Main.jsx
+++ b/apps/documenteditor/mobile/src/controller/Main.jsx
@@ -172,6 +172,10 @@ class MainController extends Component {
     }
 
     bindEvents() {
+        this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {
+            Common.Utils.ThemeColor.setColors(colors, standart_colors);
+        });
+
         const storeDocumentSettings = this.props.storeDocumentSettings;
         this.api.asc_registerCallback('asc_onPageOrient', isPortrait => {
             storeDocumentSettings.resetPortrait(isPortrait);