From e9e6a16826d2d28ec2139c82642431d945bf7080 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 4 Dec 2020 19:26:47 +0300 Subject: [PATCH 1/3] [DE mobile] Maked Color Schemes --- apps/documenteditor/mobile/locale/en.json | 3 +- .../mobile/resources/less/app-material.less | 3 + .../mobile/src/controller/Main.jsx | 15 ++++- .../controller/settings/DocumentSettings.jsx | 11 ++++ .../mobile/src/css/app-ios.less | 25 +++++++++ .../mobile/src/css/app-material.less | 24 ++++++++ apps/documenteditor/mobile/src/css/app.less | 2 + .../mobile/src/store/documentSettings.js | 14 +++++ .../src/view/settings/DocumentSettings.jsx | 55 ++++++++++++++++++- .../mobile/src/view/settings/Settings.jsx | 6 +- 10 files changed, 152 insertions(+), 6 deletions(-) diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 56df9e3cc..efb5f118b 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -50,7 +50,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:" diff --git a/apps/documenteditor/mobile/resources/less/app-material.less b/apps/documenteditor/mobile/resources/less/app-material.less index b74cd4923..a25480431 100644 --- a/apps/documenteditor/mobile/resources/less/app-material.less +++ b/apps/documenteditor/mobile/resources/less/app-material.less @@ -290,3 +290,6 @@ input, textarea { } } } + + + diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index 06c1d4164..808a34984 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -249,12 +249,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); }); @@ -263,10 +263,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)); } diff --git a/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx index b25953722..09f1bbb08 100644 --- a/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx @@ -70,12 +70,23 @@ class DocumentSettingsController extends Component { } } + // Color Schemes + + onColorSchemeChange(newScheme, curScheme) { + const api = Common.EditorApi.get(); + if(newScheme !== curScheme) { + api.asc_ChangeColorSchemeByIdx(+newScheme); + } + + } + render () { return ( ) } diff --git a/apps/documenteditor/mobile/src/css/app-ios.less b/apps/documenteditor/mobile/src/css/app-ios.less index a1575794a..fefaee26d 100644 --- a/apps/documenteditor/mobile/src/css/app-ios.less +++ b/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; + } +} + diff --git a/apps/documenteditor/mobile/src/css/app-material.less b/apps/documenteditor/mobile/src/css/app-material.less index ccf990944..b5680d3dc 100644 --- a/apps/documenteditor/mobile/src/css/app-material.less +++ b/apps/documenteditor/mobile/src/css/app-material.less @@ -25,4 +25,28 @@ .toggle input[type="checkbox"]:checked + .toggle-icon { 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; + } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/css/app.less b/apps/documenteditor/mobile/src/css/app.less index 24c5dc0fb..6e73cb840 100644 --- a/apps/documenteditor/mobile/src/css/app.less +++ b/apps/documenteditor/mobile/src/css/app.less @@ -45,3 +45,5 @@ :root { --f7-popover-width: 360px; } + + diff --git a/apps/documenteditor/mobile/src/store/documentSettings.js b/apps/documenteditor/mobile/src/store/documentSettings.js index 1d7196575..6b1c6e108 100644 --- a/apps/documenteditor/mobile/src/store/documentSettings.js +++ b/apps/documenteditor/mobile/src/store/documentSettings.js @@ -59,4 +59,18 @@ export class storeDocumentSettings { return ind; } + // Color Schemes + + @observable curScheme = Common.EditorApi.get().asc_GetCurrentColorSchemeIndex(); + @observable allSchemes; + + + @action changeColorScheme(value) { + this.curScheme = +value; + } + + @action addSchemes(arr) { + this.allSchemes = arr; + } + } diff --git a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx index b003e8b20..61a60f884 100644 --- a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx @@ -126,6 +126,52 @@ const PageDocumentMargins = props => { ) }; +const PageDocumentColorSchemes = props => { + const { t } = useTranslation(); + const _t = t('Settings', {returnObjects: true}); + const storeSettings = props.storeDocumentSettings; + const curScheme = storeSettings.curScheme; + const allSchemes = storeSettings.allSchemes; + + const changeScheme = (newScheme, curScheme) => { + storeSettings.changeColorScheme(newScheme); + props.onColorSchemeChange(newScheme, curScheme); + } + + return ( + + + + { + allSchemes ? allSchemes.map((scheme, index) => { + return ( + changeScheme(e.target.value, curScheme)}> +
+ + { + 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 ( + + ) + } + }) + } + + +
+ + ) + }) : null + } + + + + ) +} + const PageDocumentSettings = props => { const { t } = useTranslation(); const _t = t('Settings', {returnObjects: true}); @@ -170,6 +216,11 @@ const PageDocumentSettings = props => { applyMargins: props.applyMargins }}> + + + ) }; @@ -177,9 +228,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 } diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx index 827d3f5ce..b3299e84c 100644 --- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx @@ -8,7 +8,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 = [ @@ -43,6 +43,10 @@ const routes = [ { path: '/download/', component: DownloadController + }, + { + path: '/color-schemes/', + component: DocumentColorSchemes } ]; From 8b8286e593cd6d3a58b32a172a7e7584e0c9dc73 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 7 Dec 2020 17:23:44 +0300 Subject: [PATCH 2/3] [DE mobile] Edits Color Schemes --- .../src/controller/settings/DocumentSettings.jsx | 6 ++++++ .../mobile/src/store/documentSettings.js | 11 +++++------ .../src/view/settings/DocumentSettings.jsx | 16 +++++++++++----- 3 files changed, 22 insertions(+), 11 deletions(-) diff --git a/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx index 09f1bbb08..c72459c12 100644 --- a/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx @@ -72,6 +72,11 @@ class DocumentSettingsController extends Component { // Color Schemes + initPageColorSchemes() { + const api = Common.EditorApi.get(); + return api.asc_GetCurrentColorSchemeIndex(); + } + onColorSchemeChange(newScheme, curScheme) { const api = Common.EditorApi.get(); if(newScheme !== curScheme) { @@ -87,6 +92,7 @@ class DocumentSettingsController extends Component { getMargins={this.getMargins} applyMargins={this.applyMargins} onColorSchemeChange={this.onColorSchemeChange} + initPageColorSchemes={this.initPageColorSchemes} /> ) } diff --git a/apps/documenteditor/mobile/src/store/documentSettings.js b/apps/documenteditor/mobile/src/store/documentSettings.js index 6b1c6e108..c433ad6d5 100644 --- a/apps/documenteditor/mobile/src/store/documentSettings.js +++ b/apps/documenteditor/mobile/src/store/documentSettings.js @@ -61,13 +61,12 @@ export class storeDocumentSettings { // Color Schemes - @observable curScheme = Common.EditorApi.get().asc_GetCurrentColorSchemeIndex(); - @observable allSchemes; + + @observable curScheme; - - @action changeColorScheme(value) { - this.curScheme = +value; - } + // @action changeColorScheme(value) { + // this.curScheme = +value; + // } @action addSchemes(arr) { this.allSchemes = arr; diff --git a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx index 61a60f884..204f0a813 100644 --- a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx @@ -128,13 +128,15 @@ 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 curScheme = storeSettings.curScheme; + // const curScheme = storeSettings.curScheme; const allSchemes = storeSettings.allSchemes; const changeScheme = (newScheme, curScheme) => { - storeSettings.changeColorScheme(newScheme); + // storeSettings.changeColorScheme(newScheme); props.onColorSchemeChange(newScheme, curScheme); } @@ -145,8 +147,11 @@ const PageDocumentColorSchemes = props => { { allSchemes ? allSchemes.map((scheme, index) => { return ( - changeScheme(e.target.value, curScheme)}> + { + setScheme(index); + changeScheme(index, curScheme); + }}>
{ @@ -218,7 +223,8 @@ const PageDocumentSettings = props => { From 1d93bbf63b8880029b514ce6279b3d13ba34d2a2 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 7 Dec 2020 19:19:00 +0300 Subject: [PATCH 3/3] Refactoring Color Schemes --- .../controller/settings/DocumentSettings.jsx | 7 ++----- .../mobile/src/store/documentSettings.js | 7 +------ .../src/view/settings/DocumentSettings.jsx | 18 +++++++----------- 3 files changed, 10 insertions(+), 22 deletions(-) diff --git a/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx index c72459c12..e12f7e881 100644 --- a/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx @@ -77,12 +77,9 @@ class DocumentSettingsController extends Component { return api.asc_GetCurrentColorSchemeIndex(); } - onColorSchemeChange(newScheme, curScheme) { + onColorSchemeChange(newScheme) { const api = Common.EditorApi.get(); - if(newScheme !== curScheme) { - api.asc_ChangeColorSchemeByIdx(+newScheme); - } - + api.asc_ChangeColorSchemeByIdx(+newScheme); } render () { diff --git a/apps/documenteditor/mobile/src/store/documentSettings.js b/apps/documenteditor/mobile/src/store/documentSettings.js index c433ad6d5..d426d93f5 100644 --- a/apps/documenteditor/mobile/src/store/documentSettings.js +++ b/apps/documenteditor/mobile/src/store/documentSettings.js @@ -61,12 +61,7 @@ export class storeDocumentSettings { // Color Schemes - - @observable curScheme; - - // @action changeColorScheme(value) { - // this.curScheme = +value; - // } + @observable allSchemes; @action addSchemes(arr) { this.allSchemes = arr; diff --git a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx index 204f0a813..d9f6db564 100644 --- a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx @@ -132,14 +132,8 @@ const PageDocumentColorSchemes = props => { const [stateScheme, setScheme] = useState(curScheme); const _t = t('Settings', {returnObjects: true}); const storeSettings = props.storeDocumentSettings; - // const curScheme = storeSettings.curScheme; const allSchemes = storeSettings.allSchemes; - const changeScheme = (newScheme, curScheme) => { - // storeSettings.changeColorScheme(newScheme); - props.onColorSchemeChange(newScheme, curScheme); - } - return ( @@ -149,8 +143,10 @@ const PageDocumentColorSchemes = props => { return ( { - setScheme(index); - changeScheme(index, curScheme); + if(index !== curScheme) { + setScheme(index); + props.onColorSchemeChange(index); + }; }}>
@@ -169,13 +165,13 @@ const PageDocumentColorSchemes = props => {
) - }) : null + }) : null } ) -} +}; const PageDocumentSettings = props => { const { t } = useTranslation(); @@ -241,4 +237,4 @@ export { DocumentFormats, DocumentMargins, DocumentColorSchemes -} +};