diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 8e5fbb4ed..324c03a27 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -580,6 +580,14 @@ -ms-appearance: none; appearance: none; } + + // Fonts List + + .font-item { + .item-content { + padding-left: 0; + } + } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index f07fbf483..3062318fb 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -545,4 +545,12 @@ } } } + + // Fonts List + + .font-item { + .item-radio:not(.item-radio-icon-end) > .icon-radio { + margin-right: 0; + } + } } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index d5415fd06..394561dfc 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -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; + } + } +} + diff --git a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx index bdd96e229..5ff8c8acc 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx @@ -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 ( - ) } diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx index 66596233a..e3c663503 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx @@ -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 ( @@ -63,14 +80,12 @@ const PageFonts = props => { }}>
    {vlFonts.vlData.items.map((item, index) => ( - {storeTextSettings.changeFontFamily(item.name); props.changeFontFamily(item.name)}} - > + { + storeTextSettings.changeFontFamily(item.name); + props.changeFontFamily(item.name) + }}> + + ))}
@@ -500,7 +515,15 @@ const EditText = props => {