From 17dbb1ac8bf8c559b325397dd781e2f9a7627179 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 16 Jun 2020 15:41:10 +0100 Subject: [PATCH 01/13] Message preview for font slider --- .../tabs/user/_AppearanceUserSettingsTab.scss | 15 ++- .../views/elements/MessagePreview.tsx | 126 ++++++++++++++++++ .../tabs/user/AppearanceUserSettingsTab.tsx | 9 ++ src/i18n/strings/en_EN.json | 2 +- src/settings/Settings.js | 2 +- 5 files changed, 150 insertions(+), 4 deletions(-) create mode 100644 src/components/views/elements/MessagePreview.tsx diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss index 0756e98782..14189fc5e1 100644 --- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss +++ b/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_fontScaling .mx_Field { +.mx_AppearanceUserSettingsTab_fontSlider_preview, +.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; diff --git a/src/components/views/elements/MessagePreview.tsx b/src/components/views/elements/MessagePreview.tsx new file mode 100644 index 0000000000..c517b48019 --- /dev/null +++ b/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 { + 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
+ +
+ } +} diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index fe575c2819..8838979021 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -280,8 +280,15 @@ export default class AppearanceUserSettingsTab extends React.Component + {_t("Font size")} +
Aa
Aa
+ this.setState({useCustomFontSize: checked})} useCheckbox={true} /> + Date: Tue, 16 Jun 2020 15:52:35 +0100 Subject: [PATCH 02/13] Use lower case import --- src/components/views/elements/MessagePreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/MessagePreview.tsx b/src/components/views/elements/MessagePreview.tsx index c517b48019..6a0fa9a756 100644 --- a/src/components/views/elements/MessagePreview.tsx +++ b/src/components/views/elements/MessagePreview.tsx @@ -20,7 +20,7 @@ import React from 'react'; import * as Avatar from '../../../Avatar'; import classnames from 'classnames'; -import { MatrixEvent } from 'matrix-js-sdk/src/models/Event'; +import { MatrixEvent } from 'matrix-js-sdk/src/models/event'; import * as sdk from "../../../index"; interface IProps { From 2192332968b600b492d65a677e36984818fccdd3 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 16 Jun 2020 17:55:19 +0100 Subject: [PATCH 03/13] Add layout options to the appearance tab --- res/css/views/rooms/_IRCLayout.scss | 4 +- .../tabs/user/_AppearanceUserSettingsTab.scss | 61 +++++++++++++++++++ src/components/structures/RoomView.js | 6 +- .../views/elements/StyledRadioButton.tsx | 1 + .../tabs/user/AppearanceUserSettingsTab.tsx | 61 ++++++++++++++++++- src/i18n/strings/en_EN.json | 6 +- src/settings/Settings.js | 7 ++- 7 files changed, 138 insertions(+), 8 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index b4ad117573..814a614007 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -121,8 +121,8 @@ $irc-line-height: $font-18px; } } - .mx_EvenTile_line .mx_MessageActionBar, - .mx_EvenTile_line .mx_ReplyThread_wrapper { + .mx_EventTile_line .mx_MessageActionBar, + .mx_EventTile_line .mx_ReplyThread_wrapper { display: block; } diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss index 14189fc5e1..7fefdd1505 100644 --- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss @@ -16,6 +16,7 @@ limitations under the License. .mx_AppearanceUserSettingsTab_fontSlider, .mx_AppearanceUserSettingsTab_fontSlider_preview, +.mx_AppearanceUserSettingsTab_Layout, .mx_AppearanceUserSettingsTab .mx_Field { @mixin mx_Settings_fullWidthField; } @@ -41,6 +42,14 @@ limitations under the License. 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 { @@ -135,3 +144,55 @@ limitations under the License. .mx_SettingsTab_customFontSizeField { 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 $input-darker-bg-color; + border-radius: 10px; + + .mx_EventTile_msgOption { + display: none; + } + + .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview { + flex-grow: 1; + display: flex; + align-items: center; + padding: 10px; + } + + .mx_RadioButton { + flex-grow: 0; + padding: 10px; + } + + .mx_EventTile_content { + margin-right: 0; + } + } + + .mx_RadioButton { + border-top: 1px solid $input-darker-bg-color; + } + + .mx_RadioButton_checked { + background-color: rgba($accent-color, 0.08); + } +} + diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index ab3da035c4..126ae5d4ce 100644 --- a/src/components/structures/RoomView.js +++ b/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"), }); }, diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx index fdedd16230..6af7549df8 100644 --- a/src/components/views/elements/StyledRadioButton.tsx +++ b/src/components/views/elements/StyledRadioButton.tsx @@ -36,6 +36,7 @@ export default class StyledRadioButton extends React.PureComponent diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 8838979021..0620626181 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -52,8 +52,11 @@ interface IState extends IThemeState { customThemeUrl: string, customThemeMessage: CustomThemeMessage, useCustomFontSize: boolean, + useIRCLayout: boolean, } +const MESSAGE_PREVIEW_TEXT = "Hey you. You're the best" + export default class AppearanceUserSettingsTab extends React.Component { private themeTimer: NodeJS.Timeout; @@ -67,6 +70,7 @@ export default class AppearanceUserSettingsTab extends React.Component): void => { + const val = e.target.value === "true"; + + this.setState({ + useIRCLayout: val, + }); + + SettingsStore.setValue("useIRCLayout", null, SettingLevel.DEVICE, val); + } + private renderThemeSection() { const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag"); const StyledCheckbox = sdk.getComponent("views.elements.StyledCheckbox"); @@ -287,7 +301,8 @@ export default class AppearanceUserSettingsTab extends React.Component{_t("Font size")}
Aa
@@ -323,6 +338,49 @@ export default class AppearanceUserSettingsTab extends React.Component; } + private renderLayoutSection = () => { + const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton"); + const MessagePreview = sdk.getComponent("views.elements.MessagePreview"); + + return
+ {_t("Message layout")} + +
+
+ + + {_t("Compact")} + +
+
+
+ + + {_t("Modern")} + +
+
+
+ } + render() { return (
@@ -332,6 +390,7 @@ export default class AppearanceUserSettingsTab extends React.Component {this.renderThemeSection()} {SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null} + {SettingsStore.isFeatureEnabled("feature_irc_ui") ? this.renderLayoutSection() : null}
); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index aacec471f6..157d83ba57 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -434,7 +434,7 @@ "Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)", "Use the improved room list (in development - refresh to apply changes)": "Use the improved room list (in development - 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", "Use custom size": "Use custom size", @@ -483,6 +483,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", @@ -779,6 +780,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", diff --git a/src/settings/Settings.js b/src/settings/Settings.js index b3ee71c767..70e29483a2 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -152,7 +152,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, }, @@ -549,4 +549,9 @@ export const SETTINGS = { displayName: _td("IRC display name width"), default: 80, }, + "useIRCLayout": { + supportedLevels: LEVELS_ACCOUNT_SETTINGS, + displayName: _td("Use IRC layout"), + default: false, + }, }; From 2d6077f2c8a9fe3233e4593ee5b58cf933aa8e2e Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 16 Jun 2020 18:02:34 +0100 Subject: [PATCH 04/13] Fix radio circle color --- .../views/settings/tabs/user/_AppearanceUserSettingsTab.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss index 7fefdd1505..b6fe9adccb 100644 --- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss @@ -189,6 +189,10 @@ limitations under the License. .mx_RadioButton { border-top: 1px solid $input-darker-bg-color; + + > input + div { + border-color: rgba($muted-fg-color, 0.2); + } } .mx_RadioButton_checked { From a250bf6a971be00c582687af2db823ffcd4cedc5 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 16 Jun 2020 18:08:49 +0100 Subject: [PATCH 05/13] Fix whitespace --- .../views/settings/tabs/user/_AppearanceUserSettingsTab.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss index b6fe9adccb..044b5e2240 100644 --- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss @@ -45,7 +45,7 @@ limitations under the License. .mx_EventTile_msgOption { display: none; -} + } &.mx_IRCLayout { padding-top: 9px; @@ -199,4 +199,3 @@ limitations under the License. background-color: rgba($accent-color, 0.08); } } - From 2fcf30c1ec35c266c0af89e0d9c02bfc4b265bf5 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Wed, 17 Jun 2020 14:39:44 +0100 Subject: [PATCH 06/13] Fix copy '!' --- .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 8838979021..881868907d 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -287,7 +287,7 @@ export default class AppearanceUserSettingsTab extends React.Component{_t("Font size")}
Aa
From a579ea95db812423055e8ab0f72c15bed4e62393 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 18 Jun 2020 13:28:24 +0100 Subject: [PATCH 07/13] Lint and i18n --- .../tabs/user/AppearanceUserSettingsTab.tsx | 36 +++++++++---------- src/i18n/strings/en_EN.json | 1 + 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 0620626181..0f1779270b 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -35,27 +35,27 @@ interface IProps { } interface IThemeState { - theme: string, - useSystemTheme: boolean, + theme: string; + useSystemTheme: boolean; } export interface CustomThemeMessage { - isError: boolean, - text: string + isError: boolean; + text: string; }; interface IState extends IThemeState { // String displaying the current selected fontSize. // Needs to be string for things like '17.' without // trailing 0s. - fontSize: string, - customThemeUrl: string, - customThemeMessage: CustomThemeMessage, - useCustomFontSize: boolean, - useIRCLayout: boolean, + fontSize: string; + customThemeUrl: string; + customThemeMessage: CustomThemeMessage; + useCustomFontSize: boolean; + useIRCLayout: boolean; } -const MESSAGE_PREVIEW_TEXT = "Hey you. You're the best" +const MESSAGE_PREVIEW_TEXT = _t("Hey you. You're the best!"); export default class AppearanceUserSettingsTab extends React.Component { @@ -70,7 +70,7 @@ export default class AppearanceUserSettingsTab extends React.Component @@ -366,11 +366,11 @@ export default class AppearanceUserSettingsTab extends React.Component diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 157d83ba57..6a16f947f4 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -771,6 +771,7 @@ "Downloading update...": "Downloading update...", "New version available. Update now.": "New version available. Update now.", "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", From 69969dfee89b56546f62a5583d6bfb2cd8de1b3b Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 18 Jun 2020 13:58:35 +0100 Subject: [PATCH 08/13] Respond to review - remove all refs to getsdk - i18n - some lints --- .../views/elements/MessagePreview.tsx | 44 ++++++++++--------- .../tabs/user/AppearanceUserSettingsTab.tsx | 31 ++++++------- src/i18n/strings/en_EN.json | 1 + 3 files changed, 39 insertions(+), 37 deletions(-) diff --git a/src/components/views/elements/MessagePreview.tsx b/src/components/views/elements/MessagePreview.tsx index 6a0fa9a756..3be0a16781 100644 --- a/src/components/views/elements/MessagePreview.tsx +++ b/src/components/views/elements/MessagePreview.tsx @@ -14,14 +14,13 @@ 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"; + +import * as Avatar from '../../../Avatar'; +import { MatrixClientPeg } from '../../../MatrixClientPeg'; +import EventTile from '../rooms/EventTile'; interface IProps { /** @@ -42,8 +41,8 @@ interface IProps { interface IState { userId: string; - displayname: string, - avatar_url: string, + displayname: string; + avatar_url: string; } const AVATAR_SIZE = 32; @@ -62,7 +61,8 @@ export default class MessagePreview extends React.Component { async componentDidMount() { // Fetch current user data const client = MatrixClientPeg.get() - const userId = await client.getUserId(); + const userId = client.getUserId(); + console.log({userId}) const profileInfo = await client.getProfileInfo(userId); const avatar_url = Avatar.avatarUrlForUser( {avatarUrl: profileInfo.avatar_url}, @@ -76,24 +76,22 @@ export default class MessagePreview extends React.Component { } - public render() { - const EventTile = sdk.getComponent("views.rooms.EventTile"); - + private fakeEvent({userId, displayname, avatar_url}: IState) { // Fake it till we make it const event = new MatrixEvent(JSON.parse(`{ "type": "m.room.message", - "sender": "${this.state.userId}", + "sender": "${userId}", "content": { "m.new_content": { "msgtype": "m.text", "body": "${this.props.message}", - "displayname": "${this.state.displayname}", - "avatar_url": "${this.state.avatar_url}" + "displayname": "${displayname}", + "avatar_url": "${avatar_url}" }, "msgtype": "m.text", "body": "${this.props.message}", - "displayname": "${this.state.displayname}", - "avatar_url": "${this.state.avatar_url}" + "displayname": "${displayname}", + "avatar_url": "${avatar_url}" }, "unsigned": { "age": 97 @@ -104,13 +102,19 @@ export default class MessagePreview extends React.Component { // Fake it more event.sender = { - name: this.state.displayname, - userId: this.state.userId, + name: displayname, + userId: userId, getAvatarUrl: (..._) => { - return this.state.avatar_url; + return avatar_url; }, } + + } + + public render() { + const event = this.fakeEvent(this.state); + let className = classnames( this.props.className, { @@ -119,7 +123,7 @@ export default class MessagePreview extends React.Component { } ); - return
+ return
} diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 881868907d..f7fb479c12 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/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 Field from "../../../elements/Field"; @@ -30,28 +29,32 @@ 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 MessagePreview from '../../../elements/MessagePreview'; interface IProps { } interface IThemeState { - theme: string, - useSystemTheme: boolean, + theme: string; + useSystemTheme: boolean; } export interface CustomThemeMessage { - isError: boolean, - text: string + isError: boolean; + text: string; }; interface IState extends IThemeState { // String displaying the current selected fontSize. // Needs to be string for things like '17.' without // trailing 0s. - fontSize: string, - customThemeUrl: string, - customThemeMessage: CustomThemeMessage, - useCustomFontSize: boolean, + fontSize: string; + customThemeUrl: string; + customThemeMessage: CustomThemeMessage; + useCustomFontSize: boolean; } export default class AppearanceUserSettingsTab extends React.Component { @@ -198,10 +201,6 @@ export default class AppearanceUserSettingsTab extends React.Component {_t("Font size")}
Aa
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index aacec471f6..dbc0db6861 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -779,6 +779,7 @@ "Custom theme URL": "Custom theme URL", "Add theme": "Add theme", "Theme": "Theme", + "Hey you. You're the best!": "Hey you. You're the best!", "Customise your appearance": "Customise your appearance", "Appearance Settings only affect this Riot session.": "Appearance Settings only affect this Riot session.", "Flair": "Flair", From adfe1ac9bfdb5066c85a924e120fb7eff3a1f347 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 18 Jun 2020 15:13:28 +0100 Subject: [PATCH 09/13] Remove stray debug --- src/components/views/elements/MessagePreview.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/MessagePreview.tsx b/src/components/views/elements/MessagePreview.tsx index 3be0a16781..5d65ac8977 100644 --- a/src/components/views/elements/MessagePreview.tsx +++ b/src/components/views/elements/MessagePreview.tsx @@ -62,7 +62,6 @@ export default class MessagePreview extends React.Component { // Fetch current user data const client = MatrixClientPeg.get() const userId = client.getUserId(); - console.log({userId}) const profileInfo = await client.getProfileInfo(userId); const avatar_url = Avatar.avatarUrlForUser( {avatarUrl: profileInfo.avatar_url}, From 997c7ffc96fd71e4be7ec01194481bfccc414b51 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 18 Jun 2020 15:26:53 +0100 Subject: [PATCH 10/13] Add missing semicolons --- src/components/views/elements/MessagePreview.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/elements/MessagePreview.tsx b/src/components/views/elements/MessagePreview.tsx index 5d65ac8977..95df8aa477 100644 --- a/src/components/views/elements/MessagePreview.tsx +++ b/src/components/views/elements/MessagePreview.tsx @@ -55,12 +55,12 @@ export default class MessagePreview extends React.Component { userId: "@erim:fink.fink", displayname: "Erimayas Fink", avatar_url: null, - } + }; } async componentDidMount() { // Fetch current user data - const client = MatrixClientPeg.get() + const client = MatrixClientPeg.get(); const userId = client.getUserId(); const profileInfo = await client.getProfileInfo(userId); const avatar_url = Avatar.avatarUrlForUser( @@ -97,7 +97,7 @@ export default class MessagePreview extends React.Component { }, "event_id": "$9999999999999999999999999999999999999999999", "room_id": "!999999999999999999:matrix.org" - }`)) + }`)); // Fake it more event.sender = { @@ -106,7 +106,7 @@ export default class MessagePreview extends React.Component { getAvatarUrl: (..._) => { return avatar_url; }, - } + }; } @@ -124,6 +124,6 @@ export default class MessagePreview extends React.Component { return
-
+
; } } From b9fb9aae4a6fedcf615a4b81ceb3765800f9b52a Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 18 Jun 2020 15:36:23 +0100 Subject: [PATCH 11/13] Rename MessagePreview to EventTilePreview --- .../elements/{MessagePreview.tsx => EventTilePreview.tsx} | 2 +- .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename src/components/views/elements/{MessagePreview.tsx => EventTilePreview.tsx} (97%) diff --git a/src/components/views/elements/MessagePreview.tsx b/src/components/views/elements/EventTilePreview.tsx similarity index 97% rename from src/components/views/elements/MessagePreview.tsx rename to src/components/views/elements/EventTilePreview.tsx index 95df8aa477..fa600196e5 100644 --- a/src/components/views/elements/MessagePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -47,7 +47,7 @@ interface IState { const AVATAR_SIZE = 32; -export default class MessagePreview extends React.Component { +export default class EventTilePreview extends React.Component { constructor(props: IProps) { super(props); diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index d11f2cda9b..d2165e3762 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -32,7 +32,7 @@ import { IValidationResult, IFieldState } from '../../../elements/Validation'; import StyledRadioButton from '../../../elements/StyledRadioButton'; import StyledCheckbox from '../../../elements/StyledCheckbox'; import SettingsFlag from '../../../elements/SettingsFlag'; -import MessagePreview from '../../../elements/MessagePreview'; +import EventTilePreview from '../../../elements/EventTilePreview'; interface IProps { } @@ -281,7 +281,7 @@ export default class AppearanceUserSettingsTab extends React.Component {_t("Font size")} - Date: Thu, 18 Jun 2020 15:47:26 +0100 Subject: [PATCH 12/13] Fix merge conflicts --- .../tabs/user/AppearanceUserSettingsTab.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index c3538e5099..46723ec7cd 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -58,9 +58,9 @@ interface IState extends IThemeState { useIRCLayout: boolean; } -const MESSAGE_PREVIEW_TEXT = _t("Hey you. You're the best!"); export default class AppearanceUserSettingsTab extends React.Component { + private readonly MESSAGE_PREVIEW_TEXT = _t("Hey you. You're the best!"); private themeTimer: NodeJS.Timeout; @@ -212,7 +212,7 @@ export default class AppearanceUserSettingsTab extends React.Component{_t("Font size")}
@@ -340,9 +340,9 @@ export default class AppearanceUserSettingsTab extends React.Component
-
-
-
- } +
; + }; render() { return ( From aab42a291bd60cb2f27b881928e4fa67a93ec469 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 22 Jun 2020 12:28:15 +0100 Subject: [PATCH 13/13] implement appearance tab nits - fix border colours in dark theme - lighten dark theme preview background - add missing return statement --- .../tabs/user/_AppearanceUserSettingsTab.scss | 17 +++++++++++------ res/themes/dark/css/_dark.scss | 4 ++-- res/themes/light/css/_light.scss | 2 +- .../views/elements/EventTilePreview.tsx | 2 +- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss index 044b5e2240..e2454336b8 100644 --- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss @@ -30,7 +30,7 @@ limitations under the License. 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; @@ -38,7 +38,7 @@ limitations under the License. } .mx_AppearanceUserSettingsTab_fontSlider_preview { - border: 1px solid $input-darker-bg-color; + border: 1px solid $appearance-tab-border-color; border-radius: 10px; padding: 0 16px 9px 16px; pointer-events: none; @@ -56,12 +56,14 @@ limitations under the License. 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 { @@ -115,7 +117,8 @@ limitations under the License. } &.mx_ThemeSelector_dark { - background-color: #181b21; + // 5% lightened version of 181b21 + background-color: #25282e; color: #f3f8fd; > input > div { @@ -163,10 +166,11 @@ limitations under the License. width: 300px; - border: 1px solid $input-darker-bg-color; + border: 1px solid $appearance-tab-border-color; border-radius: 10px; - .mx_EventTile_msgOption { + .mx_EventTile_msgOption, + .mx_MessageActionBar { display: none; } @@ -175,6 +179,7 @@ limitations under the License. display: flex; align-items: center; padding: 10px; + pointer-events: none; } .mx_RadioButton { @@ -188,7 +193,7 @@ limitations under the License. } .mx_RadioButton { - border-top: 1px solid $input-darker-bg-color; + border-top: 1px solid $appearance-tab-border-color; > input + div { border-color: rgba($muted-fg-color, 0.2); diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 50f3c08782..69fc91f222 100644 --- a/res/themes/dark/css/_dark.scss +++ b/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 -$font-slider-bg-color: $room-highlight-color; +// Appearance tab colors +$appearance-tab-border-color: $room-highlight-color; // ***** Mixins! ***** diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 355cc1301c..57dc1fa5e0 100644 --- a/res/themes/light/css/_light.scss +++ b/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! ***** diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index fa600196e5..7d8b774955 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -108,7 +108,7 @@ export default class EventTilePreview extends React.Component { }, }; - + return event; } public render() {