From 6e30673164b41ecd2597e7d288930b2e17801364 Mon Sep 17 00:00:00 2001 From: Steffen Kolmer Date: Fri, 27 Aug 2021 19:23:26 +0200 Subject: [PATCH 1/9] Show spinner if user id is missing in event tile preview --- src/components/views/elements/EventTilePreview.tsx | 3 +++ .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index 68a70133e6..d1386b63f4 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -25,6 +25,7 @@ import SettingsStore from "../../../settings/SettingsStore"; import { Layout } from "../../../settings/Layout"; import { UIFeature } from "../../../settings/UIFeature"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import InlineSpinner from './InlineSpinner'; interface IProps { /** @@ -118,6 +119,8 @@ export default class EventTilePreview extends React.Component { } public render() { + if (!this.props.userId) return
; + const event = this.fakeEvent(this.state); const className = classnames(this.props.className, { diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index cbf0b7916c..47c0f712bd 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -92,8 +92,8 @@ export default class AppearanceUserSettingsTab extends React.Component Date: Fri, 27 Aug 2021 19:32:38 +0200 Subject: [PATCH 2/9] Update props and state interfaces --- src/components/views/elements/EventTilePreview.tsx | 2 +- src/components/views/settings/LayoutSwitcher.tsx | 2 +- .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index d1386b63f4..4e03508305 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -46,7 +46,7 @@ interface IProps { /** * The ID of the displayed user */ - userId: string; + userId?: string; /** * The display name of the displayed user diff --git a/src/components/views/settings/LayoutSwitcher.tsx b/src/components/views/settings/LayoutSwitcher.tsx index dd7accf9a8..ad8abd0033 100644 --- a/src/components/views/settings/LayoutSwitcher.tsx +++ b/src/components/views/settings/LayoutSwitcher.tsx @@ -26,7 +26,7 @@ import { Layout } from "../../../settings/Layout"; import { SettingLevel } from "../../../settings/SettingLevel"; interface IProps { - userId: string; + userId?: string; displayName: string; avatarUrl: string; messagePreviewText: string; diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 47c0f712bd..bc54a8155c 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -67,7 +67,7 @@ interface IState extends IThemeState { showAdvanced: boolean; layout: Layout; // User profile data for the message preview - userId: string; + userId?: string; displayName: string; avatarUrl: string; } From 9b495eeec32b22f26129bcc29ab411804150bf39 Mon Sep 17 00:00:00 2001 From: Steffen Kolmer Date: Fri, 27 Aug 2021 20:10:01 +0200 Subject: [PATCH 3/9] Optimized style --- src/components/views/elements/EventTilePreview.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index 4e03508305..3b4351f5e8 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -119,15 +119,15 @@ export default class EventTilePreview extends React.Component { } public render() { - if (!this.props.userId) return
; - - const event = this.fakeEvent(this.state); - const className = classnames(this.props.className, { "mx_IRCLayout": this.props.layout == Layout.IRC, "mx_GroupLayout": this.props.layout == Layout.Group, }); + if (!this.props.userId) return
; + + const event = this.fakeEvent(this.state); + return
Date: Fri, 27 Aug 2021 20:11:34 +0200 Subject: [PATCH 4/9] Fixed padding --- src/components/views/elements/EventTilePreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index 3b4351f5e8..a433bd4b53 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -124,7 +124,7 @@ export default class EventTilePreview extends React.Component { "mx_GroupLayout": this.props.layout == Layout.Group, }); - if (!this.props.userId) return
; + if (!this.props.userId) return
; const event = this.fakeEvent(this.state); From f65eff103e34966012c13dbe61a214c36628a64a Mon Sep 17 00:00:00 2001 From: Steffen Kolmer Date: Fri, 27 Aug 2021 20:48:29 +0200 Subject: [PATCH 5/9] Switch from inline-spinner to spinner --- src/components/views/elements/EventTilePreview.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index a433bd4b53..5bea8a0706 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -25,7 +25,7 @@ import SettingsStore from "../../../settings/SettingsStore"; import { Layout } from "../../../settings/Layout"; import { UIFeature } from "../../../settings/UIFeature"; import { replaceableComponent } from "../../../utils/replaceableComponent"; -import InlineSpinner from './InlineSpinner'; +import Spinner from './Spinner'; interface IProps { /** @@ -124,7 +124,7 @@ export default class EventTilePreview extends React.Component { "mx_GroupLayout": this.props.layout == Layout.Group, }); - if (!this.props.userId) return
; + if (!this.props.userId) return
; const event = this.fakeEvent(this.state); From d76adde1aba4fc6709dec5bb37a8db135a6d482e Mon Sep 17 00:00:00 2001 From: Steffen Kolmer Date: Sat, 28 Aug 2021 13:41:24 +0200 Subject: [PATCH 6/9] Use scss instead of inline styles --- res/css/_components.scss | 1 + res/css/views/elements/_EventTilePreview.scss | 22 +++++++++++++++++++ .../views/elements/EventTilePreview.tsx | 2 +- 3 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 res/css/views/elements/_EventTilePreview.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index 566b84a7c8..ffaec43b68 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -132,6 +132,7 @@ @import "./views/elements/_EditableItemList.scss"; @import "./views/elements/_ErrorBoundary.scss"; @import "./views/elements/_EventListSummary.scss"; +@import "./views/elements/_EventTilePreview.scss"; @import "./views/elements/_FacePile.scss"; @import "./views/elements/_Field.scss"; @import "./views/elements/_ImageView.scss"; diff --git a/res/css/views/elements/_EventTilePreview.scss b/res/css/views/elements/_EventTilePreview.scss new file mode 100644 index 0000000000..a8c0deabbe --- /dev/null +++ b/res/css/views/elements/_EventTilePreview.scss @@ -0,0 +1,22 @@ +/* +Copyright 2016 OpenMarket Ltd + +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. +*/ + +.mx_EventTilePreview_loader { + &.mx_IRCLayout, + &.mx_GroupLayout { + padding: 9px 0; + } +} diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index 5bea8a0706..183ac09268 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -124,7 +124,7 @@ export default class EventTilePreview extends React.Component { "mx_GroupLayout": this.props.layout == Layout.Group, }); - if (!this.props.userId) return
; + if (!this.props.userId) return
; const event = this.fakeEvent(this.state); From 9fdc5659b7df4bbb8703f8144cc08aeb043d1c09 Mon Sep 17 00:00:00 2001 From: Steffen Kolmer Date: Sat, 28 Aug 2021 13:56:08 +0200 Subject: [PATCH 7/9] Fixed eslint error and copyright header --- res/css/views/elements/_EventTilePreview.scss | 2 +- src/components/views/elements/EventTilePreview.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_EventTilePreview.scss b/res/css/views/elements/_EventTilePreview.scss index a8c0deabbe..6bb726168f 100644 --- a/res/css/views/elements/_EventTilePreview.scss +++ b/res/css/views/elements/_EventTilePreview.scss @@ -1,5 +1,5 @@ /* -Copyright 2016 OpenMarket Ltd +Copyright 2021 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. diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index 183ac09268..8928c45fc8 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -124,7 +124,11 @@ export default class EventTilePreview extends React.Component { "mx_GroupLayout": this.props.layout == Layout.Group, }); - if (!this.props.userId) return
; + if (!this.props.userId) { + return
+ +
; + } const event = this.fakeEvent(this.state); From 3ef9584f688d0df87b40810b626213a4a2b1078e Mon Sep 17 00:00:00 2001 From: Steffen Kolmer Date: Sat, 28 Aug 2021 14:00:18 +0200 Subject: [PATCH 8/9] Simplify things --- src/components/views/elements/EventTilePreview.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index 8928c45fc8..bea060fcca 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -122,13 +122,10 @@ export default class EventTilePreview extends React.Component { const className = classnames(this.props.className, { "mx_IRCLayout": this.props.layout == Layout.IRC, "mx_GroupLayout": this.props.layout == Layout.Group, + "mx_EventTilePreview_loader": !this.props.userId }); - if (!this.props.userId) { - return
- -
; - } + if (!this.props.userId) return
; const event = this.fakeEvent(this.state); From 6a550f2f9c01035fc01e2e0fe2e191285d986285 Mon Sep 17 00:00:00 2001 From: Steffen Kolmer Date: Sat, 28 Aug 2021 14:04:00 +0200 Subject: [PATCH 9/9] Added trailing comma to make eslint happy --- src/components/views/elements/EventTilePreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index bea060fcca..a7ebf40c3a 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -122,7 +122,7 @@ export default class EventTilePreview extends React.Component { const className = classnames(this.props.className, { "mx_IRCLayout": this.props.layout == Layout.IRC, "mx_GroupLayout": this.props.layout == Layout.Group, - "mx_EventTilePreview_loader": !this.props.userId + "mx_EventTilePreview_loader": !this.props.userId, }); if (!this.props.userId) return
;