mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 10:24:02 +00:00
feat(panels): build the rail panels on one UiPanel
The Data, Authoring, Weather, Recent Imagery, Context, CCTV, Street Level and Radio panels each wrote the same frame by hand. They are now one kit component, UiPanel, with a title, badge/actions/default slots and v-model:collapsed, drawing Core's panel markup and classes beside the kit's; props cover the differences (sideways, glow, scroll, railScroller, tag, toggleWords). RailPanel binds it to the panel chrome store: v-panel-state writes its state classes at once, and its button's clicks reach PanelChrome. UiPanelToggle is the collapse button UiPanel and PanelCollapseButton share. UiPanel's collapsed drives the button and ui-panel--collapsed only; the owner hides the body by writing the root's collapsed class, since the rails measure a panel in the task that opens it. PanelCollapseButton takes startCollapsed instead of initial and initialTitle, so a button shows its state's glyph and words before startup presents the panel. Titles render through t() instead of data-i18n, and the unused "Expand panel" string is pruned. v-panel-state redraws the presented state after a re-render, in case a root's class binding ever changes.
This commit is contained in:
1 parent
a3fc475cbe
commit
cd231faae9
30 files changed
+427
-197
No files matched your search
@@ -25,7 +25,6 @@ surface. Keep the header and any outward popup outside the scrolling body:
|
||||
class="panel-surface-control"
|
||||
target="example-panel"
|
||||
:name="t('Example')"
|
||||
initial="−"
|
||||
/>
|
||||
</header>
|
||||
<div data-panel-body data-rail-scroller>
|
||||
@@ -90,10 +89,15 @@ Do not copy the rail example's `.panel-collapse-btn` class into the dock:
|
||||
existing dock rules intentionally hide that class. The generic surface skin
|
||||
does not replace the dock's disclosure policy.
|
||||
|
||||
`PanelCollapseButton` (`src/ui/rail/`) renders a panel's collapse button
|
||||
(`.panel-collapse-btn`) from the open state `PanelChrome` presents to the
|
||||
`gev-panel-chrome` store, and its click asks `PanelChrome` to toggle the
|
||||
panel through `setPanelCollapsed`. `PanelChrome` collects the buttons'
|
||||
A panel with Core's standard header (glow, title, badges, divider, actions
|
||||
and collapse button) is a `RailPanel` (`src/ui/rail/`): the kit's `UiPanel`
|
||||
bound to the `gev-panel-chrome` store, with its state classes drawn by
|
||||
`v-panel-state` and its button's click asking `PanelChrome` to toggle it.
|
||||
A panel with its own header uses `PanelCollapseButton`, which renders the
|
||||
collapse button (`.panel-collapse-btn`) from the open state `PanelChrome`
|
||||
presents to that store; until then, both show their `startCollapsed` state,
|
||||
which should match the markup's `collapsed` class.
|
||||
Either way, the click reaches `PanelChrome`'s `setPanelCollapsed`. `PanelChrome` collects the buttons'
|
||||
targets at initialization and binds each panel's Escape. For additions
|
||||
present at startup, keep those hooks and the existing chrome lifecycle. A
|
||||
dynamically mounted panel must own its disclosure: its own state, button and
|
||||
|
||||
Reference in new issue
Block a user