Merge pull request #235 from Perdolique/231-account-entry-point

Account entry point and PerdMenu refactoring
Perdolique · Nov 21, 2024 · 6595e9a · 6595e9a
2 parents 1549f4e + a1c2abe
commit 6595e9a
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 41 deletions.
diff --git a/app/components/PageHeader.vue b/app/components/PageHeader.vue
@@ -10,19 +10,35 @@
       />
     </button>
 
-    <PerdButton
+    <PerdMenu
       v-if="isAuthenticated"
-      :class="$style.button"
-      @click="removeAuthSession"
-      small
+      :class="$style.profileMenu"
     >
-      Log out
-    </PerdButton>
+      <template #trigger="{ toggleMenu, isMenuVisible }">
+        <button
+          :class="[$style.profileTrigger, { active: isMenuVisible }]"
+          @click="toggleMenu"
+        >
+          <Icon
+            name="tabler:user"
+            size="1.5em"
+          />
+        </button>
+      </template>
+
+      <OptionButton
+        icon="tabler:logout"
+        @click="removeAuthSession"
+      >
+        Log out
+      </OptionButton>
+    </PerdMenu>
   </nav>
 </template>
 
 <script lang="ts" setup>
-  import PerdButton from '~/components/PerdButton.vue';
+  import PerdMenu from '~/components/PerdMenu.vue';
+  import OptionButton from '~/components/PerdMenu/OptionButton.vue';
 
   const { isAuthenticated, resetAuthentication } = useUserStore()
   const { toggleSidebarMobile } = useAppState()
@@ -77,7 +93,30 @@
     }
   }
 
-  .button {
+  .profileMenu {
     margin-left: auto;
   }
+
+  .profileTrigger {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    padding: var(--spacing-8);
+    border-radius: var(--border-radius-12);
+    color: var(--text);
+    background-color: transparent;
+    outline: none;
+    transition: background-color var(--transition-time-quick);
+
+
+    &:focus-visible,
+    &:hover {
+      background-color: var(--background-200);
+    }
+
+    &:global(.active),
+    &:active {
+      background-color: var(--background-300);
+    }
+  }
 </style>
diff --git a/app/components/PerdMenu.vue b/app/components/PerdMenu.vue
@@ -3,14 +3,11 @@
     ref="rootRef"
     :class="$style.component"
   >
-    <PerdButton
-      secondary
-      small
-      :icon="icon"
-      @click.passive="toggleMenu"
-    >
-      {{ text }}
-    </PerdButton>
+    <slot
+      name="trigger"
+      :toggle-menu="toggleMenu"
+      :is-menu-visible="isMenuVisible"
+    />
 
     <div
       :class="[$style.menu, {
@@ -24,14 +21,6 @@
 
 <script lang="ts" setup>
   import { onClickOutside } from '@vueuse/core';
-  import PerdButton from './PerdButton.vue';
-
-  interface Props {
-    readonly icon: string;
-    readonly text: string;
-  }
-
-  defineProps<Props>()
 
   const isMenuVisible = ref(false)
   const rootRef = useTemplateRef('rootRef')
@@ -42,8 +31,6 @@
 
   onClickOutside(rootRef, () => {
     isMenuVisible.value = false
-  }, {
-    ignore: ['dialog']
   });
 </script>
 

diff --git a/app/components/PerdToast.vue b/app/components/PerdToast.vue
@@ -60,6 +60,7 @@
 
 <style module>
   .component {
+    pointer-events: auto; /* Parent element has pointer-events: none */
     position: relative;
     max-width: 400px;
     display: grid;

diff --git a/app/components/PerdToaster.vue b/app/components/PerdToaster.vue
@@ -48,6 +48,7 @@
 <style module>
   .component {
     position: fixed;
+    pointer-events: none;
     top: 0;
     right: 0;
     padding: var(--spacing-24);

diff --git a/app/components/checklists/ChecklistItem.vue b/app/components/checklists/ChecklistItem.vue
@@ -10,9 +10,9 @@
     />
 
     <div :class="$style.name">
-      <temlplate v-if="checkMode">
+      <template v-if="checkMode">
         {{ item.equipment.name }}
-      </temlplate>
+      </template>
 
       <PerdLink
         v-else

diff --git a/app/pages/checklists/[checklistId].vue b/app/pages/checklists/[checklistId].vue
@@ -12,10 +12,18 @@
           Reset
         </PerdButton>
 
-        <PerdMenu
-          icon="tabler:settings"
-          text="Options"
-        >
+        <PerdMenu>
+          <template #trigger="{ toggleMenu }">
+            <PerdButton
+              small
+              secondary
+              icon="tabler:settings"
+              @click="toggleMenu"
+            >
+              Options
+            </PerdButton>
+          </template>
+
           <OptionButton
             icon="tabler:trash"
             @click="showDeleteConfirmation"

diff --git a/app/pages/equipment/item/[itemId]/index.vue b/app/pages/equipment/item/[itemId]/index.vue
@@ -1,11 +1,18 @@
 <template>
   <PageContent :page-title="itemName">
     <template #actions>
-      <PerdMenu
-        v-if="user.isAdmin"
-        icon="tabler:adjustments"
-        text="Manage"
-      >
+      <PerdMenu v-if="user.isAdmin">
+        <template #trigger="{ toggleMenu }">
+          <PerdButton
+            small
+            secondary
+            icon="tabler:adjustments"
+            @click="toggleMenu"
+          >
+            Manage
+          </PerdButton>
+        </template>
+
         <OptionButton
           icon="tabler:pencil"
           @click="onEdit"
@@ -127,6 +134,7 @@
   import OptionButton from '~/components/PerdMenu/OptionButton.vue';
   import PerdTag from '~/components/PerdTag.vue';
   import ConfirmationDialog from '~/components/dialogs/ConfirmationDialog.vue';
+  import PerdButton from '~/components/PerdButton.vue';
 
   definePageMeta({
     layout: 'page'

diff --git a/app/pages/manager/equipment/index.vue b/app/pages/manager/equipment/index.vue
@@ -10,10 +10,18 @@
           Add item
         </PerdButton>
 
-        <PerdMenu
-          icon="tabler:link"
-          text="Manage"
-        >
+        <PerdMenu>
+          <template #trigger="{ toggleMenu }">
+            <PerdButton
+              small
+              secondary
+              icon="tabler:link"
+              @click="toggleMenu"
+            >
+              Manage
+            </PerdButton>
+          </template>
+
           <OptionButton
             icon="tabler:tag"
             @click="handleTypesClick"