Message preview for font slider

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -15,11 +15,15 @@ limitations under the License.
 */
 
 .mx_AppearanceUserSettingsTab_fontSlider,
-.mx_AppearanceUserSettingsTab_themeSection .mx_Field,
+.mx_AppearanceUserSettingsTab_fontSlider_preview,
-.mx_AppearanceUserSettingsTab_fontScaling .mx_Field {
+.mx_AppearanceUserSettingsTab .mx_Field {
     @mixin mx_Settings_fullWidthField;
 }
 
+.mx_AppearanceUserSettingsTab_fontScaling {
+    color: $primary-fg-color;
+}
+
 .mx_AppearanceUserSettingsTab_fontSlider {
     display: flex;
     flex-direction: row;
@@ -32,6 +36,13 @@ limitations under the License.
     margin-bottom: 24px;
 }
 
+.mx_AppearanceUserSettingsTab_fontSlider_preview {
+    border: 1px solid $input-darker-bg-color;
+    border-radius: 10px;
+    padding: 0 16px 9px 16px;
+    pointer-events: none;
+}
+
 .mx_AppearanceUserSettingsTab_fontSlider_smallText {
     font-size: 15px;
     padding-right: 20px;

src/components/views/elements/MessagePreview.tsx

@@ -0,0 +1,126 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+
+import React from 'react';
+
+import * as Avatar from '../../../Avatar';
+import classnames from 'classnames';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/Event';
+import * as sdk from "../../../index";
+
+interface IProps {
+    /**
+     * The text to be displayed in the message preview
+     */
+    message: string;
+
+    /**
+     * Whether to use the irc layout or not
+     */
+    useIRCLayout: boolean;
+
+    /**
+     * classnames to apply to the wrapper of the preview
+     */
+    className: string;
+}
+
+interface IState {
+    userId: string;
+    displayname: string,
+    avatar_url: string,
+}
+
+const AVATAR_SIZE = 32;
+
+export default class MessagePreview extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            userId: "@erim:fink.fink",
+            displayname: "Erimayas Fink",
+            avatar_url: null,
+        }
+    }
+
+    async componentDidMount() {
+        // Fetch current user data
+        const client = MatrixClientPeg.get()
+        const userId = await client.getUserId();
+        const profileInfo = await client.getProfileInfo(userId);
+        const avatar_url = Avatar.avatarUrlForUser(
+            {avatarUrl: profileInfo.avatar_url},
+            AVATAR_SIZE, AVATAR_SIZE, "crop");
+
+        this.setState({
+            userId,
+            displayname: profileInfo.displayname,
+            avatar_url,
+        });
+
+    }
+
+    public render() {
+        const EventTile = sdk.getComponent("views.rooms.EventTile");
+
+        // Fake it till we make it
+        const event = new MatrixEvent(JSON.parse(`{
+                "type": "m.room.message",
+                "sender": "${this.state.userId}",
+                "content": {
+                  "m.new_content": {
+                    "msgtype": "m.text",
+                    "body": "${this.props.message}",
+                    "displayname": "${this.state.displayname}",
+                    "avatar_url": "${this.state.avatar_url}"
+                  },
+                  "msgtype": "m.text",
+                  "body": "${this.props.message}",
+                  "displayname": "${this.state.displayname}",
+                  "avatar_url": "${this.state.avatar_url}"
+                },
+                "unsigned": {
+                  "age": 97
+                },
+                "event_id": "$9999999999999999999999999999999999999999999",
+                "room_id": "!999999999999999999:matrix.org"
+              }`))
+
+        // Fake it more
+        event.sender = {
+            name: this.state.displayname,
+            userId: this.state.userId,
+            getAvatarUrl: (..._) => {
+                return this.state.avatar_url;
+            },
+        }
+
+        let className = classnames(
+            this.props.className,
+            {
+                "mx_IRCLayout": this.props.useIRCLayout,
+                "mx_GroupLayout": !this.props.useIRCLayout,
+            }
+        );
+
+        return <div className={className} >
+            <EventTile mxEvent={event} useIRCLayout={this.props.useIRCLayout} />
+        </div>
+    }
+}

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -280,8 +280,15 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
     private renderFontSection() {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+        const MessagePreview = sdk.getComponent("views.elements.MessagePreview");
+
         return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
+
             <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
+            <MessagePreview
+                className="mx_AppearanceUserSettingsTab_fontSlider_preview"
+                message="Hey you. You're the best"
+            />
             <div className="mx_AppearanceUserSettingsTab_fontSlider">
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
                 <Slider
@@ -293,12 +300,14 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 />
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
             </div>
+
             <SettingsFlag
                 name="useCustomFontSize"
                 level={SettingLevel.ACCOUNT}
                 onChange={(checked) => this.setState({useCustomFontSize: checked})}
                 useCheckbox={true}
             />
+
             <Field
                 type="number"
                 label={_t("Font size")}

src/i18n/strings/en_EN.json

@@ -437,7 +437,7 @@
     "Use IRC layout": "Use IRC layout",
     "Show info about bridges in room settings": "Show info about bridges in room settings",
     "Font size": "Font size",
-    "Custom font size": "Custom font size",
+    "Use custom size": "Use custom size",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
     "Use compact timeline layout": "Use compact timeline layout",
     "Show a placeholder for removed messages": "Show a placeholder for removed messages",

src/settings/Settings.js

@@ -177,7 +177,7 @@ export const SETTINGS = {
         controller: new FontSizeController(),
     },
     "useCustomFontSize": {
-        displayName: _td("Custom font size"),
+        displayName: _td("Use custom size"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: false,
     },