From 926e03efd684cfb9c580c3f73733b3e8d0cdf841 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 28 Sep 2023 19:30:41 +0200
Subject: [PATCH] use default vuetify theme toggle
---
components/Footer.vue | 3 +++
components/Nav/Navbar.vue | 12 +++++++++---
components/content/MolstarPdbePlugin.vue | 10 ++++++----
layouts/article.vue | 11 ++++++-----
layouts/custom.vue | 2 +-
nuxt.config.ts | 14 ++++++++++----
6 files changed, 35 insertions(+), 17 deletions(-)
create mode 100644 components/Footer.vue
diff --git a/components/Footer.vue b/components/Footer.vue
new file mode 100644
index 00000000..940569a1
--- /dev/null
+++ b/components/Footer.vue
@@ -0,0 +1,3 @@
+<template>
+ <v-footer id="app-footer" app>footer</v-footer>
+</template>
\ No newline at end of file
diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
index 831b782c..bef009bf 100644
--- a/components/Nav/Navbar.vue
+++ b/components/Nav/Navbar.vue
@@ -10,9 +10,11 @@
<v-btn v-for="section in sections" :key="section.id" color="primary" :href="section.href">
{{ section.label }}
</v-btn>
+ <v-btn @click="toggleTheme" color="primary"
+ :icon="theme.global.current.value.dark ? 'md:light_mode' : 'md:dark_mode'"></v-btn>
</template>
</v-app-bar>
- <v-navigation-drawer v-model="drawer" :border="0">
+ <v-navigation-drawer v-model="drawer" :border="1">
<v-card flat>
<v-list nav density="compact" :lines="false">
<NavNavigation :navigation="navigation" />
@@ -21,13 +23,17 @@
</v-navigation-drawer>
</template>
<script setup lang="ts">
-import { useCustomTheme } from '~/composables/useCustomTheme'
+// import { useCustomTheme } from '~/composables/useCustomTheme'
+import { useDisplay, useTheme } from 'vuetify'
const runtimeConfig = useRuntimeConfig()
-const { toggle } = useCustomTheme()
const { navigation } = useContent();
const { mobile } = useDisplay();
+const theme = useTheme()
+function toggleTheme() {
+ theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+}
const sections = ref([
{ id: "webservice", label: "webservice", href: runtimeConfig.public.defenseFinderWebservice }
])
diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue
index d0ecd3b7..c9de71ed 100644
--- a/components/content/MolstarPdbePlugin.vue
+++ b/components/content/MolstarPdbePlugin.vue
@@ -31,10 +31,7 @@ const computedWidth = computed(() => {
return width
})
-
-
useHead({
-
link: [
{
rel: 'stylesheet',
@@ -64,8 +61,13 @@ useHead({
<v-sheet class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3" height="500"
:max-width="1300" :width="computedWidth - 950" position="relative">
<pdbe-molstar :custom-data-url="refinedDataUrl" custom-data-format="pdb" hide-expand-icon="true"
- hide-controls="true"></pdbe-molstar>
+ hide-controls="true" landscape="true" sequence-panel></pdbe-molstar>
</v-sheet>
</template>
+<style scoped>
+.msp-plugin .msp-plugin-content {
+ color: black !important;
+}
+</style>
\ No newline at end of file
diff --git a/layouts/article.vue b/layouts/article.vue
index 78da292c..0a6d1565 100644
--- a/layouts/article.vue
+++ b/layouts/article.vue
@@ -1,14 +1,16 @@
<script setup lang="ts">
const { page, surround } = useContent();
-import { useCustomTheme } from '~/composables/useCustomTheme'
+// import { useCustomTheme } from '~/composables/useCustomTheme'
import { useDisplay } from 'vuetify'
-const { isDark } = useCustomTheme()
+// const { isDark } = useCustomTheme()
const { mobile } = useDisplay()
+
+
</script>
<template>
- <VApp :theme="isDark ? 'dark' : 'light'">
+ <VApp>
<v-main style="min-height: 300px">
<!-- <v-container class="fill-height w-auto" > -->
<!-- <v-card flat max-width="1000" min-height="300" color="transparent">
@@ -26,8 +28,7 @@ const { mobile } = useDisplay()
</v-col>
</v-row>
</v-container>
- <v-footer id="app-footer" app>footer</v-footer>
- <!-- </v-container> -->
+ <Footer></Footer>
</v-main>
<NavNavbar />
<NavTableOfContent :links="page.body.toc.links" />
diff --git a/layouts/custom.vue b/layouts/custom.vue
index afa68847..e33c8d3b 100644
--- a/layouts/custom.vue
+++ b/layouts/custom.vue
@@ -6,7 +6,7 @@
<v-main style="min-height: 300px">
<v-container>
<slot />
- <v-footer app>footer</v-footer>
+ <Footer></Footer>
</v-container></v-main>
</VApp>
</v-card>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index cde52901..3f54bffc 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,7 +4,8 @@ export default defineNuxtConfig({
'@nuxt/content',
'vuetify-nuxt-module',
'@vueuse/nuxt',
- '@pinia/nuxt'
+ '@pinia/nuxt',
+ // '@unocss/nuxt',
],
content: {
documentDriven: {
@@ -13,7 +14,11 @@ export default defineNuxtConfig({
},
vuetify: {
vuetifyOptions: {
- labComponents: true
+ labComponents: true,
+ icons: {
+ defaultSet: 'mdi',
+ sets: ['mdi', 'fa', 'md'],
+ }
}
},
devtools: {
@@ -24,10 +29,11 @@ export default defineNuxtConfig({
defenseFinderWebservice: '/'
}
},
- vue: {
+ vue: {
compilerOptions: {
isCustomElement: (tag) => ['pdbe-molstar'].includes(tag),
},
- }
+ },
+
})
--
GitLab