From 6d1086539e890b3a5282f8176efe864fb927b05c Mon Sep 17 00:00:00 2001
From: Thierry Goettelmann <thierry@byscripts.info>
Date: Thu, 15 Sep 2022 11:51:17 +0200
Subject: [PATCH] feat(lite/component): UiActionButton component (#6386)

---
 .../lite/src/components/CollectionFilter.vue  |  9 +--
 .../src/components/CollectionFilterRow.vue    | 22 ++----
 .../lite/src/components/CollectionSorter.vue  |  9 +--
 .../lite/src/components/ui/UiActionButton.vue | 73 +++++++++++++++++++
 4 files changed, 84 insertions(+), 29 deletions(-)
 create mode 100644 @xen-orchestra/lite/src/components/ui/UiActionButton.vue

diff --git a/@xen-orchestra/lite/src/components/CollectionFilter.vue b/@xen-orchestra/lite/src/components/CollectionFilter.vue
index 89791def6..71b67aaa4 100644
--- a/@xen-orchestra/lite/src/components/CollectionFilter.vue
+++ b/@xen-orchestra/lite/src/components/CollectionFilter.vue
@@ -9,9 +9,9 @@
       {{ filter }}
     </UiFilter>
 
-    <UiButton :icon="faPlus" class="add-filter" color="secondary" @click="open">
+    <UiActionButton :icon="faPlus" class="add-filter" @click="open">
       {{ $t("add-filter") }}
-    </UiButton>
+    </UiActionButton>
   </UiFilterGroup>
 
   <UiModal v-if="isOpen">
@@ -63,6 +63,7 @@ import { computed, ref } from "vue";
 import type { Filters, NewFilter } from "@/types/filter";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import CollectionFilterRow from "@/components/CollectionFilterRow.vue";
+import UiActionButton from "@/components/ui/UiActionButton.vue";
 import UiBadge from "@/components/ui/UiBadge.vue";
 import UiButton from "@/components/ui/UiButton.vue";
 import UiButtonGroup from "@/components/ui/UiButtonGroup.vue";
@@ -161,10 +162,6 @@ const handleCancel = () => {
 </script>
 
 <style lang="postcss" scoped>
-.add-filter {
-  height: 3.4rem;
-}
-
 .properties {
   font-size: 1.6rem;
   margin-top: 1rem;
diff --git a/@xen-orchestra/lite/src/components/CollectionFilterRow.vue b/@xen-orchestra/lite/src/components/CollectionFilterRow.vue
index 3c973fff1..d65d15154 100644
--- a/@xen-orchestra/lite/src/components/CollectionFilterRow.vue
+++ b/@xen-orchestra/lite/src/components/CollectionFilterRow.vue
@@ -62,20 +62,12 @@
         </FormWidget>
       </template>
     </template>
-    <UiButton
+    <UiActionButton
       v-if="!newFilter.isAdvanced"
-      color="secondary"
       @click="enableAdvancedMode"
-    >
-      <FontAwesomeIcon :icon="faPencil" />
-    </UiButton>
-    <UiButton
-      class="remove"
-      color="secondary"
-      @click="emit('remove', newFilter.id)"
-    >
-      <FontAwesomeIcon :icon="faRemove" class="remove-icon" />
-    </UiButton>
+      :icon="faPencil"
+    />
+    <UiActionButton @click="emit('remove', newFilter.id)" :icon="faRemove" />
   </div>
 </template>
 
@@ -93,7 +85,7 @@ import type {
 import { faPencil, faRemove } from "@fortawesome/free-solid-svg-icons";
 import { useVModel } from "@vueuse/core";
 import FormWidget from "@/components/FormWidget.vue";
-import UiButton from "@/components/ui/UiButton.vue";
+import UiActionButton from "@/components/ui/UiActionButton.vue";
 import { buildComplexMatcherNode } from "@/libs/complex-matcher.utils";
 import { getFilterIcon } from "@/libs/utils";
 
@@ -259,10 +251,6 @@ const valueInputAfter = computed(() => {
   }
 }
 
-.remove-icon {
-  color: var(--color-red-vates-base);
-}
-
 .form-widget-advanced {
   flex: 1;
 }
diff --git a/@xen-orchestra/lite/src/components/CollectionSorter.vue b/@xen-orchestra/lite/src/components/CollectionSorter.vue
index 32617882b..f27d99631 100644
--- a/@xen-orchestra/lite/src/components/CollectionSorter.vue
+++ b/@xen-orchestra/lite/src/components/CollectionSorter.vue
@@ -12,9 +12,9 @@
       </span>
     </UiFilter>
 
-    <UiButton :icon="faPlus" class="add-sort" color="secondary" @click="open">
+    <UiActionButton :icon="faPlus" class="add-sort" @click="open">
       {{ $t("add-sort") }}
-    </UiButton>
+    </UiActionButton>
   </UiFilterGroup>
 
   <UiModal v-if="isOpen">
@@ -59,6 +59,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import FormWidget from "@/components/FormWidget.vue";
 import UiButton from "@/components/ui/UiButton.vue";
+import UiActionButton from "@/components/ui/UiActionButton.vue";
 import UiButtonGroup from "@/components/ui/UiButtonGroup.vue";
 import UiFilter from "@/components/ui/UiFilter.vue";
 import UiFilterGroup from "@/components/ui/UiFilterGroup.vue";
@@ -99,10 +100,6 @@ const handleCancel = () => {
 </script>
 
 <style lang="postcss" scoped>
-.add-sort {
-  height: 3.4rem;
-}
-
 .form-widgets {
   display: flex;
   gap: 1rem;
diff --git a/@xen-orchestra/lite/src/components/ui/UiActionButton.vue b/@xen-orchestra/lite/src/components/ui/UiActionButton.vue
new file mode 100644
index 000000000..901a56405
--- /dev/null
+++ b/@xen-orchestra/lite/src/components/ui/UiActionButton.vue
@@ -0,0 +1,73 @@
+<template>
+  <button
+    :class="{
+      busy: isBusy,
+      disabled: isDisabled,
+      active,
+      'has-icon': icon !== undefined,
+    }"
+    :disabled="isBusy || isDisabled"
+    type="button"
+    class="ui-action-button"
+  >
+    <UiIcon :busy="isBusy" :icon="icon" />
+    <slot />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, unref } from "vue";
+import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from "@/components/ui/UiIcon.vue";
+
+const props = withDefaults(
+  defineProps<{
+    busy?: boolean;
+    disabled?: boolean;
+    icon?: IconDefinition;
+    active?: boolean;
+  }>(),
+  { busy: undefined, disabled: undefined }
+);
+
+const isGroupBusy = inject("isButtonGroupBusy", false);
+const isBusy = computed(() => props.busy ?? unref(isGroupBusy));
+
+const isGroupDisabled = inject("isButtonGroupDisabled", false);
+const isDisabled = computed(() => props.disabled ?? unref(isGroupDisabled));
+</script>
+
+<style lang="postcss" scoped>
+.ui-action-button {
+  font-size: 1.6rem;
+  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 4.4rem;
+  padding: 0 1.5rem;
+  border: none;
+  border-radius: 0.8rem;
+  gap: 1rem;
+  background-color: var(--background-color-primary);
+
+  &.disabled {
+    color: var(--color-blue-scale-400);
+  }
+
+  &:not(.disabled) {
+    color: var(--color-blue-scale-200);
+
+    &:hover {
+      background-color: var(--background-color-secondary);
+    }
+
+    &:active,
+    &.active,
+    &.busy {
+      color: var(--color-extra-blue-base);
+      background-color: var(--background-color-extra-blue);
+    }
+  }
+}
+</style>