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

v0.12.0-hotfix1

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-09-03 22:18:32 +02:00
parent 07be4b85d9
commit 97fff976fe
5 changed files with 315 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+1 -1
View File
@@ -111,7 +111,7 @@
</div>
<div class="group-quick-grid dashboard-group-strip" id="dashboardGroups"></div>
</section>
<section class="panel dashboard-section-panel">
<section class="panel dashboard-section-panel dashboard-thermostat-section">
<div class="dashboard-section-head compact-head">
<div><span class="eyebrow" data-i18n="nav.zones">Zones</span>
<h2 data-i18n="dashboard.quickThermostats">Thermostats</h2>
web/js/charts.js
+7 -3
View File
@@ -182,10 +182,14 @@ function prepareCanvas(canvas, height) {
const wrap = canvas.parentElement;
const wrapWidth = Math.floor(wrap?.clientWidth || rect.width || 720);
const card = canvas.closest('.history-chart-card');
const fullscreenHeight = chartCardIsFullscreen(card) ? Math.floor(wrap?.clientHeight || 0) : 0;
const actualHeight = Math.max(height, fullscreenHeight || 0);
const fullscreen = chartCardIsFullscreen(card);
const fullscreenHeight = fullscreen ? Math.floor(wrap?.clientHeight || 0) : 0;
const actualHeight = fullscreenHeight || height;
const zoom = clamp(Number(canvas.dataset.chartZoom || 1), 1, 4);
const width = Math.max(720, Math.floor(Math.max(720, wrapWidth) * zoom));
// Regular charts keep a useful minimum plotting width and may scroll horizontally.
// In fullscreen, 100% zoom must fit the available viewport instead of forcing 720px.
const baseWidth = fullscreen ? Math.max(1, wrapWidth) : Math.max(720, wrapWidth);
const width = Math.max(1, Math.floor(baseWidth * zoom));
const dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr; canvas.height = actualHeight * dpr;
canvas.style.width = `${width}px`; canvas.style.height = `${actualHeight}px`;
web/js/flows.js
+35 -10
View File
@@ -365,7 +365,7 @@ function renderFlowSaveStatus() {
}
function setFlowZoom(value, { render = true } = {}) {
const next = clamp(Number(value) || 1, .45, 1.35);
const next = clamp(Number(value) || 1, .2, 1.35);
app.flowZoom = Math.round(next * 20) / 20;
const canvas = $('#flowCanvas');
if (canvas) canvas.style.zoom = String(app.flowZoom);
@@ -377,17 +377,42 @@ function setFlowZoom(value, { render = true } = {}) {
function fitFlowToView({ maxZoom = 1 } = {}) {
const workspace = $('#flowWorkspace');
const nodes = app.flowDraft?.nodes || [];
if (!workspace || !nodes.length) { setFlowZoom(1); if (workspace) workspace.scrollTo({ left: 0, top: 0, behavior: 'smooth' }); return; }
const width = 170, height = 96, pad = 56;
const minX = Math.max(0, Math.min(...nodes.map(node => Number(node.x || 0))) - pad);
const minY = Math.max(0, Math.min(...nodes.map(node => Number(node.y || 0))) - pad);
const maxX = Math.max(...nodes.map(node => Number(node.x || 0) + width)) + pad;
const maxY = Math.max(...nodes.map(node => Number(node.y || 0) + height)) + pad;
if (!workspace || !nodes.length) {
setFlowZoom(1);
if (workspace) workspace.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
return;
}
const nodeWidth = 170, fallbackHeight = 96, pad = 48;
const bounds = nodes.map(node => {
const element = $(`[data-flow-node="${CSS.escape(node.id)}"]`);
return {
left: Number(node.x || 0),
top: Number(node.y || 0),
width: Math.max(nodeWidth, Number(element?.offsetWidth || 0)),
height: Math.max(fallbackHeight, Number(element?.offsetHeight || 0)),
};
});
const minX = Math.max(0, Math.min(...bounds.map(item => item.left)) - pad);
const minY = Math.max(0, Math.min(...bounds.map(item => item.top)) - pad);
const maxX = Math.max(...bounds.map(item => item.left + item.width)) + pad;
const maxY = Math.max(...bounds.map(item => item.top + item.height)) + pad;
const contentW = Math.max(1, maxX - minX), contentH = Math.max(1, maxY - minY);
const availableW = Math.max(220, workspace.clientWidth - 24), availableH = Math.max(180, workspace.clientHeight - 24);
const zoom = clamp(Math.min(availableW / contentW, availableH / contentH, maxZoom), .45, 1.35);
const availableW = Math.max(80, workspace.clientWidth - 20);
const availableH = Math.max(80, workspace.clientHeight - 20);
const rawZoom = clamp(Math.min(availableW / contentW, availableH / contentH, maxZoom), .2, 1.35);
const zoom = Math.max(.2, Math.floor(rawZoom * 20) / 20);
setFlowZoom(zoom);
requestAnimationFrame(() => workspace.scrollTo({ left: Math.max(0, minX * app.flowZoom - 12), top: Math.max(0, minY * app.flowZoom - 12), behavior: 'smooth' }));
requestAnimationFrame(() => {
const centerX = ((minX + maxX) / 2) * app.flowZoom;
const centerY = ((minY + maxY) / 2) * app.flowZoom;
workspace.scrollTo({
left: Math.max(0, centerX - workspace.clientWidth / 2),
top: Math.max(0, centerY - workspace.clientHeight / 2),
behavior: 'smooth',
});
});
}
function renderFlowBlockLibrary(filter = '') {
web/styles.css
+176 -1
View File
@@ -9410,4 +9410,179 @@ body.chart-fullscreen-open::before {
stroke-width: 2;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
}
/* Mobile UX refinements: dashboard headers, control plan, landscape navigation and Flow toolbar. */
@media (max-width: 700px) {
.dashboard-thermostat-section .dashboard-section-head.compact-head {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.dashboard-thermostat-section .dashboard-section-head.compact-head > div:first-child {
min-width: 0;
text-align: left;
}
.dashboard-thermostat-section .dashboard-section-actions {
flex: 0 0 auto;
justify-content: flex-end;
margin-left: auto;
}
.dashboard-thermostat-section .dashboard-section-actions button {
flex: 0 0 auto;
}
#controlPlan.automation-plan-grid {
grid-template-columns: 1fr;
}
#controlPlan .plan-card,
#controlPlan .plan-card-head,
#controlPlan .plan-events,
#controlPlan .plan-events li,
#controlPlan .plan-events time,
#controlPlan .plan-rule-summary {
text-align: left;
}
#controlPlan .plan-rules .plan-events li {
grid-template-columns: 1fr;
gap: 3px;
}
}
#controlPlan .plan-rules .plan-events time {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
#controlPlan .plan-rules .plan-rule-summary {
min-width: 0;
}
/* Phones in landscape can cross desktop width breakpoints. Keep navigation compact when height is phone-like. */
@media (orientation: landscape) and (max-height: 640px) and (max-width: 1400px) {
body:not(.flow-editor-open) main {
width: 100%;
max-width: 100%;
padding-left: 12px;
padding-right: 12px;
padding-bottom: calc(74px + env(safe-area-inset-bottom));
}
body:not(.flow-editor-open) .desktop-nav-only {
display: none !important;
}
body:not(.flow-editor-open) .mobile-nav-only {
display: grid !important;
}
body:not(.flow-editor-open) .bottom-nav {
top: auto;
right: 0;
bottom: 0;
left: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
width: 100%;
max-width: 100vw;
max-height: none;
gap: 0;
padding: 5px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
overflow: hidden;
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 0;
}
body:not(.flow-editor-open) .bottom-nav .nav-section-label {
display: none !important;
}
body:not(.flow-editor-open) .bottom-nav button {
display: grid;
place-items: center;
gap: 2px;
min-height: 44px;
padding: 5px 2px;
text-align: center;
}
body:not(.flow-editor-open) .bottom-nav button span {
display: block;
width: auto;
font-size: 18px;
}
body:not(.flow-editor-open) .bottom-nav button b {
max-width: 100%;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.flow-workspace-toolbar {
gap: 6px;
padding-inline: 8px;
}
.flow-workspace-primary-actions {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.flow-add-block-button {
min-width: 0;
max-width: min(42vw, 160px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flow-zoom-controls {
flex: 0 0 auto;
gap: 4px;
}
.flow-zoom-controls > span {
display: none;
}
.flow-fit-button {
width: 36px;
min-width: 36px;
min-height: 36px;
padding: 0;
overflow: hidden;
font-size: 0;
}
.flow-fit-button::before {
content: "⊡";
font-size: 17px;
line-height: 1;
}
}
#controlPlan .plan-card {
text-align: left;
}
#controlPlan .plan-rules .plan-events li {
grid-template-columns: minmax(88px, .85fr) minmax(0, 1.15fr);
}
@media (max-width: 700px) {
#controlPlan .plan-rules .plan-events li {
grid-template-columns: 1fr;
}
}