diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 82d750102..fdbffe4a5 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/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:" 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 04fe5cbc2..11a30c8be 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/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)); } diff --git a/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx index b25953722..e12f7e881 100644 --- a/apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx +++ b/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 ( ) } 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..d426d93f5 100644 --- a/apps/documenteditor/mobile/src/store/documentSettings.js +++ b/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; + } + } diff --git a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx index b003e8b20..d9f6db564 100644 --- a/apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx +++ b/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 ( + + + + { + allSchemes ? allSchemes.map((scheme, index) => { + return ( + { + if(index !== curScheme) { + setScheme(index); + props.onColorSchemeChange(index); + }; + }}> +
+ + { + 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 +217,12 @@ const PageDocumentSettings = props => { applyMargins: props.applyMargins }}> + + + ) }; @@ -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 +}; diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx index 733d7b90b..4030a3276 100644 --- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx +++ b/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 } ];