From ba9fab8ccabda8e318f5d7ddf7c1f77a0682cf82 Mon Sep 17 00:00:00 2001 From: dirwin31 <83434411+dirwin31@users.noreply.github.com> Date: Tue, 13 Oct 2026 17:50:56 -0700 Subject: [PATCH] Move Mobile Align text out of edit window. --- openpilot/starpilot/galaxy/tests/test_onroad_layout.mjs | 7 +++++++ openpilot/starpilot/galaxy/web/css/settings.css | 3 +++ openpilot/starpilot/galaxy/web/js/onroad-layout.js | 9 ++++++--- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/openpilot/starpilot/galaxy/tests/test_onroad_layout.mjs b/openpilot/starpilot/galaxy/tests/test_onroad_layout.mjs index 869b7fcd85..34cb804542 100644 --- a/openpilot/starpilot/galaxy/tests/test_onroad_layout.mjs +++ b/openpilot/starpilot/galaxy/tests/test_onroad_layout.mjs @@ -156,7 +156,14 @@ assert.equal(snapVm.snapSummary, "At the edge") const cachedTargets = snapVm.state.drag.targets snapVm.moveDrag(largePoint(35, 430)) assert.equal(snapVm.state.drag.targets, cachedTargets) +assert.equal(snapVm.snapInBar, false, "a mouse drag keeps the alignment chip on the preview") snapVm.endDrag(largePoint(34, 430)) +snapVm.startDrag("current_speed", largePoint(34, 430, { pointerType: "touch" })) +snapVm.moveDrag(largePoint(34, 300, { pointerType: "touch" })) // past the finger slop +snapVm.moveDrag(largePoint(35, 430, { pointerType: "touch" })) +assert.equal(snapVm.snapInBar, true, "a finger drag shows the alignment in the save bar instead") +snapVm.endDrag(largePoint(35, 430, { pointerType: "touch" })) +assert.equal(snapVm.snapInBar, false) assert.deepEqual(snapVm.state.snapGuides, []) assert.equal(snapVm.state.history.undo.length, 1) snapVm.undo() diff --git a/openpilot/starpilot/galaxy/web/css/settings.css b/openpilot/starpilot/galaxy/web/css/settings.css index df5f1d2bac..9c1a808d73 100644 --- a/openpilot/starpilot/galaxy/web/css/settings.css +++ b/openpilot/starpilot/galaxy/web/css/settings.css @@ -657,6 +657,9 @@ input[type="range"].gx-slider:active::-moz-range-thumb { .gx-layout__preview-card > .gx-layout__stage { position: relative; margin-inline: 0; min-width: 0; } .gx-layout__stage-chip { position: absolute; top: 6px; right: 6px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #b799ff88; border-radius: var(--radius-full); background: rgba(22, 18, 31, .82); color: #d8c8ff; font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; pointer-events: none; } .gx-layout__stage-chip--start { right: auto; left: 6px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; display: block; } +/* Covers the whole bar, buttons included, so its size never changes mid-drag. */ +.gx-layout__savebar-snap { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: inherit; background: inherit; color: var(--primary); font-weight: var(--fw-bold); pointer-events: none; } +.gx-layout__savebar-snap > .bi { flex: none; } .gx-layout__stage-chip--with-tap-areas { max-width: calc(100% - 120px); } .gx-layout__guide { stroke: #b799ff; stroke-width: 1.5; } .gx-layout__guide--center { stroke-dasharray: 6 4; } diff --git a/openpilot/starpilot/galaxy/web/js/onroad-layout.js b/openpilot/starpilot/galaxy/web/js/onroad-layout.js index 4d1ae5c1bd..b9e1f26465 100644 --- a/openpilot/starpilot/galaxy/web/js/onroad-layout.js +++ b/openpilot/starpilot/galaxy/web/js/onroad-layout.js @@ -404,6 +404,8 @@ export const OnroadLayoutPage = { selectedWidget() { return this.profile?.widgets[this.state.selected] }, selectedPosition() { return this.layout?.[this.state.selected] }, selectedSize() { return this.selectedWidget ? widgetSize(this.selectedWidget, this.selectedPosition) : [0, 0] }, + // A finger covers the preview chip, so touch drags show the alignment in the sticky save bar. + snapInBar() { return !!(this.state.drag?.touch && this.state.snapGuides.length) }, snapSummary() { const guides = this.state.snapGuides, centred = new Set(guides.filter(guide => guide.kind === "center").map(guide => guide.axis)) if (centred.size === 2) return "Centred on the screen" @@ -886,7 +888,7 @@ export const OnroadLayoutPage = { this.state.selected = id this.finishColorEdit() this.state.drag = { - id, pointerId: event.pointerId, fromTray, before: { ...position }, historyBefore: clone(this.state.draft), inside: !fromTray, + id, pointerId: event.pointerId, touch: event.pointerType === "touch", fromTray, before: { ...position }, historyBefore: clone(this.state.draft), inside: !fromTray, startX: event.clientX, startY: event.clientY, moved: false, offsetX: fromTray ? width / 2 : point.x - position.x, offsetY: fromTray ? height / 2 : point.y - position.y @@ -905,7 +907,7 @@ export const OnroadLayoutPage = { this.state.selected = id this.finishColorEdit() this.state.drag = { - id, pointerId: event.pointerId, resize: true, before: { ...position }, historyBefore: clone(this.state.draft), + id, pointerId: event.pointerId, touch: event.pointerType === "touch", resize: true, before: { ...position }, historyBefore: clone(this.state.draft), inside: true, offsetX: point.x - position.width, offsetY: point.y - position.height } this._dragTarget = this.$refs.preview @@ -1187,6 +1189,7 @@ export const OnroadLayoutPage = { Connect to local Galaxy to edit this device’s colors and layouts.