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

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

Browse source
This commit is contained in:
JuliaSvinareva 2020-12-10 10:24:42 +03:00
parent 41bb73eb3e 1d93bbf63b
commit 0a77afc4bf
10 changed files with 152 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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