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

[DE mobile] Fix Bug 47900

Browse source
This commit is contained in:
SergeyEzhin 2021-08-10 18:00:50 +03:00
parent 395445571a
commit 8fdb2109fe
5 changed files with 130 additions and 28 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;
appearance: none;
}
// Fonts List
.font-item {
.item-content {
padding-left: 0;
}
}
}

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

@ -545,4 +545,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

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

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

@ -4,6 +4,49 @@ import { EditText } from '../../view/edit/EditText'
class EditTextController extends Component {
constructor(props) {
super(props);
this.iconWidth = 302,
this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 26,
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.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
{ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
],
this.thumbIdx = 0,
this.listItemHeight = 26,
this.spriteCols = 1,
this.applicationPixelRatio = Common.Utils.applicationPixelRatio();
if (typeof window['AscDesktopEditor'] === 'object') {
this.thumbs[0].path = window['AscDesktopEditor'].getFontsSprite('');
this.thumbs[1].path = window['AscDesktopEditor'].getFontsSprite('@1.5x');
this.thumbs[2].path = window['AscDesktopEditor'].getFontsSprite('@2x');
}
let bestDistance = Math.abs(this.applicationPixelRatio - this.thumbs[0].ratio);
let currentDistance = 0;
for (let i = 1; i < this.thumbs.length; i++) {
currentDistance = Math.abs(this.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;
}
componentDidMount() {
@ -198,25 +241,34 @@ class EditTextController extends Component {
render() {
return (
<EditText changeFontSize={this.changeFontSize}
changeFontFamily={this.changeFontFamily}
onTextColorAuto={this.onTextColorAuto}
onTextColor={this.onTextColor}
onBackgroundColor={this.onBackgroundColor}
toggleBold={this.toggleBold}
toggleItalic={this.toggleItalic}
toggleUnderline={this.toggleUnderline}
toggleStrikethrough={this.toggleStrikethrough}
onAdditionalStrikethrough={this.onAdditionalStrikethrough}
onAdditionalCaps={this.onAdditionalCaps}
onAdditionalScript={this.onAdditionalScript}
changeLetterSpacing={this.changeLetterSpacing}
onParagraphAlign={this.onParagraphAlign}
onParagraphMove={this.onParagraphMove}
onBullet={this.onBullet}
onNumber={this.onNumber}
onMultiLevelList={this.onMultiLevelList}
onLineSpacing={this.onLineSpacing}
<EditText
changeFontSize={this.changeFontSize}
changeFontFamily={this.changeFontFamily}
onTextColorAuto={this.onTextColorAuto}
onTextColor={this.onTextColor}
onBackgroundColor={this.onBackgroundColor}
toggleBold={this.toggleBold}
toggleItalic={this.toggleItalic}
toggleUnderline={this.toggleUnderline}
toggleStrikethrough={this.toggleStrikethrough}
onAdditionalStrikethrough={this.onAdditionalStrikethrough}
onAdditionalCaps={this.onAdditionalCaps}
onAdditionalScript={this.onAdditionalScript}
changeLetterSpacing={this.changeLetterSpacing}
onParagraphAlign={this.onParagraphAlign}
onParagraphMove={this.onParagraphMove}
onBullet={this.onBullet}
onNumber={this.onNumber}
onMultiLevelList={this.onMultiLevelList}
onLineSpacing={this.onLineSpacing}
spriteThumbs={this.spriteThumbs}
thumbs={this.thumbs}
thumbIdx={this.thumbIdx}
iconWidth={this.iconWidth}
iconHeight={this.iconHeight}
thumbCanvas={this.thumbCanvas}
thumbContext={this.thumbContext}
spriteCols={this.spriteCols}
/>
)
}

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

@ -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 iconWidth = props.iconWidth;
const iconHeight = props.iconHeight;
const thumbs = props.thumbs;
const thumbIdx = props.thumbIdx;
const thumbCanvas = props.thumbCanvas;
const thumbContext = props.thumbContext;
const spriteCols = props.spriteCols;
const spriteThumbs = props.spriteThumbs;
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
}
});
const renderExternal = (vl, vlData) => {
setVlFonts((prevState) => {
let fonts = [...prevState.vlData.items];
@ -29,6 +39,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 (
<Page>
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')}>
@ -63,14 +80,12 @@ const PageFonts = props => {
}}>
<ul>
{vlFonts.vlData.items.map((item, index) => (
<ListItem
key={index}
radio
checked={curFontName === item.name}
title={item.name}
style={{fontFamily: `${item.name}`}}
onClick={() => {storeTextSettings.changeFontFamily(item.name); props.changeFontFamily(item.name)}}
></ListItem>
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
storeTextSettings.changeFontFamily(item.name);
props.changeFontFamily(item.name)
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</ul>
</List>
@ -500,7 +515,15 @@ const EditText = props => {
<List>
<ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
changeFontSize: props.changeFontSize,
changeFontFamily: props.changeFontFamily
changeFontFamily: props.changeFontFamily,
spriteThumbs: props.spriteThumbs,
thumbs: props.thumbs,
thumbIdx: props.thumbIdx,
iconWidth: props.iconWidth,
iconHeight: props.iconHeight,
thumbCanvas: props.thumbCanvas,
thumbContext: props.thumbContext,
spriteCols: props.spriteCols
}}/>
<ListItem className='buttons'>
<Row>