[DE mobile] Added font color page (auto color, theme color, standart color)

This commit is contained in:
JuliaSvinareva 2020-12-23 21:02:52 +03:00
parent 122d4b16fe
commit d43d9d61d2
3 changed files with 58 additions and 8 deletions

View file

@ -33,6 +33,13 @@ class EditTextController extends Component {
} }
} }
onTextColorAuto() {
const api = Common.EditorApi.get();
const color = new Asc.asc_CColor();
color.put_auto(true);
api.put_TextColor(color);
}
toggleBold(value) { toggleBold(value) {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if (api) { if (api) {
@ -174,6 +181,7 @@ class EditTextController extends Component {
return ( return (
<EditText changeFontSize={this.changeFontSize} <EditText changeFontSize={this.changeFontSize}
changeFontFamily={this.changeFontFamily} changeFontFamily={this.changeFontFamily}
onTextColorAuto={this.onTextColorAuto}
toggleBold={this.toggleBold} toggleBold={this.toggleBold}
toggleItalic={this.toggleItalic} toggleItalic={this.toggleItalic}
toggleUnderline={this.toggleUnderline} toggleUnderline={this.toggleUnderline}

View file

@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
import EditHyperlinkController from "../../controller/edit/EditHyperlink"; import EditHyperlinkController from "../../controller/edit/EditHyperlink";
import EditHeaderController from "../../controller/edit/EditHeader"; import EditHeaderController from "../../controller/edit/EditHeader";
import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers} from "./EditText"; import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers, PageFontColor} from "./EditText";
import {PageAdvancedSettings} from "./EditParagraph"; import {PageAdvancedSettings} from "./EditParagraph";
import {PageWrap, PageReorder, PageReplace} from "./EditShape"; import {PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage"; import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
@ -43,6 +43,10 @@ const routes = [
path: '/edit-text-line-spacing/', path: '/edit-text-line-spacing/',
component: PageLineSpacing, component: PageLineSpacing,
}, },
{
path: '/edit-text-font-color/',
component: PageFontColor,
},
//Edit paragraph //Edit paragraph
{ {
path: '/edit-paragraph-adv/', path: '/edit-paragraph-adv/',

View file

@ -4,6 +4,8 @@ import {List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle}
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device'; import {Device} from '../../../../../common/mobile/utils/device';
import ThemeColorPalette from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
const PageFonts = props => { const PageFonts = props => {
const isAndroid = Device.android; const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
@ -208,6 +210,37 @@ const PageLineSpacing = props => {
) )
}; };
const PageFontColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const [stateColor, setColor] = useState();
const changeCurColor = (color) => {
setColor(color);
};
const onAddCustomColor = () => {
console.log('add custom color');
};
return(
<Page>
<Navbar title={_t.textFontColors} backLink={_t.textBack} />
<List>
<ListItem className={'font-color-auto' + (stateColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => {
props.onTextColorAuto();
setColor('auto');
}}>
<div slot="media">
<div className={'color-auto'}></div>
</div>
</ListItem>
</List>
<ThemeColorPalette changeCurColor={changeCurColor} curColor={stateColor}/>
<List>
<ListItem title={_t.textAddCustomColor} onClick={() => {onAddCustomColor()}}></ListItem>
</List>
</Page>
)
};
const EditText = props => { const EditText = props => {
const isAndroid = Device.android; const isAndroid = Device.android;
const { t } = useTranslation(); const { t } = useTranslation();
@ -235,7 +268,9 @@ const EditText = props => {
<a className={'button' + (isStrikethrough ? ' active' : '')} onClick={() => {props.toggleStrikethrough(!isStrikethrough)}} style={{textDecoration: "line-through"}}>S</a> <a className={'button' + (isStrikethrough ? ' active' : '')} onClick={() => {props.toggleStrikethrough(!isStrikethrough)}} style={{textDecoration: "line-through"}}>S</a>
</Row> </Row>
</ListItem> </ListItem>
<ListItem title={t("Edit.textFontColor")} link="#"> <ListItem title={t("Edit.textFontColor")} link="/edit-text-font-color/" routeProps={{
onTextColorAuto: props.onTextColorAuto
}}>
{!isAndroid && <Icon slot="media" icon="icon-text-color"></Icon>} {!isAndroid && <Icon slot="media" icon="icon-text-color"></Icon>}
<span className="color-preview"></span> <span className="color-preview"></span>
</ListItem> </ListItem>
@ -305,9 +340,12 @@ const PageBulletsContainer = inject("storeTextSettings")(observer(PageBullets));
const PageNumbersContainer = inject("storeTextSettings")(observer(PageNumbers)); const PageNumbersContainer = inject("storeTextSettings")(observer(PageNumbers));
const PageLineSpacingContainer = inject("storeTextSettings")(observer(PageLineSpacing)); const PageLineSpacingContainer = inject("storeTextSettings")(observer(PageLineSpacing));
export {EditTextContainer as EditText, export {
PageFontsContainer as PageFonts, EditTextContainer as EditText,
PageAddFormattingContainer as PageAdditionalFormatting, PageFontsContainer as PageFonts,
PageBulletsContainer as PageBullets, PageAddFormattingContainer as PageAdditionalFormatting,
PageNumbersContainer as PageNumbers, PageBulletsContainer as PageBullets,
PageLineSpacingContainer as PageLineSpacing}; PageNumbersContainer as PageNumbers,
PageLineSpacingContainer as PageLineSpacing,
PageFontColor
};