Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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; display: flex;
align-items: center; align-items: center;
vertical-align: center; vertical-align: center;
padding: 0 .25rem 0 .5rem; padding: 0 .25rem;
justify-content: space-between; justify-content: space-between;
> div.panel-name { div.left-side {
display: flex;
align-items: center;
}
div.panel-name {
margin-left: .25rem;
font-weight: bold; font-weight: bold;
} }
> button { button {
height: 2.5rem; height: 2.5rem;
width: 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 type { UserID } from "@/api/types"
import MainScreenContext from "../MainScreenContext.ts" import MainScreenContext from "../MainScreenContext.ts"
import PinnedMessages from "./PinnedMessages.tsx" 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" import "./RightPanel.css"
export type RightPanelType = "pinned-messages" | "members" | "user" export type RightPanelType = "pinned-messages" | "members" | "user"
@ -56,10 +57,20 @@ function renderRightPanelContent(props: RightPanelProps): JSX.Element | null {
} }
const RightPanel = (props: RightPanelProps) => { 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"> return <div className="right-panel">
<div className="right-panel-header"> <div className="right-panel-header">
<div className="panel-name">{getTitle(props.type)}</div> <div className="left-side">
<button onClick={use(MainScreenContext).closeRightPanel}><CloseButton/></button> {backButton}
<div className="panel-name">{getTitle(props.type)}</div>
</div>
<button onClick={use(MainScreenContext).closeRightPanel}><CloseIcon/></button>
</div> </div>
<div className={`right-panel-content ${props.type}`}> <div className={`right-panel-content ${props.type}`}>
{renderRightPanelContent(props)} {renderRightPanelContent(props)}