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

Merge pull request #1094 from ONLYOFFICE/feature/Bug_47900

Browse source 
Feature/bug 47900
This commit is contained in:
maxkadushkin 2021-08-26 14:33:58 +03:00 committed by GitHub
parent ca4f5cb820 0bcadfc32c
commit f1e8c9cc24
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 344 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/common/mobile/resources/less/common-ios.less
View file

@ -580,6 +580,14 @@
-ms-appearance: none; -ms-appearance: none;
appearance: none; appearance: none;
} }
// Fonts List
.font-item {
.item-content {
padding-left: 0;
}
}
} }

8
apps/common/mobile/resources/less/common-material.less
View file

@ -555,4 +555,12 @@
} }
} }
} }
// Fonts List
.font-item {
.item-radio:not(.item-radio-icon-end) > .icon-radio {
margin-right: 0;
}
}
} }

11
apps/common/mobile/resources/less/common.less
View file

@ -860,6 +860,17 @@ input[type="number"]::-webkit-inner-spin-button {
box-shadow: inset 0 2px red; box-shadow: inset 0 2px red;
} }
// Fonts List
.font-item {
.item-inner {
overflow: hidden;
&:after {
left: 16px;
}
}
}

39
apps/documenteditor/mobile/src/controller/edit/EditText.jsx
View file

@ -198,25 +198,26 @@ class EditTextController extends Component {
render() { render() {
return ( return (
<EditText changeFontSize={this.changeFontSize} <EditText
changeFontFamily={this.changeFontFamily} changeFontSize={this.changeFontSize}
onTextColorAuto={this.onTextColorAuto} changeFontFamily={this.changeFontFamily}
onTextColor={this.onTextColor} onTextColorAuto={this.onTextColorAuto}
onBackgroundColor={this.onBackgroundColor} onTextColor={this.onTextColor}
toggleBold={this.toggleBold} onBackgroundColor={this.onBackgroundColor}
toggleItalic={this.toggleItalic} toggleBold={this.toggleBold}
toggleUnderline={this.toggleUnderline} toggleItalic={this.toggleItalic}
toggleStrikethrough={this.toggleStrikethrough} toggleUnderline={this.toggleUnderline}
onAdditionalStrikethrough={this.onAdditionalStrikethrough} toggleStrikethrough={this.toggleStrikethrough}
onAdditionalCaps={this.onAdditionalCaps} onAdditionalStrikethrough={this.onAdditionalStrikethrough}
onAdditionalScript={this.onAdditionalScript} onAdditionalCaps={this.onAdditionalCaps}
changeLetterSpacing={this.changeLetterSpacing} onAdditionalScript={this.onAdditionalScript}
onParagraphAlign={this.onParagraphAlign} changeLetterSpacing={this.changeLetterSpacing}
onParagraphMove={this.onParagraphMove} onParagraphAlign={this.onParagraphAlign}
onBullet={this.onBullet} onParagraphMove={this.onParagraphMove}
onNumber={this.onNumber} onBullet={this.onBullet}
onMultiLevelList={this.onMultiLevelList} onNumber={this.onNumber}
onLineSpacing={this.onLineSpacing} onMultiLevelList={this.onMultiLevelList}
onLineSpacing={this.onLineSpacing}
/> />
) )
} }

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

@ -42,10 +42,27 @@ export class storeTextSettings {
resetLineSpacing: action, resetLineSpacing: action,
resetBackgroundColor: action, resetBackgroundColor: action,
changeFontFamily: action, changeFontFamily: action,
iconWidth: observable,
iconHeight: observable,
thumbCanvas: observable,
thumbContext: observable,
thumbs: observable,
thumbIdx: observable,
listItemHeight: observable,
spriteCols: observable,
loadSprite: action,
addFontToRecent:action addFontToRecent:action
}); });
} }
iconWidth;
iconHeight;
thumbCanvas;
thumbContext;
thumbs;
thumbIdx = 0;
listItemHeight = 28;
spriteCols = 1;
fontsArray = []; fontsArray = [];
arrayRecentFonts = []; arrayRecentFonts = [];
fontName = ''; fontName = '';
@ -84,7 +101,44 @@ export class storeTextSettings {
}); });
this.fontsArray = array; this.fontsArray = array;
this.iconWidth = 300;
this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
this.thumbCanvas = document.createElement('canvas');
this.thumbContext = this.thumbCanvas.getContext('2d');
this.thumbs = [
{ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
{ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
{ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
{ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
{ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
];
const applicationPixelRatio = Common.Utils.applicationPixelRatio();
let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
let currentDistance = 0;
for (let i = 1; i < this.thumbs.length; i++) {
currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
if (currentDistance < (bestDistance - 0.0001))
{
bestDistance = currentDistance;
this.thumbIdx = i;
}
}
this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
this.loadSprite();
} }
loadSprite() {
this.spriteThumbs = new Image();
this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
}
resetFontName (font) { resetFontName (font) {
let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName(); let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName();
this.fontName = name; this.fontName = name;
@ -92,7 +146,7 @@ export class storeTextSettings {
resetFontsRecent(fonts) { resetFontsRecent(fonts) {
this.arrayRecentFonts = fonts; this.arrayRecentFonts = fonts;
this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : []; this.arrayRecentFonts = this.arrayRecentFonts ? JSON.parse(this.arrayRecentFonts) : [];
} }
resetFontSize (size) { resetFontSize (size) {
@ -185,7 +239,7 @@ export class storeTextSettings {
addFontToRecent (font) { addFontToRecent (font) {
this.arrayRecentFonts.forEach(item => { this.arrayRecentFonts.forEach(item => {
if (item === font) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1); if (item.name === font.name) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
}) })
this.arrayRecentFonts.unshift(font); this.arrayRecentFonts.unshift(font);

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

@ -14,13 +14,20 @@ const PageFonts = props => {
const displaySize = typeof size === 'undefined' ? t('Edit.textAuto') : size + ' ' + t('Edit.textPt'); const displaySize = typeof size === 'undefined' ? t('Edit.textAuto') : size + ' ' + t('Edit.textPt');
const curFontName = storeTextSettings.fontName; const curFontName = storeTextSettings.fontName;
const fonts = storeTextSettings.fontsArray; const fonts = storeTextSettings.fontsArray;
const arrayFonts = storeTextSettings.arrayRecentFonts; const iconWidth = storeTextSettings.iconWidth;
const iconHeight = storeTextSettings.iconHeight;
const thumbs = storeTextSettings.thumbs;
const thumbIdx = storeTextSettings.thumbIdx;
const thumbCanvas = storeTextSettings.thumbCanvas;
const thumbContext = storeTextSettings.thumbContext;
const spriteCols = storeTextSettings.spriteCols;
const spriteThumbs = storeTextSettings.spriteThumbs;
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
const addRecentStorage = () => { const addRecentStorage = () => {
let arr = []; let arr = [];
arrayFonts.forEach(item => arr.push(item)); arrayRecentFonts.forEach(item => arr.push(item));
arr = arr.join(';'); LocalStorage.setItem('dde-settings-recent-fonts', JSON.stringify(arr));
LocalStorage.setItem('dde-settings-recent-fonts', arr);
} }
const [vlFonts, setVlFonts] = useState({ const [vlFonts, setVlFonts] = useState({
@ -39,6 +46,13 @@ const PageFonts = props => {
}); });
}; };
const getImageUri = (font) => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
}
return ( return (
<Page> <Page>
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')}> <Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')}>
@ -67,17 +81,15 @@ const PageFonts = props => {
</ListItem> </ListItem>
</List> </List>
<BlockTitle>{t('Edit.textFonts')}</BlockTitle> <BlockTitle>{t('Edit.textFonts')}</BlockTitle>
{!!arrayFonts.length && {!!arrayRecentFonts.length &&
<List> <List>
{arrayFonts.map((item,index) => ( {arrayRecentFonts.map((item, index) => (
<ListItem <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
key={index} storeTextSettings.changeFontFamily(item.name);
radio props.changeFontFamily(item.name);
checked={curFontName === item} }}>
title={item} <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
style={{fontFamily: `${item}`}} </ListItem>
onClick={() => {storeTextSettings.changeFontFamily(item); props.changeFontFamily(item);}}
/>
))} ))}
</List> </List>
} }
@ -87,15 +99,14 @@ const PageFonts = props => {
}}> }}>
<ul> <ul>
{vlFonts.vlData.items.map((item, index) => ( {vlFonts.vlData.items.map((item, index) => (
<ListItem <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
key={index} storeTextSettings.changeFontFamily(item.name);
radio props.changeFontFamily(item.name);
checked={curFontName === item.name} storeTextSettings.addFontToRecent(item);
title={item.name} addRecentStorage();
style={{fontFamily: `${item.name}`}} }}>
onClick={() => {storeTextSettings.changeFontFamily(item.name); props.changeFontFamily(item.name); <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
storeTextSettings.addFontToRecent(item.name); addRecentStorage()}} </ListItem>
></ListItem>
))} ))}
</ul> </ul>
</List> </List>

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

@ -43,10 +43,27 @@ export class storeTextSettings {
resetTextColor: action, resetTextColor: action,
changeCustomTextColors: action, changeCustomTextColors: action,
resetLineSpacing: action, resetLineSpacing: action,
iconWidth: observable,
iconHeight: observable,
thumbCanvas: observable,
thumbContext: observable,
thumbs: observable,
thumbIdx: observable,
listItemHeight: observable,
spriteCols: observable,
loadSprite: action,
addFontToRecent:action addFontToRecent:action
}); });
} }
iconWidth;
iconHeight;
thumbCanvas;
thumbContext;
thumbs;
thumbIdx = 0;
listItemHeight = 28;
spriteCols = 1;
fontsArray = []; fontsArray = [];
arrayRecentFonts = []; arrayRecentFonts = [];
fontName = ''; fontName = '';
@ -85,6 +102,42 @@ export class storeTextSettings {
}); });
this.fontsArray = array; this.fontsArray = array;
this.iconWidth = 300;
this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
this.thumbCanvas = document.createElement('canvas');
this.thumbContext = this.thumbCanvas.getContext('2d');
this.thumbs = [
{ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
{ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
{ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
{ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
{ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
];
const applicationPixelRatio = Common.Utils.applicationPixelRatio();
let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
let currentDistance = 0;
for (let i = 1; i < this.thumbs.length; i++) {
currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
if (currentDistance < (bestDistance - 0.0001))
{
bestDistance = currentDistance;
this.thumbIdx = i;
}
}
this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
this.loadSprite();
}
loadSprite() {
this.spriteThumbs = new Image();
this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
} }
resetFontName (font) { resetFontName (font) {
@ -94,7 +147,7 @@ export class storeTextSettings {
resetFontsRecent(fonts) { resetFontsRecent(fonts) {
this.arrayRecentFonts = fonts; this.arrayRecentFonts = fonts;
this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : []; this.arrayRecentFonts = this.arrayRecentFonts ? JSON.parse(this.arrayRecentFonts) : [];
} }
resetFontSize (size) { resetFontSize (size) {
@ -215,7 +268,7 @@ export class storeTextSettings {
addFontToRecent (font) { addFontToRecent (font) {
this.arrayRecentFonts.forEach(item => { this.arrayRecentFonts.forEach(item => {
if (item === font) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1); if (item.name === font.name) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
}) })
this.arrayRecentFonts.unshift(font); this.arrayRecentFonts.unshift(font);

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

@ -186,13 +186,20 @@ const PageFonts = props => {
const displaySize = typeof size === 'undefined' || size == '' ? _t.textAuto : size + ' ' + _t.textPt; const displaySize = typeof size === 'undefined' || size == '' ? _t.textAuto : size + ' ' + _t.textPt;
const curFontName = storeTextSettings.fontName; const curFontName = storeTextSettings.fontName;
const fonts = storeTextSettings.fontsArray; const fonts = storeTextSettings.fontsArray;
const arrayFonts = storeTextSettings.arrayRecentFonts; const iconWidth = storeTextSettings.iconWidth;
const iconHeight = storeTextSettings.iconHeight;
const thumbs = storeTextSettings.thumbs;
const thumbIdx = storeTextSettings.thumbIdx;
const thumbCanvas = storeTextSettings.thumbCanvas;
const thumbContext = storeTextSettings.thumbContext;
const spriteCols = storeTextSettings.spriteCols;
const spriteThumbs = storeTextSettings.spriteThumbs;
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
const addRecentStorage = () => { const addRecentStorage = () => {
let arr = []; let arr = [];
arrayFonts.forEach(item => arr.push(item)); arrayRecentFonts.forEach(item => arr.push(item));
arr = arr.join(';'); LocalStorage.setItem('ppe-settings-recent-fonts', JSON.stringify(arr));
LocalStorage.setItem('ppe-settings-recent-fonts', arr);
} }
const [vlFonts, setVlFonts] = useState({ const [vlFonts, setVlFonts] = useState({
@ -211,6 +218,13 @@ const PageFonts = props => {
}); });
}; };
const getImageUri = (font) => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
}
const paragraph = props.storeFocusObjects.paragraphObject; const paragraph = props.storeFocusObjects.paragraphObject;
if (!paragraph && Device.phone) { if (!paragraph && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -245,17 +259,14 @@ const PageFonts = props => {
</ListItem> </ListItem>
</List> </List>
<BlockTitle>{_t.textFonts}</BlockTitle> <BlockTitle>{_t.textFonts}</BlockTitle>
{!!arrayFonts.length && {!!arrayRecentFonts.length &&
<List> <List>
{arrayFonts.map((item,index) => ( {arrayRecentFonts.map((item, index) => (
<ListItem <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
key={index} props.changeFontFamily(item.name);
radio }}>
checked={curFontName === item} <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
title={item} </ListItem>
style={{fontFamily: `${item}`}}
onClick={() => {props.changeFontFamily(item)}}
/>
))} ))}
</List> </List>
} }
@ -265,15 +276,13 @@ const PageFonts = props => {
}}> }}>
<ul> <ul>
{vlFonts.vlData.items.map((item, index) => ( {vlFonts.vlData.items.map((item, index) => (
<ListItem <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
key={index} props.changeFontFamily(item.name);
radio storeTextSettings.addFontToRecent(item);
checked={curFontName === item.name} addRecentStorage();
title={item.name} }}>
style={{fontFamily: `${item.name}`}} <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
onClick={() => {props.changeFontFamily(item.name); storeTextSettings.addFontToRecent(item.name); </ListItem>
addRecentStorage()}}
></ListItem>
))} ))}
</ul> </ul>
</List> </List>

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

@ -6,7 +6,7 @@ export class storeTextSettings {
fontsArray: observable, fontsArray: observable,
fontInfo: observable, fontInfo: observable,
fontName: observable, fontName: observable,
arrayRecentFonts:observable, arrayRecentFonts: observable,
fontSize: observable, fontSize: observable,
isBold: observable, isBold: observable,
isItalic: observable, isItalic: observable,
@ -23,10 +23,27 @@ export class storeTextSettings {
initFontInfo: action, initFontInfo: action,
changeTextColor: action, changeTextColor: action,
changeCustomTextColors: action, changeCustomTextColors: action,
iconWidth: observable,
iconHeight: observable,
thumbCanvas: observable,
thumbContext: observable,
thumbs: observable,
thumbIdx: observable,
listItemHeight: observable,
spriteCols: observable,
loadSprite: action,
addFontToRecent:action addFontToRecent:action
}); });
} }
iconWidth;
iconHeight;
thumbCanvas;
thumbContext;
thumbs;
thumbIdx = 0;
listItemHeight = 28;
spriteCols = 1;
fontsArray = []; fontsArray = [];
arrayRecentFonts = []; arrayRecentFonts = [];
fontInfo = {}; fontInfo = {};
@ -88,6 +105,42 @@ export class storeTextSettings {
}); });
this.fontsArray = array; this.fontsArray = array;
this.iconWidth = 300;
this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
this.thumbCanvas = document.createElement('canvas');
this.thumbContext = this.thumbCanvas.getContext('2d');
this.thumbs = [
{ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
{ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
{ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
{ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
{ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
];
const applicationPixelRatio = Common.Utils.applicationPixelRatio();
let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
let currentDistance = 0;
for (let i = 1; i < this.thumbs.length; i++) {
currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
if (currentDistance < (bestDistance - 0.0001))
{
bestDistance = currentDistance;
this.thumbIdx = i;
}
}
this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
this.loadSprite();
}
loadSprite() {
this.spriteThumbs = new Image();
this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
} }
initFontInfo(fontObj) { initFontInfo(fontObj) {
@ -96,7 +149,7 @@ export class storeTextSettings {
addFontToRecent (font) { addFontToRecent (font) {
this.arrayRecentFonts.forEach(item => { this.arrayRecentFonts.forEach(item => {
if (item === font) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1); if (item.name === font.name) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
}) })
this.arrayRecentFonts.unshift(font); this.arrayRecentFonts.unshift(font);
@ -130,7 +183,7 @@ export class storeTextSettings {
resetFontsRecent(fonts) { resetFontsRecent(fonts) {
this.arrayRecentFonts = fonts; this.arrayRecentFonts = fonts;
this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : []; this.arrayRecentFonts = this.arrayRecentFonts ? JSON.parse(this.arrayRecentFonts) : [];
} }
changeCustomTextColors (colors) { changeCustomTextColors (colors) {

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

@ -128,13 +128,20 @@ const PageFontsCell = props => {
const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt; const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
const curFontName = fontInfo.name; const curFontName = fontInfo.name;
const fonts = storeCellSettings.fontsArray; const fonts = storeCellSettings.fontsArray;
const arrayFonts = storeTextSettings.arrayRecentFonts; const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
const iconWidth = storeTextSettings.iconWidth;
const iconHeight = storeTextSettings.iconHeight;
const thumbs = storeTextSettings.thumbs;
const thumbIdx = storeTextSettings.thumbIdx;
const thumbCanvas = storeTextSettings.thumbCanvas;
const thumbContext = storeTextSettings.thumbContext;
const spriteCols = storeTextSettings.spriteCols;
const spriteThumbs = storeTextSettings.spriteThumbs;
const addRecentStorage = () => { const addRecentStorage = () => {
let arr = []; let arr = [];
arrayFonts.forEach(item => arr.push(item)); arrayRecentFonts.forEach(item => arr.push(item));
arr = arr.join(';'); LocalStorage.setItem('sse-settings-recent-fonts', JSON.stringify(arr));
LocalStorage.setItem('sse-settings-recent-fonts', arr);
} }
const [vlFonts, setVlFonts] = useState({ const [vlFonts, setVlFonts] = useState({
@ -153,6 +160,13 @@ const PageFontsCell = props => {
}); });
}; };
const getImageUri = (font) => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
}
const storeFocusObjects = props.storeFocusObjects; const storeFocusObjects = props.storeFocusObjects;
if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) { if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -185,17 +199,14 @@ const PageFontsCell = props => {
</ListItem> </ListItem>
</List> </List>
<BlockTitle>{_t.textFonts}</BlockTitle> <BlockTitle>{_t.textFonts}</BlockTitle>
{!!arrayFonts.length && {!!arrayRecentFonts.length &&
<List> <List>
{arrayFonts.map((item,index) => ( {arrayRecentFonts.map((item,index) => (
<ListItem <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
key={index} props.onFontClick(item.name);
radio }}>
checked={curFontName === item} <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
title={item} </ListItem>
style={{fontFamily: `${item}`}}
onClick={() => {props.onFontClick(item)}}
/>
))} ))}
</List> </List>
} }
@ -205,15 +216,13 @@ const PageFontsCell = props => {
}}> }}>
<ul> <ul>
{vlFonts.vlData.items.map((item, index) => ( {vlFonts.vlData.items.map((item, index) => (
<ListItem <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
key={index} props.onFontClick(item.name);
radio storeTextSettings.addFontToRecent(item);
checked={curFontName === item.name} addRecentStorage();
title={item.name} }}>
style={{fontFamily: `${item.name}`}} <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
onClick={() => {props.onFontClick(item.name); storeTextSettings.addFontToRecent(item.name); </ListItem>
addRecentStorage()}}
></ListItem>
))} ))}
</ul> </ul>
</List> </List>

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

@ -99,13 +99,20 @@ const PageFonts = props => {
const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt; const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
const curFontName = storeTextSettings.fontName; const curFontName = storeTextSettings.fontName;
const fonts = storeTextSettings.fontsArray; const fonts = storeTextSettings.fontsArray;
const arrayFonts = storeTextSettings.arrayRecentFonts; const iconWidth = storeTextSettings.iconWidth;
const iconHeight = storeTextSettings.iconHeight;
const thumbs = storeTextSettings.thumbs;
const thumbIdx = storeTextSettings.thumbIdx;
const thumbCanvas = storeTextSettings.thumbCanvas;
const thumbContext = storeTextSettings.thumbContext;
const spriteCols = storeTextSettings.spriteCols;
const spriteThumbs = storeTextSettings.spriteThumbs;
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
const addRecentStorage = () => { const addRecentStorage = () => {
let arr = []; let arr = [];
arrayFonts.forEach(item => arr.push(item)); arrayRecentFonts.forEach(item => arr.push(item));
arr = arr.join(';'); LocalStorage.setItem('sse-settings-recent-fonts', JSON.stringify(arr));
LocalStorage.setItem('sse-settings-recent-fonts', arr);
} }
const [vlFonts, setVlFonts] = useState({ const [vlFonts, setVlFonts] = useState({
@ -124,6 +131,13 @@ const PageFonts = props => {
}); });
}; };
const getImageUri = (font) => {
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
return thumbCanvas.toDataURL();
}
return ( return (
<Page> <Page>
<Navbar title={_t.textFonts} backLink={_t.textBack}> <Navbar title={_t.textFonts} backLink={_t.textBack}>
@ -150,17 +164,14 @@ const PageFonts = props => {
</ListItem> </ListItem>
</List> </List>
<BlockTitle>{_t.textFonts}</BlockTitle> <BlockTitle>{_t.textFonts}</BlockTitle>
{!!arrayFonts.length && {!!arrayRecentFonts.length &&
<List> <List>
{arrayFonts.map((item,index) => ( {arrayRecentFonts.map((item, index) => (
<ListItem <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
key={index} props.changeFontFamily(item.name);
radio }}>
checked={curFontName === item} <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
title={item} </ListItem>
style={{fontFamily: `${item}`}}
onClick={() => {props.changeFontFamily(item)}}
/>
))} ))}
</List> </List>
} }
@ -170,15 +181,13 @@ const PageFonts = props => {
}}> }}>
<ul> <ul>
{vlFonts.vlData.items.map((item, index) => ( {vlFonts.vlData.items.map((item, index) => (
<ListItem <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
key={index} props.changeFontFamily(item.name);
radio storeTextSettings.addFontToRecent(item);
checked={curFontName === item.name} addRecentStorage();
title={item.name} }}>
style={{fontFamily: `${item.name}`}} <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
onClick={() => {props.changeFontFamily(item.name); storeTextSettings.addFontToRecent(item.name); </ListItem>
addRecentStorage()}}
></ListItem>
))} ))}
</ul> </ul>
</List> </List>