review feedback

vatesfr · Nov 12, 2024 · 3f428b5 · 3f428b5
1 parent 298ba43
commit 3f428b5
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 96 deletions.
diff --git a/...ories/web-core/toggle/ui-toggle.story.vue → ...es/web-core/ui/toggle/ui-toggle.story.vue b/...ories/web-core/toggle/ui-toggle.story.vue → ...es/web-core/ui/toggle/ui-toggle.story.vue
diff --git a/@xen-orchestra/web-core/lib/components/ui/loader/UiLoader.vue b/@xen-orchestra/web-core/lib/components/ui/loader/UiLoader.vue
@@ -2,7 +2,6 @@
 
 <!-- v2 -->
 <template>
-  <div>
   <svg class="ui-loader" fill="none" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <linearGradient :id="secondHalfId">
@@ -15,13 +14,12 @@
       </linearGradient>
     </defs>
 
-      <g stroke-width="40">
-        <path :stroke="`url(#${secondHalfId})`" d="M 30 200 A 170 170 180 0 1 370 200" />
-        <path :stroke="`url(#${firstHalfId})`" d="M 370 200 A 170 170 0 0 1 30 200" />
-        <path d="M 30 200 A 170 170 180 0 1 30 200" stroke="currentColor" stroke-linecap="round" />
-      </g>
-    </svg>
-  </div>
+    <g stroke-width="40">
+      <path :stroke="`url(#${secondHalfId})`" d="M 30 200 A 170 170 180 0 1 370 200" />
+      <path :stroke="`url(#${firstHalfId})`" d="M 370 200 A 170 170 0 0 1 30 200" />
+      <path d="M 30 200 A 170 170 180 0 1 30 200" stroke="currentColor" stroke-linecap="round" />
+    </g>
+  </svg>
 </template>
 
 <script lang="ts" setup>
@@ -33,7 +31,6 @@ const secondHalfId = uniqueId('spinner-second-half-')
 
 <style lang="postcss" scoped>
 .ui-loader {
-  display: flex;
   width: 1.2em;
   height: 1.2em;
   animation: rotate 1s linear infinite;

diff --git a/@xen-orchestra/web-core/lib/components/ui/toggle/UiToggle.vue b/@xen-orchestra/web-core/lib/components/ui/toggle/UiToggle.vue
@@ -1,140 +1,116 @@
 <!-- v2 -->
 <template>
-  <label class="ui-toggle" v-bind="wrapperAttrs">
-    <span class="typo c2-semi-bold">
-      <slot />
-    </span>
-    <input v-model="toggleModel" :disabled="isDisabled || busy" type="checkbox" class="input" v-bind="attrs" />
-    <span class="fake-checkbox" :class="{ busy }">
-      <VtsIcon :busy accent="success" :icon="faCircle" class="icon" />
+  <label class="ui-toggle typo c2-semi-bold">
+    <slot />
+    <span class="toggle-container">
+      <input v-model="checked" :disabled="isDisabled || busy" class="input" type="checkbox" />
+      <span :class="{ checked }" class="toggle-icon">
+        <UiLoader :class="{ visible: busy }" class="spinner" />
+      </span>
     </span>
   </label>
 </template>
 
 <script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
-import { faCircle } from '@fortawesome/free-solid-svg-icons'
-import { type HTMLAttributes, useAttrs } from 'vue'
-
-defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
     busy?: boolean
-    wrapperAttrs?: HTMLAttributes
   }>(),
   { disabled: undefined }
 )
 
-const toggleModel = defineModel<boolean>()
+const checked = defineModel<boolean>()
 
 defineSlots<{
   default(): any
 }>()
 
-const attrs = useAttrs()
-
 const isDisabled = useContext(DisabledContext, () => props.disabled)
 </script>
 
 <style lang="postcss" scoped>
 .ui-toggle {
-  position: relative;
-  display: flex;
-  align-items: center;
+  display: inline-flex;
   gap: 1.6rem;
+  align-items: center;
 
-  .fake-checkbox {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  .toggle-container {
+    --transition-timing: 0.25s ease-in-out;
+    --border-color: var(--color-neutral-txt-secondary);
     height: 2rem;
     width: 4rem;
     background-color: var(--color-neutral-background-primary);
+    border: 0.1rem solid var(--border-color);
+    border-radius: 1rem;
     transition:
-      background-color 0.125s ease-in-out,
-      border-color 0.125s ease-in-out;
-    border: 0.1rem solid var(--color-neutral-txt-secondary);
-    border-radius: 9rem;
-
-    .icon {
-      font-size: 1.7rem;
-      position: absolute;
-      color: var(--color-neutral-background-primary);
-      border: 0.1rem solid var(--color-neutral-txt-secondary);
-      border-radius: 9rem;
-      transition: transform 0.125s ease-in-out;
-      transform: translateX(-1.02rem);
+      background-color var(--transition-timing),
+      border-color var(--transition-timing);
+
+    &:has(input:disabled) {
+      --border-color: var(--color-neutral-border);
+      background-color: var(--color-neutral-background-disabled);
+      cursor: not-allowed;
     }
-  }
 
-  .input {
-    font-size: inherit;
-    position: absolute;
-    pointer-events: none;
-    opacity: 0;
+    &:has(input:checked) {
+      background-color: var(--color-success-item-base);
+    }
 
-    &:focus-visible + .fake-checkbox {
+    &:has(input:checked:disabled) {
+      background-color: var(--color-success-item-disabled);
+    }
+
+    &:has(input:focus-visible) {
       outline: none;
 
-      &::before {
-        content: '';
+      &::after {
         position: absolute;
+        content: '';
         inset: -0.5rem;
         border: 0.2rem solid var(--color-normal-txt-base);
         border-radius: 0.4rem;
       }
     }
+  }
 
-    &:checked + .fake-checkbox > .icon {
-      transform: translateX(1.02rem);
-    }
-
-    &:checked + .fake-checkbox {
-      border-color: var(--color-neutral-txt-secondary);
-      background-color: var(--color-success-item-base);
-    }
+  .input {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+  }
 
-    &:disabled {
-      & + .fake-checkbox {
-        border-color: var(--color-neutral-border);
-        background-color: var(--color-neutral-background-disabled);
-        cursor: not-allowed;
-
-        .icon {
-          border-color: var(--color-neutral-border);
-          color: var(--color-neutral-background-primary);
-        }
-
-        &.busy {
-          border-color: var(--color-neutral-border);
-          background-color: var(--color-neutral-background-disabled);
-
-          .icon {
-            color: var(--color-normal-item-base);
-            border: 0.1rem solid var(--color-neutral-border);
-            background-color: var(--color-neutral-background-primary);
-            font-size: 1.4rem;
-            transform: translateX(-1.05rem);
-          }
-        }
-      }
+  .toggle-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.4rem;
+    width: 2rem;
+    height: 2rem;
+    margin: -0.1rem 0 0 -0.1rem;
+    color: var(--color-info-txt-base);
+    background-color: var(--color-neutral-background-primary);
+    border: 0.1rem solid var(--border-color);
+    border-radius: 1rem;
+    transition:
+      transform var(--transition-timing),
+      border-color var(--transition-timing);
 
-      &:checked + .fake-checkbox {
-        background-color: var(--color-success-item-disabled);
+    &.checked {
+      transform: translateX(2rem);
+    }
+  }
 
-        &.busy {
-          border-color: var(--color-neutral-border);
-          background-color: var(--color-success-item-disabled);
+  .spinner {
+    opacity: 0;
+    transition: opacity var(--transition-timing);
 
-          .icon {
-            transform: translateX(1.05rem);
-          }
-        }
-      }
+    &.visible {
+      opacity: 1;
     }
   }
 }