Merge branch 'feature/mobile-apps-on-reactjs-color-schemes' into feature/mobile-apps-on-reactjs

apps/documenteditor/mobile/locale/en.json

@@ -52,7 +52,8 @@
     "textDownloadAs": "Download As",
     "notcriticalErrorTitle": "Warning",
     "textDownloadTxt": "If you continue saving in this format all features except the text will be lost. Are you sure you want to continue?",
-    "textDownloadRtf": "If you continue saving in this format some of the formatting might be lost. Are you sure you want to continue?"
+    "textDownloadRtf": "If you continue saving in this format some of the formatting might be lost. Are you sure you want to continue?",
+    "textColorSchemes": "Color Schemes"
   },
   "Collaboration": {
     "textEditUser": "Users who are editing the file:"

apps/documenteditor/mobile/resources/less/app-material.less

@@ -290,3 +290,6 @@ input, textarea {
     }
   }
 }
+
+
+

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -255,12 +255,12 @@ class MainController extends Component {
         const storeDocumentInfo = this.props.storeDocumentInfo;
 
         this.api.asc_registerCallback("asc_onGetDocInfoStart", () => {
-          console.log("Start");
+        //   console.log("Start");
           storeDocumentInfo.switchIsLoaded(false);
         });
 
         this.api.asc_registerCallback("asc_onGetDocInfoStop", () => {
-          console.log("Stop");
+        //   console.log("Stop");
           storeDocumentInfo.switchIsLoaded(true);
         });
 
@@ -269,10 +269,19 @@ class MainController extends Component {
         });
 
         this.api.asc_registerCallback('asc_onGetDocInfoEnd', () => {
-          console.log('End');
+        //   console.log('End');
           storeDocumentInfo.switchIsLoaded(true);
         });
 
+        // Color Schemes
+
+        this.api.asc_registerCallback('asc_onSendThemeColorSchemes', (arr) => {
+            // console.log(arr);
+            storeDocumentSettings.addSchemes(arr);
+        });
+
+
+
         // me.api.asc_registerCallback('asc_onDocumentName',       _.bind(me.onApiDocumentName, me));
 
     }

apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx

@@ -70,12 +70,26 @@ class DocumentSettingsController extends Component {
         }
     }
 
+    // Color Schemes
+
+    initPageColorSchemes() {
+        const api = Common.EditorApi.get();
+        return api.asc_GetCurrentColorSchemeIndex();
+    }
+
+    onColorSchemeChange(newScheme) {
+        const api = Common.EditorApi.get();
+        api.asc_ChangeColorSchemeByIdx(+newScheme);
+    }
+
     render () {
         return (
             <DocumentSettings onPageOrientation={this.onPageOrientation}
                               onFormatChange={this.onFormatChange}
                               getMargins={this.getMargins}
                               applyMargins={this.applyMargins}
+                              onColorSchemeChange={this.onColorSchemeChange}
+                              initPageColorSchemes={this.initPageColorSchemes}
             />
         )
     }

apps/documenteditor/mobile/src/css/app-ios.less

@@ -3,3 +3,28 @@
 
 
 }
+
+// Color Schemes
+
+.color-schemes-menu {
+    cursor: pointer;
+    display: block;
+    background-color: #fff;
+    .item-inner {
+        justify-content: flex-start;
+    }
+    .color-schema-block {
+        display: flex;
+    }
+    .color {
+        min-width: 26px;
+        min-height: 26px;
+        margin: 0 2px 0 0;
+        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
+    }
+    .item-title {
+        margin-left: 20px;
+        color: #212121;
+    }
+}
+

apps/documenteditor/mobile/src/css/app-material.less

@@ -26,3 +26,27 @@
         background-color: rgba(68,105,149,.5);
     }
 }
+
+// Color Schemes
+
+.color-schemes-menu {
+    cursor: pointer;
+    display: block;
+    background-color: #fff;
+    .item-inner {
+        justify-content: flex-start;
+    }
+    .color-schema-block {
+        display: flex;
+    }
+    .color {
+        min-width: 26px;
+        min-height: 26px;
+        margin: 0 2px 0 0;
+        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
+    }
+    .item-title {
+        margin-left: 20px;
+        color: #212121;
+    }
+}

apps/documenteditor/mobile/src/css/app.less

@@ -45,3 +45,5 @@
 :root {
     --f7-popover-width: 360px;
 }
+
+

apps/documenteditor/mobile/src/store/documentSettings.js

@@ -59,4 +59,12 @@ export class storeDocumentSettings {
         return ind;
     }
 
+    // Color Schemes
+
+    @observable allSchemes;
+
+    @action addSchemes(arr) {
+        this.allSchemes = arr;
+    }
+
 }

apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx

@@ -126,6 +126,53 @@ const PageDocumentMargins = props => {
     )
 };
 
+const PageDocumentColorSchemes = props => {
+    const { t } = useTranslation();
+    const curScheme = props.initPageColorSchemes();
+    const [stateScheme, setScheme] = useState(curScheme);
+    const _t = t('Settings', {returnObjects: true});
+    const storeSettings = props.storeDocumentSettings;
+    const allSchemes = storeSettings.allSchemes;
+
+    return (
+        <Page>
+            <Navbar title={_t.textColorSchemes} backLink={_t.textBack} />
+            <List>
+                {
+                    allSchemes ? allSchemes.map((scheme, index) => {
+                        return (
+                            <ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index} 
+                                onChange={() => {
+                                    if(index !== curScheme) {
+                                        setScheme(index);
+                                        props.onColorSchemeChange(index);
+                                    };
+                            }}>
+                                <div slot="before-title">
+                                    <span className="color-schema-block">
+                                        {
+                                            scheme.get_colors().map((elem, index) => {
+                                                if(index >=2 && index < 7) {
+                                                    let clr = {background: "#" + Common.Utils.ThemeColor.getHexColor(elem.get_r(), elem.get_g(), elem.get_b())};
+                                                    return (
+                                                        <span className="color" key={index} style={clr}></span>
+                                                    )
+                                                }
+                                            })
+                                        }
+                                       
+                                    </span>
+                                </div>
+                            </ListItem>
+                        )
+                    }) : null        
+                }
+            </List>
+        </Page>
+
+    )
+};
+
 const PageDocumentSettings = props => {
     const { t } = useTranslation();
     const _t = t('Settings', {returnObjects: true});
@@ -170,6 +217,12 @@ const PageDocumentSettings = props => {
                     applyMargins: props.applyMargins
                 }}></ListItem>
             </List>
+            <List>
+                <ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
+                    onColorSchemeChange: props.onColorSchemeChange,
+                    initPageColorSchemes: props.initPageColorSchemes
+                }}></ListItem>
+            </List>
         </Page>
      )
 };
@@ -177,9 +230,11 @@ const PageDocumentSettings = props => {
 const DocumentFormats = inject("storeDocumentSettings")(observer(PageDocumentFormats));
 const DocumentMargins = inject("storeDocumentSettings")(observer(PageDocumentMargins));
 const DocumentSettings = inject("storeDocumentSettings")(observer(PageDocumentSettings));
+const DocumentColorSchemes = inject("storeDocumentSettings")(observer(PageDocumentColorSchemes));
 
 export {
     DocumentSettings,
     DocumentFormats,
-    DocumentMargins
+    DocumentMargins,
-}
+    DocumentColorSchemes
+};

apps/documenteditor/mobile/src/view/settings/Settings.jsx

@@ -9,7 +9,7 @@ import DocumentSettingsController from "../../controller/settings/DocumentSettin
 import DocumentInfoController from "../../controller/settings/DocumentInfo";
 import DownloadController from "../../controller/settings/Download";
 import ApplicationSettingsController from "../../controller/settings/ApplicationSettings";
-import { DocumentFormats, DocumentMargins } from "./DocumentSettings";
+import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./DocumentSettings";
 import { MacrosSettings } from "./ApplicationSettings";
 
 const routes = [
@@ -44,6 +44,10 @@ const routes = [
     {
         path: '/download/',
         component: DownloadController
+    },
+    {
+        path: '/color-schemes/',
+        component: DocumentColorSchemes
     }
 ];