Skip to content

W
wiki-js
You need to sign in or sign up before continuing.
Unverified Commit 4e34151d authored by Nicolas Giard's avatar Nicolas Giard
Browse files
Options

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

parent 0fd57490
Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 28 deletions
ux/public/_assets/icons/ultraviolet-small-icons.svg 0 → 100644
View file @ 4e34151d
<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
View file @ 4e34151d
......@@ -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
View file @ 4e34151d
<template lang="pug">
q-menu(
q-menu.translucent-menu(
auto-close
anchor='bottom right'
self='top right'
......
ux/src/css/app.scss
View file @ 4e34151d
......@@ -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
View file @ 4e34151d
......@@ -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
View file @ 4e34151d
......@@ -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
View file @ 4e34151d
......@@ -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
View file @ 4e34151d
......@@ -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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment