Merge pull request #1066 from ONLYOFFICE/feature/add-recent-fonts

Feature/add recent fonts

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -536,6 +536,8 @@ class MainController extends Component {
 
         //text settings
         const storeTextSettings = this.props.storeTextSettings;
+        storeTextSettings.resetFontsRecent(LocalStorage.getItem('dde-settings-recent-fonts'));
+
         EditorUIController.initFonts && EditorUIController.initFonts(storeTextSettings);
         EditorUIController.initFocusObjects && EditorUIController.initFocusObjects(this.props.storeFocusObjects);
 

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

@@ -5,6 +5,7 @@ export class storeTextSettings {
         makeObservable(this, {
             fontsArray: observable,
             fontName: observable,
+            arrayRecentFonts:observable,
             fontSize: observable,
             isBold: observable,
             isItalic: observable,
@@ -22,6 +23,7 @@ export class storeTextSettings {
             backgroundColor: observable,
             initEditorFonts: action,
             resetFontName: action,
+            resetFontsRecent:action,
             resetFontSize: action,
             resetIsBold: action,
             resetIsItalic: action,
@@ -39,11 +41,13 @@ export class storeTextSettings {
             changeCustomTextColors: action,
             resetLineSpacing: action,
             resetBackgroundColor: action,
-            changeFontFamily: action
+            changeFontFamily: action,
+            addFontToRecent:action
         });
     }
 
     fontsArray = [];
+    arrayRecentFonts = [];
     fontName = '';
     fontSize = undefined;
     isBold = false;
@@ -85,6 +89,12 @@ export class storeTextSettings {
         let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName();
         this.fontName = name;
     }
+
+    resetFontsRecent(fonts) {
+        this.arrayRecentFonts = fonts;
+        this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : [];
+    }
+
     resetFontSize (size) {
         this.fontSize = size;
     }
@@ -173,6 +183,15 @@ export class storeTextSettings {
         this.fontName = name;
     }
 
+    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);
+    }
+
     resetLineSpacing (vc) {
         let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
         this.lineSpacing = line;

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

@@ -3,8 +3,8 @@ import {observer, inject} from "mobx-react";
 import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
-
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
 
 const PageFonts = props => {
     const isAndroid = Device.android;
@@ -14,11 +14,21 @@ const PageFonts = props => {
     const displaySize = typeof size === 'undefined' ? t('Edit.textAuto') : size + ' ' + t('Edit.textPt');
     const curFontName = storeTextSettings.fontName;
     const fonts = storeTextSettings.fontsArray;
+    const arrayFonts = storeTextSettings.arrayRecentFonts;
+
+    const addRecentStorage = () => {
+        let arr = [];
+        arrayFonts.forEach(item => arr.push(item));
+        arr = arr.join(';');
+        LocalStorage.setItem('dde-settings-recent-fonts', arr);
+    }
+    
     const [vlFonts, setVlFonts] = useState({
         vlData: {
             items: [],
         }
     });
+
     const renderExternal = (vl, vlData) => {
         setVlFonts((prevState) => {
             let fonts = [...prevState.vlData.items];
@@ -57,6 +67,20 @@ const PageFonts = props => {
                 </ListItem>
             </List>
             <BlockTitle>{t('Edit.textFonts')}</BlockTitle>
+            {!!arrayFonts.length &&
+                <List>
+                    {arrayFonts.map((item,index) => (
+                        <ListItem
+                            key={index}
+                            radio
+                            checked={curFontName === item}
+                            title={item}
+                            style={{fontFamily: `${item}`}}
+                            onClick={() => {storeTextSettings.changeFontFamily(item); props.changeFontFamily(item);}}
+                        /> 
+                    ))}
+                </List>
+            }
             <List virtualList virtualListParams={{
                 items: fonts,
                 renderExternal: renderExternal
@@ -69,7 +93,8 @@ const PageFonts = props => {
                             checked={curFontName === item.name}
                             title={item.name}
                             style={{fontFamily: `${item.name}`}}
-                            onClick={() => {storeTextSettings.changeFontFamily(item.name); props.changeFontFamily(item.name)}}
+                            onClick={() => {storeTextSettings.changeFontFamily(item.name); props.changeFontFamily(item.name);
+                                storeTextSettings.addFontToRecent(item.name); addRecentStorage()}}
                         ></ListItem>
                     ))}
                 </ul>

apps/presentationeditor/mobile/src/controller/Main.jsx

@@ -325,6 +325,7 @@ class MainController extends Component {
         // Text settings 
 
         const storeTextSettings = this.props.storeTextSettings;
+        storeTextSettings.resetFontsRecent(LocalStorage.getItem('ppe-settings-recent-fonts'));
 
         EditorUIController.initFonts && EditorUIController.initFonts(storeTextSettings);
 

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

@@ -5,6 +5,7 @@ export class storeTextSettings {
         makeObservable(this, {
             fontsArray: observable,
             fontName: observable,
+            arrayRecentFonts:observable,
             fontSize: observable,
             isBold: observable,
             isItalic: observable,
@@ -23,6 +24,7 @@ export class storeTextSettings {
             lineSpacing: observable,
             initEditorFonts: action,
             resetFontName: action,
+            resetFontsRecent:action,
             resetFontSize: action,
             resetIsBold: action,
             resetIsItalic: action,
@@ -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;
@@ -88,6 +92,11 @@ export class storeTextSettings {
         this.fontName = name;
     }
 
+    resetFontsRecent(fonts) {
+        this.arrayRecentFonts = fonts;
+        this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : [];
+    }
+
     resetFontSize (size) {
         this.fontSize = size;
     }
@@ -204,6 +213,15 @@ 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);
+    }
+
     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

@@ -4,6 +4,7 @@ import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row,  Button, Page,
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
 
 const EditText = props => {
     const isAndroid = Device.android;
@@ -185,6 +186,14 @@ 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 addRecentStorage = () => {
+        let arr = [];
+        arrayFonts.forEach(item => arr.push(item));
+        arr = arr.join(';');
+        LocalStorage.setItem('ppe-settings-recent-fonts', arr);
+    }
 
     const [vlFonts, setVlFonts] = useState({
         vlData: {
@@ -236,6 +245,20 @@ const PageFonts = props => {
                 </ListItem>
             </List>
             <BlockTitle>{_t.textFonts}</BlockTitle>
+            {!!arrayFonts.length &&
+                <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 +271,8 @@ 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);
+                                addRecentStorage()}}
                         ></ListItem>
                     ))}
                 </ul>

apps/spreadsheeteditor/mobile/src/controller/Main.jsx

@@ -348,6 +348,11 @@ class MainController extends Component {
         const styleSize = this.props.storeCellSettings.styleSize;
         this.api.asc_setThumbnailStylesSizes(styleSize.width, styleSize.height);
 
+        // Text settings 
+
+        const storeTextSettings = this.props.storeTextSettings;
+        storeTextSettings.resetFontsRecent(LocalStorage.getItem('sse-settings-recent-fonts'));
+
         // Spreadsheet Settings
 
         this.api.asc_registerCallback('asc_onSendThemeColorSchemes', schemes => {

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

@@ -6,6 +6,7 @@ export class storeTextSettings {
             fontsArray: observable,
             fontInfo: observable,
             fontName: observable,
+            arrayRecentFonts:observable,
             fontSize: observable,
             isBold: observable,
             isItalic: observable,
@@ -15,16 +16,19 @@ export class storeTextSettings {
             paragraphAlign: observable,
             paragraphValign: observable,
             textIn: observable,
+            resetFontsRecent:action,
             initTextSettings: action,
             initFontSettings: action,
             initEditorFonts: action,
             initFontInfo: action,
             changeTextColor: action,
-            changeCustomTextColors: action
+            changeCustomTextColors: action,
+            addFontToRecent:action
         });
     }
     
     fontsArray = [];
+    arrayRecentFonts = [];
     fontInfo = {};
     fontName = '';
     fontSize = undefined;
@@ -90,6 +94,15 @@ export class storeTextSettings {
         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);
+    }
+
     changeTextColor(value) {
         this.textColor = value;
     }
@@ -115,6 +128,11 @@ export class storeTextSettings {
         return value;
     }
 
+    resetFontsRecent(fonts) {
+        this.arrayRecentFonts = fonts;
+        this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : [];
+    }
+
     changeCustomTextColors (colors) {
         this.customTextColors = colors;
     }

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

@@ -4,6 +4,7 @@ import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTit
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
 
 const EditCell = props => {
     const isAndroid = Device.android;
@@ -119,12 +120,21 @@ 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 addRecentStorage = () => {
+        let arr = [];
+        arrayFonts.forEach(item => arr.push(item));
+        arr = arr.join(';');
+        LocalStorage.setItem('sse-settings-recent-fonts', arr);
+    }
 
     const [vlFonts, setVlFonts] = useState({
         vlData: {
@@ -174,6 +184,20 @@ const PageFontsCell = props => {
                 </ListItem>
             </List>
             <BlockTitle>{_t.textFonts}</BlockTitle>
+            {!!arrayFonts.length &&
+                <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 +210,8 @@ 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);
+                                addRecentStorage()}}
                         ></ListItem>
                     ))}
                 </ul>
@@ -932,7 +957,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

@@ -4,6 +4,7 @@ import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
 
 const EditText = props => {
     const isAndroid = Device.android;
@@ -98,6 +99,14 @@ 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 addRecentStorage = () => {
+        let arr = [];
+        arrayFonts.forEach(item => arr.push(item));
+        arr = arr.join(';');
+        LocalStorage.setItem('sse-settings-recent-fonts', arr);
+    }
 
     const [vlFonts, setVlFonts] = useState({
         vlData: {
@@ -141,6 +150,20 @@ const PageFonts = props => {
                 </ListItem>
             </List>
             <BlockTitle>{_t.textFonts}</BlockTitle>
+            {!!arrayFonts.length &&
+                <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 +176,8 @@ 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);
+                                addRecentStorage()}}
                         ></ListItem>
                     ))}
                 </ul>