From fbdbce8bf7832581f35ba8ca1a1e372f0f327341 Mon Sep 17 00:00:00 2001
From: les <lesion@autistici.org>
Date: Wed, 5 Aug 2020 17:08:01 +0200
Subject: [PATCH] custom footer links, colors, dark mode #82

---
 components/Footer.vue             |  14 ++--
 components/List.vue               |   1 +
 components/admin/Theme.vue        | 125 +++++++++++++++++++++++-------
 server/api/controller/settings.js |   7 +-
 4 files changed, 112 insertions(+), 35 deletions(-)

diff --git a/components/Footer.vue b/components/Footer.vue
index 5c9c16d8..2b623f6c 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -1,10 +1,12 @@
 <template lang="pug">
-  v-footer(app absolute)
-    v-btn(text href='https://gancio.org') Gancio {{settings.version}}
-    v-btn(v-if='settings.enable_federation' text rel='me' @click.prevent='showFollowMe=true') follow me
-    v-btn(nuxt to='/about' text) about
-    v-btn(href='https://blog.gancio.org' text) blog
-    v-btn(href='https://framagit.org/les/gancio' text) source
+  v-footer(app absolute color='secondary')
+    v-btn(color='primary' text href='https://gancio.org') Gancio {{settings.version}}
+    v-btn(v-for='link in settings.footerLinks'
+      :key='link.label' color='primary' text :href='link.href') {{link.label}}
+    //- v-btn(v-if='settings.enable_federation' text rel='me' @click.prevent='showFollowMe=true') follow me
+    //- v-btn(nuxt to='/about' text) about
+    //- v-btn(href='https://blog.gancio.org' text) blog
+    //- v-btn(href='https://framagit.org/les/gancio' text) source
 </template>
 <script>
 import { mapState } from 'vuex'
diff --git a/components/List.vue b/components/List.vue
index ee64700c..bc3ce6ea 100644
--- a/components/List.vue
+++ b/components/List.vue
@@ -51,4 +51,5 @@ export default {
   #list {
     max-width: 500px;
     margin: 0 auto;
+  }
 </style>
diff --git a/components/admin/Theme.vue b/components/admin/Theme.vue
index dcc12ed7..cf54032f 100644
--- a/components/admin/Theme.vue
+++ b/components/admin/Theme.vue
@@ -1,15 +1,14 @@
 <template lang="pug">
-  v-card
+  v-container
     v-card-title {{$t('common.theme')}}
     v-card-text
-      p {{settings['theme.primary']}}
       //- LOGO
       v-file-input.mt-5(ref='upload'
         :label="$t('admin.favicon')"
         @change='uploadLogo'
         accept='image/*')
         template(slot='append-outer')
-          v-btn(small @click='resetLogo') Reset
+          v-btn(small text @click='resetLogo') Reset
           v-img(:src='`${settings.baseurl}/favicon.ico?${logoKey}`'
             max-width="100px" max-height="80px" contain)
 
@@ -18,8 +17,8 @@
         :label="$t('admin.is_dark')")
 
       v-row
-        v-col
-          v-menu(v-model='primaryMenu'
+        v-col(v-for='(color, i) in colors' :key='i')
+          v-menu(v-model='menu[i]'
               :close-on-content-click="false"
               transition="slide-x-transition"
               offset-y
@@ -28,51 +27,103 @@
               max-width="290px"
               min-width="290px")
             template(v-slot:activator='{ on }')
-              v-text-field(
-                :label="$t('event.from')"
-                :value='primary_color'
-                v-on='on'
-                clearable
-                readonly)
-            v-color-picker(
-              mode='hexa'
-              :label="$t('common.primary_color')"
-              v-model='primary_color')
+              v-text-field(:value='colors[i]'
+                v-on='on' clearable readonly)
+            v-color-picker(light @update:color='c => updateColor(i, c)')
+
+      v-dialog(v-model='linkModal' width='500')
+        v-card
+          v-card-title Add footer link
+          v-card-text
+            v-form(v-model='valid' ref='linkModalForm')
+              v-text-field(v-model='link.label'
+                :rules="[validators.required('label')]"
+                label='Label')
+              v-text-field(v-model='link.href'
+                :rules="[validators.required('href')]"
+                label='Href')
+          v-card-actions
+            v-spacer
+            v-btn(link @click='linkModal=false' color='error') {{$t('common.cancel')}}
+            v-btn(link @click='addFooterLink' color='primary' :disabled='!valid') {{$t('common.add')}}
+
+      label Footer links
+      v-list
+        v-list-item(link @click='linkModal = true')
+          v-list-item-content
+            v-list-item-title Add
+            v-list-item-subtitle a new link
+        v-list-item(v-for='link in settings.footerLinks'
+          :key='`${link.label}`'
+          :to='link.href')
+          v-list-item-content
+            v-list-item-title {{link.label}}
+            v-list-item-subtitle {{link.href}}
+          v-list-item-action
+            v-btn(icon color='error' @click.prevent='removeFooterLink(link)')
+              v-icon mdi-delete-forever
+
 </template>
 <script>
 import { mapActions, mapState } from 'vuex'
+import { validators } from '../../plugins/helpers'
+
 export default {
   name: 'Theme',
   data () {
     return {
+      validators,
+      valid: false,
       logoKey: 0,
-      primaryMenu: false
+      link: { href: '', label: '' },
+      linkModal: false,
+      menu: [false, false, false, false],
+      colors: { primary: '', secondary: '', tertiary: '' }
+      //   primary: {},
+      //   secondary: {}
+      // }
     }
   },
   computed: {
     ...mapState(['settings']),
+    // 'colors.primary': this.color('primary'),
+    // 'colors.secondary': this.color('primary'),
+    // 'colors.tertiary': this.color('primary'),
     is_dark: {
       get () { return this.settings['theme.is_dark'] },
       set (value) {
         this.$vuetify.theme.dark = value
         this.setSetting({ key: 'theme.is_dark', value })
       }
-    },
-    primary_color: {
-      get () { return this.settings['theme.primary'] },
-      set (value) {
-        if (!value) { return }
-        this.setSetting({ key: 'theme.primary', value })
-        if (this.settings['theme.is_dark']) {
-          this.$vuetify.theme.themes.dark.primary = value
-        } else {
-          this.$vuetify.theme.themes.light.primary = value
-        }
-      }
     }
+    // 'colors[0]': {
+    // get () {
+    //   return this.settings['theme.colors'] || [0, 0]
+    // },
+    // set (value) {
+    //   console.error(value)
+    //     if (!value) { return }
+    //     this.setSetting({ key: 'theme.primary', value })
+    //     if (this.settings['theme.is_dark']) {
+    //       this.$vuetify.theme.themes.dark.primary = value
+    //     } else {
+    //       this.$vuetify.theme.themes.light.primary = value
+    //     }
+    // }
+    // }
   },
   methods: {
     ...mapActions(['setSetting']),
+    color (name) {
+      return {
+        get () {
+          console.error('get ', name)
+        },
+        set (value) {
+          console.error('set ', name, value)
+        }
+      }
+    },
     forceLogoReload () {
       this.$refs.upload.reset()
       this.logoKey++
@@ -82,6 +133,24 @@ export default {
         .then(this.forceLogoReload)
       e.stopPropagation()
     },
+    updateColor (i, v) {
+      this.colors[i] = v.hex
+      this.$vuetify.theme.themes.dark[i] = v.hex
+    },
+    addFooterLink () {
+      const link = Object.assign({}, this.link)
+      this.setSetting({ key: 'footerLinks', value: this.settings.footerLinks.concat(link) })
+      // this.link = { href: '', label: '' }
+      // this.$refs.linkModalForm.clear()
+      this.$refs.linkModalForm.reset()
+      this.linkModal = false
+    },
+    async removeFooterLink (item) {
+      const ret = await this.$root.$confirm(this.$t('common.confirm'), this.$t('admin.delete_footer_link_confirm'))
+      if (!ret) { return }
+      const footerLinks = this.settings.footerLinks.filter(l => l.label !== item.label)
+      this.setSetting({ key: 'footerLinks', value: footerLinks })
+    },
     async uploadLogo (file) {
       const formData = new FormData()
       formData.append('logo', file)
diff --git a/server/api/controller/settings.js b/server/api/controller/settings.js
index 71eee600..2490450f 100644
--- a/server/api/controller/settings.js
+++ b/server/api/controller/settings.js
@@ -26,7 +26,12 @@ const defaultSettings = {
   enable_resources: false,
   hide_boosts: true,
   enable_trusted_instances: true,
-  trusted_instances: []
+  trusted_instances: [],
+  'theme.is_dark': true,
+  'theme.primary': '#FF4500',
+  footerLinks: [
+    { href: '/about', label: 'about' }
+  ]
 }
 
 /**