[DE mobile] Fix Bug 47900

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

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

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

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,7 +241,8 @@ class EditTextController extends Component {
 
     render() {
         return (
-            <EditText changeFontSize={this.changeFontSize}
+            <EditText 
+                changeFontSize={this.changeFontSize}
                 changeFontFamily={this.changeFontFamily}
                 onTextColorAuto={this.onTextColorAuto}
                 onTextColor={this.onTextColor}
@@ -217,6 +261,14 @@ class EditTextController extends Component {
                 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}
             />
         )
     }

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 (
         <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
+                        <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>
             </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>