Private
Public Access
Replace +/- disclosure indicators with a rotating chevron in RoomInfoPanel
The Files/Integrations/Room settings section toggles used a trailing "+"/"-" glyph -- confusing as a collapse/expand affordance. Replaced with a small chevron placed before the label, pointing right when collapsed and rotating 90deg clockwise (pointing down) when expanded, the more conventional disclosure-triangle pattern. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -193,6 +193,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.room-info-settings-toggle {
|
.room-info-settings-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid var(--ds-border);
|
border: 1px solid var(--ds-border);
|
||||||
color: var(--ds-text);
|
color: var(--ds-text);
|
||||||
@@ -205,6 +208,17 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.room-info-settings-chevron {
|
||||||
|
display: inline-flex;
|
||||||
|
flex: none;
|
||||||
|
color: var(--ds-muted);
|
||||||
|
transition: transform 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.room-info-settings-chevron-open {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
.room-info-settings-form {
|
.room-info-settings-form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -47,6 +47,20 @@ import './RoomInfoPanel.css'
|
|||||||
|
|
||||||
const EVENT_TYPES: EventType[] = ['message.created', 'message.updated']
|
const EVENT_TYPES: EventType[] = ['message.created', 'message.updated']
|
||||||
|
|
||||||
|
// Disclosure chevron for the collapsible sections below (Files,
|
||||||
|
// Integrations, Room settings) -- points right when collapsed, rotates 90°
|
||||||
|
// clockwise (pointing down) when expanded, same convention as most
|
||||||
|
// disclosure triangles rather than a +/- glyph.
|
||||||
|
function DisclosureChevron({ open }: { open: boolean }) {
|
||||||
|
return (
|
||||||
|
<span className={`room-info-settings-chevron${open ? ' room-info-settings-chevron-open' : ''}`}>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 20 20" fill="none" aria-hidden="true">
|
||||||
|
<polyline points="7,4 13,10 7,16" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
interface RoomInfoPanelProps {
|
interface RoomInfoPanelProps {
|
||||||
room: MyRoomItem
|
room: MyRoomItem
|
||||||
members: RoomMember[]
|
members: RoomMember[]
|
||||||
@@ -331,7 +345,7 @@ export function RoomInfoPanel({
|
|||||||
|
|
||||||
<div className="room-info-section">
|
<div className="room-info-section">
|
||||||
<button type="button" className="room-info-settings-toggle" onClick={() => setFilesOpen((v) => !v)}>
|
<button type="button" className="room-info-settings-toggle" onClick={() => setFilesOpen((v) => !v)}>
|
||||||
Files {filesOpen ? '−' : '+'}
|
<DisclosureChevron open={filesOpen} /> Files
|
||||||
</button>
|
</button>
|
||||||
{filesOpen && (
|
{filesOpen && (
|
||||||
<div className="room-info-files">
|
<div className="room-info-files">
|
||||||
@@ -419,7 +433,7 @@ export function RoomInfoPanel({
|
|||||||
className="room-info-settings-toggle"
|
className="room-info-settings-toggle"
|
||||||
onClick={() => setIntegrationsOpen((v) => !v)}
|
onClick={() => setIntegrationsOpen((v) => !v)}
|
||||||
>
|
>
|
||||||
Integrations {integrationsOpen ? '−' : '+'}
|
<DisclosureChevron open={integrationsOpen} /> Integrations
|
||||||
</button>
|
</button>
|
||||||
{integrationsOpen && (
|
{integrationsOpen && (
|
||||||
<div className="room-info-integrations">
|
<div className="room-info-integrations">
|
||||||
@@ -518,7 +532,7 @@ export function RoomInfoPanel({
|
|||||||
className="room-info-settings-toggle"
|
className="room-info-settings-toggle"
|
||||||
onClick={() => setSettingsOpen((v) => !v)}
|
onClick={() => setSettingsOpen((v) => !v)}
|
||||||
>
|
>
|
||||||
Room settings {settingsOpen ? '−' : '+'}
|
<DisclosureChevron open={settingsOpen} /> Room settings
|
||||||
</button>
|
</button>
|
||||||
{settingsOpen && (
|
{settingsOpen && (
|
||||||
<form className="room-info-settings-form" onSubmit={handleSaveSettings}>
|
<form className="room-info-settings-form" onSubmit={handleSaveSettings}>
|
||||||
|
|||||||
Reference in New Issue
Block a user