support dark mode

This commit is contained in:
Salem Yaslem 2023-06-06 03:59:48 +03:00
parent 564825f3a8
commit 3eb6809e85
3 changed files with 20 additions and 16 deletions

16
app.vue
View File

@ -144,8 +144,8 @@ function stepUp(path: string) {
</v-col> </v-col>
</v-row> </v-row>
</v-toolbar> </v-toolbar>
<template v-if="filesManager.getFile(selectedPath)?.isFolder || false">
<v-container> <v-container>
<template v-if="filesManager.getFile(selectedPath)?.isFolder || false">
<v-list :selected="[selectedPath]"> <v-list :selected="[selectedPath]">
<v-row no-gutters> <v-row no-gutters>
<v-col cols="6" lg="2" md="3" sm="6" v-for="file of filesGridList" style="text-align: center;"> <v-col cols="6" lg="2" md="3" sm="6" v-for="file of filesGridList" style="text-align: center;">
@ -159,16 +159,9 @@ function stepUp(path: string) {
</v-col> </v-col>
</v-row> </v-row>
</v-list> </v-list>
</v-container>
</template> </template>
<VueSelecto :selectableTargets="['.selectable']" :dragContainer="dragContainer" :hitRate="20"
:selectFromInside="false" :toggleContinueSelect="'ctrl'" @select="onSelectStart" @selectStart="onSelectStart"
:get-element-rect="getElementInfo" @selectEnd="onSelectEnd" :select-by-click="false" />
<template v-if="!files.length"> <template v-if="!files.length">
<!-- tutorial drag and drop zipped file here and review it securely --> <!-- tutorial drag and drop zipped file here and review it securely -->
<v-container fill-height fluid>
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<v-col cols="12"> <v-col cols="12">
<v-card variant="flat" class="mx-auto" max-width="768"> <v-card variant="flat" class="mx-auto" max-width="768">
@ -189,8 +182,13 @@ function stepUp(path: string) {
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
</v-container>
</template> </template>
</v-container>
<VueSelecto :selectableTargets="['.selectable']" :dragContainer="dragContainer" :hitRate="20"
:selectFromInside="false" :toggleContinueSelect="'ctrl'" @select="onSelectStart" @selectStart="onSelectStart"
:get-element-rect="getElementInfo" @selectEnd="onSelectEnd" :select-by-click="false" />
</v-main> </v-main>
<v-dialog v-model="loadingModel" persistent width="auto"> <v-dialog v-model="loadingModel" persistent width="auto">
<v-card> <v-card>

View File

@ -138,7 +138,7 @@ export class FilesManager {
if (a.name > b.name) return 1; if (a.name > b.name) return 1;
return 0; return 0;
}), }),
isFolder: true, isFolder: this.filesList.value.length ? true : false,
}; };
} }

View File

@ -3,10 +3,16 @@ import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives' import * as directives from 'vuetify/directives'
export default defineNuxtPlugin(nuxtApp => { export default defineNuxtPlugin(nuxtApp => {
// get system dark mode
const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
const vuetify = createVuetify({ const vuetify = createVuetify({
ssr: false, ssr: false,
components, components,
directives directives,
theme: {
defaultTheme: darkMode ? 'dark' : 'light',
}
}) })
nuxtApp.vueApp.use(vuetify) nuxtApp.vueApp.use(vuetify)