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

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

Browse source 
Feature/add recent fonts
This commit is contained in:
JuliaSvinareva 2021-08-13 19:12:46 +03:00 committed by GitHub
parent 4bb198d1f9 952fba59ba
commit ba17707ea6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 170 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/documenteditor/mobile/src/controller/Main.jsx
View file

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

21
apps/documenteditor/mobile/src/store/textSettings.js
View file

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

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

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

1
apps/presentationeditor/mobile/src/controller/Main.jsx
View file

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

20
apps/presentationeditor/mobile/src/store/textSettings.js
View file

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

26
apps/presentationeditor/mobile/src/view/edit/EditText.jsx
View file

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

5
apps/spreadsheeteditor/mobile/src/controller/Main.jsx
View file

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

20
apps/spreadsheeteditor/mobile/src/store/textSettings.js
View file

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

29
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View file

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

26
apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
View file

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