From e68837342b1347e5393d94b6de8dc9c6629602ae Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Thu, 18 Apr 2024 23:47:18 +0500
Subject: [PATCH] Fix Progress and Toggle components (#5401)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 packages/ui/src/components/Progress.svelte | 21 ++++++++++-----------
 packages/ui/src/components/Toggle.svelte   |  5 ++++-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/Progress.svelte b/packages/ui/src/components/Progress.svelte
index c96aad6c38..7abcf7a908 100644
--- a/packages/ui/src/components/Progress.svelte
+++ b/packages/ui/src/components/Progress.svelte
@@ -24,8 +24,8 @@
   export let editable = false
 
   $: proc = (max - min) / 100
-  if (value > max) value = max
-  if (value < min) value = min
+  $: if (value > max) value = max
+  $: if (value < min) value = min
 
   const dispatch = createEventDispatcher()
 
@@ -38,10 +38,10 @@
   function calcValue (e: MouseEvent): void {
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
     const x = e.clientX - rect.left
-    const pos = x / rect.width
-    value = (max - min) * pos
-    if (value > max) value = max
-    if (value < min) value = min
+    let pos = x / rect.width
+    if (pos > 100) pos = 100
+    if (pos < 0) pos = 0
+    value = (max - min) * pos + min
   }
 
   function save (): void {
@@ -57,6 +57,8 @@
   }
 
   let drag: boolean = false
+
+  $: position = proc !== 0 ? Math.round((value - min) / proc) : 0
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -66,9 +68,7 @@
     class="bar"
     style="background-color: {color !== undefined
       ? getPlatformColor(color, $themeStore.dark)
-      : 'var(--theme-toggle-on-bg-color)'}; width: calc(100% * {proc !== 0
-        ? Math.round((value - min) / proc)
-        : 0} / 100);"
+      : 'var(--theme-toggle-on-bg-color)'}; width: calc(100% * {position} / 100 + 0.5rem);"
   />
   {#if editable}
     <div
@@ -76,7 +76,7 @@
       on:mousedown={() => {
         drag = true
       }}
-      style="left: calc(100% * {proc !== 0 ? Math.round((value - min) / proc) : 0} / 100 - 0.5rem);"
+      style="left: calc(100% * {position} / 100 - 0.5rem);"
     />
   {/if}
 </div>
@@ -84,7 +84,6 @@
 <style lang="scss">
   .container {
     position: relative;
-    width: 100%;
     height: 0.25rem;
     background-color: var(--trans-content-10);
     border-radius: 0.125rem;
diff --git a/packages/ui/src/components/Toggle.svelte b/packages/ui/src/components/Toggle.svelte
index 366aedc5b1..284ff7cf53 100644
--- a/packages/ui/src/components/Toggle.svelte
+++ b/packages/ui/src/components/Toggle.svelte
@@ -14,14 +14,17 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
+  import { LabelAndProps } from '../types'
+  import { tooltip } from '../tooltips'
 
   export let on: boolean = false
   export let disabled: boolean = false
+  export let showTooltip: LabelAndProps | undefined = undefined
 
   const dispatch = createEventDispatcher()
 </script>
 
-<label class="toggle">
+<label class="toggle" use:tooltip={showTooltip}>
   <input
     class="chBox"
     type="checkbox"