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

ux/public/_assets/icons/ultraviolet-small-icons.svg

+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 40 40" width="80px" height="80px"><path fill="#98ccfd" d="M28.5 1.5H38.5V11.5H28.5z"/><path fill="#4788c7" d="M38,2v9h-9V2H38 M39,1H28v11h11V1L39,1z"/><path fill="#fff" d="M36 3A1 1 0 1 0 36 5 1 1 0 1 0 36 3zM2.5 1.5H12.5V11.5H2.5z"/><path fill="#4788c7" d="M12,2v9H3V2H12 M13,1H2v11h11V1L13,1z"/><path fill="#b6dcfe" d="M2.5 27.5H12.5V37.5H2.5z"/><path fill="#4788c7" d="M12,28v9H3v-9H12 M13,27H2v11h11V27L13,27z"/><path fill="#dff0fe" d="M2.5 14.5H12.5V24.5H2.5z"/><path fill="#4788c7" d="M12,15v9H3v-9H12 M13,14H2v11h11V14L13,14z"/><path fill="#98ccfd" d="M5.025 17.025H9.975000000000001V21.974999999999998H5.025z" transform="rotate(-45.001 7.5 19.5)"/><path fill="#98ccfd" d="M5.025 17.025H9.975000000000001V21.974999999999998H5.025zM9.363 6.432L7.5 8.161 10.062 11 12 11 12 8.886zM10 3A1 1 0 1 0 10 5 1 1 0 1 0 10 3z"/><path fill="#b6dcfe" d="M10.617 11L3 11 3 8.75 6 5.75z"/><path fill="#fff" d="M15.5 14.5H25.5V24.5H15.5z"/><path fill="#4788c7" d="M25,15v9h-9v-9H25 M26,14H15v11h11V14L26,14z"/><path fill="#98ccfd" d="M22.363 19.432L20.5 21.161 23.062 24 25 24 25 21.886zM23 16A1 1 0 1 0 23 18 1 1 0 1 0 23 16z"/><path fill="#b6dcfe" d="M23.617 24L16 24 16 21.75 19 18.75z"/><path fill="#fff" d="M7.5 32.5l-1.02-1.699C6.005 30.008 6.576 29 7.5 29h0c.924 0 1.495 1.008 1.02 1.801L7.5 32.5zM7.5 32.5l1.02 1.699C8.995 34.992 8.424 36 7.5 36h0c-.924 0-1.495-1.008-1.02-1.801L7.5 32.5z"/><path fill="#fff" d="M7.5 32.5l-1.981.033c-.924.016-1.512-.983-1.05-1.783l0 0c.462-.8 1.621-.791 2.069.017L7.5 32.5zM7.5 32.5l1.981-.033c.924-.016 1.512.983 1.05 1.783h0c-.462.8-1.621.791-2.069-.017L7.5 32.5z"/><path fill="#fff" d="M7.5 32.5l-.962 1.733C6.09 35.041 4.931 35.05 4.469 34.25h0c-.462-.8.126-1.799 1.05-1.783L7.5 32.5zM7.5 32.5l.962-1.733c.449-.808 1.607-.818 2.069-.017l0 0c.462.8-.126 1.799-1.05 1.783L7.5 32.5z"/><path fill="#b6dcfe" d="M7.5 31A1.5 1.5 0 1 0 7.5 34 1.5 1.5 0 1 0 7.5 31zM28.5 27.5H38.5V37.5H28.5z"/><path fill="#4788c7" d="M38,28v9h-9v-9H38 M39,27H28v11h11V27L39,27z"/><path fill="#fff" d="M33.5 32.5l-1.02-1.699C32.005 30.008 32.576 29 33.5 29h0c.924 0 1.495 1.008 1.02 1.801L33.5 32.5zM33.5 32.5l1.02 1.699C34.995 34.992 34.424 36 33.5 36h0c-.924 0-1.495-1.008-1.02-1.801L33.5 32.5z"/><path fill="#fff" d="M33.5 32.5l-1.981.033c-.924.016-1.512-.983-1.05-1.783l0 0c.462-.8 1.621-.791 2.069.017L33.5 32.5zM33.5 32.5l1.981-.033c.924-.016 1.512.983 1.05 1.783h0c-.462.8-1.621.791-2.069-.017L33.5 32.5z"/><path fill="#fff" d="M33.5 32.5l-.962 1.733c-.449.808-1.607.818-2.069.017h0c-.462-.8.126-1.799 1.05-1.783L33.5 32.5zM33.5 32.5l.962-1.733c.449-.808 1.607-.818 2.069-.017l0 0c.462.8-.126 1.799-1.05 1.783L33.5 32.5z"/><path fill="#b6dcfe" d="M33.5 31A1.5 1.5 0 1 0 33.5 34A1.5 1.5 0 1 0 33.5 31Z"/><path fill="#fff" d="M7.5 18A1.5 1.5 0 1 0 7.5 21A1.5 1.5 0 1 0 7.5 18Z"/><path fill="#dff0fe" d="M28.5 14.5H38.5V24.5H28.5z"/><path fill="#4788c7" d="M38,15v9h-9v-9H38 M39,14H28v11h11V14L39,14z"/><path fill="#98ccfd" d="M31.025 17.025H35.975V21.974999999999998H31.025z" transform="rotate(-45.001 33.5 19.5)"/><path fill="#98ccfd" d="M31.025 17.025H35.975V21.974999999999998H31.025z"/><path fill="#fff" d="M33.5 18A1.5 1.5 0 1 0 33.5 21A1.5 1.5 0 1 0 33.5 18Z"/><path fill="#dff0fe" d="M15.5 1.5H25.5V11.5H15.5z"/><path fill="#4788c7" d="M25,2v9h-9V2H25 M26,1H15v11h11V1L26,1z"/><path fill="#98ccfd" d="M18.025 4.025H22.974999999999998V8.975000000000001H18.025z" transform="rotate(-45.001 20.5 6.5)"/><path fill="#98ccfd" d="M18.025 4.025H22.974999999999998V8.975000000000001H18.025z"/><path fill="#fff" d="M20.5 5A1.5 1.5 0 1 0 20.5 8 1.5 1.5 0 1 0 20.5 5zM36 8A1 1 0 1 0 36 10 1 1 0 1 0 36 8zM31.5 7A1.5 1.5 0 1 0 31.5 10 1.5 1.5 0 1 0 31.5 7z"/><path fill="#fff" d="M32.5 6A1.5 1.5 0 1 0 32.5 9A1.5 1.5 0 1 0 32.5 6Z"/><path fill="#fff" d="M34.5 7A1.5 1.5 0 1 0 34.5 10A1.5 1.5 0 1 0 34.5 7Z"/><path fill="#fff" d="M31.5 8H34.5V10H31.5z"/><path fill="#fff" d="M34.5 9H36V10H34.5z" transform="rotate(-180 35.25 9.5)"/><g><path fill="#98ccfd" d="M15.5 27.5H25.5V37.5H15.5z"/><path fill="#4788c7" d="M25,28v9h-9v-9H25 M26,27H15v11h11V27L26,27z"/></g><path fill="#fff" d="M23 29A1 1 0 1 0 23 31 1 1 0 1 0 23 29zM23 34A1 1 0 1 0 23 36 1 1 0 1 0 23 34zM18.5 33A1.5 1.5 0 1 0 18.5 36 1.5 1.5 0 1 0 18.5 33z"/><path fill="#fff" d="M19.5 32A1.5 1.5 0 1 0 19.5 35A1.5 1.5 0 1 0 19.5 32Z"/><path fill="#fff" d="M21.5 33A1.5 1.5 0 1 0 21.5 36A1.5 1.5 0 1 0 21.5 33Z"/><path fill="#fff" d="M18.5 34H21.5V36H18.5z"/><path fill="#fff" d="M21.5 35H23V36H21.5z" transform="rotate(-180 22.25 35.5)"/></svg>
\ No newline at end of file

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

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

ux/src/css/app.scss

@@ -192,6 +192,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
-        }
+  // 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
   }
-    `,
-    fetchPolicy: 'network-only'
-  })
-  state.extensions = cloneDeep(resp?.data?.systemExtensions)
-  $q.loading.hide()
-  state.loading--
 }
 
 // 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 {