mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: draw notification flows as graphs in the list and make a new or copied flow a draft until saved

Browse source 
The flows list draws each flow as the editor's graph, read-only and with the
dry run's hit counts in the boxes, in place of the indented tree. A box's line
of text is cut by the browser at the box's edge, so it no longer runs out of it.

create flow (a primary button beside the refresh interval) and duplicate open
the editor on an unsaved draft at /notifications/new, with ?from= naming the
flow to copy; the flow is made by save, under an id taken from its name. Edit
and duplicate are buttons in the flow's header row. The editor's head and
inspector are laid out as sections.
This commit is contained in:
iris 2026-10-25 01:27:50 +02:00 • committed by mara
commit d0a55502a8
1 changed files with 406 additions and 262 deletions
Download patch file Download diff file Expand all files Collapse all files

90
frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css
View file

@ -1,4 +1,4 @@
/* NotificationsPage — the flows drawn as indented trees. */
/* NotificationsPage — the flows, each drawn as its graph. */
.notify-flows {
display: flex;
@ -15,55 +15,49 @@
}
.notify-flow-name {
flex: 1 1 auto;
min-width: 0;
font-weight: 600;
overflow-wrap: anywhere;
}
.notify-flow-tree {
margin: 0.4em 0 0;
padding: 0;
list-style: none;
font-size: 0.9em;
}
.notify-node {
display: flex;
gap: 0.5em;
padding: 0.1em 0;
}
.notify-node-kind {
flex: none;
min-width: 3.5em;
.notify-flow-state {
color: var(--muted);
}
.notify-node-text {
overflow-wrap: anywhere;
.notify-flow-actions,
.notify-panel-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
}
.notify-graph {
margin-top: 0.4em;
}
.notify-off {
opacity: 0.6;
}
/* The flow list's new-flow row and each flow's actions. */
.notify-new {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.5em;
}
.notify-flow-head > * + * {
margin-left: 0.5em;
}
/* FlowEditorPage — the head row, the canvas and the inspector beside it. */
.notify-editor-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75em;
margin-bottom: 0.5em;
gap: 0.75em 1em;
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid var(--border);
}
.notify-editor-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
margin-left: auto;
}
.notify-editor-body {
@ -208,13 +202,41 @@
font-size: 10px;
}
/* The box's line of text is cut by the browser at the box's own edge. */
.notify-box-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--fg);
font-size: 12px;
line-height: 16px;
pointer-events: none;
}
.notify-inspector {
flex: 0 1 22em;
min-width: 16em;
gap: 0.75em;
}
.notify-inspector h4 {
margin: 0;
}
.notify-inspector fieldset {
margin: 0 0 0.75em;
display: flex;
flex-direction: column;
gap: 0.6em;
margin: 0;
padding: 0.6em 0.8em 0.8em;
border: 1px solid var(--border);
border-radius: 6px;
}
.notify-inspector legend {
padding: 0 0.4em;
color: var(--muted);
font-size: 0.9em;
}
.notify-condition {