feat: lock dashboard sliders on mobile devices (#1614)

Signed-off-by: Pedro Lamas <[email protected]>

Author: pedrolamas

src/components/ui/AppNamedSlider.vue

@@ -35,28 +35,6 @@
           @keyup.enter.exact="handleSubmit(+currentValue)"
         >
           <template #prepend>
-            <app-btn
-              v-if="locked && isMobileViewport"
-              icon
-              small
-              :disabled="disabled"
-              style="margin-top: -4px;"
-              @click="internalLocked = !internalLocked"
-            >
-              <v-icon
-                v-if="internalLocked"
-                small
-              >
-                $pencil
-              </v-icon>
-              <v-icon
-                v-else
-                small
-              >
-                $lockReset
-              </v-icon>
-            </app-btn>
-
             <app-btn
               v-if="resetValue !== undefined"
               :disabled="disabled || loading"
@@ -85,20 +63,33 @@
       @start="handleStart"
       @end="handleEnd"
       @change="handleChange"
-    />
+    >
+      <template #prepend>
+        <app-btn
+          v-if="locked"
+          icon
+          small
+          :disabled="disabled || loading || overridden"
+          @click="internalLocked = !internalLocked"
+        >
+          <v-icon small>
+            {{ internalLocked ? '$lock' : '$lockReset' }}
+          </v-icon>
+        </app-btn>
+      </template>
+    </v-slider>
   </v-form>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Watch, Ref, VModel, Mixins } from 'vue-property-decorator'
+import { Component, Prop, Watch, Ref, VModel, Vue } from 'vue-property-decorator'
 import type { InputValidationRules } from 'vuetify'
 import type { VForm } from '@/types'
-import BrowserMixin from '@/mixins/browser'
 
 @Component({
   inheritAttrs: false
 })
-export default class AppNamedSlider extends Mixins(BrowserMixin) {
+export default class AppNamedSlider extends Vue {
   @VModel({ type: Number, required: true })
   inputValue!: number
 

src/components/widgets/limits/PrinterLimits.vue

@@ -15,7 +15,7 @@
           :max="defaultVelocity"
           :disabled="!klippyReady"
           overridable
-          :locked="isMobileViewport"
+          :locked="isMobileUserAgent"
           :loading="hasWait($waits.onSetVelocity)"
           suffix="mm/s"
           @submit="setVelocity"
@@ -36,7 +36,7 @@
           :step="0.1"
           :disabled="!klippyReady"
           overridable
-          :locked="isMobileViewport"
+          :locked="isMobileUserAgent"
           :loading="hasWait($waits.onSetSquareCornerVelocity)"
           suffix="mm/s"
           @submit="setSquareCornerVelocity"
@@ -59,7 +59,7 @@
           :max="defaultAccel"
           :disabled="!klippyReady"
           overridable
-          :locked="isMobileViewport"
+          :locked="isMobileUserAgent"
           :loading="hasWait($waits.onSetAcceleration)"
           suffix="mm/s²"
           @submit="setAccel"
@@ -79,7 +79,7 @@
           :min="0"
           :max="99"
           :disabled="!klippyReady"
-          :locked="isMobileViewport"
+          :locked="isMobileUserAgent"
           :loading="hasWait($waits.onSetMinimumCruiseRatio)"
           suffix="%"
           @submit="setMinimumCruiseRatio"
@@ -94,7 +94,7 @@
           :max="defaultAccelToDecel"
           :disabled="!klippyReady"
           overridable
-          :locked="isMobileViewport"
+          :locked="isMobileUserAgent"
           :loading="hasWait($waits.onSetAccelToDecel)"
           suffix="mm/s²"
           @submit="setAccelToDecel"

src/components/widgets/outputs/OutputFan.vue

@@ -10,7 +10,7 @@
         customRules.minFan
       ]"
       :disabled="!klippyReady"
-      :locked="isMobileViewport"
+      :locked="isMobileUserAgent"
       :loading="hasWait(`${$waits.onSetFanSpeed}${fan.name}`)"
       @submit="handleChange"
     />

src/components/widgets/outputs/OutputPin.vue

@@ -9,7 +9,7 @@
       :value="value"
       :reset-value="resetValue"
       :disabled="!klippyReady"
-      :locked="isMobileViewport"
+      :locked="isMobileUserAgent"
       :loading="hasWait(`${$waits.onSetOutputPin}${pin.name}`)"
       @submit="handleChange"
     />

src/components/widgets/retract/Retract.vue

@@ -17,7 +17,7 @@
           :step="0.01"
           overridable
           :disabled="!klippyReady"
-          :locked="isMobileViewport"
+          :locked="isMobileUserAgent"
           :loading="hasWait($waits.onSetRetractLength)"
           @submit="setRetractLength"
         />
@@ -38,7 +38,7 @@
           :step="0.01"
           overridable
           :disabled="!klippyReady"
-          :locked="isMobileViewport"
+          :locked="isMobileUserAgent"
           :loading="hasWait($waits.onSetUnretractExtraLength)"
           @submit="setUnRetractExtraLength"
         />
@@ -62,7 +62,7 @@
           :max="maxRetractSpeed"
           overridable
           :disabled="!klippyReady"
-          :locked="isMobileViewport"
+          :locked="isMobileUserAgent"
           :loading="hasWait($waits.onSetRetractSpeed)"
           @submit="setRetractSpeed"
         />
@@ -83,7 +83,7 @@
           :max="maxUnretractSpeed"
           overridable
           :disabled="!klippyReady"
-          :locked="isMobileViewport"
+          :locked="isMobileUserAgent"
           :loading="hasWait($waits.onSetUnretractSpeed)"
           @submit="setUnretractSpeed"
         />
@@ -107,7 +107,7 @@
           :max="maxZHopHeight"
           overridable
           :disabled="!klippyReady"
-          :locked="isMobileViewport"
+          :locked="isMobileUserAgent"
           :loading="hasWait($waits.onSetZHopHeight)"
           @submit="setZHopHeight"
         />

src/components/widgets/toolhead/PressureAdvanceAdjust.vue

@@ -11,7 +11,7 @@
         overridable
         :reset-value="selectedExtruderStepper?.config?.pressure_advance || 0"
         :disabled="!klippyReady"
-        :locked="isMobileViewport"
+        :locked="isMobileUserAgent"
         :loading="hasWait(`${$waits.onSetPressureAdvance}${extruderStepper?.name ?? ''}`)"
         :min="0"
         :max="2"
@@ -29,7 +29,7 @@
         :value="selectedExtruderStepper?.smooth_time || 0"
         :reset-value="selectedExtruderStepper?.config?.pressure_advance_smooth_time || 0"
         :disabled="!klippyReady"
-        :locked="isMobileViewport"
+        :locked="isMobileUserAgent"
         :loading="hasWait(`${$waits.onSetPressureAdvance}${extruderStepper?.name ?? ''}`)"
         :min="0"
         :max="0.2"

src/components/widgets/toolhead/SpeedAndFlowAdjust.vue

@@ -12,7 +12,7 @@
         :reset-value="100"
         :disabled="!klippyReady"
         :loading="hasWait($waits.onSetSpeed)"
-        :locked="isMobileViewport"
+        :locked="isMobileUserAgent"
         :min="1"
         :max="200"
         @submit="handleSetSpeed"
@@ -30,7 +30,7 @@
         :reset-value="100"
         :disabled="!klippyReady"
         :loading="hasWait($waits.onSetFlow)"
-        :locked="isMobileViewport"
+        :locked="isMobileUserAgent"
         :min="1"
         :max="200"
         @submit="handleSetFlow"