From 0a6c20cf77af78f24bd786809e7ca5449e3326a0 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 8 Nov 2021 19:19:59 +0100 Subject: [PATCH 01/35] add maximise widget functionality --- res/css/_components.scss | 1 + .../views/right_panel/_RoomSummaryCard.scss | 18 ++- res/css/views/rooms/_AppMaximisedDrawer.scss | 46 ++++++ res/css/views/rooms/_AppsDrawer.scss | 8 + .../element-icons/room/widgets/maximise.svg | 3 + .../element-icons/room/widgets/minimise.svg | 3 + src/components/structures/RoomView.tsx | 109 +++++++++---- src/components/views/elements/AppTile.tsx | 30 +++- .../views/right_panel/RoomSummaryCard.tsx | 14 ++ .../views/rooms/AppMaximisedDrawer.tsx | 143 ++++++++++++++++++ src/i18n/strings/en_EN.json | 2 + src/stores/widgets/WidgetLayoutStore.ts | 49 +++++- 12 files changed, 393 insertions(+), 33 deletions(-) create mode 100644 res/css/views/rooms/_AppMaximisedDrawer.scss create mode 100644 res/img/element-icons/room/widgets/maximise.svg create mode 100644 res/img/element-icons/room/widgets/minimise.svg create mode 100644 src/components/views/rooms/AppMaximisedDrawer.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index d4c383b1fe6..866b26d9acf 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -208,6 +208,7 @@ @import "./views/right_panel/_VerificationPanel.scss"; @import "./views/right_panel/_WidgetCard.scss"; @import "./views/room_settings/_AliasSettings.scss"; +@import "./views/rooms/_AppMaximisedDrawer.scss"; @import "./views/rooms/_AppsDrawer.scss"; @import "./views/rooms/_Autocomplete.scss"; @import "./views/rooms/_AuxPanel.scss"; diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index e08a11cd36a..a414619b2da 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -133,6 +133,8 @@ limitations under the License. } .mx_RoomSummaryCard_app_pinToggle, + .mx_RoomSummaryCard_app_maximise, + .mx_RoomSummaryCard_app_minimise, .mx_RoomSummaryCard_app_options { position: absolute; top: 0; @@ -174,9 +176,23 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/room/pin-upright.svg'); } } + .mx_RoomSummaryCard_app_maximise { + right: 48px; - .mx_RoomSummaryCard_app_options { + &::before { + mask-image: url('$(res)/img/element-icons/room/widgets/maximise.svg'); + } + } + .mx_RoomSummaryCard_app_minimise { right: 48px; + &::before { + background-color: $accent-color; + mask-image: url('$(res)/img/element-icons/room/widgets/minimise.svg'); + } + } + + .mx_RoomSummaryCard_app_options { + right: 72px; display: none; &::before { diff --git a/res/css/views/rooms/_AppMaximisedDrawer.scss b/res/css/views/rooms/_AppMaximisedDrawer.scss new file mode 100644 index 00000000000..7741afc8f99 --- /dev/null +++ b/res/css/views/rooms/_AppMaximisedDrawer.scss @@ -0,0 +1,46 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2019 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. +*/ + +.mx_AppMaximisedContainer { + display: flex; + flex-direction: row; + align-items: stretch; + justify-content: center; + height: 100%; + width: 100%; + flex: 1; + flex-grow: 1; + min-height: 0; + padding: 5px; + + .mx_AppTile:first-of-type { + border-left-width: 8px; + border-radius: 10px 0 0 10px; + } + .mx_AppTile:last-of-type { + border-right-width: 8px; + border-radius: 0 10px 10px 0; + } + + .mx_ResizeHandle_horizontal { + position: relative; + + > div { + width: 0; + } + } +} \ No newline at end of file diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 1276b13fdeb..d88c2166c94 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -227,6 +227,14 @@ $MinWidth: 240px; margin: 0 3px; } +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_minWidget { + mask-image: url('$(res)/img/element-icons/room/widgets/minimise.svg'); +} + +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maxWidget { + mask-image: url('$(res)/img/element-icons/room/widgets/maximise.svg'); +} + .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout { mask-image: url('$(res)/img/feather-customised/widget/external-link.svg'); } diff --git a/res/img/element-icons/room/widgets/maximise.svg b/res/img/element-icons/room/widgets/maximise.svg new file mode 100644 index 00000000000..ed6e021299c --- /dev/null +++ b/res/img/element-icons/room/widgets/maximise.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/widgets/minimise.svg b/res/img/element-icons/room/widgets/minimise.svg new file mode 100644 index 00000000000..58c62750c71 --- /dev/null +++ b/res/img/element-icons/room/widgets/minimise.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 03cca683aee..5bcf393bd4b 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -95,6 +95,7 @@ import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline'; import { dispatchShowThreadEvent } from '../../dispatcher/dispatch-actions/threads'; import { fetchInitialEvent } from "../../utils/EventUtils"; import { ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload"; +import AppMaximisedDrawer from '../views/rooms/AppMaximisedDrawer'; const DEBUG = false; let debuglog = function(msg: string) {}; @@ -119,6 +120,13 @@ interface IRoomProps extends MatrixClientProps { onRegistered?(credentials: IMatrixClientCreds): void; } +// This defines, the content of the mainSplit +// AND if the mainSplit does not contain the Timeline, the chat is shown in the right panel. +enum MainSplitContentType { + Timeline, + MaximisedWidget, + // Video +} export interface IRoomState { room?: Room; roomId?: string; @@ -188,6 +196,7 @@ export interface IRoomState { rejecting?: boolean; rejectError?: Error; hasPinnedWidgets?: boolean; + mainSplitContentType: MainSplitContentType; dragCounter: number; // whether or not a spaces context switch brought us here, // if it did we don't want the room to be marked as read as soon as it is loaded. @@ -254,6 +263,7 @@ export class RoomView extends React.Component { showAvatarChanges: true, showDisplaynameChanges: true, matrixClientIsReady: this.context && this.context.isInitialSyncComplete(), + mainSplitContentType: MainSplitContentType.Timeline, dragCounter: 0, timelineRenderingType: TimelineRenderingType.Room, liveTimeline: undefined, @@ -306,18 +316,35 @@ export class RoomView extends React.Component { } private onWidgetStoreUpdate = () => { - if (this.state.room) { - this.checkWidgets(this.state.room); - } + if (!this.state.room) return; + this.checkWidgets(this.state.room); + }; + + private onWidgetEchoStoreUpdate = () => { + if (!this.state.room) return; + this.checkWidgets(this.state.room); + }; + + private onWidgetLayoutChange = () => { + if (!this.state.room) return; + this.checkWidgets(this.state.room); // we cheat here by calling the thing that matters }; private checkWidgets = (room) => { this.setState({ - hasPinnedWidgets: WidgetLayoutStore.instance.getContainerWidgets(room, Container.Top).length > 0, - showApps: this.shouldShowApps(room), + hasPinnedWidgets: WidgetLayoutStore.instance.hasPinnedWidgets(this.state.room), + mainSplitContentType: this.getMainSplitContentType(), + showApps: this.shouldShowApps(this.state.room), }); }; + private getMainSplitContentType = () => { + // TODO-video check if video should be displayed in main panel + return (WidgetLayoutStore.instance.hasMaximisedWidget(this.state.room)) + ? MainSplitContentType.MaximisedWidget + : MainSplitContentType.Timeline; + }; + private onReadReceiptsChange = () => { this.setState({ showReadReceipts: SettingsStore.getValue("showReadReceipts", this.state.roomId), @@ -504,18 +531,6 @@ export class RoomView extends React.Component { } } - private onWidgetEchoStoreUpdate = () => { - if (!this.state.room) return; - this.setState({ - hasPinnedWidgets: WidgetLayoutStore.instance.getContainerWidgets(this.state.room, Container.Top).length > 0, - showApps: this.shouldShowApps(this.state.room), - }); - }; - - private onWidgetLayoutChange = () => { - this.onWidgetEchoStoreUpdate(); // we cheat here by calling the thing that matters - }; - private setupRoom(room: Room, roomId: string, joining: boolean, shouldPeek: boolean) { // if this is an unknown room then we're in one of three states: // - This is a room we can peek into (search engine) (we can /peek) @@ -972,7 +987,7 @@ export class RoomView extends React.Component { if (this.unmounted) return; // Attach a widget store listener only when we get a room WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(room), this.onWidgetLayoutChange); - this.onWidgetLayoutChange(); // provoke an update + // this.onWidgetLayoutChange(); // provoke an update // Done with checkwidget now TODO-maximise_widget remove comment after review this.calculatePeekRules(room); this.updatePreviewUrlVisibility(room); @@ -2098,6 +2113,52 @@ export class RoomView extends React.Component { const showChatEffects = SettingsStore.getValue('showChatEffects'); + // Decide what to show in the main split + let mainSplitBody; + if (SettingsStore.getValue("feature_maximised_widgets")) { + switch (this.state.mainSplitContentType) { + case MainSplitContentType.Timeline: + mainSplitBody = + { auxPanel } +
+ { fileDropTarget } + { topUnreadMessagesBar } + { jumpToBottom } + { messagePanel } + { searchResultsPanel } +
+ { statusBarArea } + { previewBar } + { messageComposer } + ; + break; + case MainSplitContentType.MaximisedWidget: + mainSplitBody = ; + break; + // TODO-video MainSplitContentType.Video: + // break; + } + } else { + mainSplitBody = + { auxPanel } +
+ { fileDropTarget } + { topUnreadMessagesBar } + { jumpToBottom } + { messagePanel } + { searchResultsPanel } +
+ { statusBarArea } + { previewBar } + { messageComposer } + ; + } + return (
@@ -2120,17 +2181,7 @@ export class RoomView extends React.Component { />
- { auxPanel } -
- { fileDropTarget } - { topUnreadMessagesBar } - { jumpToBottom } - { messagePanel } - { searchResultsPanel } -
- { statusBarArea } - { previewBar } - { messageComposer } + { mainSplitBody }
diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index dcb6e62649b..b125798a264 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -40,7 +40,7 @@ import WidgetAvatar from "../avatars/WidgetAvatar"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { Room } from "matrix-js-sdk/src/models/room"; import { IApp } from "../../../stores/WidgetStore"; - +import { WidgetLayoutStore, Container } from "../../../stores/widgets/WidgetLayoutStore"; interface IProps { app: IApp; // If room is not specified then it is an account level widget @@ -400,6 +400,16 @@ export default class AppTile extends React.Component { { target: '_blank', href: this.sgWidget.popoutUrl, rel: 'noreferrer noopener' }).click(); }; + private onMaxMinWidgetClick = (): void => { + // TODO-video make this not interfere with the new video conference design + + const targetContainer = + WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center) + ? Container.Right + : Container.Center; + WidgetLayoutStore.instance.moveToContainer(this.props.room, this.props.app, targetContainer); + }; + private onContextMenuClick = (): void => { this.setState({ menuDisplayed: true }); }; @@ -522,6 +532,23 @@ export default class AppTile extends React.Component { /> ); } + let maxMinButton; + if (SettingsStore.getValue("feature_maximised_widgets")) { + const widgetIsMaximised = WidgetLayoutStore.instance. + isInContainer(this.props.room, this.props.app, Container.Center); + maxMinButton = ; + } return
@@ -531,6 +558,7 @@ export default class AppTile extends React.Component { { this.props.showTitle && this.getTileTitle() } + { maxMinButton } { (this.props.showPopout && !this.state.requiresClient) && = ({ app, room }) => { mx_RoomSummaryCard_Button_pinned: isPinned, }); + const isMaximised = WidgetLayoutStore.instance.isInContainer(room, app, Container.Center); + const toggleMaximised = isMaximised + ? () => { WidgetLayoutStore.instance.moveToContainer(room, app, Container.Right); } + : () => { WidgetLayoutStore.instance.moveToContainer(room, app, Container.Center); }; + + const maximiseTitle = isMaximised ? _t("Minimise widget") : _t("Maximise widget"); + return
= ({ app, room }) => { disabled={cannotPin} yOffset={-24} /> + { SettingsStore.getValue("feature_maximised_widgets") && + } { contextMenu }
; diff --git a/src/components/views/rooms/AppMaximisedDrawer.tsx b/src/components/views/rooms/AppMaximisedDrawer.tsx new file mode 100644 index 00000000000..6de480ac34d --- /dev/null +++ b/src/components/views/rooms/AppMaximisedDrawer.tsx @@ -0,0 +1,143 @@ +/* +Copyright 2017 Vector Creations Ltd +Copyright 2018 New Vector 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. +*/ + +import React from 'react'; + +import AppTile from '../elements/AppTile'; +import dis from '../../../dispatcher/dispatcher'; +import * as sdk from '../../../index'; +import * as ScalarMessaging from '../../../ScalarMessaging'; +import WidgetUtils from '../../../utils/WidgetUtils'; +import WidgetEchoStore from "../../../stores/WidgetEchoStore"; +import ResizeNotifier from "../../../utils/ResizeNotifier"; +import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { IApp } from "../../../stores/WidgetStore"; + +interface IProps { + userId: string; + room: Room; + resizeNotifier: ResizeNotifier; + showApps?: boolean; // Should apps be rendered + maxHeight: number; +} + +interface IState { + app: IApp; + resizing: boolean; +} + +@replaceableComponent("views.rooms.AppMaximisedDrawer") +export default class AppMaximisedDrawer extends React.Component { + private dispatcherRef: string; + public static defaultProps: Partial = { + showApps: true, + }; + + constructor(props: IProps) { + super(props); + + this.state = { + app: this.getApp(), + resizing: false, + }; + + this.props.resizeNotifier.on("isResizing", this.onIsResizing); + } + + public componentDidMount(): void { + ScalarMessaging.startListening(); + WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps); + } + + public componentWillUnmount(): void { + ScalarMessaging.stopListening(); + WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps); + if (this.dispatcherRef) dis.unregister(this.dispatcherRef); + this.props.resizeNotifier.off("isResizing", this.onIsResizing); + } + + private onIsResizing = (resizing: boolean): void => { + // This inoformation is needed to make sure the widget does not consume the pointer events for resizing. + this.setState({ resizing: resizing }); + }; + + public componentDidUpdate(prevProps: IProps, prevState: IState): void { + if (prevProps.userId !== this.props.userId || prevProps.room !== this.props.room) { + // Room has changed, update app + this.updateApps(); + } + } + + private getApp = (): IApp => { + if (WidgetLayoutStore.instance.hasMaximisedWidget(this.props.room)) { + return WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Center)[0]; + } else { + console.error("Maximised widget container is shown although there is no app in the center container"); + return undefined; + } + }; + + private updateApps = (): void => { + this.setState({ + app: this.getApp(), + }); + }; + + public render(): JSX.Element { + // Should the showApps button also impct the maximied widget? TODO-maximise_widget Remove after review + // if (!this.props.showApps) return
; + + const app = ; + + if (!app) { + return
; + } + + let spinner; + if ( + !app && WidgetEchoStore.roomHasPendingWidgets( + this.props.room.roomId, + WidgetUtils.getRoomWidgets(this.props.room), + ) + ) { + const Loader = sdk.getComponent("elements.Spinner"); + spinner = ; + } + return ( + +
+ + { app } + +
+ { spinner } + + ); + } +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 86d77489cba..f34ba50cd02 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1853,6 +1853,8 @@ "Threads": "Threads", "Room Info": "Room Info", "You can only pin up to %(count)s widgets|other": "You can only pin up to %(count)s widgets", + "Minimise widget": "Minimise widget", + "Maximise widget": "Maximise widget", "Unpin a widget to view it in this panel": "Unpin a widget to view it in this panel", "Set my room layout for everyone": "Set my room layout for everyone", "Widgets": "Widgets", diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts index 7efc5fb195b..9ac3b542529 100644 --- a/src/stores/widgets/WidgetLayoutStore.ts +++ b/src/stores/widgets/WidgetLayoutStore.ts @@ -26,6 +26,7 @@ import { SettingLevel } from "../../settings/SettingLevel"; import { arrayFastClone } from "../../utils/arrays"; import { UPDATE_EVENT } from "../AsyncStore"; import { compare } from "../../utils/strings"; +import { some } from "lodash"; export const WIDGET_LAYOUT_EVENT_TYPE = "io.element.widgets.layout"; @@ -40,6 +41,7 @@ export enum Container { // ... more as needed. Note that most of this code assumes that there // are only two containers, and that only the top container is special. + Center = "center" } export interface IStoredLayout { @@ -201,12 +203,21 @@ export class WidgetLayoutStore extends ReadyWatchingStore { // function will go into the right container. const topWidgets: IApp[] = []; const rightWidgets: IApp[] = []; + const centerWidgets: IApp[] = []; for (const widget of widgets) { const stateContainer = roomLayout?.widgets?.[widget.id]?.container; const manualContainer = userLayout?.widgets?.[widget.id]?.container; const isLegacyPinned = !!legacyPinned?.[widget.id]; const defaultContainer = WidgetType.JITSI.matches(widget.type) ? Container.Top : Container.Right; - + if (stateContainer === Container.Center || manualContainer === Container.Center) { + if (centerWidgets.length) { + console.error("Tried to push a second Widget into the center container"); + } else { + centerWidgets.push(widget); + } + // The widget won't need to be put in any oter container. + continue; + } let targetContainer = defaultContainer; if (!!manualContainer || !!stateContainer) { targetContainer = (manualContainer) ? manualContainer : stateContainer; @@ -323,6 +334,11 @@ export class WidgetLayoutStore extends ReadyWatchingStore { ordered: rightWidgets, }; } + if (centerWidgets.length) { + this.byRoom[room.roomId][Container.Center] = { + ordered: centerWidgets, + }; + } const afterChanges = JSON.stringify(this.byRoom[room.roomId]); if (afterChanges !== beforeChanges) { @@ -339,7 +355,11 @@ export class WidgetLayoutStore extends ReadyWatchingStore { } public canAddToContainer(room: Room, container: Container): boolean { - return this.getContainerWidgets(room, container).length < MAX_PINNED; + switch (container) { + case Container.Top: return this.getContainerWidgets(room, container).length < MAX_PINNED; + case Container.Right: return this.getContainerWidgets(room, container).length < MAX_PINNED; + case Container.Center: return this.getContainerWidgets(room, container).length < 1; + } } public getResizerDistributions(room: Room, container: Container): string[] { // yes, string. @@ -426,6 +446,31 @@ export class WidgetLayoutStore extends ReadyWatchingStore { this.updateUserLayout(room, { [widget.id]: { container: toContainer }, }); + switch (toContainer) { + case Container.Center: + for (const w of this.getContainerWidgets(room, Container.Top)) { + this.moveToContainer(room, w, Container.Right); + } + for (const w of this.getContainerWidgets(room, Container.Top)) { + if (w !== widget) {this.moveToContainer(room, w, Container.Right);} + } + break; + case Container.Right: + break; + case Container.Top: + if (this.hasMaximisedWidget(room) && toContainer) { + this.moveToContainer(room, this.getContainerWidgets(room, Container.Center)[0], Container.Right); + } + break; + } + } + + public hasMaximisedWidget(room: Room) { + return this.getContainerWidgets(room, Container.Center).length > 0; + } + + public hasPinnedWidgets(room: Room) { + return this.getContainerWidgets(room, Container.Top).length > 0; } public canCopyLayoutToRoom(room: Room): boolean { From a9a2c41e04b12785230d33f4ca0cf74e991654c0 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 8 Nov 2021 19:41:04 +0100 Subject: [PATCH 02/35] fix linter issues --- src/components/structures/RoomView.tsx | 2 +- src/stores/widgets/WidgetLayoutStore.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 5bcf393bd4b..4590da83953 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -196,7 +196,7 @@ export interface IRoomState { rejecting?: boolean; rejectError?: Error; hasPinnedWidgets?: boolean; - mainSplitContentType: MainSplitContentType; + mainSplitContentType?: MainSplitContentType; dragCounter: number; // whether or not a spaces context switch brought us here, // if it did we don't want the room to be marked as read as soon as it is loaded. diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts index 9ac3b542529..6b0aa4928c1 100644 --- a/src/stores/widgets/WidgetLayoutStore.ts +++ b/src/stores/widgets/WidgetLayoutStore.ts @@ -26,7 +26,6 @@ import { SettingLevel } from "../../settings/SettingLevel"; import { arrayFastClone } from "../../utils/arrays"; import { UPDATE_EVENT } from "../AsyncStore"; import { compare } from "../../utils/strings"; -import { some } from "lodash"; export const WIDGET_LAYOUT_EVENT_TYPE = "io.element.widgets.layout"; From cb4ae5f72fcf74043d08dfb6ee45872642254e73 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 8 Nov 2021 19:44:56 +0100 Subject: [PATCH 03/35] fix style lint issues --- res/css/views/rooms/_AppMaximisedDrawer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_AppMaximisedDrawer.scss b/res/css/views/rooms/_AppMaximisedDrawer.scss index 7741afc8f99..af738750711 100644 --- a/res/css/views/rooms/_AppMaximisedDrawer.scss +++ b/res/css/views/rooms/_AppMaximisedDrawer.scss @@ -43,4 +43,4 @@ limitations under the License. width: 0; } } -} \ No newline at end of file +} From e68c8f154181ff17775e1ba9e6d3655aab6e3811 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 9 Nov 2021 17:18:52 +0100 Subject: [PATCH 04/35] Update src/components/structures/RoomView.tsx Co-authored-by: J. Ryan Stinnett --- src/components/structures/RoomView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 4590da83953..46bafcb024e 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -327,7 +327,7 @@ export class RoomView extends React.Component { private onWidgetLayoutChange = () => { if (!this.state.room) return; - this.checkWidgets(this.state.room); // we cheat here by calling the thing that matters + this.checkWidgets(this.state.room); }; private checkWidgets = (room) => { From 8608c59f4fc0dbadbfe9e3262d8f80d6228ca001 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 9 Nov 2021 17:31:41 +0100 Subject: [PATCH 05/35] fix typo Co-authored-by: J. Ryan Stinnett --- src/stores/widgets/WidgetLayoutStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts index 6b0aa4928c1..2c2c65edb49 100644 --- a/src/stores/widgets/WidgetLayoutStore.ts +++ b/src/stores/widgets/WidgetLayoutStore.ts @@ -214,7 +214,7 @@ export class WidgetLayoutStore extends ReadyWatchingStore { } else { centerWidgets.push(widget); } - // The widget won't need to be put in any oter container. + // The widget won't need to be put in any other container. continue; } let targetContainer = defaultContainer; From bb543a2012fcb1c9bd224134126b194e09f8a401 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 9 Nov 2021 17:33:43 +0100 Subject: [PATCH 06/35] typo Co-authored-by: J. Ryan Stinnett --- src/components/views/rooms/AppMaximisedDrawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/AppMaximisedDrawer.tsx b/src/components/views/rooms/AppMaximisedDrawer.tsx index 6de480ac34d..a82a7f41af9 100644 --- a/src/components/views/rooms/AppMaximisedDrawer.tsx +++ b/src/components/views/rooms/AppMaximisedDrawer.tsx @@ -73,7 +73,7 @@ export default class AppMaximisedDrawer extends React.Component } private onIsResizing = (resizing: boolean): void => { - // This inoformation is needed to make sure the widget does not consume the pointer events for resizing. + // This information is needed to make sure the widget does not consume the pointer events for resizing. this.setState({ resizing: resizing }); }; From 4cc316db78fc185a6cc176f3d9aaa3971d891d99 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Wed, 10 Nov 2021 13:02:32 +0100 Subject: [PATCH 07/35] Remove caps "AND " Co-authored-by: J. Ryan Stinnett --- src/components/structures/RoomView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 46bafcb024e..c9ed7b7f888 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -120,8 +120,8 @@ interface IRoomProps extends MatrixClientProps { onRegistered?(credentials: IMatrixClientCreds): void; } -// This defines, the content of the mainSplit -// AND if the mainSplit does not contain the Timeline, the chat is shown in the right panel. +// This defines the content of the mainSplit. +// If the mainSplit does not contain the Timeline, the chat is shown in the right panel. enum MainSplitContentType { Timeline, MaximisedWidget, From 4a3b48dc2c37ed5b276b004dff317f3078ddb3fe Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Wed, 10 Nov 2021 13:10:26 +0100 Subject: [PATCH 08/35] fix spelling Co-authored-by: J. Ryan Stinnett --- src/stores/widgets/WidgetLayoutStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts index 2c2c65edb49..e54e8a573d8 100644 --- a/src/stores/widgets/WidgetLayoutStore.ts +++ b/src/stores/widgets/WidgetLayoutStore.ts @@ -210,7 +210,7 @@ export class WidgetLayoutStore extends ReadyWatchingStore { const defaultContainer = WidgetType.JITSI.matches(widget.type) ? Container.Top : Container.Right; if (stateContainer === Container.Center || manualContainer === Container.Center) { if (centerWidgets.length) { - console.error("Tried to push a second Widget into the center container"); + console.error("Tried to push a second widget into the center container"); } else { centerWidgets.push(widget); } From 5d14783bb4c01f11c7752d446cb1bcaa4028d454 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Wed, 10 Nov 2021 13:11:31 +0100 Subject: [PATCH 09/35] improove readibility for continue in for Co-authored-by: J. Ryan Stinnett --- src/stores/widgets/WidgetLayoutStore.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts index e54e8a573d8..e6a87c8eebf 100644 --- a/src/stores/widgets/WidgetLayoutStore.ts +++ b/src/stores/widgets/WidgetLayoutStore.ts @@ -451,7 +451,8 @@ export class WidgetLayoutStore extends ReadyWatchingStore { this.moveToContainer(room, w, Container.Right); } for (const w of this.getContainerWidgets(room, Container.Top)) { - if (w !== widget) {this.moveToContainer(room, w, Container.Right);} + if (w === widget) continue; + this.moveToContainer(room, w, Container.Right); } break; case Container.Right: From 74f9b934fff160411bcc3ff5fc6409da3e307a4a Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 10 Nov 2021 14:20:47 +0100 Subject: [PATCH 10/35] review fixes --- res/css/views/rooms/_AppMaximisedDrawer.scss | 2 +- res/css/views/rooms/_AppsDrawer.scss | 4 +- src/components/structures/RoomView.tsx | 73 ++++++++----------- src/components/views/elements/AppTile.tsx | 2 - .../views/rooms/AppMaximisedDrawer.tsx | 2 +- 5 files changed, 33 insertions(+), 50 deletions(-) diff --git a/res/css/views/rooms/_AppMaximisedDrawer.scss b/res/css/views/rooms/_AppMaximisedDrawer.scss index af738750711..bda77f9487f 100644 --- a/res/css/views/rooms/_AppMaximisedDrawer.scss +++ b/res/css/views/rooms/_AppMaximisedDrawer.scss @@ -1,6 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd -Copyright 2019 The Matrix.org Foundation C.I.C. +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/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index d88c2166c94..8d8af2d2218 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -228,11 +228,11 @@ $MinWidth: 240px; } .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_minWidget { - mask-image: url('$(res)/img/element-icons/room/widgets/minimise.svg'); + mask-image: url('$(res)/img/feather-customised/minimise.svg'); } .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maxWidget { - mask-image: url('$(res)/img/element-icons/room/widgets/maximise.svg'); + mask-image: url('$(res)/img/feather-customised/maximise.svg'); } .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout { diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index c9ed7b7f888..9658da3849d 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -987,7 +987,6 @@ export class RoomView extends React.Component { if (this.unmounted) return; // Attach a widget store listener only when we get a room WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(room), this.onWidgetLayoutChange); - // this.onWidgetLayoutChange(); // provoke an update // Done with checkwidget now TODO-maximise_widget remove comment after review this.calculatePeekRules(room); this.updatePreviewUrlVisibility(room); @@ -2114,49 +2113,35 @@ export class RoomView extends React.Component { const showChatEffects = SettingsStore.getValue('showChatEffects'); // Decide what to show in the main split - let mainSplitBody; - if (SettingsStore.getValue("feature_maximised_widgets")) { - switch (this.state.mainSplitContentType) { - case MainSplitContentType.Timeline: - mainSplitBody = - { auxPanel } -
- { fileDropTarget } - { topUnreadMessagesBar } - { jumpToBottom } - { messagePanel } - { searchResultsPanel } -
- { statusBarArea } - { previewBar } - { messageComposer } - ; - break; - case MainSplitContentType.MaximisedWidget: - mainSplitBody = ; - break; - // TODO-video MainSplitContentType.Video: - // break; - } - } else { - mainSplitBody = - { auxPanel } -
- { fileDropTarget } - { topUnreadMessagesBar } - { jumpToBottom } - { messagePanel } - { searchResultsPanel } -
- { statusBarArea } - { previewBar } - { messageComposer } - ; + let mainSplitBody = + { auxPanel } +
+ { fileDropTarget } + { topUnreadMessagesBar } + { jumpToBottom } + { messagePanel } + { searchResultsPanel } +
+ { statusBarArea } + { previewBar } + { messageComposer } + ; + + switch (this.state.mainSplitContentType) { + case MainSplitContentType.Timeline: + // keep the timeline in as the mainSplitBody + break; + case MainSplitContentType.MaximisedWidget: + if (!SettingsStore.getValue("feature_maximised_widgets")) {break;} + mainSplitBody = ; + break; + // TODO-video MainSplitContentType.Video: + // break; } return ( diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index b125798a264..54694dec3d4 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -401,8 +401,6 @@ export default class AppTile extends React.Component { }; private onMaxMinWidgetClick = (): void => { - // TODO-video make this not interfere with the new video conference design - const targetContainer = WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center) ? Container.Right diff --git a/src/components/views/rooms/AppMaximisedDrawer.tsx b/src/components/views/rooms/AppMaximisedDrawer.tsx index a82a7f41af9..262d8a4575e 100644 --- a/src/components/views/rooms/AppMaximisedDrawer.tsx +++ b/src/components/views/rooms/AppMaximisedDrawer.tsx @@ -1,6 +1,6 @@ /* Copyright 2017 Vector Creations Ltd -Copyright 2018 New Vector Ltd +Copyright 2021 Matrix.org Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. From cfbdf405d5f8ade78fe45bc9de07fa27bc18d897 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 10 Nov 2021 14:51:16 +0100 Subject: [PATCH 11/35] reuse already added icons --- res/css/views/right_panel/_RoomSummaryCard.scss | 5 +++-- res/img/element-icons/room/widgets/maximise.svg | 3 --- res/img/element-icons/room/widgets/minimise.svg | 3 --- src/stores/widgets/WidgetLayoutStore.ts | 7 +++---- 4 files changed, 6 insertions(+), 12 deletions(-) delete mode 100644 res/img/element-icons/room/widgets/maximise.svg delete mode 100644 res/img/element-icons/room/widgets/minimise.svg diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index a414619b2da..1b93b713bdc 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -180,14 +180,15 @@ limitations under the License. right: 48px; &::before { - mask-image: url('$(res)/img/element-icons/room/widgets/maximise.svg'); + background-color: $secondary-fg-color; + mask-image: url('$(res)/img/feather-customised/maximise.svg'); } } .mx_RoomSummaryCard_app_minimise { right: 48px; &::before { background-color: $accent-color; - mask-image: url('$(res)/img/element-icons/room/widgets/minimise.svg'); + mask-image: url('$(res)/img/feather-customised/minimise.svg'); } } diff --git a/res/img/element-icons/room/widgets/maximise.svg b/res/img/element-icons/room/widgets/maximise.svg deleted file mode 100644 index ed6e021299c..00000000000 --- a/res/img/element-icons/room/widgets/maximise.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/room/widgets/minimise.svg b/res/img/element-icons/room/widgets/minimise.svg deleted file mode 100644 index 58c62750c71..00000000000 --- a/res/img/element-icons/room/widgets/minimise.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts index e6a87c8eebf..8ca6b3c2714 100644 --- a/src/stores/widgets/WidgetLayoutStore.ts +++ b/src/stores/widgets/WidgetLayoutStore.ts @@ -196,10 +196,9 @@ export class WidgetLayoutStore extends ReadyWatchingStore { } const roomLayout: ILayoutStateEvent = layoutEv ? layoutEv.getContent() : null; - - // We essentially just need to find the top container's widgets because we - // only have two containers. Anything not in the top widget by the end of this - // function will go into the right container. + // We filter for the center container. + // (An error is raised, if there are multiple widgets marked for the center container) + // For the right and top container we allow multiple widgets. const topWidgets: IApp[] = []; const rightWidgets: IApp[] = []; const centerWidgets: IApp[] = []; From ffb0af8b69cf7c7209ae817d9263f6ab191829a6 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 10 Nov 2021 14:55:41 +0100 Subject: [PATCH 12/35] more container comment fixes --- src/stores/widgets/WidgetLayoutStore.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts index 8ca6b3c2714..7567989e969 100644 --- a/src/stores/widgets/WidgetLayoutStore.ts +++ b/src/stores/widgets/WidgetLayoutStore.ts @@ -38,8 +38,6 @@ export enum Container { // changes needed", though this may change in the future. Right = "right", - // ... more as needed. Note that most of this code assumes that there - // are only two containers, and that only the top container is special. Center = "center" } @@ -196,9 +194,9 @@ export class WidgetLayoutStore extends ReadyWatchingStore { } const roomLayout: ILayoutStateEvent = layoutEv ? layoutEv.getContent() : null; - // We filter for the center container. + // We filter for the center container first. // (An error is raised, if there are multiple widgets marked for the center container) - // For the right and top container we allow multiple widgets. + // For the right and top container multiple widgets are allowed. const topWidgets: IApp[] = []; const rightWidgets: IApp[] = []; const centerWidgets: IApp[] = []; From 1155ae979313d4c528ec5a0d8fbad5155d516bc4 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 10 Nov 2021 15:12:43 +0100 Subject: [PATCH 13/35] fix app options button the button was at the wrong position when feature flag is disabled --- res/css/views/right_panel/_RoomSummaryCard.scss | 3 +-- src/components/views/right_panel/RoomSummaryCard.tsx | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index 1b93b713bdc..ff1589dadfc 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -180,7 +180,6 @@ limitations under the License. right: 48px; &::before { - background-color: $secondary-fg-color; mask-image: url('$(res)/img/feather-customised/maximise.svg'); } } @@ -193,7 +192,7 @@ limitations under the License. } .mx_RoomSummaryCard_app_options { - right: 72px; + right: 48px; display: none; &::before { diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 705483cbfe6..d23982ba711 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -167,6 +167,7 @@ const AppRow: React.FC = ({ app, room }) => { onClick={openMenu} title={_t("Options")} yOffset={-24} + style={{ right: SettingsStore.getValue("feature_maximised_widgets")?"72px":"" }} /> Date: Wed, 10 Nov 2021 15:34:43 +0100 Subject: [PATCH 14/35] remove error message --- .../views/rooms/AppMaximisedDrawer.tsx | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/src/components/views/rooms/AppMaximisedDrawer.tsx b/src/components/views/rooms/AppMaximisedDrawer.tsx index 262d8a4575e..4a997f6a935 100644 --- a/src/components/views/rooms/AppMaximisedDrawer.tsx +++ b/src/components/views/rooms/AppMaximisedDrawer.tsx @@ -85,12 +85,7 @@ export default class AppMaximisedDrawer extends React.Component } private getApp = (): IApp => { - if (WidgetLayoutStore.instance.hasMaximisedWidget(this.props.room)) { - return WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Center)[0]; - } else { - console.error("Maximised widget container is shown although there is no app in the center container"); - return undefined; - } + return WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Center)[0]; }; private updateApps = (): void => { @@ -100,9 +95,9 @@ export default class AppMaximisedDrawer extends React.Component }; public render(): JSX.Element { - // Should the showApps button also impct the maximied widget? TODO-maximise_widget Remove after review - // if (!this.props.showApps) return
; - + if (!this.state.app) { + return
; + } const app = pointerEvents={this.state.resizing ? 'none' : undefined} />; - if (!app) { - return
; - } - let spinner; if ( !app && WidgetEchoStore.roomHasPendingWidgets( From a76e7ec3caa24c1a05d3f43f146925fe6d01644f Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 10 Nov 2021 15:35:55 +0100 Subject: [PATCH 15/35] fix issue not beeing able to maximise only widgets with a hight index in the list could be maximised if another widget was already maximised --- src/stores/widgets/WidgetLayoutStore.ts | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts index 7567989e969..5fd9a7d46b5 100644 --- a/src/stores/widgets/WidgetLayoutStore.ts +++ b/src/stores/widgets/WidgetLayoutStore.ts @@ -439,27 +439,32 @@ export class WidgetLayoutStore extends ReadyWatchingStore { public moveToContainer(room: Room, widget: IApp, toContainer: Container) { const allWidgets = this.getAllWidgets(room); if (!allWidgets.some(([w]) => w.id === widget.id)) return; // invalid - this.updateUserLayout(room, { - [widget.id]: { container: toContainer }, - }); + // Prepare other containers (potentially move widgets to obay the following rules) switch (toContainer) { + case Container.Right: + // new "right" widget + break; case Container.Center: + // new "center" widget => all other widgets go into "right" for (const w of this.getContainerWidgets(room, Container.Top)) { this.moveToContainer(room, w, Container.Right); } - for (const w of this.getContainerWidgets(room, Container.Top)) { - if (w === widget) continue; + for (const w of this.getContainerWidgets(room, Container.Center)) { this.moveToContainer(room, w, Container.Right); } break; - case Container.Right: - break; case Container.Top: + // new "top" widget => the center widget moves into "right" if (this.hasMaximisedWidget(room) && toContainer) { this.moveToContainer(room, this.getContainerWidgets(room, Container.Center)[0], Container.Right); } break; } + + // move widgets into requested container. + this.updateUserLayout(room, { + [widget.id]: { container: toContainer }, + }); } public hasMaximisedWidget(room: Room) { From 04e0b42c29ec6e3536f05de10c0508752457844e Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 10 Nov 2021 18:23:17 +0100 Subject: [PATCH 16/35] remove maxmimisedDrawer -> add the logic to the AppDrawer --- res/css/_components.scss | 1 - res/css/views/rooms/_AppMaximisedDrawer.scss | 46 ------ src/components/structures/RoomView.tsx | 4 +- .../views/rooms/AppMaximisedDrawer.tsx | 134 ------------------ src/components/views/rooms/AppsDrawer.tsx | 74 ++++++---- 5 files changed, 49 insertions(+), 210 deletions(-) delete mode 100644 res/css/views/rooms/_AppMaximisedDrawer.scss delete mode 100644 src/components/views/rooms/AppMaximisedDrawer.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index 866b26d9acf..d4c383b1fe6 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -208,7 +208,6 @@ @import "./views/right_panel/_VerificationPanel.scss"; @import "./views/right_panel/_WidgetCard.scss"; @import "./views/room_settings/_AliasSettings.scss"; -@import "./views/rooms/_AppMaximisedDrawer.scss"; @import "./views/rooms/_AppsDrawer.scss"; @import "./views/rooms/_Autocomplete.scss"; @import "./views/rooms/_AuxPanel.scss"; diff --git a/res/css/views/rooms/_AppMaximisedDrawer.scss b/res/css/views/rooms/_AppMaximisedDrawer.scss deleted file mode 100644 index bda77f9487f..00000000000 --- a/res/css/views/rooms/_AppMaximisedDrawer.scss +++ /dev/null @@ -1,46 +0,0 @@ -/* -Copyright 2015, 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. -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_AppMaximisedContainer { - display: flex; - flex-direction: row; - align-items: stretch; - justify-content: center; - height: 100%; - width: 100%; - flex: 1; - flex-grow: 1; - min-height: 0; - padding: 5px; - - .mx_AppTile:first-of-type { - border-left-width: 8px; - border-radius: 10px 0 0 10px; - } - .mx_AppTile:last-of-type { - border-right-width: 8px; - border-radius: 0 10px 10px 0; - } - - .mx_ResizeHandle_horizontal { - position: relative; - - > div { - width: 0; - } - } -} diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 9658da3849d..76ff6bb3e89 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -95,7 +95,7 @@ import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline'; import { dispatchShowThreadEvent } from '../../dispatcher/dispatch-actions/threads'; import { fetchInitialEvent } from "../../utils/EventUtils"; import { ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload"; -import AppMaximisedDrawer from '../views/rooms/AppMaximisedDrawer'; +import AppsDrawer from '../views/rooms/AppsDrawer'; const DEBUG = false; let debuglog = function(msg: string) {}; @@ -2133,7 +2133,7 @@ export class RoomView extends React.Component { break; case MainSplitContentType.MaximisedWidget: if (!SettingsStore.getValue("feature_maximised_widgets")) {break;} - mainSplitBody = { - private dispatcherRef: string; - public static defaultProps: Partial = { - showApps: true, - }; - - constructor(props: IProps) { - super(props); - - this.state = { - app: this.getApp(), - resizing: false, - }; - - this.props.resizeNotifier.on("isResizing", this.onIsResizing); - } - - public componentDidMount(): void { - ScalarMessaging.startListening(); - WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps); - } - - public componentWillUnmount(): void { - ScalarMessaging.stopListening(); - WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps); - if (this.dispatcherRef) dis.unregister(this.dispatcherRef); - this.props.resizeNotifier.off("isResizing", this.onIsResizing); - } - - private onIsResizing = (resizing: boolean): void => { - // This information is needed to make sure the widget does not consume the pointer events for resizing. - this.setState({ resizing: resizing }); - }; - - public componentDidUpdate(prevProps: IProps, prevState: IState): void { - if (prevProps.userId !== this.props.userId || prevProps.room !== this.props.room) { - // Room has changed, update app - this.updateApps(); - } - } - - private getApp = (): IApp => { - return WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Center)[0]; - }; - - private updateApps = (): void => { - this.setState({ - app: this.getApp(), - }); - }; - - public render(): JSX.Element { - if (!this.state.app) { - return
; - } - const app = ; - - let spinner; - if ( - !app && WidgetEchoStore.roomHasPendingWidgets( - this.props.room.roomId, - WidgetUtils.getRoomWidgets(this.props.room), - ) - ) { - const Loader = sdk.getComponent("elements.Spinner"); - spinner = ; - } - return ( - -
- - { app } - -
- { spinner } - - ); - } -} diff --git a/src/components/views/rooms/AppsDrawer.tsx b/src/components/views/rooms/AppsDrawer.tsx index e4bbd3a2886..358a3d1a8bb 100644 --- a/src/components/views/rooms/AppsDrawer.tsx +++ b/src/components/views/rooms/AppsDrawer.tsx @@ -47,7 +47,8 @@ interface IProps { } interface IState { - apps: IApp[]; + // @ts-ignore - TS wants a string key, but we know better + apps: {[id: Container]: IApp[]}; resizingVertical: boolean; // true when changing the height of the apps drawer resizingHorizontal: boolean; // true when chagning the distribution of the width between widgets resizing: boolean; @@ -118,7 +119,7 @@ export default class AppsDrawer extends React.Component { this.resizeContainer.classList.remove("mx_AppsDrawer_resizing"); WidgetLayoutStore.instance.setResizerDistributions( this.props.room, Container.Top, - this.state.apps.slice(1).map((_, i) => this.resizer.forHandleAt(i).size), + this.topApps().slice(1).map((_, i) => this.resizer.forHandleAt(i).size), ); this.setState({ resizingHorizontal: false }); }, @@ -148,7 +149,8 @@ export default class AppsDrawer extends React.Component { if (prevProps.userId !== this.props.userId || prevProps.room !== this.props.room) { // Room has changed, update apps this.updateApps(); - } else if (this.getAppsHash(this.state.apps) !== this.getAppsHash(prevState.apps)) { + } else if (this.getAppsHash(this.topApps()) + !== this.getAppsHash(prevState.apps[Container.Top])) { this.loadResizerPreferences(); } } @@ -163,7 +165,7 @@ export default class AppsDrawer extends React.Component { private loadResizerPreferences = (): void => { const distributions = WidgetLayoutStore.instance.getResizerDistributions(this.props.room, Container.Top); - if (this.state.apps && (this.state.apps.length - 1) === distributions.length) { + if (this.state.apps && (this.topApps().length - 1) === distributions.length) { distributions.forEach((size, i) => { const distributor = this.resizer.forHandleAt(i); if (distributor) { @@ -200,8 +202,16 @@ export default class AppsDrawer extends React.Component { break; } }; - - private getApps = (): IApp[] => WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Top); + // @ts-ignore - TS wants a string key, but we know better + private getApps = (): { [id: Container]: IApp[] } => { + // @ts-ignore + const appsDict: { [id: Container]: IApp[] } = {}; + appsDict[Container.Top] = WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Top); + appsDict[Container.Center] = WidgetLayoutStore.instance.getContainerWidgets(this.props.room, Container.Center); + return appsDict; + }; + private topApps = (): IApp[] => this.state.apps[Container.Top]; + private centerApps = (): IApp[] => this.state.apps[Container.Center]; private updateApps = (): void => { this.setState({ @@ -211,8 +221,9 @@ export default class AppsDrawer extends React.Component { public render(): JSX.Element { if (!this.props.showApps) return
; - - const apps = this.state.apps.map((app, index, arr) => { + const widgetIsMaxmised: boolean = this.centerApps().length > 0; + const appsToDisplay = widgetIsMaxmised ? this.centerApps() : this.topApps(); + const apps = appsToDisplay.map((app, index, arr) => { return ( { const classes = classNames({ mx_AppsDrawer: true, + mx_AppsDrawer_maximise: widgetIsMaxmised, mx_AppsDrawer_fullWidth: apps.length < 2, mx_AppsDrawer_resizing: this.state.resizing, mx_AppsDrawer_2apps: apps.length === 2, mx_AppsDrawer_3apps: apps.length === 3, }); + const appConatiners = +
+ { apps.map((app, i) => { + if (i < 1) return app; + return + apps.length / 2} /> + { app } + ; + }) } +
; + + let drawer; + if (widgetIsMaxmised) { + drawer = appConatiners; + } else { + drawer = + { appConatiners } + ; + } return (
- -
- { apps.map((app, i) => { - if (i < 1) return app; - return - apps.length / 2} /> - { app } - ; - }) } -
- + { drawer } { spinner }
); From 21b9549c7685d4c5b07022bc53f4c0db741c2343 Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 10 Nov 2021 18:24:53 +0100 Subject: [PATCH 17/35] fix centering and overflow of appDrawer if maximised and right panel closed --- res/css/structures/_MainSplit.scss | 6 +++--- res/css/views/elements/_ResizeHandle.scss | 4 ++-- res/css/views/rooms/_AppsDrawer.scss | 3 ++- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss index 407a1c270cf..263ded74832 100644 --- a/res/css/structures/_MainSplit.scss +++ b/res/css/structures/_MainSplit.scss @@ -23,9 +23,9 @@ limitations under the License. } .mx_MainSplit > .mx_RightPanel_ResizeWrapper { - padding: 5px; - // margin left to not allow the handle to not encroach on the space for the scrollbar - margin-left: 8px; + // no padding on the left. The spacing is taken care of by the main split content. + padding: 5px 5px 5px 0px; + // margin-left: 0px; height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel &:hover .mx_RightPanel_ResizeHandle { diff --git a/res/css/views/elements/_ResizeHandle.scss b/res/css/views/elements/_ResizeHandle.scss index 63c5d978611..bf56888da09 100644 --- a/res/css/views/elements/_ResizeHandle.scss +++ b/res/css/views/elements/_ResizeHandle.scss @@ -33,8 +33,8 @@ limitations under the License. } .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal { - margin: 0 -10px 0 0; - padding: 0 8px 0 0; + // margin: 0 0px 0 0; + // padding: 0 8px 0 0; } .mx_ResizeHandle.mx_ResizeHandle_horizontal > div { diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 8d8af2d2218..aca333e71cf 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -18,11 +18,12 @@ limitations under the License. $MiniAppTileHeight: 200px; .mx_AppsDrawer { - margin: 5px 5px 5px 18px; + margin: 5px 5px 5px 5px; position: relative; display: flex; flex-direction: column; overflow: hidden; + flex-grow: 1; .mx_AppsContainer_resizerHandleContainer { width: 100%; From 38f8cfee8e44abd4a68b55b22a9817fa76816ec2 Mon Sep 17 00:00:00 2001 From: Timo K Date: Thu, 11 Nov 2021 11:12:05 +0100 Subject: [PATCH 18/35] fix hover label "Minimise widget"->"Close" --- src/components/views/elements/AppTile.tsx | 2 +- src/components/views/right_panel/RoomSummaryCard.tsx | 2 +- src/i18n/strings/en_EN.json | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 54694dec3d4..a1b2933125c 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -542,7 +542,7 @@ export default class AppTile extends React.Component { : " mx_AppTileMenuBar_iconButton_maxWidget") } title={ - widgetIsMaximised ? _t('Minimise widget'): _t('Maximise widget') + widgetIsMaximised ? _t('Close'): _t('Maximise widget') } onClick={this.onMaxMinWidgetClick} />; diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index d23982ba711..e27a658d9ae 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -144,7 +144,7 @@ const AppRow: React.FC = ({ app, room }) => { ? () => { WidgetLayoutStore.instance.moveToContainer(room, app, Container.Right); } : () => { WidgetLayoutStore.instance.moveToContainer(room, app, Container.Center); }; - const maximiseTitle = isMaximised ? _t("Minimise widget") : _t("Maximise widget"); + const maximiseTitle = isMaximised ? _t("Close") : _t("Maximise widget"); return
Date: Thu, 11 Nov 2021 15:31:29 +0100 Subject: [PATCH 19/35] review fixes --- res/css/structures/_MainSplit.scss | 1 - res/css/views/elements/_ResizeHandle.scss | 5 ----- res/css/views/right_panel/_RoomSummaryCard.scss | 3 +++ res/css/views/rooms/_AppsDrawer.scss | 2 +- src/components/structures/RoomView.tsx | 2 +- src/components/views/right_panel/RoomSummaryCard.tsx | 6 ++++-- src/components/views/rooms/AppsDrawer.tsx | 3 +-- 7 files changed, 10 insertions(+), 12 deletions(-) diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss index 263ded74832..8c30abe97da 100644 --- a/res/css/structures/_MainSplit.scss +++ b/res/css/structures/_MainSplit.scss @@ -25,7 +25,6 @@ limitations under the License. .mx_MainSplit > .mx_RightPanel_ResizeWrapper { // no padding on the left. The spacing is taken care of by the main split content. padding: 5px 5px 5px 0px; - // margin-left: 0px; height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel &:hover .mx_RightPanel_ResizeHandle { diff --git a/res/css/views/elements/_ResizeHandle.scss b/res/css/views/elements/_ResizeHandle.scss index bf56888da09..2af2880654e 100644 --- a/res/css/views/elements/_ResizeHandle.scss +++ b/res/css/views/elements/_ResizeHandle.scss @@ -32,11 +32,6 @@ limitations under the License. cursor: row-resize; } -.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal { - // margin: 0 0px 0 0; - // padding: 0 8px 0 0; -} - .mx_ResizeHandle.mx_ResizeHandle_horizontal > div { width: 1px; height: 100%; diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index ff1589dadfc..a8fb028bf9c 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -198,6 +198,9 @@ limitations under the License. &::before { mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); } + &.mx_RoomSummaryCard_maximised_widget { + right: 72px; + } } &.mx_RoomSummaryCard_Button_pinned { diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index aca333e71cf..27b0053aec3 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -18,7 +18,7 @@ limitations under the License. $MiniAppTileHeight: 200px; .mx_AppsDrawer { - margin: 5px 5px 5px 5px; + margin: 5px; position: relative; display: flex; flex-direction: column; diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 76ff6bb3e89..e1e43639ba1 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -2132,7 +2132,7 @@ export class RoomView extends React.Component { // keep the timeline in as the mainSplitBody break; case MainSplitContentType.MaximisedWidget: - if (!SettingsStore.getValue("feature_maximised_widgets")) {break;} + if (!SettingsStore.getValue("feature_maximised_widgets")) break; mainSplitBody = = ({ app, room }) => { { if (prevProps.userId !== this.props.userId || prevProps.room !== this.props.room) { // Room has changed, update apps this.updateApps(); - } else if (this.getAppsHash(this.topApps()) - !== this.getAppsHash(prevState.apps[Container.Top])) { + } else if (this.getAppsHash(this.topApps()) !== this.getAppsHash(prevState.apps[Container.Top])) { this.loadResizerPreferences(); } } From fdf7b9f3cafcd5ab393c78b924741c9abe88e5d7 Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 12 Nov 2021 15:57:54 +0100 Subject: [PATCH 20/35] add jest test for WidgetLayoutStore --- src/stores/widgets/WidgetLayoutStore.ts | 4 +- test/stores/WidgetLayoutStore-test.ts | 125 ++++++++++++++++++++++++ 2 files changed, 127 insertions(+), 2 deletions(-) create mode 100644 test/stores/WidgetLayoutStore-test.ts diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts index 5fd9a7d46b5..b66a7a757a3 100644 --- a/src/stores/widgets/WidgetLayoutStore.ts +++ b/src/stores/widgets/WidgetLayoutStore.ts @@ -173,7 +173,7 @@ export class WidgetLayoutStore extends ReadyWatchingStore { } }; - private recalculateRoom(room: Room) { + public recalculateRoom(room: Room) { const widgets = WidgetStore.instance.getApps(room.roomId); if (!widgets?.length) { this.byRoom[room.roomId] = {}; @@ -455,7 +455,7 @@ export class WidgetLayoutStore extends ReadyWatchingStore { break; case Container.Top: // new "top" widget => the center widget moves into "right" - if (this.hasMaximisedWidget(room) && toContainer) { + if (this.hasMaximisedWidget(room)) { this.moveToContainer(room, this.getContainerWidgets(room, Container.Center)[0], Container.Right); } break; diff --git a/test/stores/WidgetLayoutStore-test.ts b/test/stores/WidgetLayoutStore-test.ts new file mode 100644 index 00000000000..61399862ab4 --- /dev/null +++ b/test/stores/WidgetLayoutStore-test.ts @@ -0,0 +1,125 @@ +/* +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. +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 "../skinned-sdk"; // Must be first for skinning to work +import WidgetStore, { IApp } from "../../src/stores/WidgetStore"; +import { Container, WidgetLayoutStore } from "../../src/stores/widgets/WidgetLayoutStore"; +import { Room } from "matrix-js-sdk"; +import { stubClient } from "../test-utils"; + +// setup test env values +const roomId = "!room:server"; +const mockRoom = { + roomId: roomId, + currentState: { + getStateEvents: (_l, _x) => { + return { + getId: ()=>"$layoutEventId", + getContent: () => null, + }; + }, + } }; + +const mockApps = [ + { roomId: roomId, id: "1" }, + { roomId: roomId, id: "2" }, + { roomId: roomId, id: "3" }, + { roomId: roomId, id: "4" }, +]; + +// fake the WidgetStore.instance to just return an object with `getApps` +jest.spyOn(WidgetStore, 'instance', 'get').mockReturnValue({ getApps: (_room) => mockApps }); + +describe("WidgetLayoutStore", () => { + // we need to init a client so it does not error, when asking for DeviceStorage handlers (SettingsStore.setValue("Widgets.layout")) + stubClient(); + + const store = WidgetLayoutStore.instance; + + it("all widgets should be in the right container by default", async () => { + store.recalculateRoom(mockRoom); + expect(store.getContainerWidgets(mockRoom, Container.Right).length).toStrictEqual(mockApps.length); + }); + it("add widget to top container", async () => { + store.recalculateRoom(mockRoom); + store.moveToContainer(mockRoom, mockApps[0], Container.Top); + expect(store.getContainerWidgets(mockRoom, Container.Top)).toStrictEqual([mockApps[0]]); + }); + it("add three widgets to top container", async () => { + store.recalculateRoom(mockRoom); + store.moveToContainer(mockRoom, mockApps[0], Container.Top); + store.moveToContainer(mockRoom, mockApps[1], Container.Top); + store.moveToContainer(mockRoom, mockApps[2], Container.Top); + expect(new Set(store.getContainerWidgets(mockRoom, Container.Top))) + .toEqual(new Set([mockApps[0], mockApps[1], mockApps[2]])); + }); + it("cannot add more than three widgets to top container", async () => { + store.recalculateRoom(mockRoom); + store.moveToContainer(mockRoom, mockApps[0], Container.Top); + store.moveToContainer(mockRoom, mockApps[1], Container.Top); + store.moveToContainer(mockRoom, mockApps[2], Container.Top); + expect(store.canAddToContainer(mockRoom, Container.Top)) + .toEqual(false); + }); + it("remove pins when maximising (other widget)", async () => { + store.recalculateRoom(mockRoom); + store.moveToContainer(mockRoom, mockApps[0], Container.Top); + store.moveToContainer(mockRoom, mockApps[1], Container.Top); + store.moveToContainer(mockRoom, mockApps[2], Container.Top); + store.moveToContainer(mockRoom, mockApps[3], Container.Center); + expect(store.getContainerWidgets(mockRoom, Container.Top)) + .toEqual([]); + expect(new Set(store.getContainerWidgets(mockRoom, Container.Right))) + .toEqual(new Set([mockApps[0], mockApps[1], mockApps[2]])); + expect(store.getContainerWidgets(mockRoom, Container.Center)) + .toEqual([mockApps[3]]); + }); + it("remove pins when maximising (one of the pinned widgets)", async () => { + store.recalculateRoom(mockRoom); + store.moveToContainer(mockRoom, mockApps[0], Container.Top); + store.moveToContainer(mockRoom, mockApps[1], Container.Top); + store.moveToContainer(mockRoom, mockApps[2], Container.Top); + store.moveToContainer(mockRoom, mockApps[0], Container.Center); + expect(store.getContainerWidgets(mockRoom, Container.Top)) + .toEqual([]); + expect(store.getContainerWidgets(mockRoom, Container.Center)) + .toEqual([mockApps[0]]); + expect(new Set(store.getContainerWidgets(mockRoom, Container.Right))) + .toEqual(new Set([mockApps[1], mockApps[2], mockApps[3]])); + }); + it("remove maximised when pinning (other widget)", async () => { + store.recalculateRoom(mockRoom); + store.moveToContainer(mockRoom, mockApps[0], Container.Center); + store.moveToContainer(mockRoom, mockApps[1], Container.Top); + expect(store.getContainerWidgets(mockRoom, Container.Top)) + .toEqual([mockApps[1]]); + expect(store.getContainerWidgets(mockRoom, Container.Center)) + .toEqual([]); + expect(new Set(store.getContainerWidgets(mockRoom, Container.Right))) + .toEqual(new Set([mockApps[2], mockApps[3], mockApps[0]])); + }); + it("remove maximised when pinning (same widget)", async () => { + store.recalculateRoom(mockRoom); + store.moveToContainer(mockRoom, mockApps[0], Container.Center); + store.moveToContainer(mockRoom, mockApps[0], Container.Top); + expect(store.getContainerWidgets(mockRoom, Container.Top)) + .toEqual([mockApps[0]]); + expect(store.getContainerWidgets(mockRoom, Container.Center)) + .toEqual([]); + expect(new Set(store.getContainerWidgets(mockRoom, Container.Right))) + .toEqual(new Set([mockApps[2], mockApps[3], mockApps[1]])); + }); +}); From b06490e772e4ec5f264b70d102c1892ebf222a79 Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 12 Nov 2021 18:55:48 +0100 Subject: [PATCH 21/35] change accent-color maybe that fixes the github build --- res/css/views/right_panel/_RoomSummaryCard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index a8fb028bf9c..0605ae6de48 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -186,8 +186,8 @@ limitations under the License. .mx_RoomSummaryCard_app_minimise { right: 48px; &::before { - background-color: $accent-color; mask-image: url('$(res)/img/feather-customised/minimise.svg'); + background-color: $accent-color-50pct; } } From b3c65261915628bc307da7b688803060a160a2d3 Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 12 Nov 2021 19:01:22 +0100 Subject: [PATCH 22/35] another try --- res/css/views/right_panel/_RoomSummaryCard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index 0605ae6de48..3fe1cbb0ba2 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -187,7 +187,7 @@ limitations under the License. right: 48px; &::before { mask-image: url('$(res)/img/feather-customised/minimise.svg'); - background-color: $accent-color-50pct; + background-color: $tertiary-content; } } From a23931b5759f69484d7bd32952ddac52bb99d55a Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 12 Nov 2021 19:07:58 +0100 Subject: [PATCH 23/35] I think I have it now...(accent related commit) --- res/css/views/right_panel/_RoomSummaryCard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index b28a14429d0..a384f194aba 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -187,7 +187,7 @@ limitations under the License. right: 48px; &::before { mask-image: url('$(res)/img/feather-customised/minimise.svg'); - background-color: $tertiary-content; + background-color: $accent; } } From 0bcb881328c2df04a543d683140b47e58f3aea97 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Nov 2021 15:14:43 +0100 Subject: [PATCH 24/35] fix room state always overriding user settings (and causing various issues) --- src/stores/widgets/WidgetLayoutStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts index b66a7a757a3..823dd450d22 100644 --- a/src/stores/widgets/WidgetLayoutStore.ts +++ b/src/stores/widgets/WidgetLayoutStore.ts @@ -205,7 +205,7 @@ export class WidgetLayoutStore extends ReadyWatchingStore { const manualContainer = userLayout?.widgets?.[widget.id]?.container; const isLegacyPinned = !!legacyPinned?.[widget.id]; const defaultContainer = WidgetType.JITSI.matches(widget.type) ? Container.Top : Container.Right; - if (stateContainer === Container.Center || manualContainer === Container.Center) { + if ((manualContainer) ? manualContainer === Container.Center : stateContainer === Container.Center) { if (centerWidgets.length) { console.error("Tried to push a second widget into the center container"); } else { From b1ef33beca506bdeca3e7aff0afd63c930f91f0f Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Nov 2021 17:11:46 +0100 Subject: [PATCH 25/35] fix container border width --- res/css/views/right_panel/_WidgetCard.scss | 2 ++ res/css/views/rooms/_AppsDrawer.scss | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.scss index edf9ba7dd72..7213842c56b 100644 --- a/res/css/views/right_panel/_WidgetCard.scss +++ b/res/css/views/right_panel/_WidgetCard.scss @@ -20,6 +20,8 @@ limitations under the License. .mx_AppTileFullWidth { max-width: unset; + width: auto; + margin: 0px 8px 0px 8px; height: 100%; border: 0; } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 30f969262fd..59800e9e976 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -155,7 +155,7 @@ $MinWidth: 240px; width: 100% !important; // to override the inline style set by the resizer margin: 0; padding: 0; - border: 5px solid $widget-menu-bar-bg-color; + border: 8px solid $widget-menu-bar-bg-color; border-radius: 8px; display: flex; flex-direction: column; From ba4d09c6715bd08b71345ad70edf4907e97c3a8c Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Nov 2021 18:15:38 +0100 Subject: [PATCH 26/35] change icons, change border width use the correct variable for the expan icon use a new variable for the container-border-width --- res/css/_common.scss | 2 + res/css/structures/_LeftPanelWidget.scss | 2 +- res/css/structures/_RightPanel.scss | 2 +- res/css/views/dialogs/_HostSignupDialog.scss | 4 +- res/css/views/messages/_ViewSourceEvent.scss | 6 +- .../views/right_panel/_RoomSummaryCard.scss | 7 +- res/css/views/rooms/_AppsDrawer.scss | 42 +++++++----- res/img/element-icons/maximise_expand.svg | 3 + res/img/element-icons/minimise_collapse.svg | 3 + res/img/feather-customised/maximise.svg | 63 ------------------ res/img/feather-customised/minimise.svg | 65 ------------------- .../legacy-light/css/_legacy-light.scss | 4 +- res/themes/light/css/_light.scss | 5 +- 13 files changed, 49 insertions(+), 159 deletions(-) create mode 100644 res/img/element-icons/maximise_expand.svg create mode 100644 res/img/element-icons/minimise_collapse.svg delete mode 100644 res/img/feather-customised/maximise.svg delete mode 100644 res/img/feather-customised/minimise.svg diff --git a/res/css/_common.scss b/res/css/_common.scss index d6d139d2bd4..3d8b6659b38 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -30,6 +30,8 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-mess $slider-dot-size: 1em; $slider-selection-dot-size: 2.4em; +$container-border-width: 8px; + :root { font-size: 10px; diff --git a/res/css/structures/_LeftPanelWidget.scss b/res/css/structures/_LeftPanelWidget.scss index bb04b856245..0ac340e2f01 100644 --- a/res/css/structures/_LeftPanelWidget.scss +++ b/res/css/structures/_LeftPanelWidget.scss @@ -134,7 +134,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - mask-image: url('$(res)/img/feather-customised/maximise.svg'); + mask-image: url($expand-button-url); background: $muted-fg-color; } } diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 38a1fe9099a..1809626ed95 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -22,7 +22,7 @@ limitations under the License. display: flex; flex-direction: column; border-radius: 8px; - padding: 8px 0; + padding: $container-border-width 0; box-sizing: border-box; height: 100%; contain: strict; diff --git a/res/css/views/dialogs/_HostSignupDialog.scss b/res/css/views/dialogs/_HostSignupDialog.scss index d8a6652a397..d2d7b727da4 100644 --- a/res/css/views/dialogs/_HostSignupDialog.scss +++ b/res/css/views/dialogs/_HostSignupDialog.scss @@ -78,7 +78,7 @@ limitations under the License. } .mx_HostSignup_maximize_button { - mask: url('$(res)/img/feather-customised/maximise.svg'); + mask: url($expand-button-url); mask-repeat: no-repeat; mask-position: center; mask-size: cover; @@ -92,7 +92,7 @@ limitations under the License. } .mx_HostSignup_minimize_button { - mask: url('$(res)/img/feather-customised/minimise.svg'); + mask: url($collapse-button-url); mask-repeat: no-repeat; mask-position: center; mask-size: cover; diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss index bdb036fe173..6fee17d3c17 100644 --- a/res/css/views/messages/_ViewSourceEvent.scss +++ b/res/css/views/messages/_ViewSourceEvent.scss @@ -35,13 +35,15 @@ limitations under the License. mask-size: auto 12px; visibility: hidden; background-color: $accent; - mask-image: url('$(res)/img/feather-customised/maximise.svg'); + mask-image: url($expand-button-url); } &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle { mask-position: 0 bottom; margin-bottom: 7px; - mask-image: url('$(res)/img/feather-customised/minimise.svg'); + width: 10px; + height: 10px; + mask-image: url($collapse-button-url); } } diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index a384f194aba..75c4d414960 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -180,13 +180,16 @@ limitations under the License. right: 48px; &::before { - mask-image: url('$(res)/img/feather-customised/maximise.svg'); + mask-size: 14px; + mask-image: url($expand-button-url); } } .mx_RoomSummaryCard_app_minimise { right: 48px; + &::before { - mask-image: url('$(res)/img/feather-customised/minimise.svg'); + mask-size: 14px; + mask-image: url($collapse-button-url); background-color: $accent; } } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 947c6bbeb5e..d88979bcdb3 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -101,11 +101,11 @@ $MiniAppTileHeight: 200px; min-height: 0; .mx_AppTile:first-of-type { - border-left-width: 8px; + border-left-width: $container-border-width; border-radius: 10px 0 0 10px; } .mx_AppTile:last-of-type { - border-right-width: 8px; + border-right-width: $container-border-width; border-radius: 0 10px 10px 0; } @@ -143,7 +143,7 @@ $MinWidth: 240px; .mx_AppTile { width: 50%; min-width: $MinWidth; - border: 8px solid $widget-menu-bar-bg-color; + border: $container-border-width solid $widget-menu-bar-bg-color; border-left-width: 5px; border-right-width: 5px; display: flex; @@ -225,24 +225,30 @@ $MinWidth: 240px; mask-position: 0 center; mask-size: auto 12px; background-color: $topleftmenu-color; - margin: 0 3px; -} - -.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_minWidget { - mask-image: url('$(res)/img/feather-customised/minimise.svg'); -} - -.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maxWidget { - mask-image: url('$(res)/img/feather-customised/maximise.svg'); -} + margin: 0 5px; -.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout { - mask-image: url('$(res)/img/feather-customised/widget/external-link.svg'); + &.mx_AppTileMenuBar_iconButton_minWidget { + width: 10px; + height: 12px; + mask-size: auto 10px; + mask-image: url($collapse-button-url); + } + + &.mx_AppTileMenuBar_iconButton_maxWidget { + width: 11px; + height: 11px; + mask-image: url($expand-button-url); + } + + &.mx_AppTileMenuBar_iconButton_popout { + mask-image: url('$(res)/img/feather-customised/widget/external-link.svg'); + } + + &.mx_AppTileMenuBar_iconButton_menu { + mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); + } } -.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu { - mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); -} .mx_AppTileBody { height: 100%; diff --git a/res/img/element-icons/maximise_expand.svg b/res/img/element-icons/maximise_expand.svg new file mode 100644 index 00000000000..06c44e2acdd --- /dev/null +++ b/res/img/element-icons/maximise_expand.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/minimise_collapse.svg b/res/img/element-icons/minimise_collapse.svg new file mode 100644 index 00000000000..e941d41276f --- /dev/null +++ b/res/img/element-icons/minimise_collapse.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/feather-customised/maximise.svg b/res/img/feather-customised/maximise.svg deleted file mode 100644 index 96185da1359..00000000000 --- a/res/img/feather-customised/maximise.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - diff --git a/res/img/feather-customised/minimise.svg b/res/img/feather-customised/minimise.svg deleted file mode 100644 index f05e9399600..00000000000 --- a/res/img/feather-customised/minimise.svg +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 83255da36d9..0e9355b22be 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -207,8 +207,8 @@ $event-highlight-bg-color: $yellow-background; $event-timestamp-color: #acacac; $copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; -$collapse-button-url: "$(res)/img/feather-customised/minimise.svg"; -$expand-button-url: "$(res)/img/feather-customised/maximise.svg"; +$collapse-button-url: "$(res)/img/element-icons/minimise_collapse.svg"; +$expand-button-url: "$(res)/img/element-icons/maximise_expand.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 4e3da74bce8..83263af4802 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -198,9 +198,8 @@ $event-highlight-bg-color: $yellow-background; $event-timestamp-color: #acacac; $copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; -$collapse-button-url: "$(res)/img/feather-customised/minimise.svg"; -$expand-button-url: "$(res)/img/feather-customised/maximise.svg"; - +$collapse-button-url: "$(res)/img/element-icons/minimise_collapse.svg"; +$expand-button-url: "$(res)/img/element-icons/maximise_expand.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent $e2e-unknown-color: #e8bf37; From 2a8bba61d6772df9f66a1bea445e16977fc5ab1a Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Nov 2021 18:21:04 +0100 Subject: [PATCH 27/35] use $container-border-width where needed --- res/css/views/right_panel/_WidgetCard.scss | 2 +- res/css/views/rooms/_AppsDrawer.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.scss index 7213842c56b..934131e0010 100644 --- a/res/css/views/right_panel/_WidgetCard.scss +++ b/res/css/views/right_panel/_WidgetCard.scss @@ -21,7 +21,7 @@ limitations under the License. .mx_AppTileFullWidth { max-width: unset; width: auto; - margin: 0px 8px 0px 8px; + margin: 0px $container-border-width 0px $container-border-width; height: 100%; border: 0; } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index eb44e98d7fb..aec98f4a7c8 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -156,7 +156,7 @@ $MinWidth: 240px; width: 100% !important; // to override the inline style set by the resizer margin: 0; padding: 0; - border: 8px solid $widget-menu-bar-bg-color; + border: $container-border-width solid $widget-menu-bar-bg-color; border-radius: 8px; display: flex; flex-direction: column; From 6f3a1c08e1b2303d4af9f0df0c6238a6c4b1a470 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Nov 2021 18:27:02 +0100 Subject: [PATCH 28/35] fix style lint --- res/css/views/right_panel/_RoomSummaryCard.scss | 2 -- res/css/views/rooms/_AppsDrawer.scss | 7 +++---- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index 75c4d414960..33f17cbfadc 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -178,7 +178,6 @@ limitations under the License. } .mx_RoomSummaryCard_app_maximise { right: 48px; - &::before { mask-size: 14px; mask-image: url($expand-button-url); @@ -186,7 +185,6 @@ limitations under the License. } .mx_RoomSummaryCard_app_minimise { right: 48px; - &::before { mask-size: 14px; mask-image: url($collapse-button-url); diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index aec98f4a7c8..1bf7536104d 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -233,23 +233,22 @@ $MinWidth: 240px; mask-size: auto 10px; mask-image: url($collapse-button-url); } - + &.mx_AppTileMenuBar_iconButton_maxWidget { width: 11px; height: 11px; mask-image: url($expand-button-url); } - + &.mx_AppTileMenuBar_iconButton_popout { mask-image: url('$(res)/img/feather-customised/widget/external-link.svg'); } - + &.mx_AppTileMenuBar_iconButton_menu { mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); } } - .mx_AppTileBody { height: 100%; width: 100%; From fa35b44df69c73d03409ef6a2491eae0d55c1afd Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Nov 2021 18:31:51 +0100 Subject: [PATCH 29/35] add !important for widget card AppTileFullWidth --- res/css/views/right_panel/_WidgetCard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.scss index 934131e0010..812de3cfc83 100644 --- a/res/css/views/right_panel/_WidgetCard.scss +++ b/res/css/views/right_panel/_WidgetCard.scss @@ -20,7 +20,7 @@ limitations under the License. .mx_AppTileFullWidth { max-width: unset; - width: auto; + width: auto !important; margin: 0px $container-border-width 0px $container-border-width; height: 100%; border: 0; From 7f0c5d60eaa0d252669e30affd583b000cd39d8b Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Nov 2021 18:47:45 +0100 Subject: [PATCH 30/35] fix bug where a widget can be open twice It was possible to open the widget in the right card and also have it fullscreen which lead to an infint react loop, moving around the persistant iFrame. --- src/components/views/right_panel/RoomSummaryCard.tsx | 12 +++++++++--- src/i18n/strings/en_EN.json | 3 ++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index f965e0516c1..22fd59fbca4 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -150,9 +150,15 @@ const AppRow: React.FC = ({ app, room }) => { className="mx_RoomSummaryCard_icon_app" onClick={onOpenWidgetClick} // only show a tooltip if the widget is pinned - title={isPinned ? _t("Unpin a widget to view it in this panel") : ""} - forceHide={!isPinned} - disabled={isPinned} + title={ + isPinned + ? _t("Unpin this widget to view it in this panel") + : isMaximised + ? _t("Close this widget to view it in this panel") : + "" + } + forceHide={!(isPinned || isMaximised)} + disabled={isPinned || isMaximised} yOffset={-48} > diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 27a1807b703..0a24545ba69 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1867,7 +1867,8 @@ "Room Info": "Room Info", "You can only pin up to %(count)s widgets|other": "You can only pin up to %(count)s widgets", "Maximise widget": "Maximise widget", - "Unpin a widget to view it in this panel": "Unpin a widget to view it in this panel", + "Unpin this widget to view it in this panel": "Unpin this widget to view it in this panel", + "Close this widget to view it in this panel": "Close this widget to view it in this panel", "Set my room layout for everyone": "Set my room layout for everyone", "Widgets": "Widgets", "Edit widgets, bridges & bots": "Edit widgets, bridges & bots", From a8d2e5e305b26aa91e017d51fbd3e638ddf9e720 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Nov 2021 19:01:58 +0100 Subject: [PATCH 31/35] review fixes ( file naming and remove image url variable) --- res/css/structures/_LeftPanelWidget.scss | 2 +- res/css/views/dialogs/_HostSignupDialog.scss | 4 ++-- res/css/views/messages/_ViewSourceEvent.scss | 4 ++-- res/css/views/right_panel/_RoomSummaryCard.scss | 4 ++-- res/css/views/rooms/_AppsDrawer.scss | 4 ++-- res/css/views/rooms/_EventTile.scss | 4 ++-- .../{maximise_expand.svg => maximise-expand.svg} | 0 .../{minimise_collapse.svg => minimise-collapse.svg} | 0 res/themes/legacy-light/css/_legacy-light.scss | 2 -- res/themes/light/css/_light.scss | 2 -- 10 files changed, 11 insertions(+), 15 deletions(-) rename res/img/element-icons/{maximise_expand.svg => maximise-expand.svg} (100%) rename res/img/element-icons/{minimise_collapse.svg => minimise-collapse.svg} (100%) diff --git a/res/css/structures/_LeftPanelWidget.scss b/res/css/structures/_LeftPanelWidget.scss index 0ac340e2f01..0a01a19b90a 100644 --- a/res/css/structures/_LeftPanelWidget.scss +++ b/res/css/structures/_LeftPanelWidget.scss @@ -134,7 +134,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - mask-image: url($expand-button-url); + mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); background: $muted-fg-color; } } diff --git a/res/css/views/dialogs/_HostSignupDialog.scss b/res/css/views/dialogs/_HostSignupDialog.scss index d2d7b727da4..56d71034045 100644 --- a/res/css/views/dialogs/_HostSignupDialog.scss +++ b/res/css/views/dialogs/_HostSignupDialog.scss @@ -78,7 +78,7 @@ limitations under the License. } .mx_HostSignup_maximize_button { - mask: url($expand-button-url); + mask: url("$(res)/img/element-icons/maximise-expand.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: cover; @@ -92,7 +92,7 @@ limitations under the License. } .mx_HostSignup_minimize_button { - mask: url($collapse-button-url); + mask: url("$(res)/img/element-icons/minimise-collapse.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: cover; diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss index 6fee17d3c17..562c10c1b03 100644 --- a/res/css/views/messages/_ViewSourceEvent.scss +++ b/res/css/views/messages/_ViewSourceEvent.scss @@ -35,7 +35,7 @@ limitations under the License. mask-size: auto 12px; visibility: hidden; background-color: $accent; - mask-image: url($expand-button-url); + mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); } &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle { @@ -43,7 +43,7 @@ limitations under the License. margin-bottom: 7px; width: 10px; height: 10px; - mask-image: url($collapse-button-url); + mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); } } diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index 33f17cbfadc..bb3638c475c 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -180,14 +180,14 @@ limitations under the License. right: 48px; &::before { mask-size: 14px; - mask-image: url($expand-button-url); + mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); } } .mx_RoomSummaryCard_app_minimise { right: 48px; &::before { mask-size: 14px; - mask-image: url($collapse-button-url); + mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); background-color: $accent; } } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 1bf7536104d..3a62d728f63 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -231,13 +231,13 @@ $MinWidth: 240px; width: 10px; height: 12px; mask-size: auto 10px; - mask-image: url($collapse-button-url); + mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); } &.mx_AppTileMenuBar_iconButton_maxWidget { width: 11px; height: 11px; - mask-image: url($expand-button-url); + mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); } &.mx_AppTileMenuBar_iconButton_popout { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f7b55709563..5a3e1a90a64 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -546,13 +546,13 @@ $left-gutter: 64px; mask-size: 75%; mask-position: center; mask-repeat: no-repeat; - mask-image: url($collapse-button-url); + mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); } .mx_EventTile_expandButton { mask-size: 75%; mask-position: center; mask-repeat: no-repeat; - mask-image: url($expand-button-url); + mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); } .mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton, diff --git a/res/img/element-icons/maximise_expand.svg b/res/img/element-icons/maximise-expand.svg similarity index 100% rename from res/img/element-icons/maximise_expand.svg rename to res/img/element-icons/maximise-expand.svg diff --git a/res/img/element-icons/minimise_collapse.svg b/res/img/element-icons/minimise-collapse.svg similarity index 100% rename from res/img/element-icons/minimise_collapse.svg rename to res/img/element-icons/minimise-collapse.svg diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 0e9355b22be..a50ebbb50d2 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -207,8 +207,6 @@ $event-highlight-bg-color: $yellow-background; $event-timestamp-color: #acacac; $copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; -$collapse-button-url: "$(res)/img/element-icons/minimise_collapse.svg"; -$expand-button-url: "$(res)/img/element-icons/maximise_expand.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 83263af4802..590830cb40f 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -198,8 +198,6 @@ $event-highlight-bg-color: $yellow-background; $event-timestamp-color: #acacac; $copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; -$collapse-button-url: "$(res)/img/element-icons/minimise_collapse.svg"; -$expand-button-url: "$(res)/img/element-icons/maximise_expand.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent $e2e-unknown-color: #e8bf37; From 3743b7469da584de073bd0eb48248e1c8f72a5d2 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Nov 2021 19:05:51 +0100 Subject: [PATCH 32/35] fix awkward ternary stack --- .../views/right_panel/RoomSummaryCard.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 22fd59fbca4..4a2d662c78b 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -145,18 +145,19 @@ const AppRow: React.FC = ({ app, room }) => { const maximiseTitle = isMaximised ? _t("Close") : _t("Maximise widget"); + let openTitle = ""; + if (isPinned) { + openTitle = _t("Unpin this widget to view it in this panel"); + } else if (isMaximised) { + openTitle =_t("Close this widget to view it in this panel"); + } + return
Date: Mon, 15 Nov 2021 19:11:18 +0100 Subject: [PATCH 33/35] remove the now deprecated collapse button url after merge --- res/themes/light/css/_light.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 8a884273357..54a8b692f89 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -302,8 +302,6 @@ $focus-brightness: 105%; // Icon URLs // ******************** $copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; -$collapse-button-url: "$(res)/img/feather-customised/minimise.svg"; -$expand-button-url: "$(res)/img/feather-customised/maximise.svg"; // ******************** // Mixins From a2aa0dce8fb4531de2afc30a0c16e99efd26f1e7 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 16 Nov 2021 14:11:25 +0100 Subject: [PATCH 34/35] fix icons --- res/css/views/messages/_ViewSourceEvent.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss index 562c10c1b03..9efb6074a0c 100644 --- a/res/css/views/messages/_ViewSourceEvent.scss +++ b/res/css/views/messages/_ViewSourceEvent.scss @@ -29,10 +29,10 @@ limitations under the License. } .mx_ViewSourceEvent_toggle { - width: 12px; mask-repeat: no-repeat; mask-position: 0 center; mask-size: auto 12px; + width: 12px; visibility: hidden; background-color: $accent; mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); @@ -41,8 +41,8 @@ limitations under the License. &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle { mask-position: 0 bottom; margin-bottom: 7px; - width: 10px; - height: 10px; + width: 12px; + mask-size: auto 12px; mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); } } From fb02d81b864ce936759d1f0a605f7e6d821fb6ff Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 16 Nov 2021 14:36:22 +0100 Subject: [PATCH 35/35] fix icons 2 --- res/css/views/messages/_ViewSourceEvent.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss index 9efb6074a0c..f076c774737 100644 --- a/res/css/views/messages/_ViewSourceEvent.scss +++ b/res/css/views/messages/_ViewSourceEvent.scss @@ -40,9 +40,7 @@ limitations under the License. &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle { mask-position: 0 bottom; - margin-bottom: 7px; - width: 12px; - mask-size: auto 12px; + margin-bottom: 5px; mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); } }