From 813a60a7f30c50fce0b58938c5a683f6957bfd58 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 14 Mar 2022 19:39:35 -0600 Subject: [PATCH] Remove left panel widgets (#8044) They aren't practically used, and are difficult to set up in the first place (requires server-managed account or devtools). --- res/css/_components.scss | 1 - res/css/structures/_LeftPanelWidget.scss | 145 ------------------ src/components/structures/LeftPanel.tsx | 2 - src/components/structures/LeftPanelWidget.tsx | 144 ----------------- src/settings/Settings.tsx | 4 - 5 files changed, 296 deletions(-) delete mode 100644 res/css/structures/_LeftPanelWidget.scss delete mode 100644 src/components/structures/LeftPanelWidget.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index 9c7f6b878e3..a5ff7e233f8 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -23,7 +23,6 @@ @import "./structures/_HeaderButtons.scss"; @import "./structures/_HomePage.scss"; @import "./structures/_LeftPanel.scss"; -@import "./structures/_LeftPanelWidget.scss"; @import "./structures/_MainSplit.scss"; @import "./structures/_MatrixChat.scss"; @import "./structures/_MyGroups.scss"; diff --git a/res/css/structures/_LeftPanelWidget.scss b/res/css/structures/_LeftPanelWidget.scss deleted file mode 100644 index 0a01a19b90a..00000000000 --- a/res/css/structures/_LeftPanelWidget.scss +++ /dev/null @@ -1,145 +0,0 @@ -/* -Copyright 2020 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.mx_LeftPanelWidget { - // largely based on RoomSublist - margin-left: 8px; - margin-bottom: 4px; - - .mx_LeftPanelWidget_headerContainer { - display: flex; - align-items: center; - - height: 24px; - color: $tertiary-content; - margin-top: 4px; - - .mx_LeftPanelWidget_stickable { - flex: 1; - max-width: 100%; - - display: flex; - align-items: center; - } - - .mx_LeftPanelWidget_headerText { - flex: 1; - max-width: calc(100% - 16px); - line-height: $font-16px; - font-size: $font-13px; - font-weight: 600; - - // Ellipsize any text overflow - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - - .mx_LeftPanelWidget_collapseBtn { - display: inline-block; - position: relative; - width: 14px; - height: 14px; - margin-right: 6px; - - &::before { - content: ''; - width: 18px; - height: 18px; - position: absolute; - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background-color: $tertiary-content; - mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); - } - - &.mx_LeftPanelWidget_collapseBtn_collapsed::before { - transform: rotate(-90deg); - } - } - } - } - - .mx_LeftPanelWidget_resizeBox { - position: relative; - - display: flex; - flex-direction: column; - overflow: visible; // let the resize handle out - } - - .mx_AppTileFullWidth { - flex: 1 0 0; - overflow: hidden; - // need this to be flex otherwise the overflow hidden from above - // sometimes vertically centers the clipped list ... no idea why it would do this - // as the box model should be top aligned. Happens in both FF and Chromium - display: flex; - flex-direction: column; - box-sizing: border-box; - - mask-image: linear-gradient(0deg, transparent, black 4px); - } - - .mx_LeftPanelWidget_resizerHandle { - cursor: ns-resize; - border-radius: 3px; - - // Override styles from library - width: unset !important; - height: 4px !important; - - position: absolute; - top: -24px !important; // override from library - puts it in the margin-top of the headerContainer - - // Together, these make the bar 64px wide - // These are also overridden from the library - left: calc(50% - 32px) !important; - right: calc(50% - 32px) !important; - } - - &:hover .mx_LeftPanelWidget_resizerHandle { - opacity: 0.8; - background-color: $primary-content; - } - - .mx_LeftPanelWidget_maximizeButton { - margin-left: 8px; - margin-right: 7px; - position: relative; - width: 24px; - height: 24px; - border-radius: 32px; - - &::before { - content: ''; - width: 16px; - height: 16px; - position: absolute; - top: 4px; - left: 4px; - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); - background: $muted-fg-color; - } - } -} - -.mx_LeftPanelWidget_maximizeButtonTooltip { - margin-top: -3px; -} diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index e9fdd29eda3..08f0078c134 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -27,7 +27,6 @@ import { Action } from "../../dispatcher/actions"; import RoomSearch from "./RoomSearch"; import ResizeNotifier from "../../utils/ResizeNotifier"; import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; -import LeftPanelWidget from "./LeftPanelWidget"; import { replaceableComponent } from "../../utils/replaceableComponent"; import SpaceStore from "../../stores/spaces/SpaceStore"; import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces"; @@ -444,7 +443,6 @@ export default class LeftPanel extends React.Component { { roomList } - { !this.props.isMinimized && } ); diff --git a/src/components/structures/LeftPanelWidget.tsx b/src/components/structures/LeftPanelWidget.tsx deleted file mode 100644 index a73d08d29f8..00000000000 --- a/src/components/structures/LeftPanelWidget.tsx +++ /dev/null @@ -1,144 +0,0 @@ -/* -Copyright 2020 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import React, { useContext, useMemo } from "react"; -import { Resizable } from "re-resizable"; -import classNames from "classnames"; - -import AccessibleButton from "../views/elements/AccessibleButton"; -import { useRovingTabIndex } from "../../accessibility/RovingTabIndex"; -import { useLocalStorageState } from "../../hooks/useLocalStorageState"; -import MatrixClientContext from "../../contexts/MatrixClientContext"; -import WidgetUtils, { IWidgetEvent } from "../../utils/WidgetUtils"; -import { useAccountData } from "../../hooks/useAccountData"; -import AppTile from "../views/elements/AppTile"; -import { useSettingValue } from "../../hooks/useSettings"; -import UIStore from "../../stores/UIStore"; -import { getKeyBindingsManager } from "../../KeyBindingsManager"; -import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts"; - -const MIN_HEIGHT = 100; -const MAX_HEIGHT = 500; // or 50% of the window height -const INITIAL_HEIGHT = 280; - -const LeftPanelWidget: React.FC = () => { - const cli = useContext(MatrixClientContext); - - const mWidgetsEvent = useAccountData>(cli, "m.widgets"); - const leftPanelWidgetId = useSettingValue("Widgets.leftPanel"); - const app = useMemo(() => { - if (!mWidgetsEvent || !leftPanelWidgetId) return null; - const widgetConfig = Object.values(mWidgetsEvent).find(w => w.id === leftPanelWidgetId); - if (!widgetConfig) return null; - - return WidgetUtils.makeAppConfig( - widgetConfig.state_key, - widgetConfig.content, - widgetConfig.sender, - null, - widgetConfig.id); - }, [mWidgetsEvent, leftPanelWidgetId]); - - const [height, setHeight] = useLocalStorageState("left-panel-widget-height", INITIAL_HEIGHT); - const [expanded, setExpanded] = useLocalStorageState("left-panel-widget-expanded", true); - - const [onFocus, isActive, ref] = useRovingTabIndex(); - const tabIndex = isActive ? 0 : -1; - - if (!app) return null; - - let content; - if (expanded) { - content = { - setHeight(height + d.height); - }} - handleWrapperClass="mx_LeftPanelWidget_resizerHandles" - handleClasses={{ top: "mx_LeftPanelWidget_resizerHandle" }} - className="mx_LeftPanelWidget_resizeBox" - enable={{ top: true }} - > - - ; - } - - return
-
{ - const action = getKeyBindingsManager().getAccessibilityAction(ev); - switch (action) { - case KeyBindingAction.ArrowLeft: - ev.stopPropagation(); - setExpanded(false); - break; - case KeyBindingAction.ArrowRight: - ev.stopPropagation(); - setExpanded(true); - break; - } - }} - > -
- { - setExpanded(!expanded); - }} - > - - { WidgetUtils.getWidgetName(app) } - - - { /* Code for the maximise button for once we have full screen widgets */ } - { /* { - }} - className="mx_LeftPanelWidget_maximizeButton" - tooltipClassName="mx_LeftPanelWidget_maximizeButtonTooltip" - title={_t("Maximise")} - />*/ } -
-
- - { content } -
; -}; - -export default LeftPanelWidget; diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index b1fb6a86063..fc4c4a68ced 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -882,10 +882,6 @@ export const SETTINGS: {[setting: string]: ISetting} = { supportedLevels: LEVELS_ROOM_OR_ACCOUNT, default: {}, }, - "Widgets.leftPanel": { - supportedLevels: LEVELS_ACCOUNT_SETTINGS, - default: null, - }, "Spaces.allRoomsInHome": { displayName: _td("Show all rooms in Home"), description: _td("All rooms you're in will appear in Home."),