Feat v0.6.12 css isolation (#47)
All checks were successful
All checks were successful
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #47.
This commit is contained in:
@@ -4,14 +4,14 @@
|
||||
defined in variables.css for automatic dark/light support.
|
||||
========================================== */
|
||||
|
||||
.surface-workflow-demo {
|
||||
.ext-workflow-demo {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem 2rem;
|
||||
}
|
||||
|
||||
/* Topbar */
|
||||
.demo-topbar {
|
||||
.ext-workflow-demo-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -19,7 +19,7 @@
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.demo-topbar h1 {
|
||||
.ext-workflow-demo-topbar h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
@@ -27,26 +27,26 @@
|
||||
}
|
||||
|
||||
/* Subtitle */
|
||||
.demo-subtitle {
|
||||
.ext-workflow-demo-subtitle {
|
||||
color: var(--text-2);
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
.demo-grid {
|
||||
.ext-workflow-demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.demo-grid {
|
||||
.ext-workflow-demo-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.demo-card {
|
||||
.ext-workflow-demo-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
@@ -58,22 +58,22 @@
|
||||
}
|
||||
|
||||
/* Title row */
|
||||
.card-title-row {
|
||||
.ext-workflow-demo-card-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.card-title-row h2 {
|
||||
.ext-workflow-demo-card-title-row h2 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
color: var(--text);
|
||||
}
|
||||
.card-icon {
|
||||
.ext-workflow-demo-card-icon {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.card-tier {
|
||||
.ext-workflow-demo-card-tier {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
@@ -81,11 +81,11 @@
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.badge-browser { background: var(--success-dim); color: var(--success-light); }
|
||||
.badge-starlark { background: var(--accent-dim); color: var(--accent-light); }
|
||||
.ext-workflow-demo-badge-browser { background: var(--success-dim); color: var(--success-light); }
|
||||
.ext-workflow-demo-badge-starlark { background: var(--accent-dim); color: var(--accent-light); }
|
||||
|
||||
/* Description */
|
||||
.card-desc {
|
||||
.ext-workflow-demo-card-desc {
|
||||
color: var(--text-2);
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
@@ -93,12 +93,12 @@
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.card-badges {
|
||||
.ext-workflow-demo-card-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.demo-card .badge {
|
||||
.ext-workflow-demo-card .ext-workflow-demo-badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
@@ -106,12 +106,12 @@
|
||||
color: var(--text-2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.demo-card .badge-installed { background: var(--success-dim); color: var(--success-light); }
|
||||
.demo-card .badge-not-installed { background: var(--warning-dim); color: var(--warning-light); }
|
||||
.demo-card .badge-needs-publish { background: var(--danger-dim); color: var(--danger-light); }
|
||||
.ext-workflow-demo-card .ext-workflow-demo-badge-installed { background: var(--success-dim); color: var(--success-light); }
|
||||
.ext-workflow-demo-card .ext-workflow-demo-badge-not-installed { background: var(--warning-dim); color: var(--warning-light); }
|
||||
.ext-workflow-demo-card .ext-workflow-demo-badge-needs-publish { background: var(--danger-dim); color: var(--danger-light); }
|
||||
|
||||
/* Stage flow diagram */
|
||||
.stage-flow {
|
||||
.ext-workflow-demo-stage-flow {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
@@ -122,7 +122,7 @@
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.stage-node {
|
||||
.ext-workflow-demo-stage-node {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
@@ -132,31 +132,31 @@
|
||||
font-size: 0.75rem;
|
||||
color: var(--text);
|
||||
}
|
||||
.stage-node.stage-public {
|
||||
.ext-workflow-demo-stage-node.ext-workflow-demo-stage-public {
|
||||
border-color: var(--success);
|
||||
background: var(--success-dim);
|
||||
}
|
||||
.stage-node.stage-system {
|
||||
.ext-workflow-demo-stage-node.ext-workflow-demo-stage-system {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
|
||||
.stage-label {
|
||||
.ext-workflow-demo-stage-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.stage-meta {
|
||||
.ext-workflow-demo-stage-meta {
|
||||
color: var(--text-3);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.stage-note {
|
||||
.ext-workflow-demo-stage-note {
|
||||
color: var(--warning-light);
|
||||
font-size: 0.6rem;
|
||||
font-style: italic;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.stage-arrow {
|
||||
.ext-workflow-demo-stage-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.1rem;
|
||||
@@ -166,25 +166,25 @@
|
||||
}
|
||||
|
||||
/* Collapsible sections */
|
||||
.card-collapsible {
|
||||
.ext-workflow-demo-card-collapsible {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.card-collapsible summary {
|
||||
.ext-workflow-demo-card-collapsible summary {
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
color: var(--text);
|
||||
}
|
||||
.card-collapsible summary:hover {
|
||||
.ext-workflow-demo-card-collapsible summary:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
.collapsible-content {
|
||||
.ext-workflow-demo-collapsible-content {
|
||||
padding: 0 0.75rem 0.75rem;
|
||||
}
|
||||
.collapsible-content pre {
|
||||
.ext-workflow-demo-collapsible-content pre {
|
||||
background: var(--bg-raised);
|
||||
color: var(--text);
|
||||
padding: 0.5rem;
|
||||
@@ -197,7 +197,7 @@
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.card-actions {
|
||||
.ext-workflow-demo-card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
@@ -205,7 +205,7 @@
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.demo-card .btn {
|
||||
.ext-workflow-demo-card .ext-workflow-demo-btn {
|
||||
padding: 0.4rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
@@ -216,13 +216,13 @@
|
||||
/* demo-card buttons — uses kernel .sw-btn--primary */
|
||||
|
||||
/* Public link row */
|
||||
.public-link-row {
|
||||
.ext-workflow-demo-public-link-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.public-link-row input {
|
||||
.ext-workflow-demo-public-link-row input {
|
||||
flex: 1;
|
||||
font-size: 0.7rem;
|
||||
padding: 4px 8px;
|
||||
@@ -232,7 +232,7 @@
|
||||
color: var(--text);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.public-link-row .btn-copy {
|
||||
.ext-workflow-demo-public-link-row .ext-workflow-demo-btn-copy {
|
||||
padding: 4px 10px;
|
||||
font-size: 0.7rem;
|
||||
background: var(--bg-raised);
|
||||
@@ -241,6 +241,6 @@
|
||||
color: var(--text-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
.public-link-row .btn-copy:hover {
|
||||
.ext-workflow-demo-public-link-row .ext-workflow-demo-btn-copy:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
@@ -103,25 +103,25 @@
|
||||
if (!mount) return;
|
||||
|
||||
const surface = document.createElement('div');
|
||||
surface.className = 'surface-workflow-demo';
|
||||
surface.className = 'ext-workflow-demo';
|
||||
mount.appendChild(surface);
|
||||
|
||||
// Topbar with user menu
|
||||
const topbar = document.createElement('div');
|
||||
topbar.className = 'demo-topbar';
|
||||
topbar.className = 'ext-workflow-demo-topbar';
|
||||
topbar.innerHTML = '<h1>Workflow Demo</h1>';
|
||||
surface.appendChild(topbar);
|
||||
sw.userMenu(topbar, { flyout: 'down' });
|
||||
|
||||
// Subtitle
|
||||
const subtitle = document.createElement('p');
|
||||
subtitle.className = 'demo-subtitle';
|
||||
subtitle.className = 'ext-workflow-demo-subtitle';
|
||||
subtitle.textContent = 'Four example workflows that prove the engine works end-to-end. Install any package via Admin > Packages.';
|
||||
surface.appendChild(subtitle);
|
||||
|
||||
// Workflow cards
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'demo-grid';
|
||||
grid.className = 'ext-workflow-demo-grid';
|
||||
surface.appendChild(grid);
|
||||
|
||||
// Fetch installed workflows to check status
|
||||
@@ -145,28 +145,28 @@
|
||||
|
||||
function _buildCard(wf, installedWf) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'demo-card';
|
||||
card.className = 'ext-workflow-demo-card';
|
||||
|
||||
// Title row
|
||||
const titleRow = document.createElement('div');
|
||||
titleRow.className = 'card-title-row';
|
||||
titleRow.innerHTML = '<span class="card-icon">' + wf.icon + '</span>'
|
||||
titleRow.className = 'ext-workflow-demo-card-title-row';
|
||||
titleRow.innerHTML = '<span class="ext-workflow-demo-card-icon">' + wf.icon + '</span>'
|
||||
+ '<h2>' + _esc(wf.title) + '</h2>'
|
||||
+ '<span class="card-tier badge-' + wf.tier + '">' + wf.tier + '</span>';
|
||||
+ '<span class="ext-workflow-demo-card-tier ext-workflow-demo-badge-' + wf.tier + '">' + wf.tier + '</span>';
|
||||
card.appendChild(titleRow);
|
||||
|
||||
// Description
|
||||
const desc = document.createElement('p');
|
||||
desc.className = 'card-desc';
|
||||
desc.className = 'ext-workflow-demo-card-desc';
|
||||
desc.textContent = wf.description;
|
||||
card.appendChild(desc);
|
||||
|
||||
// Badges
|
||||
const badges = document.createElement('div');
|
||||
badges.className = 'card-badges';
|
||||
badges.className = 'ext-workflow-demo-card-badges';
|
||||
for (const b of wf.badges) {
|
||||
const span = document.createElement('span');
|
||||
span.className = 'badge';
|
||||
span.className = 'ext-workflow-demo-badge';
|
||||
span.textContent = b;
|
||||
badges.appendChild(span);
|
||||
}
|
||||
@@ -188,7 +188,7 @@
|
||||
|
||||
// Status + action
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'card-actions';
|
||||
actions.className = 'ext-workflow-demo-card-actions';
|
||||
|
||||
if (installedWf) {
|
||||
const isActive = installedWf.is_active;
|
||||
@@ -199,18 +199,18 @@
|
||||
|
||||
// Installed badge
|
||||
const status = document.createElement('span');
|
||||
status.className = 'badge badge-installed';
|
||||
status.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-installed';
|
||||
status.textContent = 'Installed';
|
||||
actions.appendChild(status);
|
||||
|
||||
if (!isActive) {
|
||||
const hint = document.createElement('span');
|
||||
hint.className = 'badge badge-needs-publish';
|
||||
hint.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-needs-publish';
|
||||
hint.textContent = 'Not Active';
|
||||
actions.appendChild(hint);
|
||||
} else if (!isPublished) {
|
||||
const hint = document.createElement('span');
|
||||
hint.className = 'badge badge-needs-publish';
|
||||
hint.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-needs-publish';
|
||||
hint.textContent = 'Not Published';
|
||||
actions.appendChild(hint);
|
||||
}
|
||||
@@ -235,14 +235,14 @@
|
||||
// Public link for public_link workflows
|
||||
if (installedWf.entry_mode === 'public_link' && isReady) {
|
||||
const linkRow = document.createElement('div');
|
||||
linkRow.className = 'public-link-row';
|
||||
linkRow.className = 'ext-workflow-demo-public-link-row';
|
||||
const linkInput = document.createElement('input');
|
||||
linkInput.type = 'text';
|
||||
linkInput.readOnly = true;
|
||||
linkInput.value = window.location.origin + base + '/api/v1/public/workflows/' + installedWf.id + '/start';
|
||||
linkRow.appendChild(linkInput);
|
||||
const copyBtn = document.createElement('button');
|
||||
copyBtn.className = 'btn-copy';
|
||||
copyBtn.className = 'ext-workflow-demo-btn-copy';
|
||||
copyBtn.textContent = 'Copy';
|
||||
copyBtn.onclick = function () {
|
||||
navigator.clipboard.writeText(linkInput.value).then(function () {
|
||||
@@ -255,7 +255,7 @@
|
||||
}
|
||||
} else {
|
||||
const status = document.createElement('span');
|
||||
status.className = 'badge badge-not-installed';
|
||||
status.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-not-installed';
|
||||
status.textContent = 'Not Installed';
|
||||
actions.appendChild(status);
|
||||
}
|
||||
@@ -268,7 +268,7 @@
|
||||
|
||||
function _buildStageDiagram(wf) {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'stage-flow';
|
||||
container.className = 'ext-workflow-demo-stage-flow';
|
||||
|
||||
const stages = wf.stages;
|
||||
let hasBranch = false;
|
||||
@@ -277,21 +277,21 @@
|
||||
const s = stages[i];
|
||||
|
||||
const node = document.createElement('div');
|
||||
node.className = 'stage-node stage-' + s.audience;
|
||||
node.className = 'ext-workflow-demo-stage-node ext-workflow-demo-stage-' + s.audience;
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'stage-label';
|
||||
label.className = 'ext-workflow-demo-stage-label';
|
||||
label.textContent = s.name;
|
||||
node.appendChild(label);
|
||||
|
||||
const meta = document.createElement('div');
|
||||
meta.className = 'stage-meta';
|
||||
meta.className = 'ext-workflow-demo-stage-meta';
|
||||
meta.textContent = s.mode + (s.audience !== 'team' ? ' (' + s.audience + ')' : '');
|
||||
node.appendChild(meta);
|
||||
|
||||
if (s.note) {
|
||||
const note = document.createElement('div');
|
||||
note.className = 'stage-note';
|
||||
note.className = 'ext-workflow-demo-stage-note';
|
||||
note.textContent = s.note;
|
||||
node.appendChild(note);
|
||||
}
|
||||
@@ -301,13 +301,13 @@
|
||||
// Arrow (except after last stage)
|
||||
if (i < stages.length - 1 && !stages[i + 1].branch) {
|
||||
const arrow = document.createElement('div');
|
||||
arrow.className = 'stage-arrow';
|
||||
arrow.className = 'ext-workflow-demo-stage-arrow';
|
||||
arrow.textContent = '\u2192';
|
||||
container.appendChild(arrow);
|
||||
} else if (stages[i + 1] && stages[i + 1].branch) {
|
||||
if (!hasBranch) {
|
||||
const split = document.createElement('div');
|
||||
split.className = 'stage-arrow stage-branch';
|
||||
split.className = 'ext-workflow-demo-stage-arrow ext-workflow-demo-stage-branch';
|
||||
split.textContent = '\u2193\u2197';
|
||||
container.appendChild(split);
|
||||
hasBranch = true;
|
||||
@@ -322,14 +322,14 @@
|
||||
|
||||
function _buildCollapsible(title, innerHtml) {
|
||||
const details = document.createElement('details');
|
||||
details.className = 'card-collapsible';
|
||||
details.className = 'ext-workflow-demo-card-collapsible';
|
||||
|
||||
const summary = document.createElement('summary');
|
||||
summary.textContent = title;
|
||||
details.appendChild(summary);
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 'collapsible-content';
|
||||
content.className = 'ext-workflow-demo-collapsible-content';
|
||||
content.innerHTML = innerHtml;
|
||||
details.appendChild(content);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user