imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ditch right panel tabs and re-add close button (#99)

Browse source 
* Add extra buttons to room summary card

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove right panel tabs in favour of X button on each panel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update room summary card header to align close button correctly

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix typo in pinned messages heading

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* i18n

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix base card title colours

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-03 09:59:41 +01:00 • committed by GitHub
parent 67cb8b7590
commit 2dbaf00e71
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
44 changed files with 865 additions and 500 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/structures/FilePanel.tsx
View file

@ -223,7 +223,11 @@ class FilePanel extends React.Component<IProps, IState> {
public render(): React.ReactNode {
if (MatrixClientPeg.safeGet().isGuest()) {
return (
<BaseCard className="mx_FilePanel mx_RoomView_messageListWrapper" onClose={this.props.onClose}>
<BaseCard
className="mx_FilePanel mx_RoomView_messageListWrapper"
onClose={this.props.onClose}
header={_t("right_panel|files_button")}
>
<div className="mx_RoomView_empty">
{_t(
"file_panel|guest_note",
@ -241,7 +245,11 @@ class FilePanel extends React.Component<IProps, IState> {
);
} else if (this.noRoom) {
return (
<BaseCard className="mx_FilePanel mx_RoomView_messageListWrapper" onClose={this.props.onClose}>
<BaseCard
className="mx_FilePanel mx_RoomView_messageListWrapper"
onClose={this.props.onClose}
header={_t("right_panel|files_button")}
>
<div className="mx_RoomView_empty">{_t("file_panel|peek_note")}</div>
</BaseCard>
);
@ -273,6 +281,7 @@ class FilePanel extends React.Component<IProps, IState> {
onClose={this.props.onClose}
withoutScrollContainer
ref={this.card}
header={_t("right_panel|files_button")}
>
{this.card.current && (
<Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />
@ -299,7 +308,11 @@ class FilePanel extends React.Component<IProps, IState> {
timelineRenderingType: TimelineRenderingType.File,
}}
>
<BaseCard className="mx_FilePanel" onClose={this.props.onClose}>
<BaseCard
className="mx_FilePanel"
onClose={this.props.onClose}
header={_t("right_panel|files_button")}
>
<Spinner />
</BaseCard>
</RoomContext.Provider>

9
src/components/structures/NotificationPanel.tsx
View file

@ -18,7 +18,6 @@ import Spinner from "../views/elements/Spinner";
import { Layout } from "../../settings/enums/Layout";
import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
import Measured from "../views/elements/Measured";
import Heading from "../views/typography/Heading";
import EmptyState from "../views/right_panel/EmptyState";
interface IProps {
@ -88,13 +87,7 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
}}
>
<BaseCard
header={
<div className="mx_BaseCard_header_title">
<Heading size="4" className="mx_BaseCard_header_title_heading">
{_t("notifications|enable_prompt_toast_title")}
</Heading>
</div>
}
header={_t("notifications|enable_prompt_toast_title")}
/**
* Need to rename this CSS class to something more generic
* Will be done once all the panels are using a similar layout

3
src/components/structures/RightPanel.tsx
View file

@ -33,7 +33,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
import { IRightPanelCard, IRightPanelCardState } from "../../stores/right-panel/RightPanelStoreIPanelState";
import { Action } from "../../dispatcher/actions";
import { XOR } from "../../@types/common";
import { RightPanelTabs } from "../views/right_panel/RightPanelTabs";
import ExtensionsCard from "../views/right_panel/ExtensionsCard";
interface BaseProps {
@ -164,7 +163,6 @@ export default class RightPanel extends React.Component<Props, IState> {
<MemberList
roomId={roomId}
key={roomId}
hideHeaderButtons
onClose={this.onClose}
searchQuery={this.state.searchQuery}
onSearchQueryChanged={this.onSearchQueryChanged}
@ -313,7 +311,6 @@ export default class RightPanel extends React.Component<Props, IState> {
return (
<aside className="mx_RightPanel" id="mx_RightPanel">
{phase && <RightPanelTabs room={this.props.room} phase={phase} />}
{card}
</aside>
);

1
src/components/structures/ThreadPanel.tsx
View file

@ -193,7 +193,6 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
}}
>
<BaseCard
hideHeaderButtons
header={
hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />
}