Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] Maked Color Schemes

Browse source
This commit is contained in:
SergeyEzhin 2020-12-04 19:26:47 +03:00
parent 6e28a6674e
commit e9e6a16826
10 changed files with 152 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/documenteditor/mobile/locale/en.json
View file

@ -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:"

3
apps/documenteditor/mobile/resources/less/app-material.less
View file

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

15
apps/documenteditor/mobile/src/controller/Main.jsx
View file

@ -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));
}

11
apps/documenteditor/mobile/src/controller/settings/DocumentSettings.jsx
View file

@ -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 (
<DocumentSettings onPageOrientation={this.onPageOrientation}
onFormatChange={this.onFormatChange}
getMargins={this.getMargins}
applyMargins={this.applyMargins}
onColorSchemeChange={this.onColorSchemeChange}
/>
)
}

25
apps/documenteditor/mobile/src/css/app-ios.less
View file

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

24
apps/documenteditor/mobile/src/css/app-material.less
View file

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

2
apps/documenteditor/mobile/src/css/app.less
View file

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

14
apps/documenteditor/mobile/src/store/documentSettings.js
View file

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

55
apps/documenteditor/mobile/src/view/settings/DocumentSettings.jsx
View file

@ -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 (
<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()} value={index} checked={curScheme === index}
onChange={(e) => changeScheme(e.target.value, curScheme)}>
<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 +216,11 @@ const PageDocumentSettings = props => {
applyMargins: props.applyMargins
}}></ListItem>
</List>
<List>
<ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
onColorSchemeChange: props.onColorSchemeChange
}}></ListItem>
</List>
</Page>
)
};
@ -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
}

6
apps/documenteditor/mobile/src/view/settings/Settings.jsx
View file

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