[DE PE SSE] Add recent-fonts and fix style

This commit is contained in:
ShimaginAndrey 2021-08-02 18:40:17 +03:00
parent c27d5bf9d9
commit edf1d0f491
7 changed files with 92 additions and 9 deletions

View file

@ -1,7 +1,6 @@
import {action, observable, computed, makeObservable} from 'mobx';
import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
export class storeTextSettings {
constructor() {
makeObservable(this, {

View file

@ -15,6 +15,7 @@ const PageFonts = props => {
const curFontName = storeTextSettings.fontName;
const fonts = storeTextSettings.fontsArray;
const arrayFonts = storeTextSettings.arrayRecentFonts;
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
@ -57,18 +58,19 @@ const PageFonts = props => {
</div>
</ListItem>
</List>
<BlockTitle>{t('Edit.textFonts')}</BlockTitle>
<List>
{arrayFonts.map((item,index) => (
<ListItem
key={index}
link="#"
radio
checked={curFontName === item}
title={item}
style={{fontFamily: `${item}`}}
onClick={() => {storeTextSettings.changeFontFamily(item); props.changeFontFamily(item);}}
/>
))}
</List>
<BlockTitle>{t('Edit.textFonts')}</BlockTitle>
<List virtualList virtualListParams={{
items: fonts,
renderExternal: renderExternal

View file

@ -1,10 +1,12 @@
import {action, observable, computed, makeObservable} from 'mobx';
import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
export class storeTextSettings {
constructor() {
makeObservable(this, {
fontsArray: observable,
fontName: observable,
arrayRecentFonts:observable,
fontSize: observable,
isBold: observable,
isItalic: observable,
@ -40,11 +42,13 @@ export class storeTextSettings {
resetParagraphValign: action,
resetTextColor: action,
changeCustomTextColors: action,
resetLineSpacing: action
resetLineSpacing: action,
addFontToRecent:action
});
}
fontsArray = [];
arrayRecentFonts = [];
fontName = '';
fontSize = undefined;
isBold = false;
@ -81,6 +85,9 @@ export class storeTextSettings {
});
this.fontsArray = array;
this.arrayRecentFonts = LocalStorage.getItem('ppe-settings-recent-fonts');
this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : [];
}
resetFontName (font) {
@ -204,6 +211,20 @@ export class storeTextSettings {
this.customTextColors = colors;
}
addFontToRecent (font) {
this.arrayRecentFonts.forEach(item => {
if (item === font) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
})
this.arrayRecentFonts.unshift(font);
if (this.arrayRecentFonts.length > 5) this.arrayRecentFonts.splice(4,1);
let arr = [];
this.arrayRecentFonts.forEach(item => arr.push(item));
arr = arr.join(';');
LocalStorage.setItem('ppe-settings-recent-fonts', arr);
}
resetLineSpacing (vc) {
let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
this.lineSpacing = line;

View file

@ -185,6 +185,7 @@ const PageFonts = props => {
const displaySize = typeof size === 'undefined' || size == '' ? _t.textAuto : size + ' ' + _t.textPt;
const curFontName = storeTextSettings.fontName;
const fonts = storeTextSettings.fontsArray;
const arrayFonts = storeTextSettings.arrayRecentFonts;
const [vlFonts, setVlFonts] = useState({
vlData: {
@ -236,6 +237,18 @@ const PageFonts = props => {
</ListItem>
</List>
<BlockTitle>{_t.textFonts}</BlockTitle>
<List>
{arrayFonts.map((item,index) => (
<ListItem
key={index}
radio
checked={curFontName === item}
title={item}
style={{fontFamily: `${item}`}}
onClick={() => {props.changeFontFamily(item)}}
/>
))}
</List>
<List virtualList virtualListParams={{
items: fonts,
renderExternal: renderExternal
@ -248,7 +261,7 @@ const PageFonts = props => {
checked={curFontName === item.name}
title={item.name}
style={{fontFamily: `${item.name}`}}
onClick={() => {props.changeFontFamily(item.name)}}
onClick={() => {props.changeFontFamily(item.name); storeTextSettings.addFontToRecent(item.name)}}
></ListItem>
))}
</ul>

View file

@ -1,4 +1,5 @@
import {action, observable, makeObservable, computed} from 'mobx';
import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
export class storeTextSettings {
constructor() {
@ -6,6 +7,7 @@ export class storeTextSettings {
fontsArray: observable,
fontInfo: observable,
fontName: observable,
arrayRecentFonts:observable,
fontSize: observable,
isBold: observable,
isItalic: observable,
@ -20,11 +22,13 @@ export class storeTextSettings {
initEditorFonts: action,
initFontInfo: action,
changeTextColor: action,
changeCustomTextColors: action
changeCustomTextColors: action,
addFontToRecent:action
});
}
fontsArray = [];
arrayRecentFonts = [];
fontInfo = {};
fontName = '';
fontSize = undefined;
@ -84,12 +88,29 @@ export class storeTextSettings {
});
this.fontsArray = array;
this.arrayRecentFonts = LocalStorage.getItem('sse-settings-recent-fonts');
this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : [];
}
initFontInfo(fontObj) {
this.fontInfo = fontObj;
}
addFontToRecent (font) {
this.arrayRecentFonts.forEach(item => {
if (item === font) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
})
this.arrayRecentFonts.unshift(font);
if (this.arrayRecentFonts.length > 5) this.arrayRecentFonts.splice(4,1);
let arr = [];
this.arrayRecentFonts.forEach(item => arr.push(item));
arr = arr.join(';');
LocalStorage.setItem('sse-settings-recent-fonts', arr);
}
changeTextColor(value) {
this.textColor = value;
}

View file

@ -119,12 +119,14 @@ const PageFontsCell = props => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeTextSettings = props.storeTextSettings;
const storeCellSettings = props.storeCellSettings;
const fontInfo = storeCellSettings.fontInfo;
const size = fontInfo.size;
const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
const curFontName = fontInfo.name;
const fonts = storeCellSettings.fontsArray;
const arrayFonts = storeTextSettings.arrayRecentFonts;
const [vlFonts, setVlFonts] = useState({
vlData: {
@ -174,6 +176,18 @@ const PageFontsCell = props => {
</ListItem>
</List>
<BlockTitle>{_t.textFonts}</BlockTitle>
<List>
{arrayFonts.map((item,index) => (
<ListItem
key={index}
radio
checked={curFontName === item}
title={item}
style={{fontFamily: `${item}`}}
onClick={() => {props.onFontClick(item)}}
/>
))}
</List>
<List virtualList virtualListParams={{
items: fonts,
renderExternal: renderExternal
@ -186,7 +200,7 @@ const PageFontsCell = props => {
checked={curFontName === item.name}
title={item.name}
style={{fontFamily: `${item.name}`}}
onClick={() => {props.onFontClick(item.name)}}
onClick={() => {props.onFontClick(item.name); storeTextSettings.addFontToRecent(item.name)}}
></ListItem>
))}
</ul>
@ -932,7 +946,7 @@ const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObj
const FillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageFillColorCell));
const CustomTextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomTextColorCell));
const CustomFillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomFillColorCell));
const FontsCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageFontsCell));
const FontsCell = inject("storeCellSettings", "storeTextSettings" , "storeFocusObjects")(observer(PageFontsCell));
const TextFormatCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageTextFormatCell));
const TextOrientationCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageTextOrientationCell));
const BorderStyleCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageBorderStyleCell));

View file

@ -98,6 +98,7 @@ const PageFonts = props => {
const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
const curFontName = storeTextSettings.fontName;
const fonts = storeTextSettings.fontsArray;
const arrayFonts = storeTextSettings.arrayRecentFonts;
const [vlFonts, setVlFonts] = useState({
vlData: {
@ -141,6 +142,18 @@ const PageFonts = props => {
</ListItem>
</List>
<BlockTitle>{_t.textFonts}</BlockTitle>
<List>
{arrayFonts.map((item,index) => (
<ListItem
key={index}
radio
checked={curFontName === item}
title={item}
style={{fontFamily: `${item}`}}
onClick={() => {props.changeFontFamily(item)}}
/>
))}
</List>
<List virtualList virtualListParams={{
items: fonts,
renderExternal: renderExternal
@ -153,7 +166,7 @@ const PageFonts = props => {
checked={curFontName === item.name}
title={item.name}
style={{fontFamily: `${item.name}`}}
onClick={() => {props.changeFontFamily(item.name)}}
onClick={() => {props.changeFontFamily(item.name); storeTextSettings.addFontToRecent(item.name)}}
></ListItem>
))}
</ul>