[DE mobile] Added font color page (auto color, theme color, standart color)
This commit is contained in:
parent
122d4b16fe
commit
d43d9d61d2
|
@ -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}
|
||||||
|
|
|
@ -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/',
|
||||||
|
|
|
@ -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
|
||||||
|
};
|
Loading…
Reference in a new issue