noe/tl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: HyperCard theme + dark mode

Browse source 
- Retheme the whole app 1-bit HyperCard: white cards, hard 1px black borders,
  Chicago/Geneva/Monaco fonts (with web fallbacks; real fonts go in /fonts, see
  fonts/README.md), inverted-on-press buttons, a 50% desktop dither, black Mac
  title bar. Palette runs on CSS variables.
- Dark mode toggle (toolbar + home header): flips the palette vars via a class
  on <html>, persisted in localStorage and applied before first paint.
- Per-annotation fat colored left stripe in the annotation pane; annotation name
  bumped above the md h1; full-color (no longer veiled/desaturated) thumbnails.
- Jump popover now labels each part with the clip name + crop-adjusted mark-time
  frame (e.g. "CU Tashi (1) 45f"), matching the annotation editor.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-06-29 20:23:34 -04:00
parent fc25dfc016
commit e00a056209
4 changed files with 279 additions and 200 deletions
Download patch file Download diff file Expand all files Collapse all files

410
tl/resources/public/css/app.css
View file

@ -1,8 +1,40 @@
/* tl — app styles. Dynamic geometry (positions/sizes derived from zoom/frames /* tl — HyperCard theme. 1-bit black-on-white: white "cards", hard 1px black
or the resizable panes) stays inline in the views; everything static is here. */ borders, Chicago for chrome / Geneva for body, inverted (black) selection, a
50% dither for the desktop. Dynamic geometry stays inline in the views; only
cosmetics live here. Drop the real fonts in /fonts (see fonts/README.md). */
@font-face { font-family: "Chicago"; font-display: swap;
src: local("Chicago"), local("ChicagoFLF"), url("/fonts/ChicagoFLF.ttf"); }
@font-face { font-family: "Geneva"; font-display: swap;
src: local("Geneva"), url("/fonts/Geneva.ttf"); }
@font-face { font-family: "Monaco"; font-display: swap;
src: local("Monaco"), url("/fonts/Monaco.ttf"); }
:root {
--paper:#fff; --ink:#000; --gray:#808080; --mute:#555;
--shade:#eee; --hover:#ddd; /* subtle fills (code/err bg, button hover) */
--chicago:"Chicago","ChicagoFLF","Charcoal","Geneva",system-ui,sans-serif;
--geneva:"Geneva","Verdana","Tahoma","Segoe UI",sans-serif;
--mono:"Monaco","Courier New",monospace;
/* 50% checkerboard — the classic Mac desktop dither */
--desktop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23ffffff'/%3E%3Crect width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000000'/%3E%3C/svg%3E");
}
/* dark mode: flip paper/ink (the 50% desktop dither reads the same either way).
Toggled by adding class "dark" to <html>. */
html.dark {
--paper:#000; --ink:#fff; --mute:#aaa; --shade:#222; --hover:#333;
}
html, body, #app { height: 100%; margin: 0; } html, body, #app { height: 100%; margin: 0; }
body { overflow: hidden; } body { overflow: hidden; background: var(--desktop); background-size: 2px 2px;
font-family: var(--geneva); color: var(--ink); -webkit-font-smoothing: none; }
/* classic Mac scrollbars: white track, dithered thumb, hard black edges */
::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track { background: var(--paper); border: 1px solid var(--ink); }
::-webkit-scrollbar-thumb { background: var(--desktop); background-size: 2px 2px;
border: 1px solid var(--ink); }
.app { .app {
height: 100vh; height: 100vh;
@ -10,170 +42,159 @@ body { overflow: hidden; }
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
font-family: sans-serif; font-family: var(--geneva);
background: #0c0c0c; background: var(--paper);
color: #ddd; color: var(--ink);
/* viewport-fit=cover lets content slide under the notch / rounded corners /
home indicator; inset it back so the video isn't covered. box-sizing keeps
total height at 100dvh (timeline-pane is flex:1 and absorbs the padding). */
box-sizing: border-box; box-sizing: border-box;
padding: env(safe-area-inset-top) env(safe-area-inset-right) padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left); env(safe-area-inset-bottom) env(safe-area-inset-left);
} }
/* shared button look: white round-rect, hard black border, Chicago, invert on
press. The default action (.save) gets the heavy Mac "default button" ring. */
.jump-btn, .add-btn, .edit-btn, .del-btn, .expand-btn, .back-btn, .crumb,
.play-btn, .step-btn, .row-x, .add-mark, .save, .cancel, .hl-ok, .hl-cancel,
.pane-tabs button {
font-family: var(--chicago); background: var(--paper); color: var(--ink);
border: 1px solid var(--ink); border-radius: 8px; cursor: pointer; line-height: 1.3;
}
.jump-btn:hover, .add-btn:hover, .edit-btn:hover, .del-btn:hover, .expand-btn:hover,
.back-btn:hover, .crumb:hover, .play-btn:hover, .step-btn:hover, .row-x:hover,
.add-mark:hover, .save:hover, .cancel:hover, .hl-ok:hover, .hl-cancel:hover,
.pane-tabs button:hover {
background: var(--hover);
}
.jump-btn:active, .add-btn:active, .edit-btn:active, .del-btn:active, .expand-btn:active,
.back-btn:active, .crumb:active, .play-btn:active, .step-btn:active, .row-x:active,
.add-mark:active, .save:active, .cancel:active, .hl-ok:active, .hl-cancel:active,
.pane-tabs button:active {
background: var(--ink); color: var(--paper);
}
/* --- top region: video | annotation ------------------------------------ */ /* --- top region: video | annotation ------------------------------------ */
/* sizes are relative (vh / %), set via CSS vars from the app; px mins below */
.top { display: flex; min-height: 140px; height: var(--top-h, 46vh); } .top { display: flex; min-height: 140px; height: var(--top-h, 46vh); }
.video-pane { .video-pane {
position: relative; position: relative;
flex-shrink: 0; width: var(--video-w, 50%); min-width: 200px; flex-shrink: 0; width: var(--video-w, 50%); min-width: 200px;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
background: #000; overflow: hidden; background: #000; overflow: hidden; border-right: 1px solid var(--ink);
} }
.video-pane video { max-width: 100%; max-height: 100%; display: block; background: #000; } .video-pane video { max-width: 100%; max-height: 100%; display: block; background: #000; }
.frame-readout { .frame-readout {
position: absolute; bottom: 6px; right: 8px; z-index: 4; position: absolute; bottom: 6px; right: 8px; z-index: 4;
display: flex; gap: 8px; align-items: center; display: flex; gap: 8px; align-items: center;
font-family: monospace; font-size: 11px; color: #cfe3f5; font-family: var(--mono); font-size: 11px; color: var(--ink);
background: rgba(0,0,0,0.6); padding: 2px 7px; border-radius: 4px; background: var(--paper); padding: 2px 7px; border: 1px solid var(--ink);
pointer-events: none; /* don't block video controls… */ pointer-events: none; /* don't block video controls… */
} }
.frame-readout .fr-clip { pointer-events: auto; } /* …except the clip chip */ .frame-readout .fr-clip { pointer-events: auto; } /* …except the clip chip */
.fr-clip.clickable { cursor: copy; color: #9ed7b0; } .fr-clip.clickable { cursor: copy; text-decoration: underline; }
.fr-clip.clickable:hover { color: #c7efd4; } .fr-clip.clickable:hover { background: var(--ink); color: var(--paper); }
.annot-pane { flex: 1; min-width: 200px; display: flex; } .annot-pane { flex: 1; min-width: 200px; display: flex; }
/* --- draggable dividers ------------------------------------------------- */ /* --- draggable dividers ------------------------------------------------- */
/* touch-action:none so a drag doesn't scroll the page on touch devices */ .divider-v { flex-shrink: 0; width: 6px; cursor: col-resize; background: var(--ink); touch-action: none; }
.divider-v { flex-shrink: 0; width: 7px; cursor: col-resize; background: #222; touch-action: none; } .divider-h { flex-shrink: 0; height: 6px; cursor: row-resize; background: var(--ink); touch-action: none; }
.divider-h { flex-shrink: 0; height: 7px; cursor: row-resize; background: #222; touch-action: none; } .divider-v:hover, .divider-h:hover, .divider-v:active, .divider-h:active {
.divider-v:hover, .divider-h:hover, .divider-v:active, .divider-h:active { background: #3a6ea5; } background: var(--desktop); background-size: 2px 2px;
}
/* --- commentary --------------------------------------------------------- */ /* --- commentary --------------------------------------------------------- */
.commentary { .commentary {
position: relative; flex: 1; overflow-y: auto; position: relative; flex: 1; overflow-y: auto;
background: #111; padding: 8px 12px; box-sizing: border-box; background: var(--paper); padding: 8px 12px; box-sizing: border-box;
} }
.ann { .ann {
position: relative; position: relative;
padding: 8px 10px; margin-bottom: 8px; border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; border-radius: 0;
border: 1px solid transparent; background: #161616; border: 1px solid var(--ink); background: var(--paper);
} }
.ann.active { border-color: #3a6ea5; background: #152333; } .ann.active { box-shadow: 2px 2px 0 var(--ink); }
.ann-head { display: flex; align-items: center; justify-content: space-between; .ann-head { display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 4px; } gap: 8px; margin-bottom: 4px; }
.ann-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; .ann-title { font-family: var(--chicago); font-size: 18px; line-height: 1.15;
color: #7aa6d6; } color: var(--ink); }
.ann-empty { color: #666; font-size: 12px; } .ann-empty { color: var(--mute); font-size: 12px; }
.jump-btn { .jump-btn { flex-shrink: 0; padding: 1px 7px; font-size: 10px; white-space: nowrap; }
flex-shrink: 0; background: #1c2a38; color: #cfe3f5;
border: 1px solid #3a6ea5; border-radius: 4px;
padding: 1px 7px; cursor: pointer; font-size: 10px; white-space: nowrap;
}
/* popover of jump targets for an annotation with discontinuous marks */ /* popover of jump targets for an annotation with discontinuous marks */
.jump-pop { .jump-pop {
position: absolute; right: 0; top: 100%; z-index: 20; margin-top: 2px; position: absolute; right: 0; top: 100%; z-index: 20; margin-top: 2px;
min-width: 150px; max-height: 180px; overflow-y: auto; min-width: 150px; max-height: 180px; overflow-y: auto;
background: #1b1b1b; border: 1px solid #3a6ea5; border-radius: 4px; background: var(--paper); border: 1px solid var(--ink);
box-shadow: 0 4px 14px rgba(0,0,0,0.5); padding: 4px; box-shadow: 2px 2px 0 var(--ink); padding: 4px;
} }
.jump-pop button { .jump-pop button {
display: block; width: 100%; text-align: left; background: none; display: block; width: 100%; text-align: left; background: var(--paper);
color: #cde; border: none; border-radius: 3px; padding: 4px 6px; color: var(--ink); border: none; padding: 4px 6px; font-family: var(--chicago);
cursor: pointer; font-size: 11px; white-space: nowrap; cursor: pointer; font-size: 11px; white-space: nowrap;
} }
.jump-pop button:hover { background: #2a4a6a; } .jump-pop button:hover { background: var(--ink); color: var(--paper); }
/* --- commentary head + actions ----------------------------------------- */ /* --- commentary head + actions ----------------------------------------- */
/* the current context's own description, atop the commentary */ /* the current context's own description, atop the commentary */
.ctx-content { display: flex; align-items: flex-start; gap: 8px; .ctx-content { display: flex; align-items: flex-start; gap: 8px;
padding: 8px 10px; margin-bottom: 8px; border-bottom: 1px solid #222; } padding: 8px 10px; margin-bottom: 8px; border-bottom: 2px solid var(--ink); }
.ctx-content .md, .ctx-content .muted { flex: 1; min-width: 0; } .ctx-content .md, .ctx-content .muted { flex: 1; min-width: 0; }
.ctx-content .muted { font-style: italic; } .ctx-content .muted { font-style: italic; }
.ctx-content .edit-btn { flex-shrink: 0; } .ctx-content .edit-btn { flex-shrink: 0; }
.commentary-head { margin-bottom: 8px; } .commentary-head { margin-bottom: 8px; }
.add-btn { .add-btn { width: 100%; padding: 6px 8px; font-size: 12px; box-shadow: 1px 1px 0 var(--ink); }
width: 100%; background: #1c2a38; color: #cfe3f5;
border: 1px solid #3a6ea5; border-radius: 4px;
padding: 6px 8px; cursor: pointer; font-size: 12px;
}
.add-btn:hover { background: #24384e; }
.ann-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .ann-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.edit-btn { .edit-btn, .expand-btn, .del-btn { padding: 1px 6px; font-size: 11px; }
background: none; color: #7aa6d6; border: 1px solid transparent; .expand-btn.has-children { background: var(--ink); color: var(--paper); }
border-radius: 4px; padding: 1px 6px; cursor: pointer; font-size: 11px;
}
.edit-btn:hover { color: #cfe3f5; border-color: #3a6ea5; }
.del-btn {
background: none; color: #a66; border: 1px solid transparent;
border-radius: 4px; padding: 1px 6px; cursor: pointer; font-size: 11px;
}
.del-btn:hover { color: #e66; border-color: #a44; }
.clip.clickable { cursor: copy; outline: 1px solid #5ab07a; }
.expand-btn {
background: none; color: #7aa6d6; border: 1px solid transparent;
border-radius: 4px; padding: 1px 6px; cursor: pointer; font-size: 11px;
}
.expand-btn:hover { color: #cfe3f5; border-color: #3a6ea5; }
.expand-btn.has-children { color: #cfe3f5; border-color: #3a6ea5; background: #16263a; }
.nest-badge { .nest-badge {
margin-left: 3px; font-size: 9px; line-height: 1; vertical-align: top; margin-left: 3px; font-size: 9px; line-height: 1; vertical-align: top;
background: #3a6ea5; color: #fff; border-radius: 8px; padding: 1px 4px; background: var(--ink); color: var(--paper); border-radius: 8px; padding: 1px 4px;
} }
.clip.clickable { cursor: copy; outline: 1px solid var(--ink); }
/* --- authoring form (fills the annotation pane) ------------------------- */ /* --- authoring form (fills the annotation pane) ------------------------- */
.form { .form {
flex: 1; min-width: 0; overflow-y: auto; flex: 1; min-width: 0; overflow-y: auto;
background: #111; border: 1px solid #333; box-sizing: border-box; background: var(--paper); border: 1px solid var(--ink); box-sizing: border-box;
padding: 10px 12px; padding: 10px 12px;
display: flex; flex-direction: column; gap: 10px; display: flex; flex-direction: column; gap: 10px;
} }
.form-head { font-size: 13px; font-weight: 600; color: #cfe3f5; } .form-head { font-family: var(--chicago); font-size: 14px; color: var(--ink); }
.form-row { display: flex; gap: 8px; align-items: center; } .form-row { display: flex; gap: 8px; align-items: center; }
.form-name { flex: 1; } .form-name { flex: 1; }
.form input[type=text], .form-name, .form-content { .form input[type=text], .form-name, .form-content {
background: #0e0e0e; color: #ddd; border: 1px solid #333; background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
border-radius: 4px; padding: 6px 8px; font-size: 13px; border-radius: 0; padding: 6px 8px; font-size: 13px; font-family: var(--geneva);
} }
.form-color { width: 40px; height: 32px; padding: 0; border: 1px solid #333; .form-color { width: 40px; height: 32px; padding: 0; border: 1px solid var(--ink);
border-radius: 4px; background: #0e0e0e; cursor: pointer; } border-radius: 0; background: var(--paper); cursor: pointer; }
.form-content { width: 100%; min-height: 70px; resize: vertical; box-sizing: border-box; .form-content { width: 100%; min-height: 70px; resize: vertical; box-sizing: border-box;
font-family: inherit; } font-family: inherit; }
.form-marks-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; .form-marks-label { font-family: var(--chicago); font-size: 11px; letter-spacing: .5px;
color: #7aa6d6; margin-top: 4px; } color: var(--ink); margin-top: 4px; }
/* contenteditable content surface + inline link chips */ /* contenteditable content surface + inline link chips */
/* flex-shrink:0 so the surface grows with its content (and the .form scrolls)
instead of the flex column squashing it down to min-height. */
.content-editor { white-space: pre-wrap; word-break: break-word; outline: none; cursor: text; .content-editor { white-space: pre-wrap; word-break: break-word; outline: none; cursor: text;
flex-shrink: 0; height: auto; } flex-shrink: 0; height: auto; }
.content-editor:empty:before { content: attr(data-placeholder); color: #666; } .content-editor:empty:before { content: attr(data-placeholder); color: var(--mute); }
.link-chip { display: inline-flex; align-items: center; gap: 3px; vertical-align: baseline; .link-chip { display: inline-flex; align-items: center; gap: 3px; vertical-align: baseline;
background: #173049; color: #9fd0ff; border: 1px solid #2f5d86; border-radius: 4px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
padding: 0 5px; margin: 0 1px; font-size: 12px; cursor: pointer; user-select: none; } border-radius: 8px; padding: 0 6px; margin: 0 1px; font-size: 12px;
.link-chip:hover { background: #1d3e60; } font-family: var(--chicago); cursor: pointer; user-select: none; }
.link-chip.broken { background: #3a1d1d; color: #e69; border-color: #a44; } .link-chip:hover { background: var(--ink); color: var(--paper); }
.link-chip .link-f { color: #6f9; opacity: .7; font-size: 11px; } .link-chip.broken { border-style: dashed; text-decoration: line-through; }
.md .link-chip .link-f { color: #6f9; } .link-chip .link-f { font-size: 11px; opacity: .7; }
.link-chip:hover .link-f { opacity: 1; }
.mark-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; } .mark-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
.mark-arrow { color: #666; } .mark-arrow { color: var(--ink); }
.row-x, .add-mark { .row-x, .add-mark { padding: 3px 8px; font-size: 12px; }
background: #1c1c1c; color: #aaa; border: 1px solid #333; border-radius: 4px; .add-mark { align-self: flex-start; }
padding: 3px 8px; cursor: pointer; font-size: 12px;
}
.row-x:hover { color: #e66; border-color: #a44; }
.add-mark { align-self: flex-start; color: #cfe3f5; border-color: #3a6ea5; }
/* the point a clip-click will fill — make it obvious where focus is */ /* the point a clip-click will fill — make it obvious where focus is */
.pt-input.active .pt-text, .pt-chip.active { .pt-input.active .pt-text, .pt-chip.active {
outline: 2px solid #5ab07a; outline-offset: 0; outline: 2px solid var(--ink); outline-offset: 0;
} }
/* point editor + autocomplete */ /* point editor + autocomplete */
@ -181,202 +202,215 @@ body { overflow: hidden; }
.mark-row .pt-input { flex: 0 1 160px; max-width: 180px; } .mark-row .pt-input { flex: 0 1 160px; max-width: 180px; }
.pt-text { .pt-text {
flex: 1; min-width: 0; box-sizing: border-box; flex: 1; min-width: 0; box-sizing: border-box;
background: #0e0e0e; color: #ddd; border: 1px solid #333; background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
border-radius: 4px; padding: 6px 8px; font-size: 13px; border-radius: 0; padding: 6px 8px; font-size: 13px; font-family: var(--geneva);
} }
.pt-frame-row { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; } .pt-frame-row { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.pt-dropdown { .pt-dropdown {
position: absolute; left: 0; right: 0; top: 100%; z-index: 5; position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
margin: 2px 0 0; padding: 4px; list-style: none; margin: 2px 0 0; padding: 4px; list-style: none;
max-height: 124px; overflow-y: auto; max-height: 124px; overflow-y: auto;
background: #1b1b1b; border: 1px solid #3a6ea5; border-radius: 4px; background: var(--paper); border: 1px solid var(--ink);
box-shadow: 0 6px 18px rgba(0,0,0,0.5); box-shadow: 2px 2px 0 var(--ink);
} }
.pt-dropdown li { padding: 4px 6px; border-radius: 3px; font-size: 12px; .pt-dropdown li { padding: 4px 6px; font-size: 12px;
color: #cde; cursor: pointer; white-space: nowrap; color: var(--ink); cursor: pointer; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; } overflow: hidden; text-overflow: ellipsis; }
.pt-dropdown li.hi { background: #2a4a6a; } .pt-dropdown li.hi { background: var(--ink); color: var(--paper); }
.pt-dropdown .cand-group { color: #789; font-size: 11px; } .pt-dropdown li.hi .cand-group, .pt-dropdown li.hi .cand-kind,
.pt-dropdown .cand-kind { color: #7aa6d6; } .pt-dropdown li.hi .link-f { color: var(--paper); }
.pt-dropdown .link-f { color: #6f9; opacity: .7; } .pt-dropdown .cand-group { color: var(--mute); font-size: 11px; }
.pt-dropdown .cand-kind { color: var(--ink); }
.pt-dropdown .link-f { color: var(--mute); }
.link-insert { display: flex; align-items: flex-start; gap: 6px; align-self: stretch; } .link-insert { display: flex; align-items: flex-start; gap: 6px; align-self: stretch; }
.link-insert .pt-input { flex: 1 1 auto; max-width: none; } .link-insert .pt-input { flex: 1 1 auto; max-width: none; }
.hl-ok, .hl-cancel { padding: 2px 9px; font-size: 12px; }
.pt-chip { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; .pt-chip { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px;
background: #233; border: 1px solid #3a6ea5; border-radius: 4px; background: var(--paper); border: 1px solid var(--ink); border-radius: 0;
padding: 2px 4px; } padding: 2px 4px; }
.pt-chip-name { font-size: 12px; color: #cfe3f5; white-space: nowrap; .pt-chip-name { font-size: 12px; color: var(--ink); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; flex: 1; } overflow: hidden; text-overflow: ellipsis; flex: 1; }
.pt-frame { width: 56px; background: #0e0e0e; color: #ddd; border: 1px solid #333; .pt-frame { width: 56px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
border-radius: 3px; padding: 2px 4px; font-size: 12px; } border-radius: 0; padding: 2px 4px; font-size: 12px; font-family: var(--mono); }
.pt-dur { color: #889; font-size: 11px; white-space: nowrap; } .pt-dur { color: var(--mute); font-size: 11px; white-space: nowrap; }
.pt-x { background: none; border: none; color: #a99; cursor: pointer; font-size: 14px; } .pt-x { background: none; border: none; color: var(--ink); cursor: pointer; font-size: 14px; }
.pt-x:hover { color: #e66; } .pt-x:hover { text-decoration: underline; }
.form-hint { font-size: 11px; color: #777; } .form-hint { font-size: 11px; color: var(--mute); }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.save, .cancel { border-radius: 4px; padding: 6px 14px; cursor: pointer; font-size: 13px; } .save, .cancel { padding: 6px 14px; font-size: 13px; }
.save { background: #2a4a6a; color: #fff; border: 1px solid #3a6ea5; } /* default button: the heavy double Mac ring */
.cancel { background: #1c1c1c; color: #aaa; border: 1px solid #333; } .save { box-shadow: 0 0 0 1px var(--paper), 0 0 0 3px var(--ink); margin: 2px; font-weight: bold; }
.save:active { box-shadow: 0 0 0 1px var(--paper), 0 0 0 3px var(--ink); }
/* --- markdown (tl.md output is wrapped in .md) -------------------------- */ /* --- markdown (tl.md output is wrapped in .md) -------------------------- */
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { font-family: var(--chicago); }
.md h1 { font-size: 16px; margin: 0 0 6px; line-height: 1.25; } .md h1 { font-size: 16px; margin: 0 0 6px; line-height: 1.25; }
.md h2 { font-size: 14px; margin: 0 0 6px; line-height: 1.25; } .md h2 { font-size: 14px; margin: 0 0 6px; line-height: 1.25; }
.md h3 { font-size: 13px; margin: 0 0 6px; line-height: 1.25; } .md h3 { font-size: 13px; margin: 0 0 6px; line-height: 1.25; }
.md h4, .md h5, .md h6 { font-size: 12px; margin: 0 0 6px; } .md h4, .md h5, .md h6 { font-size: 12px; margin: 0 0 6px; }
.md p { margin: 0 0 8px; } .md p { margin: 0 0 8px; }
.md ul { margin: 0 0 8px 18px; padding: 0; } .md ul { margin: 0 0 8px 18px; padding: 0; }
.md code { background: #222; padding: 0 3px; border-radius: 3px; font-size: 12px; } .md code { font-family: var(--mono); background: var(--shade); padding: 0 3px;
border: 1px solid var(--ink); font-size: 12px; }
/* --- timeline region ---------------------------------------------------- */ /* --- timeline region ---------------------------------------------------- */
.timeline-pane { flex: 1; display: flex; flex-direction: column; min-height: 150px; } .timeline-pane { flex: 1; display: flex; flex-direction: column; min-height: 150px;
border-top: 1px solid var(--ink); }
/* --- breadcrumb bar (only present when expanded into a nested timeline) -- */ /* --- breadcrumb bar ----------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 5px 8px; background: #0c0c0c; border-bottom: 1px solid #222; padding: 5px 8px; background: var(--paper); border-bottom: 1px solid var(--ink);
flex-shrink: 0; font-size: 12px; } flex-shrink: 0; font-size: 12px; }
.back-btn { background: #1c2a38; color: #cfe3f5; border: 1px solid #3a6ea5; .back-btn { padding: 2px 10px; font-size: 12px; margin-right: 4px; }
border-radius: 4px; padding: 2px 10px; cursor: pointer; font-size: 12px;
margin-right: 4px; }
.back-btn:hover { background: #24384e; }
.crumb-item { display: inline-flex; align-items: center; gap: 6px; } .crumb-item { display: inline-flex; align-items: center; gap: 6px; }
.crumb-sep { color: #555; } .crumb-sep { color: var(--ink); }
.crumb { background: none; border: none; color: #7aa6d6; cursor: pointer; .crumb { padding: 2px 8px; font-size: 12px; }
font-size: 12px; padding: 2px 2px; } .crumb.current { background: var(--ink); color: var(--paper); cursor: default; }
.crumb:hover { color: #cfe3f5; text-decoration: underline; }
.crumb.current { color: #cfe3f5; cursor: default; text-decoration: none; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; .toolbar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
padding: 6px 8px; background: #0c0c0c; border-bottom: 1px solid #222; padding: 6px 8px; background: var(--paper); border-bottom: 1px solid var(--ink);
flex-shrink: 0; } flex-shrink: 0; }
.slider { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9ab; } .slider { display: flex; align-items: center; gap: 6px; font-family: var(--chicago);
.slider input { width: 150px; touch-action: none; } font-size: 11px; color: var(--ink); }
.slider input { width: 150px; touch-action: none; accent-color: var(--ink); }
.transport { display: flex; align-items: center; gap: 4px; } .transport { display: flex; align-items: center; gap: 4px; }
.play-btn, .step-btn {
background: #1c2a38; color: #cfe3f5; border: 1px solid #3a6ea5;
border-radius: 4px; cursor: pointer; line-height: 1.4;
}
.play-btn { padding: 2px 12px; font-size: 14px; } .play-btn { padding: 2px 12px; font-size: 14px; }
.step-btn { padding: 2px 7px; font-size: 11px; letter-spacing: -1px; } .step-btn { padding: 2px 7px; font-size: 11px; letter-spacing: -1px; }
.play-btn:hover, .step-btn:hover { background: #24384e; }
.timeline-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; } .timeline-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.timeline { display: flex; align-items: flex-start; background: #111; } .timeline { display: flex; align-items: flex-start; background: var(--paper); }
.gutter { flex-shrink: 0; width: 150px; user-select: none; } .gutter { flex-shrink: 0; width: 150px; user-select: none; }
.gutter-label { .gutter-label {
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #2a2a2a; border-right: 1px solid #2a2a2a; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink);
padding: 0 6px; font-size: 10px; color: #9ab; background: #141414; padding: 0 6px; font-family: var(--chicago); font-size: 10px; color: var(--ink);
background: var(--paper);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
.hscroll { overflow-x: auto; flex: 1; } .hscroll { overflow-x: auto; flex: 1; }
/* overflow:hidden crops clips that fall outside the (possibly windowed) view */
.content { position: relative; cursor: ew-resize; overflow: hidden; } .content { position: relative; cursor: ew-resize; overflow: hidden; }
/* height transitions so cropped-out tracks animate away and the survivors .track-row { position: relative; background: var(--paper); border-bottom: 1px solid var(--ink);
slide up to fill the gap ("tracks leave / get rearranged") */
.track-row { position: relative; background: #1c1c1c; border-bottom: 1px solid #2a2a2a;
overflow: hidden; transition: height .3s ease, opacity .3s ease; } overflow: hidden; transition: height .3s ease, opacity .3s ease; }
.track-row.collapsed { opacity: 0; border-bottom: none; } .track-row.collapsed { opacity: 0; border-bottom: none; }
.gutter-label { transition: height .3s ease, opacity .3s ease; } .gutter-label { transition: height .3s ease, opacity .3s ease; }
.gutter-label.collapsed { opacity: 0; border-bottom: none; padding: 0; } .gutter-label.collapsed { opacity: 0; border-bottom: none; padding: 0; }
.clip { .clip {
position: absolute; top: 1px; box-sizing: border-box; overflow: hidden; position: absolute; top: 1px; box-sizing: border-box; overflow: hidden;
background: #244966; border: 1px solid #16324f; border-radius: 2px; background: var(--paper); border: 1px solid var(--ink); border-radius: 0;
font-size: 10px; color: #cfe3f5; white-space: nowrap; font-size: 10px; color: var(--ink);
font-family: var(--chicago); white-space: nowrap;
} }
.clip-thumb { .clip-thumb {
position: absolute; top: 0; bottom: 0; position: absolute; top: 0; bottom: 0;
background-size: cover; background-position: center; background-size: cover; background-position: center;
opacity: .82; opacity: 1;
} }
.clip-name { .clip-name {
position: relative; z-index: 1; height: 100%; box-sizing: border-box; position: relative; z-index: 1; height: 100%; box-sizing: border-box;
padding: 0 4px; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; line-height: 1.8;
text-shadow: 0 1px 2px #000, 0 0 4px #000; color: var(--ink); /* white halo keeps black text
background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.12)); legible without veiling the
full-color thumbnail */
text-shadow: 0 0 2px var(--paper), 0 0 2px var(--paper),
1px 1px 0 var(--paper), -1px -1px 0 var(--paper);
} }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #e33; .playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink);
z-index: 10; pointer-events: none; } z-index: 10; pointer-events: none; }
.playhead-handle { position: absolute; top: 0; left: -5px; width: 12px; height: 10px; .playhead-handle { position: absolute; top: 0; left: -5px; width: 12px; height: 10px;
background: #e33; border-radius: 2px; } background: var(--ink); border-radius: 0; }
/* --- annotation lane ---------------------------------------------------- */ /* --- annotation lane ---------------------------------------------------- */
.ann-lane-row { position: relative; height: 18px; } .ann-lane-row { position: relative; height: 18px; }
.ann-bar { position: absolute; top: 2px; height: 14px; border-radius: 2px; } .ann-bar { position: absolute; top: 2px; height: 14px; border-radius: 0; }
.ann-bar-label { position: absolute; top: 1px; font-size: 9px; line-height: 16px; .ann-bar-label { position: absolute; top: 1px; font-family: var(--chicago); font-size: 9px;
color: #eee; white-space: nowrap; pointer-events: none; line-height: 16px; color: var(--ink); white-space: nowrap;
text-shadow: 0 1px 2px #000; } pointer-events: none; }
/* --- mobile: stack the top region vertically (video over annotation) ---- */ /* --- mobile: stack the top region vertically (video over annotation) ---- */
@media (max-width: 720px) { @media (max-width: 720px) {
.top { flex-direction: column; } .top { flex-direction: column; }
.divider-v { display: none; } /* width-split is meaningless when stacked */ .divider-v { display: none; }
.video-pane { width: 100%; min-width: 0; flex: 1 1 0; min-height: 110px; } .video-pane { width: 100%; min-width: 0; flex: 1 1 0; min-height: 110px; border-right: none; }
.annot-pane { width: 100%; min-width: 0; flex: 1 1 0; min-height: 110px; } .annot-pane { width: 100%; min-width: 0; flex: 1 1 0; min-height: 110px; }
.divider-h { height: 14px; } /* bigger touch target (top vs timeline) */ .divider-h { height: 14px; }
.slider input { width: 120px; } .slider input { width: 120px; }
} }
/* --- landing pages (project list / create) ----------------------------- */ /* --- landing pages (project list / create) ----------------------------- */
.home { min-height: 100vh; box-sizing: border-box; max-width: 680px; margin: 0 auto; .home { min-height: 100vh; box-sizing: border-box; max-width: 680px; margin: 0 auto;
padding: 32px 20px; color: #ddd; font-family: sans-serif; background: #0c0c0c; padding: 32px 20px; color: var(--ink); font-family: var(--geneva);
/* keep clear of the notch / rounded corners / home indicator */ background: var(--paper); border-left: 1px solid var(--ink); border-right: 1px solid var(--ink);
padding-top: calc(32px + env(safe-area-inset-top)); padding-top: calc(32px + env(safe-area-inset-top));
padding-right: calc(20px + env(safe-area-inset-right)); padding-right: calc(20px + env(safe-area-inset-right));
padding-bottom: calc(32px + env(safe-area-inset-bottom)); padding-bottom: calc(32px + env(safe-area-inset-bottom));
padding-left: calc(20px + env(safe-area-inset-left)); } padding-left: calc(20px + env(safe-area-inset-left)); }
.home-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .home-head { display: flex; align-items: baseline; justify-content: space-between;
.home-head h1 { font-size: 22px; margin: 0; color: #cfe3f5; letter-spacing: 1px; } margin-bottom: 20px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.home a { color: #7aa6d6; text-decoration: none; } .home-head h1 { font-family: var(--chicago); font-size: 26px; margin: 0; color: var(--ink);
.home a:hover { text-decoration: underline; } letter-spacing: 0; }
.muted { color: #888; font-size: 12px; } .home a { color: var(--ink); text-decoration: underline; }
.home a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.muted { color: var(--mute); font-size: 12px; }
.home .add-btn { display: inline-block; width: auto; margin-bottom: 12px; } .home .add-btn { display: inline-block; width: auto; margin-bottom: 12px; }
.project-list { list-style: none; padding: 0; margin: 12px 0; } .project-list { list-style: none; padding: 0; margin: 12px 0; }
.project-list li { padding: 10px 12px; border: 1px solid #2a2a2a; border-radius: 6px; .project-list li { padding: 10px 12px; border: 1px solid var(--ink); border-radius: 0;
margin-bottom: 8px; background: #161616; } margin-bottom: 8px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); }
.project-list li a { font-size: 15px; color: #cfe3f5; } .project-list li a { font-family: var(--chicago); font-size: 15px; color: var(--ink); }
.home .form { background: transparent; border: none; padding: 0; } .home .form { background: transparent; border: none; padding: 0; box-shadow: none; }
.file-row { display: block; margin: 12px 0; color: #cfe3f5; font-size: 13px; } .file-row { display: block; margin: 12px 0; color: var(--ink); font-size: 13px; }
.err { color: #e66; font-size: 12px; margin: 8px 0; } .err { color: var(--ink); font-weight: bold; font-size: 12px; margin: 8px 0;
border: 1px solid var(--ink); padding: 4px 8px; background: var(--shade); }
/* editor: project bar above the timeline */ /* editor: project bar above the timeline — a Mac window title bar (selected) */
.project-bar { display: flex; gap: 10px; align-items: center; padding: 4px 8px; .project-bar { display: flex; gap: 10px; align-items: center; padding: 4px 8px;
background: #111; border-bottom: 1px solid #222; font-size: 12px; } background: var(--ink); color: var(--paper); font-family: var(--chicago);
.project-bar .project-name { color: #cfe3f5; font-weight: 600; } font-size: 12px; }
.project-bar .logout-link { margin-left: auto; color: #8aa; text-decoration: none; } .project-bar a { color: var(--paper); text-decoration: underline; }
.project-bar .logout-link:hover { color: #cfe3f5; text-decoration: underline; } .project-bar .project-name { color: var(--paper); }
.project-bar .logout-link { margin-left: auto; color: var(--paper); text-decoration: underline; }
/* --- annotation / script pane tabs ------------------------------------- */ /* --- annotation / script pane tabs ------------------------------------- */
.pane-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pane-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pane-tabs { display: flex; gap: 2px; background: #111; border-bottom: 1px solid #222; } .pane-tabs { display: flex; gap: 0; background: var(--paper); border-bottom: 1px solid var(--ink); }
.pane-tabs button { flex: 1; background: none; color: #889; border: none; padding: 7px 10px; .pane-tabs button { flex: 1; padding: 7px 10px; font-size: 12px; border-radius: 0;
cursor: pointer; font-size: 12px; border-bottom: 2px solid transparent; } border: none; border-right: 1px solid var(--ink); }
.pane-tabs button:hover { color: #cfe3f5; } .pane-tabs button:last-child { border-right: none; }
.pane-tabs button.active { color: #cfe3f5; border-bottom-color: #3a6ea5; background: #152333; } .pane-tabs button.active { background: var(--ink); color: var(--paper); }
.pane-body { flex: 1; min-height: 0; display: flex; } .pane-body { flex: 1; min-height: 0; display: flex; }
/* --- script pane (pdf) ------------------------------------------------- */ /* --- script pane (pdf) ------------------------------------------------- */
.script-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #111; } .script-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--paper); }
.script-hint { padding: 6px 10px; font-size: 11px; color: #8aa; border-bottom: 1px solid #222; } .script-hint { padding: 6px 10px; font-size: 11px; color: var(--ink); border-bottom: 1px solid var(--ink); }
.script-pages { flex: 1; overflow: auto; padding: 12px; background: #1a1a1a; .script-pages { flex: 1; overflow: auto; padding: 12px;
background: var(--desktop); background-size: 2px 2px;
display: flex; flex-direction: column; align-items: center; gap: 12px; } display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pdf-page { position: relative; box-shadow: 0 2px 10px rgba(0,0,0,.5); background: #fff; } .pdf-page { position: relative; box-shadow: 2px 2px 0 var(--ink); background: #fff;
border: 1px solid var(--ink); }
.pdf-page.armed { cursor: crosshair; } .pdf-page.armed { cursor: crosshair; }
.pdf-page canvas { display: block; } .pdf-page canvas { display: block; }
.script-hl { position: absolute; border-radius: 2px; cursor: pointer; } .script-hl { position: absolute; border-radius: 0; cursor: pointer; }
.script-hl.drafting { background: rgba(90,176,122,.25); border: 1.5px dashed #5ab07a; pointer-events: none; } .script-hl.drafting { background: rgba(0,0,0,.12); border: 1.5px dashed var(--ink); pointer-events: none; }
.script-empty { color: #888; font-size: 12px; padding: 20px; } .script-empty { color: var(--mute); font-size: 12px; padding: 20px; }
.script-badge { margin-left: 6px; color: #7aa6d6; font-size: 11px; } .script-badge { margin-left: 6px; color: var(--ink); font-size: 11px; }
.ann.selected { box-shadow: inset 3px 0 0 #5ab07a; } .ann.selected { box-shadow: inset 3px 0 0 var(--ink); }
/* iOS Safari zooms the whole page when you focus a control whose font-size is /* dark-mode toggle button */
< 16px. On touch devices bump every form control to 16px so tapping an input .dark-toggle { font-family: var(--chicago); background: var(--paper); color: var(--ink);
never zooms; desktop keeps its denser sizing. !important to beat the various border: 1px solid var(--ink); border-radius: 8px; padding: 2px 8px;
per-control font-size rules above without re-listing each selector. */ font-size: 11px; cursor: pointer; white-space: nowrap; }
.dark-toggle:hover { background: var(--hover); }
.dark-toggle:active { background: var(--ink); color: var(--paper); }
.toolbar .dark-toggle { margin-left: auto; }
.home-head-right { display: flex; align-items: center; gap: 8px; }
/* iOS Safari zooms the page when focusing a control with font-size < 16px.
On touch devices bump every form control to 16px so tapping never zooms. */
@media (pointer: coarse) { @media (pointer: coarse) {
input, textarea, select, .content-editor { font-size: 16px !important; } input, textarea, select, .content-editor { font-size: 16px !important; }
} }

18
tl/resources/public/fonts/README.md Normal file
View file

@ -0,0 +1,18 @@
# Fonts — classic Macintosh / HyperCard
Drop the font files here (filenames matter — `app.css` `@font-face` rules point at
these exact names). Everything has a CSS fallback, so the app still works without
them; you just won't get the pixel-perfect Chicago look until `Chicago` is present.
| family in CSS | file to put here | what it is | where to get it |
|---|---|---|---|
| `Chicago` | `ChicagoFLF.ttf` | the iconic Mac system/menu/button font (vector recreation) | search "ChicagoFLF" — free TrueType recreation, widely mirrored (e.g. fontsgeek / dafont-style archives) |
| `Geneva` | `Geneva.ttf` | the Mac body sans (optional) | a real Mac (`/System/Library/Fonts/…`) or a free clone; otherwise falls back to Verdana/Tahoma which share its metrics |
| `Monaco` | `Monaco.ttf` | the Mac monospace (optional, used for the frame readout) | a real Mac, or falls back to Courier New / monospace |
Pixel-perfect alternative to ChicagoFLF: **ChiKareGo2.ttf** (a bitmap-accurate
Chicago). If you use it instead, either rename it to `ChicagoFLF.ttf` or change the
`src:` in `app.css`. Pixel fonts look best at multiples of their native size (16px).
Apple's original Chicago/Geneva/Monaco are proprietary and can't be redistributed
here, which is why these aren't checked in — grab them yourself and drop them in.

4
tl/resources/public/index.html
View file

@ -8,10 +8,10 @@
<!-- installable home-screen app (no service worker / HTTPS needed for iOS) --> <!-- installable home-screen app (no service worker / HTTPS needed for iOS) -->
<link rel="manifest" href="/manifest.webmanifest"> <link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0c0c0c"> <meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="tl"> <meta name="apple-mobile-web-app-title" content="tl">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">

43
tl/src/tl/views.cljs
View file

@ -16,6 +16,18 @@
(defonce active-insert! (atom nil)) ; the live content-editor's (insert! link) fn (defonce active-insert! (atom nil)) ; the live content-editor's (insert! link) fn
(declare commit-link!) (declare commit-link!)
;; --- dark mode: purely presentational — toggles a class on <html> that flips
;; the CSS palette vars; the choice persists in localStorage.
(defonce dark? (r/atom (= "1" (.getItem js/localStorage "dark"))))
(defn- apply-dark! [on]
(.toggle (.. js/document -documentElement -classList) "dark" (boolean on))
(.setItem js/localStorage "dark" (if on "1" "0")))
(defonce ^:private _dark-init (apply-dark! @dark?))
(defn- dark-toggle []
[:button.dark-toggle {:title "Toggle dark mode"
:on-click #(apply-dark! (swap! dark? not))}
(if @dark? "☀ Light" "☾ Dark")])
(def ^:private seek-guard-frames 0.75) (def ^:private seek-guard-frames 0.75)
(def ^:private seek-settle-frames 2) (def ^:private seek-settle-frames 2)
@ -177,6 +189,15 @@
(group-by :track segs)) (group-by :track segs))
"clip")) "clip"))
(defn- clip-at
"Describe local frame `lf` the way the annotation editor does: the underlying
clip name plus its crop-adjusted mark-time frame, e.g. \"CU Tashi (1) 45f\"."
[scene segs lf]
(if-let [seg (some (fn [{[c d] :local :as s}] (when (and (<= c lf) (< lf d)) s)) segs)]
(str (clip-label scene segs (:mark seg))
" " (:at (scene/seg-point scene seg (js/Math.round (- lf (first (:local seg)))))) "f")
(str (js/Math.round lf) "f")))
(defn frame-readout (defn frame-readout
"Bottom-right of the video: the timeline (context-absolute) frame, and the "Bottom-right of the video: the timeline (context-absolute) frame, and the
track + clip + mark-time frame under the playhead. While authoring, the clip track + clip + mark-time frame under the playhead. While authoring, the clip
@ -551,8 +572,9 @@
(defn- jump-control (defn- jump-control
"One jump button, or — when the annotation's marks have discontinuities (more "One jump button, or — when the annotation's marks have discontinuities (more
than one bar) — a button that opens a popover of one target per piece." than one bar) — a button that opens a popover of one target per piece, each
[open a] labelled with the clip + frame it lands on (as the annotation editor shows it)."
[open a scene segs]
(let [bars (:bars a)] (let [bars (:bars a)]
(if (< (count bars) 2) (if (< (count bars) 2)
[:button.jump-btn {:on-click #(goto! (:start a))} "↪ jump"] [:button.jump-btn {:on-click #(goto! (:start a))} "↪ jump"]
@ -564,7 +586,7 @@
(for [[i [lo _]] (map-indexed vector bars)] (for [[i [lo _]] (map-indexed vector bars)]
^{:key i} ^{:key i}
[:button {:on-click #(do (goto! lo) (reset! open nil))} [:button {:on-click #(do (goto! lo) (reset! open nil))}
(str "▸ part " (inc i) " · " (js/Math.round lo) "f")])])]))) (str "▸ " (clip-at scene segs lo))])])])))
(defn commentary [] (defn commentary []
(let [el (atom nil) open (r/atom nil)] (let [el (atom nil) open (r/atom nil)]
@ -573,7 +595,8 @@
active @(rf/subscribe [::subs/active-annotation]) active @(rf/subscribe [::subs/active-annotation])
authed? @(rf/subscribe [::subs/authed?]) authed? @(rf/subscribe [::subs/authed?])
scene @(rf/subscribe [::subs/scene]) scene @(rf/subscribe [::subs/scene])
ctx @(rf/subscribe [::subs/context])] ctx @(rf/subscribe [::subs/context])
segs @(rf/subscribe [::subs/segments])]
(r/after-render (r/after-render
(fn [] (when-let [c @el] (fn [] (when-let [c @el]
(when-let [node (and active (.querySelector c (str "#ann-" (name active))))] (when-let [node (and active (.querySelector c (str "#ann-" (name active))))]
@ -597,12 +620,13 @@
(for [a anns] (for [a anns]
^{:key (:id a)} ^{:key (:id a)}
[:div.ann {:id (str "ann-" (name (:id a))) [:div.ann {:id (str "ann-" (name (:id a)))
:class (when (= (:id a) active) "active")} :class (when (= (:id a) active) "active")
:style {:border-left (str "8px solid " (:color a))}}
[:div.ann-head [:div.ann-head
[:div.ann-title (when (:broken a) [:span {:title (:reason a)} "⚠ "]) (:name a) [:div.ann-title (when (:broken a) [:span {:title (:reason a)} "⚠ "]) (:name a)
(when (seq (:script a)) [:span.script-badge {:title "linked to script"} "¶"])] (when (seq (:script a)) [:span.script-badge {:title "linked to script"} "¶"])]
[:div.ann-actions [:div.ann-actions
[jump-control open a] [jump-control open a scene segs]
[:button.expand-btn {:title "Expand" :on-click #(rf/dispatch [::events/expand (:id a)])} [:button.expand-btn {:title "Expand" :on-click #(rf/dispatch [::events/expand (:id a)])}
"⤢" (when (pos? (:nested a)) [:span.nest-badge (:nested a)])] "⤢" (when (pos? (:nested a)) [:span.nest-badge (:nested a)])]
(when authed? (when authed?
@ -737,7 +761,8 @@
:on-change #(rf/dispatch [::events/set-zoom (js/parseFloat (.. % -target -value))])}]] :on-change #(rf/dispatch [::events/set-zoom (js/parseFloat (.. % -target -value))])}]]
[:label.slider "Zoom Y" [:label.slider "Zoom Y"
[:input {:type "range" :min 8 :max 120 :value row-h [:input {:type "range" :min 8 :max 120 :value row-h
:on-change #(rf/dispatch [::events/set-row-h (js/parseFloat (.. % -target -value))])}]]])) :on-change #(rf/dispatch [::events/set-row-h (js/parseFloat (.. % -target -value))])}]]
[dark-toggle]]))
(defn- drag-top! (defn- drag-top!
"Drag the horizontal divider: set --top-h (in vh) from the pointer's Y." "Drag the horizontal divider: set --top-h (in vh) from the pointer's Y."
@ -921,9 +946,11 @@
[:div.home [:div.home
[:div.home-head [:div.home-head
[:h1 "lumet"] [:h1 "lumet"]
[:span.home-head-right
(when authed? (when authed?
[:span.muted "signed in as " user " · " [:span.muted "signed in as " user " · "
[:a {:href "#" :on-click #(do (.preventDefault %) (rf/dispatch [::events/logout]))} "log out"]])] [:a {:href "#" :on-click #(do (.preventDefault %) (rf/dispatch [::events/logout]))} "log out"] " "])
[dark-toggle]]]
(when net-err [:div.err "⚠ " net-err]) (when net-err [:div.err "⚠ " net-err])
(if authed? (if authed?
[:<> [:<>