| name | fantasia-context-menu-dividers |
| description | Context menu divider policy: full primary-bright group separators vs low-opacity separatorAlt between consecutive items in the same group. Use when adding or editing q-menu q-list rows, AppControlSingleMenu data, or hand-built context menus. |
Context menu dividers
Rule: fa-context-menu-dividers.mdc.
Quick rule
| Situation | Divider |
|---|
| Section / group break | Group separator — primary-bright, full opacity |
| 2nd+ item in same group, no group line above | separatorAlt — text-menu-separator, opacity: 0.2 |
| Right after group separator | Nothing |
Data-driven menus
AppControlSingleMenu + AppControlMenus/_data/*: insert { mode: 'separator' } only for group breaks. Renderer adds separatorAlt via contextMenuShouldShowSeparatorAltBeforeItem.
Hand-built menus
- Group breaks:
<q-separator class="…__separator" /> before first row of new section (or after prior section).
- Within section:
<q-separator class="…__separatorAlt" /> before each item after the first in that section.
v-for lists (recent projects, browse tabs, locales): v-if="contextMenuShouldShowSeparatorAltBeforeIndex(index)" before q-item; do not use full separators between homogeneous rows.
Helper: AppControlMenus/scripts/functions/contextMenuShouldShowSeparatorAltBeforeItem.ts.
SCSS
@use '../../../globals/AppControlMenus/styles/contextMenuSeparators.mixin' as contextMenuSeparators;
.feature__separator {
@include contextMenuSeparators.fa-context-menu-separator-group;
}
.feature__separatorAlt {
@include contextMenuSeparators.fa-context-menu-separator-alt;
}
Import path depth varies by feature folder.
Tokens: AppControlMenus/styles/_variables.scss — $appControlMenus-separatorColor, $appControlMenus-separatorAltColor.
Inventory (action-row menus)
| Surface | Pattern |
|---|
AppControlSingleMenu | Auto separatorAlt + data group separators |
| Document tab context menu + browse submenu | Hand-built; reference implementation |
ProjectHierarchyTreeNodeContextMenu | Hand-built |
GlobalLanguageSelector | Light theme; separatorAlt between locales |
SplashControlsResumeDropdown | separatorAlt between recent projects |
FaSelectInput | separatorAlt between dropdown options |
| Color palette swatch context menu | Group separator duplicate → delete only |
Tests
contextMenuShouldShowSeparatorAltBeforeItem.vitest.test.ts (AppControlMenus)AppControlSingleMenu.vitest.test.ts — separatorAlt presence/absence- Feature vitest: row clicks still work; optional separator class count when behavior is non-obvious
Related
