[DE PE SSE] Add recent-fonts and fix style
This commit is contained in:
parent
c27d5bf9d9
commit
edf1d0f491
|
@ -1,7 +1,6 @@
|
|||
import {action, observable, computed, makeObservable} from 'mobx';
|
||||
import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
|
||||
|
||||
|
||||
export class storeTextSettings {
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue