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