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

[DE mobile] Added Highlight Color page into edit text settings, fixed update of custom colors palette

Browse source
This commit is contained in:
JuliaSvinareva 2021-01-11 17:18:38 +03:00
parent d15e3ae6a9
commit a5b3dfd019
6 changed files with 106 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/documenteditor/mobile/src/controller/edit/EditText.jsx
View file

@ -45,6 +45,15 @@ class EditTextController extends Component {
api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
}
onBackgroundColor(color) {
const api = Common.EditorApi.get();
if (color == 'transparent') {
api.put_ParagraphShade(false);
} else {
api.put_ParagraphShade(true, Common.Utils.ThemeColor.getRgbColor(color));
}
}
toggleBold(value) {
const api = Common.EditorApi.get();
if (api) {
@ -188,6 +197,7 @@ class EditTextController extends Component {
changeFontFamily={this.changeFontFamily}
onTextColorAuto={this.onTextColorAuto}
onTextColor={this.onTextColor}
onBackgroundColor={this.onBackgroundColor}
toggleBold={this.toggleBold}
toggleItalic={this.toggleItalic}
toggleUnderline={this.toggleUnderline}

5
apps/documenteditor/mobile/src/css/icons-ios.less
View file

@ -165,6 +165,11 @@
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8.9,12l2.3-6.3l2.2,6.3H8.9z M4.7,17.8h2l1.6-4.3h5.6l1.5,4.3h2.1L12.3,3.5h-2.2L4.7,17.8z"/></g></svg>');
}
&.icon-text-selection {
width: 22px;
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M7.6,10.3c0.2,0.3,0.4,0.4,0.5,0.5c0.3,0.2,0.6,0.3,1,0.3c0.7,0,1.3-0.3,1.7-0.8c0.4-0.5,0.6-1.2,0.6-2.1c0-0.9-0.2-1.5-0.6-2c-0.4-0.4-0.9-0.7-1.6-0.7c-0.3,0-0.6,0.1-0.9,0.2C8,6,7.8,6.2,7.6,6.4V3.8H6.8V11h0.8V10.3z M8,6.9c0.3-0.3,0.7-0.4,1.1-0.4c0.5,0,0.8,0.2,1,0.5c0.2,0.4,0.4,0.8,0.4,1.4c0,0.6-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.6-1.1,0.6c-0.6,0-1.1-0.3-1.3-0.9C7.6,9.2,7.6,8.8,7.6,8.3C7.6,7.7,7.7,7.2,8,6.9z M5.7,10.4c-0.1,0-0.2,0-0.2-0.1c0-0.1-0.1-0.1-0.1-0.2v-3c0-0.5-0.2-0.9-0.6-1.1C4.4,5.8,4,5.6,3.3,5.6c-0.5,0-1,0.1-1.4,0.4C1.5,6.3,1.3,6.7,1.3,7.4h0.8c0-0.3,0.1-0.5,0.2-0.6c0.2-0.2,0.5-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.2c0.2,0.1,0.3,0.4,0.3,0.7c0,0.1,0,0.3-0.1,0.3C4.4,7.7,4.3,7.8,4.1,7.8L2.7,8C2.2,8.1,1.8,8.2,1.5,8.5C1.2,8.8,1,9.1,1,9.6c0,0.4,0.2,0.8,0.5,1.1c0.3,0.3,0.7,0.4,1.2,0.4c0.4,0,0.8-0.1,1.1-0.3c0.3-0.2,0.6-0.4,0.8-0.6c0,0.2,0.1,0.4,0.2,0.5c0.1,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1v-0.6c-0.1,0-0.1,0-0.2,0C5.8,10.4,5.7,10.4,5.7,10.4z M4.5,9.1c0,0.5-0.2,0.9-0.7,1.2c-0.3,0.1-0.6,0.2-0.9,0.2c-0.3,0-0.5-0.1-0.7-0.2C2,10.1,2,9.9,2,9.6C2,9.3,2.1,9,2.4,8.9c0.2-0.1,0.4-0.2,0.7-0.2l0.5-0.1c0.2,0,0.3-0.1,0.5-0.1c0.2,0,0.3-0.1,0.4-0.2V9.1z M18.5,5L8.3,15.3l-0.5,2c-0.6,0.4-1.3,0.3-1.5,0.6c-0.3,0.4,0.9,0.4,1.5,0.3c0.4,0,0.5,0,0.5-0.2l2.2-0.6L20.7,7.1L18.5,5z M9,15.3l9.5-9.5L20,7.1l-9.5,9.5L9,15.3z"/></g></svg>');
}
// Align
&.icon-text-align-left {
width: 22px;

4
apps/documenteditor/mobile/src/store/mainStore.js
View file

@ -11,6 +11,7 @@ import {storeChartSettings} from "./chartSettings";
import {storeDocumentInfo} from "./documentInfo";
import {storeApplicationSettings} from './applicationSettings';
import {storeAppOptions} from "./appOptions";
import {storePalette} from "./palette";
export const stores = {
storeAppOptions: new storeAppOptions(),
@ -24,6 +25,7 @@ export const stores = {
storeImageSettings: new storeImageSettings(),
storeTableSettings: new storeTableSettings(),
storeDocumentInfo: new storeDocumentInfo(),
storeApplicationSettings: new storeApplicationSettings()
storeApplicationSettings: new storeApplicationSettings(),
storePalette: new storePalette()
};

9
apps/documenteditor/mobile/src/store/palette.js Normal file
View file

@ -0,0 +1,9 @@
import {action, observable} from 'mobx';
export class storePalette {
@observable customColors = [];
@action changeCustomColors (colors) {
this.customColors = colors;
}
}

10
apps/documenteditor/mobile/src/view/edit/Edit.jsx
View file

@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
import EditHyperlinkController from "../../controller/edit/EditHyperlink";
import EditHeaderController from "../../controller/edit/EditHeader";
import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor} from "./EditText";
import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText";
import {PageAdvancedSettings} from "./EditParagraph";
import {PageWrap, PageReorder, PageReplace} from "./EditShape";
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
@ -51,6 +51,14 @@ const routes = [
path: '/edit-text-custom-font-color/',
component: PageTextCustomFontColor,
},
{
path: '/edit-text-background-color/',
component: PageTextBackgroundColor,
},
{
path: '/edit-text-custom-back-color/',
component: PageTextCustomBackColor,
},
//Edit paragraph
{
path: '/edit-paragraph-adv/',

80
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View file

@ -220,7 +220,7 @@ const PageCustomFontColor = props => {
}
const autoColor = textColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
const onAddNewColor = (colors, color) => {
props.storeTextSettings.changeCustomTextColors(colors);
props.storePalette.changeCustomColors(colors);
props.onTextColor(color);
props.f7router.back();
};
@ -235,9 +235,8 @@ const PageCustomFontColor = props => {
const PageFontColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const store = props.storeTextSettings;
const textColor = store.textColor;
const customColors = store.customTextColors;
const textColor = props.storeTextSettings.textColor;
const customColors = props.storePalette.customColors;
const changeColor = (color, effectId) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
@ -272,6 +271,56 @@ const PageFontColor = props => {
)
};
const PageCustomBackColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
let backgroundColor = props.storeTextSettings.backgroundColor;
if (typeof backgroundColor === 'object') {
backgroundColor = backgroundColor.color;
}
const onAddNewColor = (colors, color) => {
props.storePalette.changeCustomColors(colors);
props.onBackgroundColor(color);
props.f7router.back();
};
return(
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={backgroundColor} onAddNewColor={onAddNewColor}/>
</Page>
)
};
const PageBackgroundColor = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
const backgroundColor = props.storeTextSettings.backgroundColor;
const customColors = props.storePalette.customColors;
const changeColor = (color, effectId) => {
if (color !== 'empty') {
if (effectId !==undefined ) {
props.onBackgroundColor({color: color, effectId: effectId});
} else {
props.onBackgroundColor(color);
}
} else {
// open custom color menu
props.f7router.navigate('/edit-text-custom-back-color/');
}
};
return(
<Page>
<Navbar title={_t.textHighlightColor} backLink={_t.textBack} />
<ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-back-color/'} routeProps={{
onBackgroundColor: props.onBackgroundColor
}}></ListItem>
</List>
</Page>
)
};
const EditText = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
@ -279,6 +328,7 @@ const EditText = props => {
const fontName = storeTextSettings.fontName || t('Edit.textFonts');
const fontSize = storeTextSettings.fontSize;
const fontColor = storeTextSettings.textColor;
const backgroundColor = storeTextSettings.backgroundColor;
const displaySize = typeof fontSize === 'undefined' ? t('Edit.textAuto') : fontSize + ' ' + t('Edit.textPt');
const isBold = storeTextSettings.isBold;
const isItalic = storeTextSettings.isItalic;
@ -287,7 +337,7 @@ const EditText = props => {
const paragraphAlign = storeTextSettings.paragraphAlign;
const fontColorPreview = fontColor !== 'auto' ?
<span className="color-preview" style={{ background: `#${fontColor}`}}></span> :
<span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
<span className="color-preview auto"></span>;
return (
@ -314,8 +364,13 @@ const EditText = props => {
fontColorPreview
}
</ListItem>
<ListItem title={t("Edit.textHighlightColor")} link="#">
{!isAndroid && <Icon slot="media" icon="icon-text-selection"></Icon>}
<ListItem title={t("Edit.textHighlightColor")} link="/edit-text-background-color/" routeProps={{
onBackgroundColor: props.onBackgroundColor
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-text-selection"><span className="color-preview" style={{ background: `#${backgroundColor}`}}></span></Icon> :
<span className="color-preview" style={{ background: `#${(typeof backgroundColor === "object" ? backgroundColor.color : backgroundColor)}`}}></span>
}
</ListItem>
<ListItem title={t("Edit.textAdditionalFormatting")} link="/edit-text-add-formatting/" routeProps={{
onAdditionalStrikethrough: props.onAdditionalStrikethrough,
@ -379,8 +434,11 @@ const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(o
const PageTextBullets = inject("storeTextSettings")(observer(PageBullets));
const PageTextNumbers = inject("storeTextSettings")(observer(PageNumbers));
const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing));
const PageTextFontColor = inject("storeTextSettings")(observer(PageFontColor));
const PageTextCustomFontColor = inject("storeTextSettings")(observer(PageCustomFontColor));
const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor));
const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
const PageTextBackgroundColor = inject("storeTextSettings", "storePalette")(observer(PageBackgroundColor));
const PageTextCustomBackColor = inject("storeTextSettings", "storePalette")(observer(PageCustomBackColor));
export {
EditTextContainer as EditText,
@ -390,5 +448,7 @@ export {
PageTextNumbers,
PageTextLineSpacing,
PageTextFontColor,
PageTextCustomFontColor
PageTextCustomFontColor,
PageTextBackgroundColor,
PageTextCustomBackColor
};