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

.

Browse Source
This commit is contained in:
Emily
2024-07-22 15:07:51 +02:00
parent 31c10b13b2
commit f3542f711b
8 changed files with 133 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/assets/scss/main.scss
View File

@@ -11,6 +11,8 @@
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
@font-face {
font-family: "Geist";

18
dashboard/components/lyx-ui/Button.vue Normal file
View File

@@ -0,0 +1,18 @@
<script lang="ts" setup>
export type ButtonType = 'primary' | 'secondary' | 'outline' | 'danger';
const props = defineProps<{ type: ButtonType, }>();
</script>
<template>
<div class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
'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-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'outline',
'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
}">
<slot></slot>
</div>
</template>

10
dashboard/components/lyx-ui/Card.vue Normal file
View File

@@ -0,0 +1,10 @@
<script lang="ts" setup>
</script>
<template>
<div class="w-fit h-fit rounded-md bg-lyx-widget p-4 outline outline-[1px] outline-lyx-background-lighter">
<slot></slot>
</div>
</template>

11
dashboard/components/lyx-ui/Icon.vue Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts" setup>
const props = defineProps<{ icon: string }>();
</script>
<template>
<span class="material-symbols-outlined">
{{ props.icon }}
</span>
</template>

26
dashboard/components/lyx-ui/ProjectSelector.vue Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts" setup>
</script>
<template>
<LyxUiCard>
<div class="flex items-center">
<div class="grow">
PROJECT_NAME
</div>
<div>
Active
</div>
<LyxUiIcon icon="drag_indicator"></LyxUiIcon>
</div>
<div class="flex items-center">
<LyxUiButton type="primary">
CURRENT_SUBSCRIPTION
</LyxUiButton>
<div class="poppins font-light text-lyx-text-dark">
next billing: NEXT_BILLING_DATE
</div>
</div>
</LyxUiCard>
</template>

6
dashboard/nuxt.config.ts
View File

@@ -9,6 +9,12 @@ const gooleSignInConfig: any = {
}
export default defineNuxtConfig({
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
},
colorMode: {
preference: 'dark',
},

20
dashboard/pages/project_selector.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
definePageMeta({ layout: 'dashboard' });
const { projects, refresh } = useProjectsList();
@@ -97,15 +96,25 @@ async function deleteAccount() {
{{ projects?.length ?? '-' }} / {{ maxProjects || 3 }}
</div>
</div>
<NuxtLink v-if="(projects?.length || 0) < (maxProjects || 3)" to="/project_creation"
<LyxUiButton type="primary">
<NuxtLink v-if="(projects?.length || 0) < (maxProjects || 3)" to="/project_creation">
Create new project
</NuxtLink>
</LyxUiButton>
<!-- <NuxtLink v-if="(projects?.length || 0) < (maxProjects || 3)" to="/project_creation"
class="bg-blue-500/20 hover:bg-blue-500/30 px-4 py-1 flex items-center gap-4 rounded-xl cursor-pointer">
<div class="h-full aspect-[1/1] flex items-center justify-center">
<i class="fas fa-plus text-[1rem] text-text-sub/80"></i>
</div>
<div>
<div class="text-text font-semibold manrope text-[1.3rem]"> Create new project</div>
<div class="text-text font-semibold manrope text-[1.3rem]">
Create new project
</div>
</div>
</NuxtLink>
</NuxtLink> -->
</div>
<div class="text-text/85 mt-8 poppis text-[1.2rem]" v-if="projects.length == 0">
@@ -115,6 +124,9 @@ async function deleteAccount() {
<div class="flex gap-12 flex-wrap" v-if="pid">
<div v-for="e of projects">
<LyxUiProjectSelector>
</LyxUiProjectSelector>
<DashboardProjectSelectionCard @click="onProjectClick(e._id.toString())"
:active="pid == e._id.toString()" :title="e.name"
:subtitle="pid == e._id.toString() ? 'ATTIVO' : ''"

49
dashboard/tailwind.config.js
View File

@@ -19,16 +19,55 @@ module.exports = {
menu: {
DEFAULT: '#1d1d1f'
},
text: {
DEFAULT: '#FFFFFF',
sub: '#909aa1',
dirty: '#dadde0'
},
accent: {
DEFAULT: '#5680F8',
light: '#2c91ed',
sub: '#99A7F1',
},
"lyx-primary": {
DEFAULT: '#5680F8',
dark: '#222A42',
hover: '#2A3450'
},
"lyx-text": {
DEFAULT: '#FFFFFF',
dark: '#D4D4D4',
darker: '#6A6A6A'
},
"lyx-widget": {
DEFAULT: '#151515',
light: '#1E1E1E',
lighter: '#262626'
},
"lyx-background": {
DEFAULT: '#0A0A0A',
light: '#121212',
lighter: '#212121'
},
"lyx-danger": {
DEFAULT: '#F86956',
dark: '#4A2D29'
},
"lyx-chart": {
purple: {
DEFAULT: '#5655D7',
dark: '#282844'
},
green: {
DEFAULT: '#1D9B86',
dark: '#213734'
},
cyan: {
DEFAULT: '#4ABDE8',
dark: '#273D48'
},
orange: {
DEFAULT: '#F56524',
dark: '#492C22'
}
}
}
},
},