diff --git a/angular-client/src/components/status-bar/status-bar.component.css b/angular-client/src/components/status-bar/status-bar.component.css new file mode 100644 index 000000000..59c3a06af --- /dev/null +++ b/angular-client/src/components/status-bar/status-bar.component.css @@ -0,0 +1,119 @@ +/* Block host so the sticky container's containing block spans the whole page. */ +:host { + display: block; + position: sticky; + top: 0; + z-index: 20; +} + +@keyframes sidebar-in { + from { + transform: translateX(100%); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +/* Collapsed affordance: a handle docked flush to the top-right edge. */ +.side-handle { + position: absolute; + top: 0; + right: 0; + width: 30px; + height: 56px; + padding: 0; + border: 1px solid var(--color-divider); + border-right: none; + border-radius: 10px 0 0 10px; + background: var(--color-background-info); + color: var(--color-text-primary); + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; +} +.side-handle:hover { + background: #383838; +} +.side-handle:focus-visible { + outline: 2px solid var(--color-text-primary); + outline-offset: -2px; +} +.side-handle mat-icon { + width: 26px; + height: 26px; + font-size: 26px; + line-height: 26px; +} + +/* Open panel: docked flush to the right edge, top-aligned, hugs its chip(s). */ +.panel { + position: absolute; + top: 0; + right: 0; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + padding: 10px 12px 14px; + background: var(--color-background-info); + border: 1px solid var(--color-divider); + border-right: none; + border-radius: 12px 0 0 12px; + box-shadow: -6px 6px 18px rgba(0, 0, 0, 0.45); +} + +/* Respect reduced-motion: only slide the panel in when motion is welcome. */ +@media (prefers-reduced-motion: no-preference) { + .panel { + animation: sidebar-in 0.2s ease; + } +} + +/* Header: small title on the left, close chevron on the right. */ +.panel-header { + align-self: stretch; + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} +.panel-title { + font-size: var(--font-size-sm, 12px); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--color-text-subtitle); + padding-left: 2px; +} + +.panel-collapse { + flex: 0 0 auto; + width: 28px; + height: 28px; + padding: 0; + border: none; + border-radius: 6px; + background: transparent; + color: var(--color-text-subtitle); + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; +} +.panel-collapse:hover { + background: rgba(255, 255, 255, 0.08); +} +.panel-collapse:focus-visible { + outline: 2px solid var(--color-text-primary); + outline-offset: 2px; +} +.panel-collapse mat-icon { + width: 22px; + height: 22px; + font-size: 22px; + line-height: 22px; +} diff --git a/angular-client/src/components/status-bar/status-bar.component.html b/angular-client/src/components/status-bar/status-bar.component.html new file mode 100644 index 000000000..a5e114c18 --- /dev/null +++ b/angular-client/src/components/status-bar/status-bar.component.html @@ -0,0 +1,22 @@ +@if (collapsed()) { + +} @else { +