chore: clean
This commit is contained in:
Methapon2001
parent
ab41dc981f
commit
0faecf0752
6 changed files with 25 additions and 96 deletions
|
|
@ -1,417 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
// import useOption from 'src/stores/option';
|
||||
|
||||
// const optionStore = useOption();
|
||||
import { getName, getRealm, getRole, isLoggedIn } from 'src/services/keycloak';
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const filterRole = ref<string[]>();
|
||||
|
||||
defineProps<{
|
||||
userImage?: string;
|
||||
}>();
|
||||
|
||||
const inputFile = document.createElement('input');
|
||||
inputFile.type = 'file';
|
||||
inputFile.accept = 'image/*';
|
||||
// const profileFile = ref<File | undefined>(undefined);
|
||||
|
||||
const currentTheme = ref();
|
||||
const options = ref([
|
||||
{
|
||||
icon: 'mdi-account',
|
||||
label: 'editPersonalInfo',
|
||||
value: 'op1',
|
||||
color: 'grey',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-signature-freehand',
|
||||
label: 'signature',
|
||||
value: 'op2',
|
||||
color: 'grey',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-brightness-6',
|
||||
label: 'mode',
|
||||
value: 'op3',
|
||||
color: 'grey',
|
||||
},
|
||||
]);
|
||||
|
||||
const themeMode = ref([
|
||||
{
|
||||
label: 'light',
|
||||
value: 'light',
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
label: 'dark',
|
||||
value: 'dark',
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
label: 'baseOnDevice',
|
||||
value: 'baseOnDevice',
|
||||
isActive: false,
|
||||
},
|
||||
]);
|
||||
|
||||
// inputFile.addEventListener('change', async (e) => {
|
||||
// profileFile.value = await (e.currentTarget as HTMLInputElement).files?.[0];
|
||||
// if (profileFile.value) {
|
||||
// await storageStore.uploadProfile(profileFile.value);
|
||||
// }
|
||||
// userImage.value = (await storageStore.getProfile()) ?? '';
|
||||
// });
|
||||
|
||||
function changeMode(mode: string) {
|
||||
if (mode === 'light') {
|
||||
localStorage.setItem('currentTheme', 'light');
|
||||
themeMode.value[0].isActive = true;
|
||||
themeMode.value[1].isActive = false;
|
||||
themeMode.value[2].isActive = false;
|
||||
currentTheme.value = 'light';
|
||||
$q.dark.set(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'dark') {
|
||||
localStorage.setItem('currentTheme', 'dark');
|
||||
themeMode.value[0].isActive = false;
|
||||
themeMode.value[1].isActive = true;
|
||||
themeMode.value[2].isActive = false;
|
||||
currentTheme.value = 'dark';
|
||||
$q.dark.set(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'baseOnDevice') {
|
||||
localStorage.setItem('currentTheme', 'baseOnDevice');
|
||||
themeMode.value[0].isActive = false;
|
||||
themeMode.value[1].isActive = false;
|
||||
themeMode.value[2].isActive = true;
|
||||
currentTheme.value = 'baseOnDevice';
|
||||
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
) {
|
||||
$q.dark.set(true);
|
||||
} else {
|
||||
$q.dark.set(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function themeChange() {
|
||||
if (themeMode.value[2].isActive) changeMode('baseOnDevice');
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
window
|
||||
.matchMedia('(prefers-color-scheme: dark)')
|
||||
.removeEventListener('change', themeChange);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
window
|
||||
.matchMedia('(prefers-color-scheme: dark)')
|
||||
.addEventListener('change', themeChange);
|
||||
// if (isLoggedIn()) {
|
||||
// userImage.value = (await storageStore.getProfile()) ?? '';
|
||||
// }
|
||||
currentTheme.value = localStorage.getItem('currentTheme');
|
||||
if (
|
||||
currentTheme.value === 'light' ||
|
||||
currentTheme.value === 'dark' ||
|
||||
currentTheme.value === 'baseOnDevice'
|
||||
) {
|
||||
changeMode(currentTheme.value);
|
||||
} else {
|
||||
changeMode('light');
|
||||
}
|
||||
|
||||
const userRoles = getRole();
|
||||
if (userRoles) {
|
||||
filterRole.value = userRoles
|
||||
.filter(
|
||||
(role) =>
|
||||
role !== 'default-roles-' + getRealm() &&
|
||||
role !== 'offline_access' &&
|
||||
role !== 'uma_authorization',
|
||||
)
|
||||
.map((role) =>
|
||||
role.replace(/_/g, ' ').replace(/^./, (match) => match.toUpperCase()),
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<q-btn
|
||||
rounded
|
||||
dense
|
||||
flat
|
||||
no-caps
|
||||
color="dark"
|
||||
class="q-pa-none account-menu-down dropdown-menu"
|
||||
>
|
||||
<div class="row items-center">
|
||||
<div class="q-pa-none">
|
||||
<q-avatar
|
||||
class="surface-1 bordered"
|
||||
:size="$q.screen.lt.sm ? '30px' : '40px'"
|
||||
>
|
||||
<img :src="userImage" v-if="userImage" />
|
||||
<q-icon
|
||||
name="mdi-account"
|
||||
v-else
|
||||
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-left q-px-md"
|
||||
v-if="$q.screen.gt.sm"
|
||||
style="color: var(--foreground)"
|
||||
>
|
||||
<div class="text-caption column">
|
||||
<span
|
||||
v-if="isLoggedIn()"
|
||||
class="text-weight-bold ellipsis"
|
||||
style="max-width: 9vw"
|
||||
>
|
||||
{{ getName() }}
|
||||
<q-tooltip>
|
||||
{{ getName() }}
|
||||
</q-tooltip>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-weight-bold q-pb-xs ellipsis"
|
||||
style="max-width: 9vw"
|
||||
>
|
||||
{{ 'Guest' }}
|
||||
<q-tooltip>
|
||||
{{ 'Guest' }}
|
||||
</q-tooltip>
|
||||
</span>
|
||||
|
||||
<div style="font-size: 11px">
|
||||
{{ filterRole?.join(' | ') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="$q.screen.gt.sm" class="text-right">
|
||||
<q-icon name="mdi-chevron-down" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-menu :offset="[5, 10]">
|
||||
<div
|
||||
no-padding
|
||||
class="row justify-center bordered rounded"
|
||||
style="overflow: hidden"
|
||||
>
|
||||
<div class="column col-12 items-center">
|
||||
<div
|
||||
class="full-width row justify-center"
|
||||
style="position: relative"
|
||||
>
|
||||
<div
|
||||
class="full-width account-cover"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
></div>
|
||||
<div class="avartar-border">
|
||||
<q-avatar
|
||||
id="changeAvatar"
|
||||
size="72px"
|
||||
class="surface-1 bordered"
|
||||
:class="{ 'hover-profile': isLoggedIn() }"
|
||||
@click="
|
||||
() => {
|
||||
isLoggedIn() ? inputFile.click() : '';
|
||||
}
|
||||
"
|
||||
>
|
||||
<img :src="userImage" v-if="userImage" />
|
||||
<q-icon name="mdi-account" v-else />
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-subtitle2 q-mb-xs text-center"
|
||||
style="margin-top: 58px"
|
||||
>
|
||||
<span v-if="isLoggedIn()">
|
||||
{{ getName() }}
|
||||
</span>
|
||||
<span v-else>{{ 'Guest' }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="badge q-px-sm q-mb-md text-caption"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
>
|
||||
{{ filterRole?.join(' | ') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-12">
|
||||
<q-separator />
|
||||
<div class="column justify-center">
|
||||
<q-list :dense="true" v-for="op in options" :key="op.label">
|
||||
<q-item
|
||||
v-if="op.label !== 'mode'"
|
||||
clickable
|
||||
:id="`btn-${op.label}`"
|
||||
@click="$emit(op.label)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||
</q-item-section>
|
||||
<q-item-section class="q-py-sm">
|
||||
{{ $t(op.label) }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-separator v-if="op.label === 'mode'" />
|
||||
<q-item
|
||||
v-if="op.label === 'mode'"
|
||||
clickable
|
||||
:id="`btn-${op.label}`"
|
||||
@click="$emit(op.label)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||
</q-item-section>
|
||||
<q-item-section class="q-py-sm">
|
||||
<div class="row justify-between">
|
||||
<span>
|
||||
{{ $t(op.label) }}
|
||||
</span>
|
||||
<span class="app-text-muted-2">
|
||||
{{ $t(currentTheme) }}
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</span>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
||||
<q-menu
|
||||
class="bordered rounded"
|
||||
anchor="top right"
|
||||
self="top left"
|
||||
max-width="200"
|
||||
:offset="[10, 0]"
|
||||
style="width: 160px"
|
||||
>
|
||||
<div v-for="(mode, index) in themeMode" :key="index">
|
||||
<q-item
|
||||
clickable
|
||||
@click="
|
||||
() => {
|
||||
changeMode(mode.value);
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row justify-between">
|
||||
<span>
|
||||
{{ $t(mode.label) }}
|
||||
</span>
|
||||
<q-icon v-if="mode.isActive" name="mdi-check" />
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-menu>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<q-separator />
|
||||
<q-btn
|
||||
v-if="isLoggedIn()"
|
||||
no-caps
|
||||
dense
|
||||
unelevated
|
||||
class="q-ma-md app-text-negative"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
:label="$t('logout')"
|
||||
@click="$emit('logout')"
|
||||
id="btn-logout"
|
||||
style="background-color: hsla(var(--negative-bg) / 0.1)"
|
||||
v-close-popup
|
||||
/>
|
||||
<q-btn
|
||||
v-else
|
||||
no-caps
|
||||
dense
|
||||
color="primary"
|
||||
unelevated
|
||||
class="q-ma-md app-text-negative"
|
||||
:label="$t('login')"
|
||||
@click="$emit('login')"
|
||||
id="btn-login"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.account-menu-down {
|
||||
& ::before {
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.avartar-border {
|
||||
margin-top: 24px;
|
||||
border: 5px solid var(--surface-1);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.account-cover {
|
||||
height: 65px;
|
||||
background-color: var(--indigo-0);
|
||||
|
||||
&.dark {
|
||||
background-color: var(--surface-3);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
border-radius: var(--radius-6);
|
||||
background-color: var(--indigo-0);
|
||||
text-wrap: nowrap;
|
||||
|
||||
&.dark {
|
||||
background-color: var(--surface-3);
|
||||
}
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
color: hsl(var(--negative-bg));
|
||||
background-color: hsl(var(--stone-3-hsl));
|
||||
|
||||
&.dark {
|
||||
background-color: transparent;
|
||||
border: 1px solid hsl(var(--negative-bg));
|
||||
}
|
||||
}
|
||||
|
||||
.hover-profile:hover {
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
|
||||
const selector = defineModel('selector');
|
||||
|
||||
defineProps<{
|
||||
list: {
|
||||
label: string;
|
||||
count: number;
|
||||
}[];
|
||||
clickable?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<AppBox bordered>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="v in list"
|
||||
:key="v.label"
|
||||
class="rounded"
|
||||
:class="v.count === 0 ? 'disable-item' : ''"
|
||||
:clickable="v.count > 0 || clickable"
|
||||
:active="selector === v.label"
|
||||
:active-class="
|
||||
selector === v.label
|
||||
? $q.dark.isActive
|
||||
? 'active dark'
|
||||
: 'active'
|
||||
: ''
|
||||
"
|
||||
@click="selector = v.label"
|
||||
>
|
||||
<div class="row full-width items-center justify-between">
|
||||
<div>
|
||||
{{ $t(v.label) }}
|
||||
</div>
|
||||
<div class="dot text-weight-bold">{{ v.count }}</div>
|
||||
</div>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</AppBox>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.active {
|
||||
color: hsl(var(--info-fg)) !important;
|
||||
background-color: hsl(var(--info-bg));
|
||||
|
||||
.dot {
|
||||
background-color: hsla(var(--info-bg));
|
||||
border: 1px solid hsl(var(--info-bg));
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: transparent;
|
||||
border: 1px solid hsl(var(--info-bg));
|
||||
}
|
||||
}
|
||||
|
||||
.q-item {
|
||||
align-items: center;
|
||||
border: 1px solid transparent;
|
||||
min-height: 0;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.disable-item {
|
||||
color: hsl(var(--text-mute));
|
||||
|
||||
.dot {
|
||||
color: hsl(var(--text-mute));
|
||||
border: 1px solid transparent;
|
||||
background-color: hsla(var(--text-mute) / 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
margin-block: 3px;
|
||||
background-color: hsla(var(--info-bg) / 0.1);
|
||||
border: 1px solid transparent;
|
||||
color: hsl(var(--info-bg));
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
22
src/components/index.ts
Normal file
22
src/components/index.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
export { default as AddButton } from './AddButton.vue';
|
||||
export { default as AllAroundBtn } from './AllAroundBtn.vue';
|
||||
export { default as ButtonAddCompoent } from './ButtonAddCompoent.vue';
|
||||
export { default as CanvasComponent } from './CanvasComponent.vue';
|
||||
export { default as DialogForm } from './DialogForm.vue';
|
||||
export { default as DrawerComponent } from './DrawerComponent.vue';
|
||||
export { default as DrawerInfo } from './DrawerInfo.vue';
|
||||
export { default as FormDialog } from './FormDialog.vue';
|
||||
export { default as GlobalDialog } from './GlobalDialog.vue';
|
||||
export { default as GlobalLoading } from './GlobalLoading.vue';
|
||||
export { default as ImageUploadDialog } from './ImageUploadDialog.vue';
|
||||
export { default as ItemCard } from './ItemCard.vue';
|
||||
export { default as NoData } from './NoData.vue';
|
||||
export { default as PaginationComponent } from './PaginationComponent.vue';
|
||||
export { default as ProfileBanner } from './ProfileBanner.vue';
|
||||
export { default as ProfileUpload } from './ProfileUpload.vue';
|
||||
export { default as SideMenu } from './SideMenu.vue';
|
||||
export { default as StatCardComponent } from './StatCardComponent.vue';
|
||||
export { default as TabComponent } from './TabComponent.vue';
|
||||
export { default as TooltipComponent } from './TooltipComponent.vue';
|
||||
export { default as TreeCompoent } from './TreeCompoent.vue';
|
||||
export { default as UsersDetailCardComponent } from './UsersDetailCardComponent.vue';
|
||||
Loading…
Add table
Add a link
Reference in a new issue