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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--ds-border);
|
||||
color: var(--ds-text);
|
||||
@@ -205,6 +208,17 @@
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -47,6 +47,20 @@ import './RoomInfoPanel.css'
|
||||
|
||||
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 {
|
||||
room: MyRoomItem
|
||||
members: RoomMember[]
|
||||
@@ -331,7 +345,7 @@ export function RoomInfoPanel({
|
||||
|
||||
<div className="room-info-section">
|
||||
<button type="button" className="room-info-settings-toggle" onClick={() => setFilesOpen((v) => !v)}>
|
||||
Files {filesOpen ? '−' : '+'}
|
||||
<DisclosureChevron open={filesOpen} /> Files
|
||||
</button>
|
||||
{filesOpen && (
|
||||
<div className="room-info-files">
|
||||
@@ -419,7 +433,7 @@ export function RoomInfoPanel({
|
||||
className="room-info-settings-toggle"
|
||||
onClick={() => setIntegrationsOpen((v) => !v)}
|
||||
>
|
||||
Integrations {integrationsOpen ? '−' : '+'}
|
||||
<DisclosureChevron open={integrationsOpen} /> Integrations
|
||||
</button>
|
||||
{integrationsOpen && (
|
||||
<div className="room-info-integrations">
|
||||
@@ -518,7 +532,7 @@ export function RoomInfoPanel({
|
||||
className="room-info-settings-toggle"
|
||||
onClick={() => setSettingsOpen((v) => !v)}
|
||||
>
|
||||
Room settings {settingsOpen ? '−' : '+'}
|
||||
<DisclosureChevron open={settingsOpen} /> Room settings
|
||||
</button>
|
||||
{settingsOpen && (
|
||||
<form className="room-info-settings-form" onSubmit={handleSaveSettings}>
|
||||
|
||||
Reference in New Issue
Block a user