gru/gree-controller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.9.6

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-09-01 22:20:10 +02:00
parent 1cb62c8d0b
commit 16e0d94564
47 changed files with 2565 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/styles.css
+104 -1
View File
@@ -6122,4 +6122,107 @@ textarea[aria-invalid="true"] {
.compressor-queue-reason {
justify-self: start;
}
}
}
/* Visual Flow editor */
.flow-info-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.flow-info-panel p { margin:.35rem 0 0; color:var(--muted); max-width:780px; }
.flow-card .card-footer small { max-width:70%; }
body.flow-editor-open { overflow:hidden; }
.flow-editor { position:fixed; inset:0; z-index:80; background:var(--bg); display:flex; flex-direction:column; }
.flow-editor[hidden] { display:none !important; }
.flow-editor-bar { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 18px; border-bottom:1px solid var(--line); background:var(--surface); }
.flow-editor-title { display:flex; align-items:center; gap:12px; min-width:0; }
.flow-editor-title > div { display:grid; gap:2px; min-width:0; }
.flow-editor-title input { border:0; background:transparent; color:var(--text); font-weight:750; font-size:1.12rem; padding:2px 0; min-width:280px; outline:none; }
.flow-editor-actions { display:flex; align-items:center; gap:10px; }
.flow-enabled { display:flex; align-items:center; gap:8px; color:var(--muted); }
.flow-editor-body { flex:1; min-height:0; display:grid; grid-template-columns:220px minmax(420px,1fr) 300px; }
.flow-palette,.flow-inspector { background:var(--surface); overflow:auto; padding:16px; }
.flow-palette { border-right:1px solid var(--line); }
.flow-inspector { border-left:1px solid var(--line); }
.flow-palette-head { display:grid; gap:4px; margin-bottom:18px; }
.flow-palette-head small { color:var(--muted); line-height:1.35; }
.flow-palette-group { display:grid; gap:7px; margin:0 0 18px; }
.flow-palette-group > span { color:var(--muted); font-size:.72rem; font-weight:750; text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
.flow-palette-group button { text-align:left; border:1px solid var(--line); background:var(--surface-2); color:var(--text); border-radius:10px; padding:9px 10px; }
.flow-palette-group button:hover { border-color:var(--accent-border); background:var(--accent-soft); }
.flow-workspace-wrap { min-width:0; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; background:var(--canvas); }
.flow-workspace { position:relative; min-height:0; overflow:auto; outline:none; background-color:var(--canvas); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:24px 24px; }
.flow-nodes { position:relative; width:2400px; height:1500px; }
.flow-edges { position:absolute; inset:0; width:2400px; height:1500px; overflow:visible; pointer-events:none; z-index:1; }
.flow-edges path { fill:none; stroke:var(--muted-2); stroke-width:2.5; pointer-events:stroke; cursor:pointer; }
.flow-edges path:hover { stroke:var(--danger); stroke-width:4; }
.flow-editor .flow-node { position:absolute; z-index:2; display:block; align-content:normal; gap:0; width:170px; min-height:78px; padding:0; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); box-shadow:0 10px 28px rgba(0,0,0,.18); user-select:none; }
.flow-editor .flow-node.selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft),0 12px 30px rgba(0,0,0,.22); }
.flow-editor .flow-node-time { border-top:3px solid var(--blue); }
.flow-editor .flow-node-sensor { border-top:3px solid var(--teal); }
.flow-editor .flow-node-logic { border-top:3px solid var(--purple); }
.flow-editor .flow-node-action { border-top:3px solid var(--orange); }
.flow-editor .flow-node-head { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:8px 9px 6px; font-size:.82rem; font-weight:750; cursor:grab; }
.flow-editor .flow-node-head button { border:0; background:transparent; color:var(--muted); padding:0 2px; font-size:1rem; }
.flow-editor .flow-node-body { padding:5px 10px 10px; color:var(--muted); font-size:.76rem; line-height:1.35; overflow-wrap:anywhere; }
.flow-editor .flow-port { position:absolute; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; border:2px solid var(--surface); background:var(--muted-2); padding:0; z-index:4; }
.flow-editor .flow-port-in { left:-8px; }
.flow-editor .flow-port-out { right:-8px; }
.flow-editor .flow-port:hover,.flow-editor .flow-port.armed { background:var(--accent); transform:scale(1.15); }
.flow-empty-hint { position:absolute; z-index:0; left:50%; top:42%; transform:translate(-50%,-50%); text-align:center; display:grid; gap:5px; color:var(--muted); pointer-events:none; }
.flow-natural-preview { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; min-height:58px; padding:10px 18px; border-top:1px solid var(--line); background:var(--surface); }
.flow-natural-preview span { color:var(--muted); font-size:.86rem; line-height:1.4; }
.flow-inspector-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:18px; }
.flow-inspector-head h3 { margin:2px 0 0; }
.flow-inspector label { display:grid; gap:6px; margin-bottom:13px; color:var(--muted); font-size:.82rem; }
.flow-inspector input,.flow-inspector select { width:100%; border:1px solid var(--line); border-radius:10px; background:var(--input-bg); color:var(--text); padding:9px 10px; }
.flow-inspector .two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.flow-day-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.flow-day-grid label { display:flex; align-items:center; gap:7px; padding:8px; border:1px solid var(--line); border-radius:9px; margin:0; }
.flow-day-grid input { width:auto; }
.flow-inspector-meta { display:grid; gap:5px; margin-top:20px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); }
.flow-inspector-meta code { font-size:.72rem; overflow-wrap:anywhere; }
@media (max-width: 980px) {
.flow-editor-body { grid-template-columns:180px minmax(360px,1fr) 260px; }
.flow-editor-title input { min-width:180px; }
}
@media (max-width: 760px) {
.flow-editor-bar { align-items:flex-start; flex-direction:column; }
.flow-editor-actions { width:100%; justify-content:flex-end; }
.flow-editor-body { grid-template-columns:132px minmax(500px,1fr); }
.flow-inspector { position:absolute; right:0; top:138px; bottom:0; width:min(310px,86vw); z-index:8; box-shadow:-12px 0 30px rgba(0,0,0,.28); }
.flow-palette { padding:10px; }
.flow-palette-group button { font-size:.76rem; padding:8px; }
.flow-natural-preview { grid-template-columns:1fr; gap:4px; }
}
/* Flow diagnostics, templates and portable Flow files */
.flow-tool-dialog { width:min(860px,calc(100vw - 32px)); max-height:min(820px,calc(100vh - 32px)); overflow:auto; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); padding:18px; box-shadow:0 24px 70px rgba(0,0,0,.32); }
.flow-tool-dialog::backdrop { background:rgba(0,0,0,.48); }
.flow-template-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-top:16px; }
.flow-template-card { display:grid; gap:7px; text-align:left; align-content:start; min-height:118px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); color:var(--text); padding:14px; }
.flow-template-card:hover { border-color:var(--accent); }
.flow-template-card span { color:var(--muted); font-size:.86rem; line-height:1.4; }
.flow-simulation-controls { display:grid; gap:14px; padding:4px 0 16px; border-bottom:1px solid var(--line); }
.flow-simulation-overrides { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:8px; }
.flow-test-results { display:grid; gap:10px; margin-top:16px; }
.flow-test-summary,.flow-test-action,.flow-log-row { border:1px solid var(--line); border-radius:12px; background:var(--surface-2); padding:12px; }
.flow-test-summary { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.flow-test-action > div:first-child,.flow-log-row > div:first-child { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.flow-test-action.pass { border-left:4px solid var(--green); }
.flow-test-action.blocked { border-left:4px solid var(--line-strong); }
.flow-trace { display:grid; gap:5px; margin-top:10px; }
.flow-trace > div { display:flex; justify-content:space-between; gap:10px; padding-top:5px; border-top:1px solid var(--line); font-size:.82rem; }
.flow-trace code { color:var(--muted); max-width:48%; overflow-wrap:anywhere; text-align:right; }
.flow-log-row p { margin:8px 0 4px; }
.flow-log-row small { color:var(--muted); }
@media (max-width:760px) { .flow-test-summary { align-items:flex-start; flex-direction:column; } }
.flow-editor-actions { flex-wrap:wrap; justify-content:flex-end; }
.flow-editor-actions .secondary { padding-inline:10px; }
@media (max-width:1100px) {
.flow-editor-bar { align-items:flex-start; }
.flow-editor-actions { max-width:70%; }
}
@media (max-width:760px) {
.flow-editor-actions { max-width:none; justify-content:flex-start; }
}
.flow-device-options { margin:10px 0; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.flow-device-options summary { cursor:pointer; font-weight:650; }
.flow-device-options[open] summary { margin-bottom:10px; }