From 41390233c1657d7953082751e77eecd68636161e Mon Sep 17 00:00:00 2001
From: Marco Crapts <marco.crapts@kpn.com>
Date: Fri, 26 May 2023 19:21:27 +0200
Subject: [PATCH] more ui components

---
 components.d.ts                     |  1 +
 src/App.vue                         | 10 ++++-----
 src/components/TopBar/Hamburger.vue | 32 ++++++++++++++++++++++-------
 src/components/TopBar/Settings.vue  |  3 ++-
 src/components/ui/UIAlert.vue       | 18 ++++++++++++++++
 src/components/ui/UIButton.vue      |  9 ++++++--
 6 files changed, 57 insertions(+), 16 deletions(-)
 create mode 100644 src/components/ui/UIAlert.vue

diff --git a/components.d.ts b/components.d.ts
index 93e984d..650dd6c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
     SkeletonTopBar: typeof import('./src/components/Skeleton/SkeletonTopBar.vue')['default']
     Spinner: typeof import('./src/components/Spinner.vue')['default']
     TopBar: typeof import('./src/components/TopBar.vue')['default']
+    UIAlert: typeof import('./src/components/ui/UIAlert.vue')['default']
     UIButton: typeof import('./src/components/ui/UIButton.vue')['default']
     UIButtonGroup: typeof import('./src/components/ui/UIButtonGroup.vue')['default']
     UIDropdown: typeof import('./src/components/ui/UIDropdown.vue')['default']
diff --git a/src/App.vue b/src/App.vue
index 12341af..5a97eaf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -110,12 +110,10 @@ provide('loading', loading)
           v-model="passphrase"
         />
       </form>
-      <div class="alert alert-error mt-4 flex-row" v-if="passphraseValid === false">
-        <div>
-          <i class="fa-solid fa-triangle-exclamation"></i>
-          The passphrase you entered is incorrect.
-        </div>
-      </div>
+      <UIAlert color="error" class="mt-4">
+        <i class="fa-solid fa-triangle-exclamation"></i>
+        The passphrase you entered is incorrect.
+      </UIAlert>
     </template>
     <template #actions="{ close }">
       <UIButton color="primary" size="sm" @click="submitPassphrase(close)">Submit</UIButton>
diff --git a/src/components/TopBar/Hamburger.vue b/src/components/TopBar/Hamburger.vue
index 66afa03..955bc06 100644
--- a/src/components/TopBar/Hamburger.vue
+++ b/src/components/TopBar/Hamburger.vue
@@ -8,12 +8,10 @@ const emit = defineEmits<{
 }>()
 </script>
 <template>
-  <label class="swap-rotate swap btn-ghost btn-sm btn-circle btn">
-    <input
-      type="checkbox"
-      @click="emit('toggleSideBar')"
-      :checked="!props.sideBarCollapsed"
-    />
+  <label
+    class="btn-ghost btn-sm btn-circle btn relative inline-grid cursor-pointer select-none place-content-center"
+  >
+    <input type="checkbox" @click="emit('toggleSideBar')" :checked="!props.sideBarCollapsed" />
     <svg
       class="swap-off fill-current"
       xmlns="http://www.w3.org/2000/svg"
@@ -37,7 +35,27 @@ const emit = defineEmits<{
   </label>
 </template>
 <style scoped lang="scss">
-.swap > * {
+input {
+  appearance: none;
+}
+label > * {
   transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: transform, opacity;
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
+input:checked ~ .swap-off {
+  opacity: 0;
+  transform: rotate(-45deg);
+}
+
+input:checked ~ .swap-on {
+  opacity: 1;
+  transform: rotate(0deg);
+}
+.swap-on {
+  opacity: 0;
+  transform: rotate(45deg);
 }
 </style>
diff --git a/src/components/TopBar/Settings.vue b/src/components/TopBar/Settings.vue
index 032a2e9..93c950f 100644
--- a/src/components/TopBar/Settings.vue
+++ b/src/components/TopBar/Settings.vue
@@ -26,7 +26,7 @@ const handleClick = (fn: (...args: any[]) => any) => {
   <OnClickOutside>
     <UIDropdown class="search-active-hide">
       <template #activator>
-        <UIButton size="sm" variant="outline" tabindex="0" class="py-1 text-white">
+        <UIButton :dropdown="true" size="sm" variant="outline" class="py-1 text-white">
           <i class="fa-fw fa-solid fa-user-gear" />
         </UIButton>
       </template>
@@ -34,6 +34,7 @@ const handleClick = (fn: (...args: any[]) => any) => {
         <UIDropdownItem
           v-for="source in availableNotesSources.filter((source) => source !== activeNotesSource)"
           :key="source"
+          @click="handleClick(() => (preferredNotesSource = source))"
         >
           <i class="fa-fw fa-solid fa-database" />
           {{ sourceLabels[source] }}
diff --git a/src/components/ui/UIAlert.vue b/src/components/ui/UIAlert.vue
new file mode 100644
index 0000000..bfeec4e
--- /dev/null
+++ b/src/components/ui/UIAlert.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+interface Props {
+  color?: 'info' | 'success' | 'warning' | 'error'
+}
+const props = withDefaults(defineProps<Props>(), {
+  color: 'info'
+})
+
+const styleClass = computed(() => {
+  const colorClass = `alert-${props.color}`
+  return [colorClass]
+})
+</script>
+<template>
+  <div class="alert shadow-lg" :class="styleClass">
+    <div><slot></slot></div>
+  </div>
+</template>
diff --git a/src/components/ui/UIButton.vue b/src/components/ui/UIButton.vue
index b05f92c..f625708 100644
--- a/src/components/ui/UIButton.vue
+++ b/src/components/ui/UIButton.vue
@@ -3,12 +3,14 @@ interface Props {
   size?: string
   variant?: 'regular' | 'outline'
   color?: string
+  dropdown?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: 'md',
   variant: 'regular',
-  color: 'regular'
+  color: 'regular',
+  dropdown: false
 })
 
 const styleClass = computed(() => {
@@ -19,5 +21,8 @@ const styleClass = computed(() => {
 })
 </script>
 <template>
-  <button class="btn duration-0" :class="styleClass"><slot></slot></button>
+  <label class="btn duration-0" :class="styleClass" v-if="props.dropdown" tabindex="0">
+    <slot></slot>
+  </label>
+  <button class="btn duration-0" :class="styleClass" v-else><slot></slot></button>
 </template>