Merge pull request #8328 from systeminit/jobelenus/label-action-toggle

Add label for actions panel toggle

Author: jobelenus

app/web/src/newhotness/ActionWidget.vue

@@ -9,13 +9,19 @@
     "
     @click="clickHandler"
   >
-    <Toggle :selected="!!props.actionId" class="flex-none" />
     <StatusIndicatorIcon type="action" :status="actionPrototypeView.kind" tone="inherit" class="flex-none" />
     <div class="font-bold leading-normal text-sm">
       {{ actionPrototypeView.displayName || actionPrototypeView.name }}
     </div>
 
-    <Icon v-if="actionBifrosting" name="loader" class="ml-auto" size="sm" />
+    <Toggle
+      :selected="!!props.actionId"
+      class="flex-none ml-auto"
+      onLabel="Queued"
+      offLabel="UnQueued"
+      labelWidth="w-[70px]"
+    />
+    <Icon v-if="actionBifrosting" name="loader" size="sm" />
   </div>
 </template>
 

lib/vue-lib/src/design-system/general/Toggle.vue

@@ -1,31 +1,43 @@
 <template>
-  <div
-    :class="
-      clsx(
-        size === 'sm' ? 'w-6 h-4' : 'w-9 h-6',
-        'cursor-pointer flex-none flex items-center  rounded-full p-1 duration-300 ease-in-out',
-        props.selected
-          ? themeClasses('bg-action-300', 'bg-action-500')
-          : themeClasses('bg-neutral-400', 'bg-neutral-500'),
-      )
-    "
-    @click="click"
-  >
+  <div :class="clsx('flex flex-row items-center')">
     <div
       :class="
         clsx(
-          'bg-white rounded-full shadow-md transform duration-300 ease-in-out',
-          size === 'sm'
-            ? [
-                'w-3 h-3',
-                props.selected
-                  ? 'translate-x-[0.35rem]'
-                  : 'translate-x-[-0.1rem]',
-              ]
-            : ['w-4 h-4', props.selected ? 'translate-x-3' : ''],
+          size === 'sm' ? 'w-6 h-4' : 'w-9 h-6',
+          'cursor-pointer flex-none flex items-center  rounded-full p-1 duration-300 ease-in-out',
+          props.selected
+            ? themeClasses('bg-action-300', 'bg-action-500')
+            : themeClasses('bg-neutral-400', 'bg-neutral-500'),
         )
       "
-    ></div>
+      @click="click"
+    >
+      <div
+        :class="
+          clsx(
+            'bg-white rounded-full shadow-md transform duration-300 ease-in-out',
+            size === 'sm'
+              ? [
+                  'w-3 h-3',
+                  props.selected
+                    ? 'translate-x-[0.35rem]'
+                    : 'translate-x-[-0.1rem]',
+                ]
+              : ['w-4 h-4', props.selected ? 'translate-x-3' : ''],
+          )
+        "
+      ></div>
+    </div>
+    <span
+      :class="clsx('px-1 text-xs', props.labelWidth)"
+      v-if="props.onLabel && props.selected"
+      >{{ props.onLabel }}</span
+    >
+    <span
+      :class="clsx('px-1 text-xs', props.labelWidth)"
+      v-if="props.offLabel && !props.selected"
+      >{{ props.offLabel }}</span
+    >
   </div>
 </template>
 
@@ -40,5 +52,8 @@ const props = defineProps({
   size: { type: String, default: "md" },
   selected: { type: Boolean },
   click: { type: Function as PropType<clickFn>, default: () => {} },
+  onLabel: { type: String, required: false },
+  offLabel: { type: String, required: false },
+  labelWidth: { type: String, required: false, default: "" },
 });
 </script>