MORE-Platform#264: Unified the toggles and moved the buttons in one line

Author: janoliver20

src/components/dialog/ObservationDialog.vue

@@ -34,7 +34,7 @@ Licensed under the Elastic License 2.0. */
   import MultiSelect from 'primevue/multiselect';
   import { useObservationGroupStore } from '../../stores/observationGroupStore';
   import VisibilityToggle from '../subComponents/VisibilityToggle.vue';
-  import ReminderToggle from '../subComponents/ReminderToggle.vue';
+  import ObservationToggle from '../subComponents/ObservationToggle.vue';
 
   const { handleToastErrors, showErrorToast } = useToastService();
   const dialog = useDialog();
@@ -407,19 +407,23 @@ Licensed under the Elastic License 2.0. */
       </div>
 
       <div class="col-start-0 buttons col-span-8 mt-1 grid grid-cols-2">
-        <div class="flex flex-col flex-wrap gap-3">
-          <VisibilityToggle
+        <div class="flex flex-wrap gap-3 justify-items-center">
+          <ObservationToggle
             v-model="hidden"
             :editable="editable"
             :changeable="factory.visibility.changeable"
             :info-text="$t('observation.dialog.msg.hiddenInfo')"
             :label="$t(`observation.props.hidden.${hidden}`)"
+            enabled-icon="pi-eye-slash"
+            disabled-icon="pi-eye"
           />
-          <ReminderToggle
+          <ObservationToggle
             v-model="reminder"
             :editable="editable"
             :info-text="$t('observation.dialog.msg.reminderInfo')"
             :label="$t(`observation.props.reminder.${reminder}`)"
+            enabled-icon="pi-bell"
+            disabled-icon="pi-bell-slash"
           />
         </div>
         <div class="flex flex-row items-center justify-end text-right">

…ponents/subComponents/ReminderToggle.vue …ents/subComponents/ObservationToggle.vuesrc/components/subComponents/ReminderToggle.vue renamed to src/components/subComponents/ObservationToggle.vue src/components/subComponents/ReminderToggle.vue renamed to src/components/subComponents/ObservationToggle.vue

@@ -1,23 +1,31 @@
 <script setup lang="ts">
+  import { computed } from 'vue';
+
   interface Props {
     modelValue: boolean;
     editable?: boolean;
+    changeable?: boolean;
     infoText?: string;
     label?: string;
+    enabledIcon: string;
+    disabledIcon: string;
   }
 
   const props = withDefaults(defineProps<Props>(), {
     editable: true,
+    changeable: true,
     infoText: '',
     label: undefined,
   });
 
+  const isInteractive = computed(() => props.editable && props.changeable);
+
   const emit = defineEmits<{
     (e: 'update:modelValue', value: boolean): void;
   }>();
 
-  function toggleReminder(): void {
-    if (props.editable) {
+  function toggleValue(): void {
+    if (isInteractive.value) {
       emit('update:modelValue', !props.modelValue);
     }
   }
@@ -26,13 +34,13 @@
 <template>
   <div
     class="info-box relative flex cursor-pointer flex-row items-center"
-    :class="{ 'cursor-not-allowed': !editable }"
+    :class="{ 'cursor-not-allowed': !isInteractive }"
   >
-    <div v-if="editable" class="flex items-center" @click="toggleReminder">
+    <div v-if="isInteractive" class="flex items-center" @click="toggleValue">
       <div class="icon-box reminder">
         <span
           class="pi cursor-pointer"
-          :class="modelValue ? 'pi-bell' : 'pi-bell-slash'"
+          :class="modelValue ? `${enabledIcon}` : `${disabledIcon}`"
         />
       </div>
     </div>
@@ -41,37 +49,41 @@
         class="pi"
         :class="
           modelValue
-            ? 'pi-bell color-approved'
-            : 'pi-bell-slash color-important'
+            ? `${enabledIcon} color-approved`
+            : `${disabledIcon} color-important`
         "
       />
     </div>
-    <div v-if="infoText" class="inline">
-      <div
-        class="info-box-hidden pointer-events-none absolute bottom-full right-0 bg-white p-5 text-center opacity-0"
-      >
-        {{ infoText }}
-      </div>
-    </div>
     <span v-if="label" class="ml-2 inline">
       <slot name="label">
         {{ label }}
       </slot>
     </span>
     <i
       class="pi pi-info-circle color-primary mx-1"
-      :class="{ 'me-2': editable }"
+      :class="{ 'me-2': isInteractive }"
     />
+    <div
+      v-if="infoText"
+      class="info-box-hidden pointer-events-none absolute bottom-full bg-white p-5 text-center opacity-0"
+    >
+      {{ infoText }}
+    </div>
   </div>
 </template>
 
 <style scoped lang="postcss">
   .info-box {
     &-hidden {
-      width: 20vw;
+      width: max-content;
+      max-width: 300px;
       border: 1px solid var(--bluegray-200);
       transition: ease-in-out opacity 0.25s;
       box-shadow: 1px 1px 5px var(--bluegray-200);
+      left: 0;
+      white-space: normal;
+      z-index: 100000;
+      margin-bottom: 0.5rem;
     }
 
     &:hover {