mariano/soleprint
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui refactor phase 2

Browse Source
This commit is contained in:
buenosairesam
2026-09-22 05:01:51 -03:00
parent 0ce36b98e4
commit 54c577a700
8 changed files with 265 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
soleprint/artery/shunts/mercadopago/templates/index.html
View File

@@ -159,6 +159,19 @@
display: flex;
align-items: center;
gap: var(--space-2);
/* The header is a fixed height and the panel clips, so a crowded actions strip
silently loses whatever sits at its end. Labels give way instead: they
truncate, the controls never shrink. (As Panel.vue does.) */
min-width: 0;
}
.panel-actions > :is(button, input, select, label) {
flex-shrink: 0;
}
.panel-actions > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.panel-status {

13
soleprint/artery/veins/jira/ui/index.html
View File

@@ -165,6 +165,19 @@ textarea {
display: flex;
align-items: center;
gap: var(--space-2);
/* The header is a fixed height and the panel clips, so a crowded actions strip
silently loses whatever sits at its end. Labels give way instead: they
truncate, the controls never shrink. (As Panel.vue does.) */
min-width: 0;
}
.panel-actions > :is(button, input, select, label) {
flex-shrink: 0;
}
.panel-actions > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.panel-status {

97
soleprint/common/theme/parts/example.html
View File

@@ -14,7 +14,7 @@
WHAT TO LOOK AT
· vertical and horizontal splits, nested, all draggable
· ⤢ on any panel header — maximize, Escape or the backdrop to come back
· ⤢ on any panel header — maximize; ⤡ or Escape to come back
· sliders that are schema-driven, not hand-written markup
· a live feed at a few hundred events a second, with the coalesced and
uncoalesced counters side by side. That gap IS the point of onFrame().
@@ -44,7 +44,6 @@
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--status-error: #f06565;
--status-escalating: #f5a623;
--status-idle: #555568;
@@ -131,27 +130,31 @@ textarea {
background: transparent;
}
/* part: maximize — common/theme/parts/maximize.css */
.panel-maximized {
position: fixed;
inset: var(--space-4);
z-index: 1000;
}
/* The page behind it keeps its layout — only this panel moves — so a backdrop
* is what stops the rest showing through around the inset. */
.panel-maximize-backdrop {
/* Covers the window. `fixed` so it escapes the split panes without disturbing
their sizing — restoring puts everything back untouched. */
[data-maximize].maximized {
position: fixed;
inset: 0;
z-index: 999;
background: var(--surface-0);
opacity: 0.85;
z-index: 400;
border-radius: 0;
border: none;
}
.panel-maximize-btn {
padding: 0 6px;
line-height: 1;
.panel-max {
flex-shrink: 0;
padding: 0 var(--space-1);
font-size: 13px;
line-height: 1.4;
color: var(--text-secondary);
background: none;
border: none;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.12s;
}
.panel-max:hover,
[data-maximize]:hover .panel-max { opacity: 1; }
.panel-max:hover { color: var(--text-primary); }
/* part: panel — common/theme/parts/panel.css */
.panel {
position: relative;
@@ -188,6 +191,19 @@ textarea {
display: flex;
align-items: center;
gap: var(--space-2);
/* The header is a fixed height and the panel clips, so a crowded actions strip
silently loses whatever sits at its end. Labels give way instead: they
truncate, the controls never shrink. (As Panel.vue does.) */
min-width: 0;
}
.panel-actions > :is(button, input, select, label) {
flex-shrink: 0;
}
.panel-actions > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.panel-status {
@@ -467,52 +483,43 @@ input[type="range"]::-moz-range-thumb {
'use strict'
var open = null
var backdrop = null
function label(button, on) {
button.textContent = on ? '⤡' : '⤢'
button.title = on ? 'Restore (Esc)' : 'Maximize'
}
function restore() {
if (!open) return
open.panel.classList.remove('panel-maximized')
open.button.textContent = '⤢'
open.button.title = 'Maximize'
if (backdrop && backdrop.parentNode) backdrop.parentNode.removeChild(backdrop)
open.panel.classList.remove('maximized')
label(open.button, false)
open = null
}
function maximize(panel, button) {
restore()
if (!backdrop) {
backdrop = document.createElement('div')
backdrop.className = 'panel-maximize-backdrop'
backdrop.addEventListener('click', restore)
}
document.body.appendChild(backdrop)
panel.classList.add('panel-maximized')
button.textContent = '⤡'
button.title = 'Restore'
panel.classList.add('maximized')
label(button, true)
open = { panel: panel, button: button }
}
function setup(panel) {
var actions = panel.querySelector(':scope > .panel-header > .panel-actions')
if (!actions) {
// The header has no actions strip, so there is nowhere to put the button.
// Say so rather than failing silently: the fix is one empty <span>.
var header = panel.querySelector(':scope > .panel-header')
if (!header) return
actions = document.createElement('span')
actions.className = 'panel-actions'
header.appendChild(actions)
}
var header = panel.querySelector(':scope > .panel-header')
if (!header) return
var button = document.createElement('button')
button.className = 'panel-maximize-btn'
button.className = 'panel-max'
button.type = 'button'
button.textContent = '⤢'
button.title = 'Maximize'
label(button, false)
button.addEventListener('click', function () {
if (open && open.panel === panel) restore()
else maximize(panel, button)
})
actions.appendChild(button)
// After the actions strip and before the status dot: the SFC's order.
var actions = header.querySelector(':scope > .panel-actions')
var status = header.querySelector(':scope > .panel-status')
if (actions && actions.nextSibling) header.insertBefore(button, actions.nextSibling)
else if (status) header.insertBefore(button, status)
else header.appendChild(button)
}
function start() {

91
soleprint/common/theme/parts/maximize.css
View File

@@ -1,4 +1,4 @@
/* part: maximize — one panel fills the viewport, and comes back.
/* part: maximize — one panel fills the window, and comes back.
*
* USE WHEN: one panel is the main event and should be able to fill the screen.
* NEEDS: panel (it maximizes .panel; there is no other box)
@@ -6,55 +6,56 @@
* ADD: paste this into the page, then run `make theme bake`.
* <div class="panel" data-maximize> <!-- the attribute is the whole change -->
*
* NOT derived from anything. It is the one thing on the "components that work"
* list that the framework does not have: `maximize`, `fullscreen` and `expand`
* appear nowhere in common/ui. mts built a Teleport lightbox for frames and
* doocus built a collapse-to-bar; neither is this, and neither is reusable.
*
* So there is no `Derived from` line and the audit will say so. That is
* correct — this part has no upstream to drift from, and inventing a
* correspondence to make a check pass would be worse than the check printing
* "cannot audit".
*
* TOKENS: --surface-0 --space-4
*
* Needs maximize.js. Pairs with panel.css — it maximizes `.panel`, and there is
* no second box in this system to maximize.
*
* MARKUP add the attribute; the button is injected into .panel-actions.
* <div class="panel" data-maximize>
* <div class="panel-header">
* <span class="panel-title">Stream</span>
* <span class="panel-actions"></span>
* </div>
* <div class="panel-body">…</div>
* </div>
*
* `position: fixed` rather than the Fullscreen API on purpose: a fixed element
* still lives in the page, so a feed writing into it keeps working and Escape
* is ours to handle. The Fullscreen API also needs a user gesture and is
* refused outright in some embedded webviews — which is exactly where these
* pages get opened.
* Derived from common/ui/src/components/Panel.vue. The Vue panel learned to
* maximize in mts, the last application that added to the framework, and came
* upstream from there; this part now spells it the same way, so a page and an
* app show the same DOM — `.panel.maximized`, a `.panel-max` button, Escape to
* restore. It had no upstream before, and the audit said "cannot audit"; now it
* has one, and the audit checks it.
*
* One deliberate difference, and it is about the binding, not the look: the Vue
* panel is maximizable unless told otherwise (`maximizable` defaults to true),
* while a plain panel opts in with `data-maximize`. A plain page has no props,
* and a button nobody asked for on every box is noise the markup never chose.
*
* The selector is `[data-maximize].maximized` rather than the SFC's
* `.panel.maximized` for a mechanical reason: bake finds parts by the classes in
* their CSS, and a `.panel` here would summon this part into every page that has
* a panel. The element carries the same classes either way.
*
* TOKENS: --space-1 --text-secondary --text-primary
*
* Needs maximize.js, which injects the button after `.panel-actions` — where
* the Vue panel renders it — so the markup stays a plain panel.
*
* `position: fixed` rather than the Fullscreen API, for the reason the SFC gives:
* a fullscreen element paints over every sibling and needs a user gesture; a
* fixed panel stays in the page, keeps its controls on screen, and a feed
* writing into it keeps working.
*/
.panel-maximized {
position: fixed;
inset: var(--space-4);
z-index: 1000;
}
/* The page behind it keeps its layout — only this panel moves — so a backdrop
* is what stops the rest showing through around the inset. */
.panel-maximize-backdrop {
/* Covers the window. `fixed` so it escapes the split panes without disturbing
their sizing — restoring puts everything back untouched. */
[data-maximize].maximized {
position: fixed;
inset: 0;
z-index: 999;
background: var(--surface-0);
opacity: 0.85;
z-index: 400;
border-radius: 0;
border: none;
}
.panel-maximize-btn {
padding: 0 6px;
line-height: 1;
.panel-max {
flex-shrink: 0;
padding: 0 var(--space-1);
font-size: 13px;
line-height: 1.4;
color: var(--text-secondary);
background: none;
border: none;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.12s;
}
.panel-max:hover,
[data-maximize]:hover .panel-max { opacity: 1; }
.panel-max:hover { color: var(--text-primary); }

54
soleprint/common/theme/parts/maximize.js
View File

@@ -2,11 +2,12 @@
*
* DETECT: data-maximize
*
* Injects a button into each `[data-maximize] .panel-actions`, so the markup
* stays a plain panel and nothing has to be wired by hand. Escape closes.
* Injects a `.panel-max` button after each `[data-maximize]` panel's
* `.panel-actions` — where Panel.vue renders it — so the markup stays a plain
* panel and nothing has to be wired by hand. Escape restores, as in the SFC.
*
* Only one panel is maximized at a time: maximizing a second restores the
* first. Two fixed panels at the same inset would sit exactly on top of each
* first. Two panels covering the window at once would sit exactly on top of each
* other, which looks like a rendering bug rather than a state.
*/
@@ -14,52 +15,43 @@
'use strict'
var open = null
var backdrop = null
function label(button, on) {
button.textContent = on ? '⤡' : '⤢'
button.title = on ? 'Restore (Esc)' : 'Maximize'
}
function restore() {
if (!open) return
open.panel.classList.remove('panel-maximized')
open.button.textContent = '⤢'
open.button.title = 'Maximize'
if (backdrop && backdrop.parentNode) backdrop.parentNode.removeChild(backdrop)
open.panel.classList.remove('maximized')
label(open.button, false)
open = null
}
function maximize(panel, button) {
restore()
if (!backdrop) {
backdrop = document.createElement('div')
backdrop.className = 'panel-maximize-backdrop'
backdrop.addEventListener('click', restore)
}
document.body.appendChild(backdrop)
panel.classList.add('panel-maximized')
button.textContent = '⤡'
button.title = 'Restore'
panel.classList.add('maximized')
label(button, true)
open = { panel: panel, button: button }
}
function setup(panel) {
var actions = panel.querySelector(':scope > .panel-header > .panel-actions')
if (!actions) {
// The header has no actions strip, so there is nowhere to put the button.
// Say so rather than failing silently: the fix is one empty <span>.
var header = panel.querySelector(':scope > .panel-header')
if (!header) return
actions = document.createElement('span')
actions.className = 'panel-actions'
header.appendChild(actions)
}
var header = panel.querySelector(':scope > .panel-header')
if (!header) return
var button = document.createElement('button')
button.className = 'panel-maximize-btn'
button.className = 'panel-max'
button.type = 'button'
button.textContent = '⤢'
button.title = 'Maximize'
label(button, false)
button.addEventListener('click', function () {
if (open && open.panel === panel) restore()
else maximize(panel, button)
})
actions.appendChild(button)
// After the actions strip and before the status dot: the SFC's order.
var actions = header.querySelector(':scope > .panel-actions')
var status = header.querySelector(':scope > .panel-status')
if (actions && actions.nextSibling) header.insertBefore(button, actions.nextSibling)
else if (status) header.insertBefore(button, status)
else header.appendChild(button)
}
function start() {

13
soleprint/common/theme/parts/panel.css
View File

@@ -90,6 +90,19 @@
display: flex;
align-items: center;
gap: var(--space-2);
/* The header is a fixed height and the panel clips, so a crowded actions strip
silently loses whatever sits at its end. Labels give way instead: they
truncate, the controls never shrink. (As Panel.vue does.) */
min-width: 0;
}
.panel-actions > :is(button, input, select, label) {
flex-shrink: 0;
}
.panel-actions > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.panel-status {

84
soleprint/common/ui/src/components/Panel.vue
View File

@@ -1,16 +1,49 @@
<script setup lang="ts">
defineProps<{
import { watch, onBeforeUnmount } from 'vue'
withDefaults(defineProps<{
title: string
/** Omit to show no indicator at all — see the note on `.panel-status`. */
status?: 'idle' | 'live' | 'processing' | 'error'
}>()
/** Set false for panels that make no sense filling the window. */
maximizable?: boolean
}>(), { maximizable: true })
/**
* Fill the window with this panel.
*
* Ours rather than the Fullscreen API: that API can only be given the <video>
* element by the native player control, and a fullscreen <video> paints over
* every sibling, so overlays and panel actions vanish. Maximizing the panel
* ourselves keeps the whole subtree — controls included — on screen.
*
* Bindable (`v-model:maximized`) so a host can react; unbound it still works on
* its own.
*/
const maximized = defineModel<boolean>('maximized', { default: false })
function onKey(e: KeyboardEvent): void {
if (e.key === 'Escape') maximized.value = false
}
watch(maximized, (on) => {
if (on) window.addEventListener('keydown', onKey)
else window.removeEventListener('keydown', onKey)
})
onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
</script>
<template>
<div class="panel">
<div class="panel" :class="{ maximized }">
<div class="panel-header">
<span class="panel-title">{{ title }}</span>
<span class="panel-actions"><slot name="actions" /></span>
<span class="panel-status" :class="status ?? 'idle'" />
<button
v-if="maximizable"
class="panel-max"
:title="maximized ? 'Restore (Esc)' : 'Maximize'"
@click="maximized = !maximized"
>{{ maximized ? '⤡' : '⤢' }}</button>
<span v-if="status" class="panel-status" :class="status" />
</div>
<div class="panel-body">
<slot />
@@ -32,6 +65,16 @@ defineProps<{
flex-direction: column;
}
/* Covers the window. `fixed` so it escapes the split panes without disturbing
their sizing — restoring puts everything back untouched. */
.panel.maximized {
position: fixed;
inset: 0;
z-index: 400;
border-radius: 0;
border: none;
}
.panel-header {
display: flex;
align-items: center;
@@ -57,12 +100,45 @@ defineProps<{
display: flex;
align-items: center;
gap: var(--space-2);
/* The header is a fixed height and the panel clips, so a crowded actions strip
silently loses whatever sits at its end — a control you added but can't see.
Let the labels give way instead: they truncate, the controls never shrink. */
min-width: 0;
}
.panel-actions > :is(button, input, select, label) {
flex-shrink: 0;
}
.panel-actions > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.panel-max {
flex-shrink: 0;
padding: 0 var(--space-1);
font-size: 13px;
line-height: 1.4;
color: var(--text-secondary);
background: none;
border: none;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.12s;
}
.panel-max:hover,
.panel:hover .panel-max { opacity: 1; }
.panel-max:hover { color: var(--text-primary); }
/* Rendered only when the host actually passes a `status`. A dot in the corner of
a titlebar reads as a control — it invites a click and does nothing — so
panels with no state to report show nothing there. */
.panel-status {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.panel-status.idle { background: var(--status-idle); }
.panel-status.live { background: var(--status-live); }

26
soleprint/common/ui/src/components/VideoPlayer.vue
View File

@@ -9,6 +9,12 @@ import { ref, watch, onBeforeUnmount } from 'vue'
*
* External `currentTime` changes seek the element (guarded against the
* feedback loop with the element's own `timeupdate` events).
*
* The `overlay` slot renders on top of the picture, for controls the host wants
* over the video. Deliberately no fullscreen handling here: the browser's own
* control fullscreens the <video> element, which then paints over every sibling
* and hides any overlay — so making the picture big is the Panel's job
* (`v-model:maximized`), where the whole subtree stays on screen.
*/
const props = withDefaults(defineProps<{
/** Media source URL */
@@ -32,7 +38,6 @@ const emit = defineEmits<{
}>()
const video = ref<HTMLVideoElement | null>(null)
/** True while we are applying an external seek, so the resulting
* `timeupdate` does not echo back out as an update. */
let seekingFromProp = false
@@ -118,11 +123,15 @@ onBeforeUnmount(() => {
@pause="onPause"
@ended="onEnded"
/>
<div class="vp-overlay">
<slot name="overlay" />
</div>
</div>
</template>
<style scoped>
.video-player {
position: relative;
display: flex;
width: 100%;
height: 100%;
@@ -132,6 +141,21 @@ onBeforeUnmount(() => {
overflow: hidden;
}
/* Above the picture, clear of the native controls at the bottom. Transparent to
the pointer so it never steals a click meant for the video; slot content opts
back in. */
.vp-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
pointer-events: none;
}
.vp-overlay :deep(*) {
pointer-events: auto;
}
.video-el {
max-width: 100%;
max-height: 100%;