feat: admin icons pack (wip) + translucent dropdown menus

ux/src/components/AccountMenu.vue

@@ -9,7 +9,7 @@ q-btn.q-ml-md(flat, round, dense, color='grey')
     size='32px'
     )
     img(:src='`/_user/` + userStore.id + `/avatar`')
-  q-menu(auto-close)
+  q-menu.translucent-menu(auto-close)
     q-card(flat, style='width: 300px;', :dark='false')
       q-card-section(align='center')
         .text-subtitle1.text-grey-7 {{userStore.name}}
@@ -47,3 +47,7 @@ const userStore = useUserStore()
 
 const { t } = useI18n()
 </script>
+
+<style lang="scss">
+
+</style>

ux/src/components/PageNewMenu.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-q-menu(
+q-menu.translucent-menu(
   auto-close
   anchor='bottom right'
   self='top right'

ux/src/css/app.scss

@@ -191,6 +191,24 @@ body::-webkit-scrollbar-thumb {
   }
 }
 
+// ------------------------------------------------------------------
+// DROPDOWN MENUS
+// ------------------------------------------------------------------
+
+.translucent-menu {
+  @at-root .body--light & {
+    background-color: rgba(255,255,255,.9);
+  }
+  @at-root .body--dark & {
+    background-color: rgba($dark,.7);
+  }
+  backdrop-filter: blur(10px);
+
+  > .q-card {
+    background-color: transparent !important;
+  }
+}
+
 // ------------------------------------------------------------------
 // LOADING ANIMATIONS
 // ------------------------------------------------------------------

ux/src/i18n/locales/en.json

@@ -1558,5 +1558,9 @@
   "welcome.admin": "Administration Area",
   "welcome.createHome": "Create the homepage",
   "welcome.subtitle": "Let's get started...",
-  "welcome.title": "Welcome to Wiki.js!"
+  "welcome.title": "Welcome to Wiki.js!",
+  "admin.icons.warnLabel": "Enabling additional icon packs can significantly increase page load times!",
+  "admin.icons.warnHint": "Only activate the icon packs you actually use.",
+  "admin.icons.reference": "Reference",
+  "admin.icons.mandatory": "Used by the system and cannot be disabled."
 }

ux/src/layouts/AdminLayout.vue

@@ -348,6 +348,7 @@ onMounted(async () => {
 .admin-overlay {
   > .q-dialog__backdrop {
     background-color: rgba(0,0,0,.6);
+    backdrop-filter: blur(5px);
   }
   > .q-dialog__inner {
     padding: 24px 64px;
@@ -364,7 +365,7 @@ onMounted(async () => {
         background-image: linear-gradient(to bottom, $dark-4 10px, $dark-4 11px, $dark-3);
       }
       border-radius: 6px;
-      box-shadow: 0 0 0 2px rgba(0,0,0,.5);
+      box-shadow: 0 0 0 1px rgba(0,0,0,.5);
     }
   }
 }

ux/src/layouts/MainLayout.vue

@@ -171,6 +171,7 @@ body.body--dark {
 .main-overlay {
   > .q-dialog__backdrop {
     background-color: rgba(0,0,0,.6);
+    backdrop-filter: blur(5px);
   }
   > .q-dialog__inner {
     padding: 24px 64px;
@@ -187,7 +188,7 @@ body.body--dark {
         background-image: linear-gradient(to bottom, $dark-4 10px, $dark-4 11px, $dark-3);
       }
       border-radius: 6px;
-      box-shadow: 0 0 0 2px rgba(0,0,0,.5);
+      box-shadow: 0 0 0 1px rgba(0,0,0,.5);
     }
   }
 }

ux/src/pages/AdminIcons.vue

@@ -15,17 +15,80 @@ q-page.admin-icons
         target='_blank'
         type='a'
         )
-      q-btn.acrylic-btn(
+      q-btn.acrylic-btn.q-mr-sm(
         icon='las la-redo-alt'
         flat
         color='secondary'
         :loading='state.loading > 0'
         @click='load'
         )
+      q-btn(
+        unelevated
+        icon='fa-solid fa-check'
+        :label='t(`common.actions.apply`)'
+        color='secondary'
+        @click='save'
+        :disabled='state.loading > 0'
+      )
   q-separator(inset)
   .row.q-pa-md.q-col-gutter-md
     .col-12
-      q-card.shadow-1 Beep boop
+      q-card.shadow-1
+        q-card-section
+          q-card.bg-negative.text-white.rounded-borders(flat)
+            q-card-section.items-center(horizontal)
+              q-card-section.col-auto.q-pr-none
+                q-icon(name='las la-exclamation-triangle', size='sm')
+              q-card-section
+                span {{ t('admin.icons.warnLabel') }}
+                .text-caption.text-red-1 {{ t('admin.icons.warnHint') }}
+        q-list(separator)
+          q-item(v-for='pack of combinedPacks', :key='pack.key')
+            blueprint-icon(icon='small-icons', :hueRotate='140')
+            q-item-section
+              q-item-label: strong {{pack.label}}
+              q-item-label(caption, v-if='pack.isMandatory')
+                em {{t('admin.icons.mandatory')}}
+            template(v-if='pack.config')
+              q-item-section(
+                side
+                )
+                q-btn(
+                  icon='las la-cog'
+                  :label='t(`admin.editors.configuration`)'
+                  :color='$q.dark.isActive ? `blue-grey-3` : `blue-grey-8`'
+                  outline
+                  no-caps
+                  padding='xs md'
+                )
+              q-separator.q-ml-md(vertical)
+            q-item-section(
+              side
+              )
+              q-btn(
+                type='a'
+                icon='las la-external-link-square-alt'
+                :label='t(`admin.icons.reference`)'
+                color='indigo'
+                outline
+                no-caps
+                padding='xs md'
+                :href='pack.website'
+                target='_blank'
+                rel='noreferrer noopener'
+              )
+            q-separator.q-ml-md(vertical)
+            q-item-section(side)
+              q-toggle.q-pr-sm(
+                :modelValue='pack.isActive'
+                @update:model-value='newValue => setPackState(pack.key, newValue)'
+                :color='pack.isDisabled ? `grey` : `primary`'
+                checked-icon='las la-check'
+                unchecked-icon='las la-times'
+                :label='t(`admin.sites.isActive`)'
+                :aria-label='t(`admin.sites.isActive`)'
+                :disabled='pack.isMandatory'
+                )
 
 </template>
 
@@ -62,32 +125,96 @@ useMeta({
 
 const state = reactive({
   loading: false,
-  extensions: []
+  config: {
+    la: { isActive: true }
+  }
+})
+
+const packs = [
+  {
+    key: 'bs',
+    label: 'Bootstrap Icons',
+    website: 'https://icons.getbootstrap.com'
+  },
+  {
+    key: 'eva',
+    label: 'Eva Icons',
+    website: 'https://akveo.github.io/eva-icons'
+  },
+  {
+    key: 'fa',
+    label: 'Font Awesome',
+    website: 'https://fontawesome.com',
+    isMandatory: true,
+    config: {}
+  },
+  {
+    key: 'io',
+    label: 'Ionicons',
+    website: 'https://ionic.io/ionicons'
+  },
+  {
+    key: 'la',
+    label: 'Line Awesome',
+    isMandatory: true,
+    website: 'https://icons8.com/line-awesome'
+  },
+  {
+    key: 'mdi',
+    label: 'Material Design Icons',
+    website: 'https://materialdesignicons.com',
+    config: {}
+  },
+  {
+    key: 'thm',
+    label: 'Themify Icons',
+    website: 'https://themify.me/themify-icons'
+  }
+]
+
+// COMPUTED
+
+const combinedPacks = computed(() => {
+  return packs.map(p => ({
+    ...p,
+    isActive: (state.config?.[p.key]?.isActive || p.isMandatory) ?? false
+  }))
 })
 
 // METHODS
 
 async function load () {
-  state.loading++
-  $q.loading.show()
-  const resp = await APOLLO_CLIENT.query({
-    query: gql`
-      query fetchExtensions {
-        systemExtensions {
-          key
-          title
-          description
-          isInstalled
-          isInstallable
-          isCompatible
-        }
-      }
-    `,
-    fetchPolicy: 'network-only'
-  })
-  state.extensions = cloneDeep(resp?.data?.systemExtensions)
-  $q.loading.hide()
-  state.loading--
+  // state.loading++
+  // $q.loading.show()
+  // const resp = await APOLLO_CLIENT.query({
+  //   query: gql`
+  //     query fetchExtensions {
+  //       systemExtensions {
+  //         key
+  //         title
+  //         description
+  //         isInstalled
+  //         isInstallable
+  //         isCompatible
+  //       }
+  //     }
+  //   `,
+  //   fetchPolicy: 'network-only'
+  // })
+  // state.extensions = cloneDeep(resp?.data?.systemExtensions)
+  // $q.loading.hide()
+  // state.loading--
+}
+
+async function save () {
+
+}
+
+function setPackState (packKey, newValue) {
+  state.config[packKey] = {
+    ...state.config[packKey] ?? {},
+    isActive: newValue
+  }
 }
 
 // MOUNTED
@@ -103,6 +230,14 @@ onMounted(() => {
   &-icon {
     animation: fadeInLeft .6s forwards, flower-rotate 30s linear infinite;
   }
+
+  &-packlink {
+    color: $blue-8;
+
+    &:hover, &:focus {
+      color: $blue-4;
+    }
+  }
 }
 
 @keyframes flower-rotate {