[DE mobile] Fix Bug 47900
This commit is contained in:
parent
395445571a
commit
8fdb2109fe
|
@ -580,6 +580,14 @@
|
||||||
-ms-appearance: none;
|
-ms-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Fonts List
|
||||||
|
|
||||||
|
.font-item {
|
||||||
|
.item-content {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -545,4 +545,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Fonts List
|
||||||
|
|
||||||
|
.font-item {
|
||||||
|
.item-radio:not(.item-radio-icon-end) > .icon-radio {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -842,6 +842,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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,49 @@ import { EditText } from '../../view/edit/EditText'
|
||||||
class EditTextController extends Component {
|
class EditTextController extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(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() {
|
componentDidMount() {
|
||||||
|
@ -198,25 +241,34 @@ 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}
|
||||||
|
spriteThumbs={this.spriteThumbs}
|
||||||
|
thumbs={this.thumbs}
|
||||||
|
thumbIdx={this.thumbIdx}
|
||||||
|
iconWidth={this.iconWidth}
|
||||||
|
iconHeight={this.iconHeight}
|
||||||
|
thumbCanvas={this.thumbCanvas}
|
||||||
|
thumbContext={this.thumbContext}
|
||||||
|
spriteCols={this.spriteCols}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,11 +14,21 @@ 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 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({
|
const [vlFonts, setVlFonts] = useState({
|
||||||
vlData: {
|
vlData: {
|
||||||
items: [],
|
items: [],
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const renderExternal = (vl, vlData) => {
|
const renderExternal = (vl, vlData) => {
|
||||||
setVlFonts((prevState) => {
|
setVlFonts((prevState) => {
|
||||||
let fonts = [...prevState.vlData.items];
|
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 (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')}>
|
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')}>
|
||||||
|
@ -63,14 +80,12 @@ 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}
|
}}>
|
||||||
title={item.name}
|
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||||
style={{fontFamily: `${item.name}`}}
|
</ListItem>
|
||||||
onClick={() => {storeTextSettings.changeFontFamily(item.name); props.changeFontFamily(item.name)}}
|
|
||||||
></ListItem>
|
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</List>
|
</List>
|
||||||
|
@ -500,7 +515,15 @@ const EditText = props => {
|
||||||
<List>
|
<List>
|
||||||
<ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
|
<ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
|
||||||
changeFontSize: props.changeFontSize,
|
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'>
|
<ListItem className='buttons'>
|
||||||
<Row>
|
<Row>
|
||||||
|
|
Loading…
Reference in a new issue