Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into joriks/appearance-advanced

res/css/views/rooms/_IRCLayout.scss

@@ -121,8 +121,8 @@ $irc-line-height: $font-18px;
             }
         }
 
-        .mx_EvenTile_line .mx_MessageActionBar,
+        .mx_EventTile_line .mx_MessageActionBar,
-        .mx_EvenTile_line .mx_ReplyThread_wrapper {
+        .mx_EventTile_line .mx_ReplyThread_wrapper {
             display: block;
         }
 

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

@@ -14,33 +14,59 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_AppearanceUserSettingsTab_fontSlider,
+.mx_AppearanceUserSettingsTab_fontSlider_preview,
+.mx_AppearanceUserSettingsTab_Layout {
+    @mixin mx_Settings_fullWidthField;
+}
+
 .mx_AppearanceUserSettingsTab .mx_Field {
     width: 256px;
 }
 
+.mx_AppearanceUserSettingsTab_fontScaling {
+    color: $primary-fg-color;
+}
+
 .mx_AppearanceUserSettingsTab_fontSlider {
-    @mixin mx_Settings_fullWidthField;
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: 15px;
-    background: $font-slider-bg-color;
+    background: rgba($appearance-tab-border-color, 0.2);
     border-radius: 10px;
     font-size: 10px;
     margin-top: 24px;
     margin-bottom: 24px;
 }
 
+.mx_AppearanceUserSettingsTab_fontSlider_preview {
+    border: 1px solid $appearance-tab-border-color;
+    border-radius: 10px;
+    padding: 0 16px 9px 16px;
+    pointer-events: none;
+
+    .mx_EventTile_msgOption {
+        display: none;
+    }
+
+    &.mx_IRCLayout {
+        padding-top: 9px;
+    }
+}
+
 .mx_AppearanceUserSettingsTab_fontSlider_smallText {
     font-size: 15px;
     padding-right: 20px;
     padding-left: 5px;
+    font-weight: 500;
 }
 
 .mx_AppearanceUserSettingsTab_fontSlider_largeText {
     font-size: 18px;
     padding-left: 20px;
     padding-right: 5px;
+    font-weight: 500;
 }
 
 .mx_AppearanceUserSettingsTab {
@@ -94,7 +120,8 @@ limitations under the License.
             }
 
             &.mx_ThemeSelector_dark {
-                background-color: #181b21;
+                // 5% lightened version of 181b21
+                background-color: #25282e;
                 color: #f3f8fd;
 
                 > input > div {
@@ -124,6 +151,63 @@ limitations under the License.
     margin-left: calc($font-16px + 10px);
 }
 
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
+    display: flex;
+    flex-direction: row;
+
+    color: $primary-fg-color;
+
+    .mx_AppearanceUserSettingsTab_spacer {
+        width: 24px;
+    }
+
+    > .mx_AppearanceUserSettingsTab_Layout_RadioButton {
+        flex-grow: 0;
+        flex-shrink: 1;
+        display: flex;
+        flex-direction: column;
+
+        width: 300px;
+
+        border: 1px solid $appearance-tab-border-color;
+        border-radius: 10px;
+
+        .mx_EventTile_msgOption,
+        .mx_MessageActionBar {
+            display: none;
+        }
+
+        .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
+            flex-grow: 1;
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            pointer-events: none;
+        }
+
+        .mx_RadioButton {
+            flex-grow: 0;
+            padding: 10px;
+        }
+
+        .mx_EventTile_content {
+            margin-right: 0;
+        }
+    }
+
+    .mx_RadioButton {
+        border-top: 1px solid $appearance-tab-border-color;
+
+        > input + div {
+            border-color: rgba($muted-fg-color, 0.2);
+        }
+    }
+
+    .mx_RadioButton_checked {
+        background-color: rgba($accent-color, 0.08);
+    }
+}
+
 .mx_AppearanceUserSettingsTab_Advanced {
     .mx_AppearanceUserSettingsTab_AdvancedToggle {
         color: $accent-color;

res/themes/dark/css/_dark.scss

@@ -198,8 +198,8 @@ $breadcrumb-placeholder-bg-color: #272c35;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
-// FontSlider colors
+// Appearance tab colors
-$font-slider-bg-color: $room-highlight-color;
+$appearance-tab-border-color: $room-highlight-color;
 
 // ***** Mixins! *****
 

res/themes/light/css/_light.scss

@@ -327,7 +327,7 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
 // FontSlider colors
-$font-slider-bg-color: rgba($input-darker-bg-color, 0.2);
+$appearance-tab-border-color: $input-darker-bg-color;
 
 // ***** Mixins! *****
 

src/components/structures/RoomView.js

@@ -166,7 +166,7 @@ export default createReactClass({
             canReact: false,
             canReply: false,
 
-            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
 
             matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
         };
@@ -199,7 +199,7 @@ export default createReactClass({
         this._roomView = createRef();
         this._searchResultsPanel = createRef();
 
-        this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
+        this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
     },
 
     _onReadReceiptsChange: function() {
@@ -546,7 +546,7 @@ export default createReactClass({
 
     onLayoutChange: function() {
         this.setState({
-            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
         });
     },
 

src/components/views/elements/EventTilePreview.tsx

@@ -0,0 +1,129 @@
+/*
+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 React from 'react';
+import classnames from 'classnames';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+
+import * as Avatar from '../../../Avatar';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import EventTile from '../rooms/EventTile';
+
+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 EventTilePreview 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 = 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,
+        });
+
+    }
+
+    private fakeEvent({userId, displayname, avatar_url}: IState) {
+        // Fake it till we make it
+        const event = new MatrixEvent(JSON.parse(`{
+                "type": "m.room.message",
+                "sender": "${userId}",
+                "content": {
+                  "m.new_content": {
+                    "msgtype": "m.text",
+                    "body": "${this.props.message}",
+                    "displayname": "${displayname}",
+                    "avatar_url": "${avatar_url}"
+                  },
+                  "msgtype": "m.text",
+                  "body": "${this.props.message}",
+                  "displayname": "${displayname}",
+                  "avatar_url": "${avatar_url}"
+                },
+                "unsigned": {
+                  "age": 97
+                },
+                "event_id": "$9999999999999999999999999999999999999999999",
+                "room_id": "!999999999999999999:matrix.org"
+              }`));
+
+        // Fake it more
+        event.sender = {
+            name: displayname,
+            userId: userId,
+            getAvatarUrl: (..._) => {
+                return avatar_url;
+            },
+        };
+
+        return event;
+    }
+
+    public render() {
+        const event = this.fakeEvent(this.state);
+
+        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/elements/StyledRadioButton.tsx

@@ -36,6 +36,7 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
             {
                 "mx_RadioButton_disabled": disabled,
                 "mx_RadioButton_enabled": !disabled,
+                "mx_RadioButton_checked": this.props.checked,
             });
         return <label className={_className}>
             <input type='radio' disabled={disabled} {...otherProps} />

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

@@ -19,7 +19,6 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore";
-import * as sdk from "../../../../../index";
 import { enumerateThemes } from "../../../../../theme";
 import ThemeWatcher from "../../../../../settings/watchers/ThemeWatcher";
 import Slider from "../../../elements/Slider";
@@ -29,6 +28,11 @@ import { FontWatcher } from "../../../../../settings/watchers/FontWatcher";
 import { RecheckThemePayload } from '../../../../../dispatcher/payloads/RecheckThemePayload';
 import { Action } from '../../../../../dispatcher/actions';
 import { IValidationResult, IFieldState } from '../../../elements/Validation';
+import StyledRadioButton from '../../../elements/StyledRadioButton';
+import StyledCheckbox from '../../../elements/StyledCheckbox';
+import SettingsFlag from '../../../elements/SettingsFlag';
+import Field from '../../../elements/Field';
+import EventTilePreview from '../../../elements/EventTilePreview';
 
 interface IProps {
 }
@@ -54,9 +58,12 @@ interface IState extends IThemeState {
     useSystemFont: boolean;
     systemFont: string;
     showAdvanced: boolean;
+    useIRCLayout: boolean;
 }
 
+
 export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
+    private readonly MESSAGE_PREVIEW_TEXT = _t("Hey you. You're the best!");
 
     private themeTimer: NodeJS.Timeout;
 
@@ -72,6 +79,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             useSystemFont: SettingsStore.getValue("useSystemFont"),
             systemFont: SettingsStore.getValue("systemFont"),
             showAdvanced: false,
+            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
         };
     }
 
@@ -202,12 +210,17 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         this.setState({customThemeUrl: e.target.value});
     };
 
-    private renderThemeSection() {
+    private onLayoutChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+        const val = e.target.value === "true";
-        const StyledCheckbox = sdk.getComponent("views.elements.StyledCheckbox");
-        const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton");
-        const Field = sdk.getComponent("views.elements.Field");
 
+        this.setState({
+            useIRCLayout: val,
+        });
+
+        SettingsStore.setValue("useIRCLayout", null, SettingLevel.DEVICE, val);
+    };
+
+    private renderThemeSection() {
         const themeWatcher = new ThemeWatcher();
         let systemThemeSection: JSX.Element;
         if (themeWatcher.isSystemThemeSupported()) {
@@ -269,7 +282,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                         return <StyledRadioButton
                             key={theme.id}
                             value={theme.id}
-                            name={"theme"}
+                            name="theme"
                             disabled={this.state.useSystemTheme}
                             checked={!this.state.useSystemTheme && theme.id === this.state.theme}
                             className={"mx_ThemeSelector_" + theme.id}
@@ -285,11 +298,14 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
     }
 
     private renderFontSection() {
-        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
-        const Field = sdk.getComponent("views.elements.Field");
-
         return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
+
             <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
+            <EventTilePreview
+                className="mx_AppearanceUserSettingsTab_fontSlider_preview"
+                message={this.MESSAGE_PREVIEW_TEXT}
+                useIRCLayout={this.state.useIRCLayout}
+            />
             <div className="mx_AppearanceUserSettingsTab_fontSlider">
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
                 <Slider
@@ -301,12 +317,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")}
@@ -322,10 +340,47 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         </div>;
     }
 
-    private renderAdvancedSection() {
+    private renderLayoutSection = () => {
-        const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
+        return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
-        const Field = sdk.getComponent("views.elements.Field");
+            <span className="mx_SettingsTab_subheading">{_t("Message layout")}</span>
 
+            <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons" >
+                <div className="mx_AppearanceUserSettingsTab_Layout_RadioButton">
+                    <EventTilePreview
+                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                        message={this.MESSAGE_PREVIEW_TEXT}
+                        useIRCLayout={true}
+                    />
+                    <StyledRadioButton
+                        name="layout"
+                        value="true"
+                        checked={this.state.useIRCLayout}
+                        onChange={this.onLayoutChange}
+                    >
+                        {_t("Compact")}
+                    </StyledRadioButton>
+                </div>
+                <div className="mx_AppearanceUserSettingsTab_spacer" />
+                <div className="mx_AppearanceUserSettingsTab_Layout_RadioButton">
+                    <EventTilePreview
+                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
+                        message={this.MESSAGE_PREVIEW_TEXT}
+                        useIRCLayout={false}
+                    />
+                    <StyledRadioButton
+                        name="layout"
+                        value="false"
+                        checked={!this.state.useIRCLayout}
+                        onChange={this.onLayoutChange}
+                    >
+                        {_t("Modern")}
+                    </StyledRadioButton>
+                </div>
+            </div>
+        </div>;
+    };
+
+    private renderAdvancedSection() {
         const toggle = <div
             className="mx_AppearanceUserSettingsTab_AdvancedToggle"
             onClick={() => this.setState({showAdvanced: !this.state.showAdvanced})}
@@ -375,6 +430,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 </div>
                 {this.renderThemeSection()}
                 {SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null}
+                {SettingsStore.isFeatureEnabled("feature_irc_ui") ? this.renderLayoutSection() : null}
                 {this.renderAdvancedSection()}
             </div>
         );

src/i18n/strings/en_EN.json

@@ -435,10 +435,10 @@
     "Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
     "Use the improved room list (will refresh to apply changes)": "Use the improved room list (will refresh to apply changes)",
     "Support adding custom themes": "Support adding custom themes",
-    "Use IRC layout": "Use IRC layout",
+    "Enable IRC layout option in the appearance tab": "Enable IRC layout option in the appearance tab",
     "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",
@@ -485,6 +485,7 @@
     "How fast should messages be downloaded.": "How fast should messages be downloaded.",
     "Manually verify all remote sessions": "Manually verify all remote sessions",
     "IRC display name width": "IRC display name width",
+    "Use IRC layout": "Use IRC layout",
     "Collecting app version information": "Collecting app version information",
     "Collecting logs": "Collecting logs",
     "Uploading report": "Uploading report",
@@ -772,6 +773,7 @@
     "Downloading update...": "Downloading update...",
     "New version available. <a>Update now.</a>": "New version available. <a>Update now.</a>",
     "Check for update": "Check for update",
+    "Hey you. You're the best!": "Hey you. You're the best!",
     "Size must be a number": "Size must be a number",
     "Custom font size can only be between %(min)s pt and %(max)s pt": "Custom font size can only be between %(min)s pt and %(max)s pt",
     "Use between %(min)s pt and %(max)s pt": "Use between %(min)s pt and %(max)s pt",
@@ -781,6 +783,9 @@
     "Custom theme URL": "Custom theme URL",
     "Add theme": "Add theme",
     "Theme": "Theme",
+    "Message layout": "Message layout",
+    "Compact": "Compact",
+    "Modern": "Modern",
     "Customise your appearance": "Customise your appearance",
     "Appearance Settings only affect this Riot session.": "Appearance Settings only affect this Riot session.",
     "Flair": "Flair",

src/settings/Settings.js

@@ -155,7 +155,7 @@ export const SETTINGS = {
     },
     "feature_irc_ui": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        displayName: _td('Use IRC layout'),
+        displayName: _td('Enable IRC layout option in the appearance tab'),
         default: false,
         isFeature: true,
     },
@@ -180,7 +180,7 @@ export const SETTINGS = {
         controller: new FontSizeController(),
     },
     "useCustomFontSize": {
-        displayName: _td("Custom font size"),
+        displayName: _td("Use custom size"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: false,
     },
@@ -559,4 +559,9 @@ export const SETTINGS = {
         displayName: _td("IRC display name width"),
         default: 80,
     },
+    "useIRCLayout": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td("Use IRC layout"),
+        default: false,
+    },
 };