[layout] Fixed some more icons

This commit is contained in:
Ferdinand Thiessen 2021-04-03 13:24:19 +02:00
parent 66dd33dc25
commit ecb0649594
3 changed files with 24 additions and 45 deletions

View File

@ -11,7 +11,7 @@
@clear="dateTime = ''" @clear="dateTime = ''"
> >
<template #append> <template #append>
<q-icon v-if="'date' || type == 'datetime'" name="event" class="cursor-pointer"> <q-icon v-if="'date' || type == 'datetime'" name="mdi-calendar" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale"> <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-date v-model="date" mask="YYYY-MM-DD"> <q-date v-model="date" mask="YYYY-MM-DD">
<div class="row items-center justify-end"> <div class="row items-center justify-end">

View File

@ -25,7 +25,7 @@ export default defineComponent({
setup(props, { emit, attrs }) { setup(props, { emit, attrs }) {
const isPassword = ref(true); const isPassword = ref(true);
const type = computed(() => (isPassword.value ? 'password' : 'text')); const type = computed(() => (isPassword.value ? 'password' : 'text'));
const name = computed(() => (isPassword.value ? 'visibility_off' : 'visibility')); const name = computed(() => (isPassword.value ? 'mdi-eye-off' : 'mdi-eye'));
const password = computed({ const password = computed({
get: () => props.modelValue, get: () => props.modelValue,
set: (value: string) => emit('update:modelValue', value), set: (value: string) => emit('update:modelValue', value),

View File

@ -1,15 +1,8 @@
<template> <template>
<q-layout view="hHh lpr lFf"> <q-layout view="hHh Lpr lff">
<q-header elevated class="bg-primary text-white"> <q-header elevated class="bg-primary text-white">
<q-toolbar> <q-toolbar>
<q-btn <q-btn dense flat round icon="mdi-menu" @click="openMenu" />
v-if="!leftDrawerOpen"
dense
flat
round
icon="menu"
@click="leftDrawerOpen = !leftDrawerOpen"
/>
<q-toolbar-title> <q-toolbar-title>
<router-link :to="{ name: 'dashboard' }" style="text-decoration: none; color: inherit"> <router-link :to="{ name: 'dashboard' }" style="text-decoration: none; color: inherit">
@ -50,12 +43,11 @@
</q-header> </q-header>
<q-drawer <q-drawer
v-model="leftDrawerOpen" v-model="leftDrawer"
show-if-above
side="left" side="left"
bordered bordered
:mini="leftDrawerMini" :mini="leftDrawerMini"
@click.capture="leftDrawerClicker" @click.capture="openMenu"
> >
<!-- Plugins --> <!-- Plugins -->
<q-list> <q-list>
@ -66,28 +58,13 @@
/> />
<q-separator /> <q-separator />
<!-- Plugin functions --> <!-- Plugin functions -->
<essential-link <essential-link
v-for="(entry, index) in subLinks" v-for="(entry, index) in subLinks"
:key="'childPlugin' + index" :key="'childPlugin' + index"
:entry="entry" :entry="entry"
/> />
</q-list> </q-list>
<div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
<q-btn
size="sm"
dense
round
unelevated
color="secondary"
icon="mdi-menu-left"
@click="leftDrawerMini = true"
/>
</div>
<q-separator /> <q-separator />
<essential-link <essential-link
v-for="(entry, index) in essentials" v-for="(entry, index) in essentials"
:key="'essential' + index" :key="'essential' + index"
@ -126,7 +103,7 @@ export default defineComponent({
const router = useRouter(); const router = useRouter();
const mainStore = useMainStore(); const mainStore = useMainStore();
const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist'); const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
const leftDrawer = ref(false); const leftDrawer = ref(true);
const leftDrawerMini = ref(false); const leftDrawerMini = ref(false);
const shortcuts = flaschengeist?.shortcuts || []; const shortcuts = flaschengeist?.shortcuts || [];
const mainLinks = flaschengeist?.menuLinks || []; const mainLinks = flaschengeist?.menuLinks || [];
@ -135,25 +112,27 @@ export default defineComponent({
const useNative = 'Notification' in window && window.Notification !== undefined; const useNative = 'Notification' in window && window.Notification !== undefined;
const noPermission = ref(!useNative || window.Notification.permission !== 'granted'); const noPermission = ref(!useNative || window.Notification.permission !== 'granted');
const subLinks = computed(() => {
const matched = router.currentRoute.value.matched[1];
return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
});
onBeforeMount(() => { onBeforeMount(() => {
polling.value = window.setInterval(() => pollNotification(), config.pollingInterval); polling.value = window.setInterval(() => pollNotification(), config.pollingInterval);
pollNotification(); pollNotification();
}); });
onBeforeUnmount(() => window.clearInterval(polling.value)); onBeforeUnmount(() => window.clearInterval(polling.value));
const leftDrawerOpen = computed({ function openMenu(event: { target: HTMLInputElement }) {
get: () => (leftDrawer.value || Screen.gt.sm ? true : false), if (event.target.nodeName === 'DIV') leftDrawerMini.value = false;
set: (val: boolean) => (leftDrawer.value = val), else {
}); if (!leftDrawer.value || leftDrawerMini.value) {
leftDrawer.value = true;
const subLinks = computed(() => {
const matched = router.currentRoute.value.matched[1];
return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
});
function leftDrawerClicker() {
if (leftDrawerMini.value) {
leftDrawerMini.value = false; leftDrawerMini.value = false;
} else {
leftDrawerMini.value = Screen.gt.sm && !leftDrawerMini.value;
leftDrawer.value = leftDrawerMini.value;
}
} }
} }
@ -188,13 +167,13 @@ export default defineComponent({
return { return {
essentials, essentials,
leftDrawerOpen, leftDrawer,
leftDrawerMini, leftDrawerMini,
leftDrawerClicker,
logout, logout,
mainLinks, mainLinks,
notifications, notifications,
noPermission, noPermission,
openMenu,
remove, remove,
requestPermission, requestPermission,
shortcuts, shortcuts,