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

apps/documenteditor/mobile/src/store/textSettings.js

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

apps/documenteditor/mobile/src/view/edit/EditText.jsx

@@ -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

apps/presentationeditor/mobile/src/store/textSettings.js

@@ -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;

apps/presentationeditor/mobile/src/view/edit/EditText.jsx

@@ -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>

apps/spreadsheeteditor/mobile/src/store/textSettings.js

@@ -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;
     }

apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx

@@ -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));

apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx

@@ -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>