Refactor navigation components and enhance slider functionality with fine scrubbing feature

2026-09-18 05:23:57 +08:00 · 2026-09-15 00:16:49 -04:00
parent 6aa9abf046
commit cbe6f39030
9 changed files with 158 additions and 118 deletions
@@ -884,8 +884,7 @@ body.is-scrolling .gx-tile {
  width: 100%;
 }

-.gx-slider-row .gx-row__value { text-align: left; min-width: 0; }
-.gx-slider-row .gx-slider-reset { align-self: flex-end; }
+.gx-slider-row .gx-row__value { text-align: left; min-width: 0; transition: color var(--motion-fast), text-shadow var(--motion-fast); }

 .gx-slider-meta {
  color: var(--text-muted);
@@ -903,6 +902,7 @@ input[type="range"].gx-slider {
  flex: 1;
  height: 8px;
  outline: none;
+  touch-action: pan-y;
  width: 100%;
 }

@@ -1317,34 +1317,6 @@ button.gx-chip:hover {
  color: var(--primary);
 }

-.gx-language-card {
-  margin-bottom: var(--sp-4);
-}
-
-.gx-language-card__row {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-3);
-}
-
-.gx-language-card__label {
-  align-items: center;
-  display: flex;
-  flex: 1 1 360px;
-  gap: var(--sp-4);
-  min-width: 220px;
-}
-
-.gx-language-card__select {
-  margin-left: var(--sp-2);
-  max-width: 220px;
-}
-
-.gx-language-card__hint {
-  margin-left: auto;
-}
-
@media (min-width: 768px) {
  .gx-app.gx-nav-pinned .gx-content {
    margin-left: 320px;
@@ -1357,25 +1329,6 @@ button.gx-chip:hover {
  }
 }

-@media (max-width: 767px) {
-  .gx-language-card__label {
-    flex-basis: 100%;
-  }
-
-  .gx-language-card__hint {
-    margin-left: 0;
-    width: 100%;
-  }
-}
-
-/* The destination view is a map-first screen. Search and route details float
-   over the map, matching the classic navigation experience. */
-.gx-navigation-view {
-  margin: calc(-1 * var(--sp-4));
-  min-height: calc(100dvh - var(--appbar-height));
-  position: relative;
-}
-
 .gx-navigation-stage {
  background: var(--surface-container-low);
  min-height: calc(100dvh - var(--appbar-height));
@@ -1423,8 +1376,7 @@ button.gx-chip:hover {

 .gx-navigation-search,
 .gx-navigation-summary,
-.gx-navigation-recent,
-.gx-navigation-error {
+.gx-navigation-recent {
  max-width: min(500px, calc(100vw - 32px));
 }

@@ -1641,12 +1593,6 @@ button.gx-chip:hover {
  border-top: 1px solid var(--outline);
 }

-.gx-navigation-error {
-  color: var(--error);
-  margin: var(--sp-4) 0 0;
-  padding: var(--sp-3);
-}
-
 .gx-navigation-empty {
  align-items: center;
  display: flex;
@@ -1664,30 +1610,11 @@ button.gx-chip:hover {
  margin: 0;
 }

-.gx-navigation-tabs {
-  pointer-events: auto;
-  position: absolute;
-  right: var(--sp-4);
-  top: var(--sp-4);
-  z-index: 3;
-}
-
@media (max-width: 767px) {
-  .gx-navigation-view {
-    margin: calc(-1 * var(--sp-3));
-  }
-
  .gx-navigation-overlay {
    padding: var(--sp-3);
  }

-  .gx-navigation-tabs {
-    bottom: calc(var(--bottomnav-height) + var(--sp-3));
-    left: var(--sp-3);
-    right: auto;
-    top: auto;
-  }
-
  .gx-navigation-summary__rows > div {
    grid-template-columns: 28px 82px 1fr;
  }
@@ -2446,3 +2373,21 @@ button.gx-chip:hover {
 .gx-select-menu { background: linear-gradient(var(--surface-container-high), var(--surface-container-high)), #141020; }
 [data-theme="light"] .gx-select-menu { background: linear-gradient(var(--surface-container-high), var(--surface-container-high)), #fff; }
 .gx-select-menu:not([open]) { display: none; }
+
+.gx-slider-row.is-fine-scrubbing input[type="range"].gx-slider {
+  touch-action: none;
+  background: rgba(157, 114, 255, 0.28);
+  box-shadow: 0 0 8px var(--primary-glow);
+}
+
+.gx-slider-row.is-fine-scrubbing input[type="range"].gx-slider::-webkit-slider-thumb {
+  transform: scale(1.35);
+  background: var(--secondary);
+  border-color: #ffffff;
+  box-shadow: 0 0 10px var(--secondary-glow);
+}
+
+.gx-slider-row.is-fine-scrubbing .gx-row__value {
+  color: var(--secondary);
+  text-shadow: 0 0 10px var(--secondary-glow);
+}
@@ -6,7 +6,7 @@ import { Tools } from "./views/Tools.js"
 import { Recordings } from "./views/Recordings.js"
 import { Logs } from "./views/Logs.js"
 import { Tuning } from "./views/Tuning.js"
-import { Navigation } from "./views/Navigation.js?v=nav-destination-3"
+import { Navigation } from "./views/Navigation.js?v=nav-destination-4"
 import { Vehicle } from "./views/Vehicle.js"
 import { Bluetooth } from "./views/Bluetooth.js"
 import { SystemTools } from "./views/SystemTools.js"
@@ -9,6 +9,10 @@ import { t } from "../i18n.js"

 const PANDA_FIRMWARE_TOGGLE_KEYS = new Set(["IgnoreIgnitionLine", "RemoteStartBootsComma", "HKGRemoteStartBootsComma", "TeslaWakeOnCAN"])

+const FINE_SCRUB_HOLD_MS = 300
+const FINE_SCRUB_FACTOR = 5
+const FINE_SCRUB_JITTER_PX = 4
+
 export const GalaxyToggleCard = {
  name: "GalaxyToggleCard",
  components: { FavoritesEditor },
@@ -30,6 +34,8 @@ export const GalaxyToggleCard = {
      endpointLoading: false,
      preview: undefined,
      interacting: false,
+      fineScrub: null,
+      isFineScrubbing: false,
    }
  },
  computed: {
@@ -127,19 +133,95 @@ export const GalaxyToggleCard = {
      if (Math.abs(next - current) <= this.epsilon) return
      this.commit(next)
    },
+    snap(raw) {
+      return snapNumericToBoundsAndStep(raw, this.bounds, this.precision)
+    },
+    clearHoldTimer() {
+      if (this._holdTimer) {
+        clearTimeout(this._holdTimer)
+        this._holdTimer = null
+      }
+    },
+    startHoldTimer() {
+      this.clearHoldTimer()
+      if (!this.fineScrub || this.fineScrub.active) return
+      this._holdTimer = setTimeout(() => {
+        this.activateFineScrub()
+      }, FINE_SCRUB_HOLD_MS)
+    },
+    activateFineScrub() {
+      if (!this.fineScrub || this.fineScrub.active) return
+      this.fineScrub.active = true
+      this.fineScrub.baseValue = this.snap(this.currentValue) ?? Number(this.bounds.min)
+      this.fineScrub.baseX = this.fineScrub.lastX
+      this.isFineScrubbing = true
+      try { navigator.vibrate?.(15) } catch (_) {}
+    },
    onSliderInput(e) {
+      if (this.fineScrub?.active) {
+        if (this.$refs.slider) this.$refs.slider.value = this.currentValue
+        return
+      }
      this.beginInteract()
      this.preview = Number(e.target.value)
+      this.startHoldTimer()
    },
    onSliderCommit(e) {
+      if (this.fineScrub?.active) return
      this.interacting = false
      this.flushSlider(e.target.value)
    },
    onSliderBlur(e) {
-      if (this.interacting) this.onSliderCommit(e)
+      if (this.interacting && !this.fineScrub) this.onSliderCommit(e)
    },
-    snap(raw) {
-      return snapNumericToBoundsAndStep(raw, this.bounds, this.precision)
+    onSliderPointerDown(e) {
+      this.beginInteract()
+      try { e.target.setPointerCapture?.(e.pointerId) } catch (err) {}
+      const rect = e.target.getBoundingClientRect()
+      this.fineScrub = {
+        active: false,
+        baseValue: this.snap(this.currentValue) ?? Number(this.bounds.min),
+        baseX: e.clientX,
+        lastX: e.clientX,
+        min: Number(this.bounds.min),
+        max: Number(this.bounds.max),
+        track: rect.width || 200,
+        pointerId: e.pointerId,
+      }
+      this.startHoldTimer()
+    },
+    onSliderPointerMove(e) {
+      const scrub = this.fineScrub
+      if (!scrub) return
+
+      if (!scrub.active) {
+        if (Math.abs(e.clientX - scrub.lastX) > FINE_SCRUB_JITTER_PX) {
+          scrub.lastX = e.clientX
+          this.startHoldTimer()
+        }
+        return
+      }
+
+      e.preventDefault()
+      if (!Number.isFinite(scrub.min) || !Number.isFinite(scrub.max) || !Number.isFinite(scrub.track) || scrub.track <= 0) return
+      const totalSpan = scrub.max - scrub.min
+      const dx = e.clientX - scrub.baseX
+      const raw = scrub.baseValue + (dx * totalSpan) / scrub.track / FINE_SCRUB_FACTOR
+      const next = this.snap(raw)
+      if (next === null) return
+      this.preview = next
+      if (this.$refs.slider) this.$refs.slider.value = next
+    },
+    onSliderPointerEnd(e) {
+      this.clearHoldTimer()
+      const wasFine = this.isFineScrubbing
+      this.fineScrub = null
+      this.isFineScrubbing = false
+      try { e.target.releasePointerCapture?.(e.pointerId) } catch (_) {}
+      this.interacting = false
+      if (wasFine || this.preview !== undefined) {
+        this.flushSlider(this.currentValue)
+      }
    },
    async resetToDefault() {
      const defaults = await api.getDefaults()
@@ -183,6 +265,9 @@ export const GalaxyToggleCard = {
  mounted() {
    if (this.param.options_endpoint) this.loadEndpointOptions()
  },
+  unmounted() {
+    this.clearHoldTimer()
+  },
  template: `
    <div>
      <div class="gx-row" :class="{ disabled: locked, 'gx-row--favorites': isFavorites, 'gx-row--stack': isSlider || isSelect }">
@@ -204,17 +289,26 @@ export const GalaxyToggleCard = {
          <FavoritesEditor />
        </div>

-        <div v-else-if="isSlider" class="gx-slider-row">
-          <span class="gx-row__value" style="min-width:64px; text-align:right;">{{ sliderDisplay }}</span>
-          <input type="range" class="gx-slider" :min="bounds.min" :max="bounds.max" :step="bounds.step"
+        <div v-else-if="isSlider" class="gx-slider-row" :class="{ 'is-fine-scrubbing': isFineScrubbing }">
+          <div class="gx-slider-header" style="display:flex; justify-content:space-between; align-items:center; width:100%;">
+            <div style="display:flex; align-items:baseline; gap:8px;">
+              <span class="gx-row__value">{{ sliderDisplay }}</span>
+              <span v-if="interacting" class="gx-slider-hint" style="font-size:0.75rem; opacity:0.6; user-select:none;">
+                {{ isFineScrubbing ? tr("Fine scrubbing") : tr("Hold to fine scrub") }}
+              </span>
+            </div>
+            <button class="gx-slider-reset" :disabled="locked || updating" @click="resetToDefault">{{ tr("Default") }}</button>
+          </div>
+          <input ref="slider" type="range" class="gx-slider" :min="bounds.min" :max="bounds.max" :step="bounds.step"
            :value="currentValue" :disabled="locked || updating"
            @input="onSliderInput" @change="onSliderCommit" @blur="onSliderBlur"
+            @pointerdown="onSliderPointerDown" @pointermove="onSliderPointerMove"
+            @pointerup="onSliderPointerEnd" @pointercancel="onSliderPointerEnd"
            @touchstart="beginInteract" @mousedown="beginInteract" @keydown="beginInteract" />
          <div v-if="displayParam.unit_type" class="gx-slider-meta">
            <span>{{ sliderRangeDisplay }}</span>
            <span>{{ tr("Step:") }} {{ sliderStepDisplay }}</span>
          </div>
-          <button class="gx-slider-reset" :disabled="locked || updating" @click="resetToDefault">{{ tr("Default") }}</button>
        </div>

        <select v-else-if="isSelect" class="gx-field" :disabled="locked || updating" :value="String(value ?? '')" @change="onSelect">
@@ -1,8 +1,10 @@
 import { api, showSnackbar } from "../api.js"
+import { GxNotice } from "./GxNotice.js"
 import { LANGUAGE_OPTIONS, languageState, normalizeLanguage, setLanguage, t } from "../i18n.js"

 export const LanguageSelector = {
  name: "LanguageSelector",
+  components: { GxNotice },
  props: { deviceValue: { type: String, default: "" } },
  data() {
    return { languages: LANGUAGE_OPTIONS, selected: languageState.code, saving: false, error: "" }
@@ -45,21 +47,21 @@ export const LanguageSelector = {
    },
  },
  template: `
-    <div class="gx-card gx-language-card">
+    <div class="gx-card">
      <div class="gx-section__header">
        <i class="bi bi-translate"></i>
        <span class="gx-section__title">{{ tr("Language") }}</span>
      </div>
-      <div class="gx-language-card__row">
-        <label class="gx-language-card__label">
-          <span>{{ tr("Select language") }}</span>
-          <select class="gx-field gx-language-card__select" :value="selected" :disabled="saving" @change="change">
-            <option v-for="option in languages" :key="option.value" :value="option.value">{{ tr(option.label, option.label) }}</option>
-          </select>
-        </label>
-        <small class="gx-row__desc gx-language-card__hint">{{ tr("Galaxy uses English when no language is selected.") }}</small>
+      <div class="gx-row gx-row--stack">
+        <div class="gx-row__info">
+          <span class="gx-row__label">{{ tr("Select language") }}</span>
+          <span class="gx-row__desc">{{ tr("Galaxy uses English when no language is selected.") }}</span>
+        </div>
+        <select class="gx-field" :value="selected" :disabled="saving" @change="change">
+          <option v-for="option in languages" :key="option.value" :value="option.value">{{ tr(option.label, option.label) }}</option>
+        </select>
      </div>
-      <p v-if="error" class="gx-row__desc" style="color:var(--danger); margin:8px 0 0;">{{ error }}</p>
+      <GxNotice v-if="error" tone="danger" :text="error" style="margin: 0 var(--sp-4) var(--sp-4);" />
    </div>
  `,
 }
@@ -309,6 +309,7 @@ export const MapsPanel = {
  },
  template: `
    <div style="display:grid; gap:12px;">
+      <GxNotice v-if="error" tone="danger" :text="error" style="margin:0;" />
      <section class="gx-card">
        <div class="gx-section__header">
          <i class="bi bi-map"></i>
@@ -451,8 +452,6 @@ export const MapsPanel = {
          </div>
        </div>
      </section>
-
-      <GxNotice v-if="error" tone="danger" :text="error" />
    </div>
  `,
 }
@@ -1,4 +1,5 @@
 import { api, showSnackbar } from "../api.js"
+import { GxNotice } from "./GxNotice.js"
 import {
  getMapboxSearchContext,
  addRouteToMap,
@@ -80,6 +81,7 @@ function secondaryLabel(place) {

 export const NavigationDestinationPanel = {
  name: "NavigationDestinationPanel",
+  components: { GxNotice },
  data() {
    return {
      loading: true,
@@ -426,9 +428,9 @@ export const NavigationDestinationPanel = {
      <div v-else ref="map" class="gx-navigation-map"></div>

      <div v-if="hasMapbox && !loading" class="gx-navigation-overlay">
-        <section v-if="!hasRoutingKey" class="gx-navigation-error gx-card">
+        <GxNotice v-if="!hasRoutingKey" tone="warn" icon="bi-key-fill" style="margin:0;">
          The map and destination search only use your public Mapbox key. Add a <a href="#/navigation/keys">secret Mapbox key in App Keys</a> before starting navigation so the comma can calculate the on-device route and provide turn desires.
-        </section>
+        </GxNotice>
        <section class="gx-navigation-search gx-card">
          <div class="gx-navigation-search__row">
            <i class="bi bi-search" aria-hidden="true"></i>
@@ -475,7 +477,7 @@ export const NavigationDestinationPanel = {
            <i class="bi" :class="isPlaceFavorite(place) ? 'bi-heart-fill' : 'bi-clock-history'"></i>
          </button>
        </section>
-        <p v-if="error" class="gx-navigation-error gx-card">{{ error }}</p>
+        <GxNotice v-if="error" tone="danger" :text="error" style="margin:0;" />
      </div>
    </div>
  `,
@@ -30,8 +30,9 @@ export function usePolling(fn, { interval = 3000, enabled = () => true } = {}) {
  let destroyed = false

  const stop = () => { if (timer) { clearTimeout(timer); timer = null } }
+  const scrolling = () => typeof document !== "undefined" && !!document.body?.classList?.contains("is-scrolling")
  const tick = async () => {
-    if (destroyed || !enabled() || document.visibilityState !== "visible") {
+    if (destroyed || !enabled() || document.visibilityState !== "visible" || scrolling()) {
      timer = setTimeout(tick, interval)
      return
    }
@@ -1,4 +1,4 @@
-import { NavigationDestinationPanel } from "../components/NavigationDestinationPanel.js?v=nav-destination-3"
+import { NavigationDestinationPanel } from "../components/NavigationDestinationPanel.js?v=nav-destination-4"
 import { MapsPanel } from "../components/MapsPanel.js"
 import { NavigationKeysPanel } from "../components/NavigationKeysPanel.js"
 import { SpeedLimitsPanel } from "../components/SpeedLimitsPanel.js"
@@ -22,18 +22,13 @@ export const Navigation = {
    })
  },
  template: `
-      <template v-if="tab === 'nav'">
-        <div class="gx-navigation-view">
-          <NavigationDestinationPanel />
-          <div class="gx-navigation-tabs"><GalaxyTabs :items="TABS" :active="tab" @select="selectTab" /></div>
-        </div>
-      </template>
-      <div v-else class="gx-view">
-        <h2 style="margin-top:0;">Navigation & Maps</h2>
-        <GalaxyTabs :items="TABS" :active="tab" @select="selectTab" />
-        <template v-if="tab === 'maps'"><MapsPanel /></template>
-        <template v-if="tab === 'keys'"><NavigationKeysPanel /></template>
-        <template v-if="tab === 'speeds'"><SpeedLimitsPanel /></template>
-      </div>
+    <div class="gx-view">
+      <h2 style="margin-top:0;">Navigation & Maps</h2>
+      <GalaxyTabs :items="TABS" :active="tab" @select="selectTab" />
+      <template v-if="tab === 'nav'"><NavigationDestinationPanel /></template>
+      <template v-if="tab === 'maps'"><MapsPanel /></template>
+      <template v-if="tab === 'keys'"><NavigationKeysPanel /></template>
+      <template v-if="tab === 'speeds'"><SpeedLimitsPanel /></template>
+    </div>
  `,
 }
@@ -300,9 +300,11 @@ def test_ui_eliminates_slider_toggle_flicker():
  assert "interacting" in card
  assert "onSliderCommit" in card
  assert "flushSlider" in card
-  # No mid-drag auto-commit timer: holding still must NOT release/lock.
+  # No mid-drag auto-commit timer: holding still must NOT release/lock or
+  # commit. A hold may only switch the slider into fine scrubbing.
  assert "commitTimer" not in card
-  assert "setTimeout" not in card
+  hold = card[card.index("startHoldTimer"):card.index("activateFineScrub")]
+  assert "flushSlider" not in hold and "commit" not in hold
  # Release (change) and blur (keyboard) both flush the commit.
  assert "interacting = false" in card
  assert "onSliderBlur" in card
@@ -497,8 +499,8 @@ def test_ui_all_remaining_classic_tools_native_no_embed():
  assert "GalaxyEmbed" not in tuning and "LateralTuningPanel" in tuning
  assert _read("js/components/MapsPanel.js") and _read("js/components/NavigationKeysPanel.js")
  destination = _read("js/components/NavigationDestinationPanel.js")
-  assert '"./views/Navigation.js?v=nav-destination-2"' in _read("js/app.js")
-  assert '"../components/NavigationDestinationPanel.js?v=nav-destination-2"' in _read("js/views/Navigation.js")
+  assert '"./views/Navigation.js?v=nav-destination-4"' in _read("js/app.js")
+  assert '"../components/NavigationDestinationPanel.js?v=nav-destination-4"' in _read("js/views/Navigation.js")
  assert "mapboxSuggest" in destination and "mapboxRetrieve" in destination
  assert "mapboxGeocode" in destination and "mapboxDirections" in destination
  assert "ref=\"map\"" in destination and "setNavigation(this.destination)" in destination