Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-10 07:48:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

navbar lightmode

Browse Source
This commit is contained in:
Emily
2025-01-14 17:38:33 +01:00
parent 88ebfc188c
commit b733cd2a68
9 changed files with 902 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/app.vue
View File

@@ -16,7 +16,7 @@ const { drawerVisible, hideDrawer, drawerClasses } = useDrawer();
<template> <template>
<div class="w-dvw h-dvh bg-lyx-background-light relative"> <div class="w-dvw h-dvh bg-lyx-lightmode-background-light dark:bg-lyx-background-light relative">
<Transition name="drawer"> <Transition name="drawer">
<LazyDrawerGeneric @onCloseClick="hideDrawer()" :class="drawerClasses" <LazyDrawerGeneric @onCloseClick="hideDrawer()" :class="drawerClasses"

69
dashboard/components/CVerticalNavigation.vue
View File

@@ -23,6 +23,19 @@ type Props = {
sections: Section[] sections: Section[]
} }
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
})
const route = useRoute(); const route = useRoute();
const props = defineProps<Props>(); const props = defineProps<Props>();
@@ -108,7 +121,7 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
</script> </script>
<template> <template>
<div class="CVerticalNavigation border-solid border-[#202020] border-r-[1px] h-full w-[20rem] bg-lyx-background flex shadow-[1px_0_10px_#000000] rounded-r-lg" <div class="CVerticalNavigation border-solid border-[#D9D9E0] dark:border-[#202020] border-r-[1px] h-full w-[20rem] bg-lyx-lightmode-background dark:bg-lyx-background flex shadow-[1px_0_10px_#000000]"
:class="{ :class="{
'absolute top-0 w-full md:w-[20rem] z-[45] open': isOpen, 'absolute top-0 w-full md:w-[20rem] z-[45] open': isOpen,
'hidden lg:flex': !isOpen 'hidden lg:flex': !isOpen
@@ -157,7 +170,7 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
<div class="w-full flex-col px-2"> <div class="w-full flex-col px-2">
<div class="flex mb-2 items-center justify-between"> <div class="flex mb-2 items-center justify-between text-lyx-lightmode-text dark:text-lyx-text">
<div class="poppins text-[.8rem]"> <div class="poppins text-[.8rem]">
Snapshots Snapshots
</div> </div>
@@ -170,7 +183,7 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
</UTooltip> --> </UTooltip> -->
<UTooltip text="Create new snapshot"> <UTooltip text="Create new snapshot">
<LyxUiButton @click="openSnapshotDialog()" type="outlined" class="!px-3 !py-1"> <LyxUiButton @click="openSnapshotDialog()" type="outlined" class="!px-3 !py-1">
<div><i class="fas fa-plus text-[.9rem]"></i></div> <div><i class="fas fa-plus text-[.8rem]"></i></div>
</LyxUiButton> </LyxUiButton>
</UTooltip> </UTooltip>
</div> </div>
@@ -179,11 +192,11 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<USelectMenu :uiMenu="{ <USelectMenu :uiMenu="{
select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter', select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
base: '!bg-lyx-widget', base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget',
option: { option: {
base: 'hover:!bg-lyx-widget-lighter cursor-pointer', base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-widget-lighter' active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
} }
}" class="w-full" v-model="snapshot" :options="snapshotsItems"> }" class="w-full" v-model="snapshot" :options="snapshotsItems">
<template #label> <template #label>
@@ -204,7 +217,8 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
</div> </div>
<div v-if="snapshot" class="flex flex-col text-[.7rem] mt-2"> <div v-if="snapshot" class="flex flex-col text-[.7rem] mt-2">
<div class="flex gap-1 items-center justify-center text-lyx-text-dark"> <div
class="flex gap-1 items-center justify-center text-lyx-lightmode-text-dark dark:text-lyx-text-dark">
<div class="poppins"> <div class="poppins">
{{ new Date(snapshot.from).toLocaleString().split(',')[0].trim() }} {{ new Date(snapshot.from).toLocaleString().split(',')[0].trim() }}
</div> </div>
@@ -237,14 +251,14 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
</div> </div>
<div class="w-full flex mt-4"> <div class="w-full flex mt-4">
<LyxUiButton type="outline" class="w-full text-center text-[.7rem]"> <LyxUiButton type="outline" class="w-full text-center text-[.8rem]">
Export report Export report
</LyxUiButton> </LyxUiButton>
</div> </div>
</div> </div>
<div class="bg-[#202020] h-[1px] w-full"></div> <div class="bg-lyx-lightmode-widget dark:bg-[#202020] h-[1px] w-full"></div>
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
@@ -253,11 +267,11 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
<div v-for="entry of section.entries" :class="{ 'grow flex items-end': entry.grow }"> <div v-for="entry of section.entries" :class="{ 'grow flex items-end': entry.grow }">
<div v-if="(!entry.adminOnly || (userRoles.isAdmin.value && !isAdminHidden))" <div v-if="(!entry.adminOnly || (userRoles.isAdmin.value && !isAdminHidden))"
class="bg-lyx-background w-full cursor-pointer text-lyx-text-dark py-[.35rem] px-2 rounded-lg text-[.95rem] flex items-center" class="bg-lyx-lightmode-background text-lyx-lightmode-text-dark dark:bg-lyx-background dark:text-lyx-text-dark w-full cursor-pointer py-[.35rem] px-2 rounded-lg text-[.95rem] flex items-center"
:class="{ :class="{
'!text-lyx-text-darker pointer-events-none': entry.disabled, '!text-lyx-text-darker pointer-events-none': entry.disabled,
'bg-lyx-background-lighter !text-lyx-text/90': route.path == (entry.to || '#'), 'bg-lyx-lightmode-background-light !text-lyx-lightmode-text dark:bg-lyx-background-lighter dark:!text-lyx-text': route.path == (entry.to || '#'),
'hover:bg-lyx-background-light hover:!text-lyx-text/90': route.path != (entry.to || '#'), 'hover:bg-lyx-lightmode-background-light hover:!text-lyx-lightmode-text dark:hover:bg-lyx-background-light dark:hover:!text-lyx-text': route.path != (entry.to || '#'),
}"> }">
<NuxtLink @click="close() && entry.action?.()" :target="entry.external ? '_blank' : ''" <NuxtLink @click="close() && entry.action?.()" :target="entry.external ? '_blank' : ''"
@@ -281,36 +295,25 @@ const { data: maxProjects } = useFetch("/api/user/max_projects", {
<div class="grow"></div> <div class="grow"></div>
<div class="bg-[#202020] h-[1px] w-full px-4 mb-3"></div> <div class="bg-lyx-lightmode-widget dark:bg-[#202020] h-[1px] w-full px-4 mb-3"></div>
<div class="flex justify-end px-2"> <div class="flex justify-end px-2">
<div class="grow flex gap-3"> <div class="grow flex gap-3">
<!-- <NuxtLink to="https://github.com/litlyx/litlyx" target="_blank"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark"> <div>
<i class="fab fa-github"></i> <i @click="isDark = !isDark" class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark"
</NuxtLink> --> :class="isDark ? 'far fa-moon' : 'far fa-sun'"></i>
<!-- <NuxtLink to="https://discord.gg/9cQykjsmWX" target="_blank" </div>
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fab fa-discord"></i>
</NuxtLink> -->
<NuxtLink to="https://x.com/litlyx" target="_blank"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fab fa-x-twitter"></i>
</NuxtLink>
<!-- <NuxtLink to="https://dev.to/litlyx-org" target="_blank"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fab fa-dev"></i>
</NuxtLink> -->
<NuxtLink to="/admin" v-if="userRoles.isAdmin.value" <NuxtLink to="/admin" v-if="userRoles.isAdmin.value"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark"> class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark">
<i class="fas fa-cat"></i> <i class="far fa-cat"></i>
</NuxtLink> </NuxtLink>
</div> </div>
<UTooltip text="Logout" :popper="{ arrow: true, placement: 'top' }"> <UTooltip text="Logout" :popper="{ arrow: true, placement: 'top' }">
<div @click="onLogout()" class="cursor-pointer hover:text-lyx-text text-lyx-text-dark"> <div @click="onLogout()" class="cursor-pointer hover:text-lyx-lightmode-text text-lyx-lightmode-text-dark dark:hover:text-lyx-text dark:text-lyx-text-dark">
<i class="far fa-arrow-right-from-bracket scale-x-[-100%]"></i> <i class="far fa-arrow-right-from-bracket scale-x-[-100%]"></i>
</div> </div>
</UTooltip> </UTooltip>

6
dashboard/components/LyxUi/Button.vue
View File

@@ -8,10 +8,12 @@ const props = defineProps<{ type: ButtonType, link?: string, target?: string, di
<template> <template>
<NuxtLink tag="div" :to="disabled ? '' : link" :target="target" <NuxtLink tag="div" :to="disabled ? '' : link" :target="target"
class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{ class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-lyx-lightmode-text dark:text-lyx-text" :class="{
'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary', 'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary',
'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary', 'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary',
'bg-lyx-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': (type === 'outline' || type === 'outlined'),
'bg-lyx-transparent outline-lyx-lightmode-widget hover:bg-lyx-lightmode-widget-light dark:outline-lyx-widget-lighter dark:hover:bg-lyx-widget-light': (type === 'outline' || type === 'outlined'),
'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger', 'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
'!bg-lyx-widget !outline-lyx-widget-lighter !cursor-not-allowed': disabled === true, '!bg-lyx-widget !outline-lyx-widget-lighter !cursor-not-allowed': disabled === true,
}"> }">

8
dashboard/components/ProjectSelector.vue
View File

@@ -22,11 +22,11 @@ function onChange(e: TProject) {
<template> <template>
<USelectMenu :uiMenu="{ <USelectMenu :uiMenu="{
select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter', select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
base: '!bg-lyx-widget', base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget',
option: { option: {
base: 'hover:!bg-lyx-widget-lighter cursor-pointer', base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
active: '!bg-lyx-widget-lighter' active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
} }
}" class="w-full" v-if="allProjectList" @change="onChange" :value="project" :options="allProjectList"> }" class="w-full" v-if="allProjectList" @change="onChange" :value="project" :options="allProjectList">

9
dashboard/components/dashboard/TopSection.vue
View File

@@ -34,10 +34,10 @@ function showAnomalyInfoAlert() {
<template> <template>
<div <div class="w-full px-6 pb-2 lg:pb-6 font-bold flex flex-col xl:flex-row text-lg gap-2 xl:gap-12 lg:text-2xl">
class="w-full px-6 pb-2 lg:pb-6 font-bold text-text-sub/40 flex flex-col xl:flex-row text-lg gap-2 xl:gap-12 lg:text-2xl">
<div class="flex gap-2 items-center text-text/90 justify-center md:justify-start"> <div
class="flex gap-2 items-center text-lyx-lightmode-text/90 dark:text-lyx-text/90 justify-center md:justify-start">
<div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div> <div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
<div class="poppins font-medium text-[.9rem]"> {{ onlineUsers.data }} Online users</div> <div class="poppins font-medium text-[.9rem]"> {{ onlineUsers.data }} Online users</div>
</div> </div>
@@ -63,7 +63,8 @@ function showAnomalyInfoAlert() {
</div> </div>
</div> --> </div> -->
<div v-if="!selfhosted" class="flex gap-2 items-center text-text/90 justify-center md:justify-start"> <div v-if="!selfhosted"
class="flex gap-2 items-center text-lyx-lightmode-text/90 dark:text-lyx-text/90 justify-center md:justify-start">
<div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div> <div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
<div class="poppins font-regular text-[.9rem]"> AI Anomaly Detector </div> <div class="poppins font-regular text-[.9rem]"> AI Anomaly Detector </div>
<div class="flex items-center"> <div class="flex items-center">

2
dashboard/layouts/dashboard.vue
View File

@@ -92,7 +92,7 @@ const { isOpen, close, open } = useMenu();
</CVerticalNavigation> </CVerticalNavigation>
<div class="overflow-hidden w-full bg-lyx-background relative h-full"> <div class="overflow-hidden w-full bg-lyx-lightmode-background dark:bg-lyx-background relative h-full">
<div v-if="showDialog" class="barrier w-full h-full z-[34] absolute bg-black/50 backdrop-blur-[2px]"> <div v-if="showDialog" class="barrier w-full h-full z-[34] absolute bg-black/50 backdrop-blur-[2px]">
<i <i

17
dashboard/tailwind.config.js
View File

@@ -34,16 +34,31 @@ module.exports = {
dark: '#222A42', dark: '#222A42',
hover: '#2A3450' hover: '#2A3450'
}, },
"lyx-lightmode-text": {
DEFAULT: '#0A0A0A',
dark: '#121212',
darker: '#212121',
},
"lyx-text": { "lyx-text": {
DEFAULT: '#FFFFFF', DEFAULT: '#FFFFFF',
dark: '#D4D4D4', dark: '#D4D4D4',
darker: '#6A6A6A' darker: '#6A6A6A',
},
"lyx-lightmode-widget": {
DEFAULT: '#D9D9E0',
light: '#EEEDEF',
lighter: '#FF0000'
}, },
"lyx-widget": { "lyx-widget": {
DEFAULT: '#0E0E0E', DEFAULT: '#0E0E0E',
light: '#1E1E1E', light: '#1E1E1E',
lighter: '#262626' lighter: '#262626'
}, },
"lyx-lightmode-background": {
DEFAULT: '#F2F2F2',
light: '#D4D4D4',
lighter: '#6A6A6A'
},
"lyx-background": { "lyx-background": {
DEFAULT: '#0A0A0A', DEFAULT: '#0A0A0A',
light: '#121212', light: '#121212',

5
package.json
View File

@@ -13,5 +13,10 @@
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"mongoose": "^8.3.2", "mongoose": "^8.3.2",
"redis": "^4.7.0" "redis": "^4.7.0"
},
"devDependencies": {
"@nuxt/components": "^2.2.1",
"@nuxt/types": "^2.18.1",
"@nuxt/typescript-build": "^3.0.2"
} }
} }

839
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff