switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Changeset 0.31.1 (#204)

Browse Source 
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit is contained in:
Jeffrey Smith
2026-03-19 10:21:40 +00:00
committed by xcaliber
parent 071dea8904
commit 8364440081
17 changed files with 1186 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/css/layout.css
View File

@@ -295,26 +295,7 @@
@keyframes bug-pulse { 0%,100% { filter: drop-shadow(0 0 3px var(--danger)); } 50% { filter: drop-shadow(0 0 8px var(--danger)); } }
.user-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Flyout */
.user-flyout {
display: none; position: absolute; bottom: 100%; left: 8px; right: 8px;
background: var(--bg-raised); border: 1px solid var(--border-light);
border-radius: var(--radius-lg); padding: 4px; margin-bottom: 4px;
box-shadow: 0 -4px 24px rgba(0,0,0,0.5); z-index: 200;
}
.user-flyout.open { display: block; }
.flyout-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: var(--radius);
background: none; border: none; color: var(--text-2);
cursor: pointer; font-size: 13px; width: 100%;
transition: background var(--transition), color var(--transition);
}
.flyout-item:hover { background: var(--bg-hover); color: var(--text); }
.flyout-item svg { flex-shrink: 0; }
.flyout-danger:hover { color: var(--danger); }
.flyout-divider { height: 1px; background: var(--border); margin: 4px 8px; }
/* Flyout styles moved to primitives.css (.sw-menu-flyout) — v0.31.1 */
/* ── Sidebar Tabs (v0.21.6) ──────────── */

24
src/css/primitives.css
View File

@@ -417,9 +417,27 @@ select option { background: var(--bg-surface); color: var(--text); }
.sw-menu-flyout[data-position="down"] { top: 100%; margin-top: 4px; }
.sw-menu-flyout[data-position="up"] { bottom: 100%; margin-bottom: 4px; top: auto; }
.sw-menu-flyout.open { display: block; }
.sw-menu-flyout .flyout-item,
.sw-menu-flyout .flyout-divider,
.sw-menu-flyout .flyout-danger { /* inherits from user-menu.css flyout-item styles */ }
/* Fixed positioning — escapes overflow:hidden ancestors (set by JS) */
.sw-menu-flyout[data-fixed] { position: fixed; }
/* Flyout items — single source of truth for all flyout menus (sw.menu + UserMenu) */
.sw-menu-flyout .flyout-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: var(--radius, 6px);
background: none; border: none; color: var(--text, #e8e8ed);
cursor: pointer; font-size: 13px; font-family: inherit; width: 100%;
transition: background 0.15s, color 0.15s;
}
.sw-menu-flyout .flyout-item:hover {
background: var(--bg-hover, rgba(255,255,255,0.06)); color: var(--text, #eee);
}
.sw-menu-flyout .flyout-item svg { flex-shrink: 0; opacity: 0.8; }
.sw-menu-flyout .flyout-danger { color: var(--danger, #f44336); }
.sw-menu-flyout .flyout-danger:hover {
background: var(--danger-dim, rgba(244,67,54,0.1)); color: var(--danger, #f44336);
}
.sw-menu-flyout .flyout-divider {
border: none; height: 1px; background: var(--border, #2a2a2e); margin: 4px 0;
}
/* Dropdown — styled native select */
.sw-dropdown {

86
src/css/user-menu.css
View File

@@ -1,10 +1,9 @@
/* ==========================================
Chat Switchboard — UserMenu Component CSS
==========================================
v0.25.0-cs11.1: Self-contained styles for the UserMenu
component. Works in two contexts:
1. Sidebar (flyout pops UP) — default in .sidebar
2. Topbar (flyout drops DOWN) — default standalone
v0.31.1: Flyout container + item styles moved to primitives.css
(.sw-menu-flyout). This file keeps only the trigger button,
avatar, and sidebar-specific direction overrides.
========================================== */
/* ── Wrapper ───────────────────────────────── */
@@ -69,81 +68,10 @@
white-space: nowrap;
}
/* ── Flyout (default: drops DOWN for topbar) ─ */
/* ── Sidebar overrides ───────────────────── */
/* In sidebar context, flyout pops UP instead of down and uses upward shadow */
.user-menu-wrap .user-flyout {
display: none;
position: absolute;
top: 100%;
right: 0;
left: auto;
margin-top: 2px;
background: var(--bg-elevated, #42424e);
border: 1px solid var(--border-elevated, #555);
border-radius: var(--radius-lg, 8px);
padding: 4px;
min-width: 170px;
z-index: 200;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255,255,255,0.08);
}
.user-menu-wrap .user-flyout.open {
display: block;
}
/* ── Flyout Items ──────────────────────────── */
.user-menu-wrap .flyout-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: var(--radius, 6px);
background: none;
border: none;
color: var(--text-2, #999);
cursor: pointer;
font-size: 13px;
font-family: inherit;
width: 100%;
transition: background 0.15s, color 0.15s;
}
.user-menu-wrap .flyout-item:hover {
background: var(--bg-hover, rgba(255,255,255,0.06));
color: var(--text, #eee);
}
.user-menu-wrap .flyout-item svg {
flex-shrink: 0;
opacity: 0.7;
}
.user-menu-wrap .flyout-danger {
color: var(--danger, #f44336);
}
.user-menu-wrap .flyout-danger:hover {
background: var(--danger-dim, rgba(244, 67, 54, 0.1));
color: var(--danger, #f44336);
}
.user-menu-wrap .flyout-divider {
border: none;
height: 1px;
background: var(--border, #2a2a2e);
margin: 4px 0;
}
/* ── Flyout Direction: UP ──────────────────── */
/* data-flyout="up" on .user-menu-wrap (or legacy .sidebar parent) */
.user-menu-wrap[data-flyout="up"] .user-flyout,
.sidebar .user-menu-wrap .user-flyout {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: 4px;
.sidebar .user-menu-wrap .sw-menu-flyout {
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
}
@@ -158,7 +86,7 @@
display: none;
}
.sidebar.collapsed .user-menu-wrap .user-flyout {
.sidebar.collapsed .user-menu-wrap .sw-menu-flyout {
position: fixed;
left: var(--sidebar-rail);
bottom: 8px;