n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/rightpanel: add back button to user view

Browse source
This commit is contained in:
Tulir Asokan 2024-11-12 16:42:11 +02:00
parent 8097d5056b
commit 321b53a98a
2 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
web/src/ui/rightpanel/RightPanel.css
View file

@ -11,14 +11,20 @@ div.right-panel {
display: flex;
align-items: center;
vertical-align: center;
padding: 0 .25rem 0 .5rem;
padding: 0 .25rem;
justify-content: space-between;
> div.panel-name {
div.left-side {
display: flex;
align-items: center;
}
div.panel-name {
margin-left: .25rem;
font-weight: bold;
}
> button {
button {
height: 2.5rem;
width: 2.5rem;
}

17
web/src/ui/rightpanel/RightPanel.tsx
View file

@ -17,7 +17,8 @@ import { JSX, use } from "react"
import type { UserID } from "@/api/types"
import MainScreenContext from "../MainScreenContext.ts"
import PinnedMessages from "./PinnedMessages.tsx"
import CloseButton from "@/icons/close.svg?react"
import BackIcon from "@/icons/back.svg?react"
import CloseIcon from "@/icons/close.svg?react"
import "./RightPanel.css"
export type RightPanelType = "pinned-messages" | "members" | "user"
@ -56,10 +57,20 @@ function renderRightPanelContent(props: RightPanelProps): JSX.Element | null {
}
const RightPanel = (props: RightPanelProps) => {
let backButton: JSX.Element | null = null
if (props.type === "user") {
backButton = <button
data-target-panel="members"
onClick={use(MainScreenContext).clickRightPanelOpener}
><BackIcon/></button>
}
return <div className="right-panel">
<div className="right-panel-header">
<div className="panel-name">{getTitle(props.type)}</div>
<button onClick={use(MainScreenContext).closeRightPanel}><CloseButton/></button>
<div className="left-side">
{backButton}
<div className="panel-name">{getTitle(props.type)}</div>
</div>
<button onClick={use(MainScreenContext).closeRightPanel}><CloseIcon/></button>
</div>
<div className={`right-panel-content ${props.type}`}>
{renderRightPanelContent(props)}