Skip to content

Allow keyboard navigation to edit files, improve status bar #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ll-nick merged 5 commits into from
Sep 21, 2026
Merged

Allow keyboard navigation to edit files, improve status bar #163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4d66111
Move window sync open into exported function
ll-nick Sep 21, 2026
22f70a3
Add functions to allow manipulating edit drop down with keyboard
ll-nick Sep 21, 2026
443d11b
Wire up edit button in keyboard handling via "e" shortcut
ll-nick Sep 21, 2026
b2844df
Style the selected row in edit dropdown
ll-nick Sep 21, 2026
1794534
Tune status bar tooltips, separators and (dis)connected icon
ll-nick Sep 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 45 additions & 15 deletions src/css/presenter/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ body {
}

#statusbar {
position: relative;
flex-shrink: 0;
background: var(--bg);
border-top: 1px solid var(--overlay);
Expand Down Expand Up @@ -98,11 +99,12 @@ body {

/* ── Status-bar tooltips: driven by data-tooltip (not title) so the slow, unstyled
native browser tooltip never doubles up with this one. Anchored above the bar,
since #statusbar sits at the bottom of the viewport. ── */
.hud-btn[data-tooltip] {
since #statusbar sits at the bottom of the viewport. Not scoped to .hud-btn:
plain status spans (#slide-info, #step-info, #ws-dot) use it too. ── */
[data-tooltip] {
position: relative;
}
.hud-btn[data-tooltip]::after {
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
Expand All @@ -121,8 +123,8 @@ body {
transition: opacity 0.1s ease;
z-index: 40;
}
.hud-btn[data-tooltip]:hover::after,
.hud-btn[data-tooltip]:focus-visible::after {
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1;
transition-delay: 0.35s;
}
Expand All @@ -131,14 +133,27 @@ body {
opacity: 0;
transition-delay: 0s;
}
/* Edge buttons: keep the bubble on-screen instead of centering off the bar. */
#btn-theme[data-tooltip]::after {
/* Edge elements: keep the bubble on-screen instead of centering off the bar. */
#btn-theme[data-tooltip]::after,
#btn-prev[data-tooltip]::after {
left: 0;
transform: none;
}
#log-indicator[data-tooltip]::after {
left: auto;
right: 0;
transform: none;
}
/* #ws-dot is narrower than its tooltip text, so right-aligning to its own
edge (like #log-indicator above) leaves the bubble hanging off to the left.
position:static borrows #statusbar's edge instead. */
#ws-dot[data-tooltip] {
position: static;
}
#ws-dot[data-tooltip]::after {
left: auto;
right: 0;
transform: none;
}

.hud-sep {
Expand Down Expand Up @@ -166,6 +181,10 @@ body {
font-size: 0.85rem;
}

#step-info {
margin-left: 0.6rem;
}

/* ── Log indicator: present only when the deck has messages (JS sets data-level to
the highest level). Static builds export no logs, so it never appears there. The
icon shape and colour track that level; clicking re-opens the message banner. ── */
Expand Down Expand Up @@ -194,17 +213,28 @@ body {
display: block;
}

/* The badge X is stroked in --bg, not a contrasting colour, so it reads as
a cutout in the red circle rather than a separate mark. */
#ws-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--red);
transition: background 0.3s;
display: inline-flex;
align-items: center;
color: var(--subtext);
vertical-align: middle;
}
#ws-dot.connected {
background: var(--green);
#ws-dot .ws-badge {
fill: var(--red);
}
#ws-dot .ws-badge-x {
stroke: var(--bg);
}
#ws-dot .ws-ic-on {
display: none;
}
#ws-dot.connected .ws-ic-off {
display: none;
}
#ws-dot.connected .ws-ic-on {
display: block;
}

/* ── Media zone theme-swap ────────────────────────────────────────────────── */
Expand Down
11 changes: 11 additions & 0 deletions src/css/presenter/edit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,14 @@
text-overflow: ellipsis;
white-space: nowrap;
}

/* Keyboard-driven highlight (keyboard.ts, arrows/j/k while the menu is open) —
same accent/bg swap as #picker-list's own [role="option"].active. Declared
last so it reliably overrides the base rules above. */
.edit-row.active {
background: var(--accent);
color: var(--bg);
}
.edit-row.active .edit-row-name {
opacity: 0.75;
}
56 changes: 43 additions & 13 deletions src/inkflow/bundles/presenter.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ body {
height: 100%;
}
#statusbar {
position: relative;
flex-shrink: 0;
background: var(--bg);
border-top: 1px solid var(--overlay);
Expand Down Expand Up @@ -116,10 +117,10 @@ body {
[data-theme=light] .hud-btn:hover {
background: rgba(0, 0, 0, 0.08);
}
.hud-btn[data-tooltip] {
[data-tooltip] {
position: relative;
}
.hud-btn[data-tooltip]::after {
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
Expand All @@ -138,22 +139,32 @@ body {
transition: opacity 0.1s ease;
z-index: 40;
}
.hud-btn[data-tooltip]:hover::after,
.hud-btn[data-tooltip]:focus-visible::after {
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1;
transition-delay: 0.35s;
}
#btn-sync[aria-expanded=true]:hover::after {
opacity: 0;
transition-delay: 0s;
}
#btn-theme[data-tooltip]::after {
#btn-theme[data-tooltip]::after,
#btn-prev[data-tooltip]::after {
left: 0;
transform: none;
}
#log-indicator[data-tooltip]::after {
left: auto;
right: 0;
transform: none;
}
#ws-dot[data-tooltip] {
position: static;
}
#ws-dot[data-tooltip]::after {
left: auto;
right: 0;
transform: none;
}
.hud-sep {
width: 1px;
Expand All @@ -176,6 +187,9 @@ body {
color: var(--text);
font-size: 0.85rem;
}
#step-info {
margin-left: 0.6rem;
}
#log-indicator:not([data-level]) {
display: none;
}
Expand All @@ -201,16 +215,25 @@ body {
display: block;
}
#ws-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--red);
transition: background 0.3s;
display: inline-flex;
align-items: center;
color: var(--subtext);
vertical-align: middle;
}
#ws-dot.connected {
background: var(--green);
#ws-dot .ws-badge {
fill: var(--red);
}
#ws-dot .ws-badge-x {
stroke: var(--bg);
}
#ws-dot .ws-ic-on {
display: none;
}
#ws-dot.connected .ws-ic-off {
display: none;
}
#ws-dot.connected .ws-ic-on {
display: block;
}
[data-inkflow-theme] {
display: block;
Expand Down Expand Up @@ -822,6 +845,13 @@ kbd {
text-overflow: ellipsis;
white-space: nowrap;
}
.edit-row.active {
background: var(--accent);
color: var(--bg);
}
.edit-row.active .edit-row-name {
opacity: 0.75;
}

/* src/css/presenter/overview.css */
#overview {
Expand Down
Loading
Loading