feat/add_user_theme_view_controls: yarn add cookie-universal-nuxt , to allow users to choose the lightness of the theme and the compactness of the view on events

components/Event.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 v-card.h-event.event.d-flex(itemscope itemtype="https://schema.org/Event")
   nuxt-link(:to='`/event/${event.slug || event.id}`' itemprop="url")
-    MyPicture(v-if='!settings.hide_thumbs' :event='event' thumb :lazy='lazy')
+    MyPicture(v-if='!hide_thumbs' :event='event' thumb :lazy='lazy')
     v-icon.float-right.mr-1(v-if='event.parentId' color='success' v-text='mdiRepeat')
     .title.p-name(itemprop="name") {{ event.title }}
 
@@ -22,8 +22,13 @@ import MyPicture from '~/components/MyPicture'
 import { mdiRepeat, mdiCalendar, mdiMapMarker } from '@mdi/js'
 
 export default {
-  data() {
+  data({ $store }) {
-    return { mdiRepeat, mdiMapMarker, mdiCalendar }
+    return { mdiRepeat, mdiMapMarker, mdiCalendar,
+      // user can't see hidden thumbs
+      hide_thumbs: this.$cookies.get('theme.hide_thumbs') || $store.state.settings.hide_thumbs
+      // user can override
+      // hide_thumbs: this.$cookies.get('theme.hide_thumbs')
+    }
   },
   components: {
     MyPicture

components/ThemeView.vue

@@ -0,0 +1,54 @@
+<template lang="pug">
+div.p-0.m-0.d-flex.justify-end(:key='reload')
+  v-icon.ml-5(@click='_is_dark()' v-text='mdiContrastCircle')
+  v-icon.ml-5(@click='_hide_thumbs()' v-text='!hide_thumbs ?  mdiViewList : mdiViewModule')
+
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+import { mdiViewModule, mdiViewList, mdiContrastCircle } from '@mdi/js'
+
+export default {
+  name: 'ThemeView',
+  data ({ $store }) {
+    return {
+      mdiViewModule, mdiViewList, mdiContrastCircle,
+      reload: 0
+    }
+  },
+  methods: {
+    ...mapState(['settings']),
+    async _is_dark() {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+      await this.$cookies.set('theme.is_dark', this.$vuetify.theme.dark, {
+        path: '/',
+        maxAge: 60 * 60 * 24 * 7
+      })
+    },
+    async _hide_thumbs() {
+      const theme_hide_thumbs = await this.$cookies.get('theme.hide_thumbs')
+      if (theme_hide_thumbs != null) {
+        this.hide_thumbs = !theme_hide_thumbs
+      } else {
+        this.hide_thumbs = !$store.state.settings.hide_thumbs
+      }
+      await this.$cookies.set('theme.hide_thumbs', this.hide_thumbs, {
+        path: '/',
+        maxAge: 60 * 60 * 24 * 7
+      })
+      await this.reload++
+      this.$root.$emit('layout_loaded', true)
+    },
+    async hide_thumbs () {
+      const hide_thumbs = await this.$cookies.get('theme.hide_thumbs')
+      if (hide_thumbs != null) {
+        this.hide_thumbs = hide_thumbs
+      } else {
+        this.hide_thumbs = $store.state.settings.hide_thumbs
+      }
+      return hide_thumbs
+    }
+  }
+}
+</script>

layouts/default.vue

@@ -32,7 +32,12 @@ export default {
   components: { Appbar, Snackbar, Footer, Confirm },
   computed: mapState(['settings']),
   created () {
-    this.$vuetify.theme.dark = this.settings['theme.is_dark']
+    const theme_is_dark = this.$cookies.get('theme.is_dark')
+    if ( theme_is_dark != null ) {
+      this.$vuetify.theme.dark = theme_is_dark
+    } else {
+      this.$vuetify.theme.dark = this.settings['theme.is_dark']
+    }
   }
 }
 </script>

nuxt.config.js

@@ -54,7 +54,8 @@ module.exports = {
     'nuxt-i18n',
     '@nuxtjs/axios',
     '@nuxtjs/auth',
-    '@nuxtjs/sitemap'
+    '@nuxtjs/sitemap',
+    ['cookie-universal-nuxt', { alias: 'cookies' }],
   ],
 
   sitemap: {
@@ -89,7 +90,7 @@ module.exports = {
     })),
     vueI18n: {
       fallbackLocale: 'en'
-    },    
+    },
     langDir: 'locales',
     lazy: true,
     strategy: 'no_prefix',
@@ -135,6 +136,7 @@ module.exports = {
       }
     }
   },
+
   buildModules: ['@nuxtjs/vuetify'],
   vuetify: {
     treeShake: true,

package.json

@@ -42,6 +42,7 @@
     "bcryptjs": "^2.4.3",
     "body-parser": "^1.20.0",
     "cookie-parser": "^1.4.6",
+    "cookie-universal-nuxt": "^2.2.2",
     "cors": "^2.8.5",
     "dayjs": "^1.11.5",
     "dompurify": "^2.4.1",

pages/index.vue

@@ -1,12 +1,16 @@
 <template lang="pug">
 v-container.px-2.px-sm-6.pt-0
 
+  //- View
+  #themeview.mt-sm-4.mt-2
+    ThemeView
+
   //- Announcements
   #announcements.mt-2.mt-sm-4(v-if='announcements.length')
     Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
 
   //- Events
-  #events.mt-sm-4.mt-2
+  #events.mt-sm-4.mt-2(:key="reload_events")
     Event(:event='event' v-for='(event, idx) in visibleEvents' :lazy='idx>2' :key='event.id')
 </template>
 
@@ -16,11 +20,12 @@ import debounce from 'lodash/debounce'
 import dayjs from 'dayjs'
 import Event from '@/components/Event'
 import Announcement from '@/components/Announcement'
+import ThemeView from '@/components/ThemeView'
 import { mdiMagnify, mdiCloseCircle } from '@mdi/js'
 
 export default {
   name: 'Index',
-  components: { Event, Announcement },
+  components: { Event, Announcement, ThemeView },
   middleware: 'setup',
   async fetch () {
     return this.getEvents()
@@ -29,7 +34,7 @@ export default {
     if (this.$fetchState.timestamp <= Date.now() - 60000) {
       this.$fetch();
     }
-  },  
+  },
   data ({ $store }) {
     return {
       mdiMagnify, mdiCloseCircle,
@@ -42,7 +47,8 @@ export default {
       tmpEvents: [],
       selectedDay: null,
       show_recurrent: $store.state.settings.recurrent_event_visible,
-    }
+      reload_events: 0
+      }
   },
   head () {
     return {
@@ -84,6 +90,9 @@ export default {
     this.$root.$on('dayclick', this.dayChange)
     this.$root.$on('monthchange', this.monthChange)
     this.$root.$on('search', debounce(this.search, 100))
+    this.$root.$on('layout_loaded', () => {
+        this.reload_events++
+    })
   },
   destroyed () {
     this.$root.$off('dayclick')
@@ -137,4 +146,4 @@ export default {
     }
   }
 }
-</script>
+</script>

yarn.lock

@@ -1861,6 +1861,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/cookie@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+  integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
+
 "@types/debug@^4.1.7":
   version "4.1.7"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82"
@@ -3810,6 +3815,22 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
+cookie-universal-nuxt@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.2.2.tgz#107815f03f5b769de7018670d6370368205387bb"
+  integrity sha512-Pr6P5UCzl1EAvPh7z7jFkknBw0KTdykm6gFmPHrH4LV9s3flVmAH0ZP/ZqUXcp6b0SKZfizkn+XR1cO+QinGhQ==
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    cookie-universal "^2.2.2"
+
+cookie-universal@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.2.2.tgz#415a4d67b6f7f0819c4914cd69b8c2f496111d30"
+  integrity sha512-nUXF6HH2YKbn8vGcdSzWJhjRkDHbnbekuVu2nsRu00zYsX7o/H3xGJRlPVoM4wX/8cpJYpyi9nDt+boER0Wjug==
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    cookie "^0.4.0"
+
 cookie@0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
@@ -12622,10 +12643,8 @@ watchpack@^1.7.4:
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
   integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
   dependencies:
-    chokidar "^3.4.1"
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
-    watchpack-chokidar2 "^2.0.1"
   optionalDependencies:
     chokidar "^3.4.1"
     watchpack-chokidar2 "^2.0.1"