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).
This commit is contained in:
Travis Ralston
GitHub
parent
8d13e238b9
commit
813a60a7f3
5 changed files with 0 additions and 296 deletions
|
|
@ -23,7 +23,6 @@
|
||||||
@import "./structures/_HeaderButtons.scss";
|
@import "./structures/_HeaderButtons.scss";
|
||||||
@import "./structures/_HomePage.scss";
|
@import "./structures/_HomePage.scss";
|
||||||
@import "./structures/_LeftPanel.scss";
|
@import "./structures/_LeftPanel.scss";
|
||||||
@import "./structures/_LeftPanelWidget.scss";
|
|
||||||
@import "./structures/_MainSplit.scss";
|
@import "./structures/_MainSplit.scss";
|
||||||
@import "./structures/_MatrixChat.scss";
|
@import "./structures/_MatrixChat.scss";
|
||||||
@import "./structures/_MyGroups.scss";
|
@import "./structures/_MyGroups.scss";
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -27,7 +27,6 @@ import { Action } from "../../dispatcher/actions";
|
||||||
import RoomSearch from "./RoomSearch";
|
import RoomSearch from "./RoomSearch";
|
||||||
import ResizeNotifier from "../../utils/ResizeNotifier";
|
import ResizeNotifier from "../../utils/ResizeNotifier";
|
||||||
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
|
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
|
||||||
import LeftPanelWidget from "./LeftPanelWidget";
|
|
||||||
import { replaceableComponent } from "../../utils/replaceableComponent";
|
import { replaceableComponent } from "../../utils/replaceableComponent";
|
||||||
import SpaceStore from "../../stores/spaces/SpaceStore";
|
import SpaceStore from "../../stores/spaces/SpaceStore";
|
||||||
import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
|
import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
|
||||||
|
|
@ -444,7 +443,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
|
||||||
{ roomList }
|
{ roomList }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{ !this.props.isMinimized && <LeftPanelWidget /> }
|
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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<Record<string, IWidgetEvent>>(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 = <Resizable
|
|
||||||
size={{ height } as any}
|
|
||||||
minHeight={MIN_HEIGHT}
|
|
||||||
maxHeight={Math.min(UIStore.instance.windowHeight / 2, MAX_HEIGHT)}
|
|
||||||
onResizeStop={(e, dir, ref, d) => {
|
|
||||||
setHeight(height + d.height);
|
|
||||||
}}
|
|
||||||
handleWrapperClass="mx_LeftPanelWidget_resizerHandles"
|
|
||||||
handleClasses={{ top: "mx_LeftPanelWidget_resizerHandle" }}
|
|
||||||
className="mx_LeftPanelWidget_resizeBox"
|
|
||||||
enable={{ top: true }}
|
|
||||||
>
|
|
||||||
<AppTile
|
|
||||||
app={app}
|
|
||||||
fullWidth
|
|
||||||
showMenubar={false}
|
|
||||||
userWidget
|
|
||||||
userId={cli.getUserId()}
|
|
||||||
creatorUserId={app.creatorUserId}
|
|
||||||
widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
|
|
||||||
waitForIframeLoad={app.waitForIframeLoad}
|
|
||||||
/>
|
|
||||||
</Resizable>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div className="mx_LeftPanelWidget">
|
|
||||||
<div
|
|
||||||
onFocus={onFocus}
|
|
||||||
className="mx_LeftPanelWidget_headerContainer"
|
|
||||||
onKeyDown={(ev: React.KeyboardEvent) => {
|
|
||||||
const action = getKeyBindingsManager().getAccessibilityAction(ev);
|
|
||||||
switch (action) {
|
|
||||||
case KeyBindingAction.ArrowLeft:
|
|
||||||
ev.stopPropagation();
|
|
||||||
setExpanded(false);
|
|
||||||
break;
|
|
||||||
case KeyBindingAction.ArrowRight:
|
|
||||||
ev.stopPropagation();
|
|
||||||
setExpanded(true);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="mx_LeftPanelWidget_stickable">
|
|
||||||
<AccessibleButton
|
|
||||||
onFocus={onFocus}
|
|
||||||
inputRef={ref}
|
|
||||||
tabIndex={tabIndex}
|
|
||||||
className="mx_LeftPanelWidget_headerText"
|
|
||||||
role="treeitem"
|
|
||||||
aria-expanded={expanded}
|
|
||||||
aria-level={1}
|
|
||||||
onClick={() => {
|
|
||||||
setExpanded(!expanded);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className={classNames({
|
|
||||||
"mx_LeftPanelWidget_collapseBtn": true,
|
|
||||||
"mx_LeftPanelWidget_collapseBtn_collapsed": !expanded,
|
|
||||||
})} />
|
|
||||||
<span>{ WidgetUtils.getWidgetName(app) }</span>
|
|
||||||
</AccessibleButton>
|
|
||||||
|
|
||||||
{ /* Code for the maximise button for once we have full screen widgets */ }
|
|
||||||
{ /*<AccessibleTooltipButton
|
|
||||||
tabIndex={tabIndex}
|
|
||||||
onClick={() => {
|
|
||||||
}}
|
|
||||||
className="mx_LeftPanelWidget_maximizeButton"
|
|
||||||
tooltipClassName="mx_LeftPanelWidget_maximizeButtonTooltip"
|
|
||||||
title={_t("Maximise")}
|
|
||||||
/>*/ }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{ content }
|
|
||||||
</div>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LeftPanelWidget;
|
|
||||||
|
|
@ -882,10 +882,6 @@ export const SETTINGS: {[setting: string]: ISetting} = {
|
||||||
supportedLevels: LEVELS_ROOM_OR_ACCOUNT,
|
supportedLevels: LEVELS_ROOM_OR_ACCOUNT,
|
||||||
default: {},
|
default: {},
|
||||||
},
|
},
|
||||||
"Widgets.leftPanel": {
|
|
||||||
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
"Spaces.allRoomsInHome": {
|
"Spaces.allRoomsInHome": {
|
||||||
displayName: _td("Show all rooms in Home"),
|
displayName: _td("Show all rooms in Home"),
|
||||||
description: _td("All rooms you're in will appear in Home."),
|
description: _td("All rooms you're in will appear in Home."),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue