Add background colour picker to the Settings screen

components/settings.vue

@@ -23,6 +23,12 @@
         <input id='background-image-upload' type='file' />
       </b-field>
 
+      <label class='label' for='background-colour-input'>Background colour</label>
+      <b-field>
+        <div class='background-colour' :style='{ backgroundColor: backgroundColour }'></div>
+        <vue-color-compact v-model='backgroundColour' />
+      </b-field>
+
     </form>
 
     <!-- Buefy docs recommend adding has-modal-card property for better 
@@ -64,7 +70,14 @@
 </template>
 
 <script>
+
+  import vueColorCompact from '~/node_modules/vue-color/src/components/Compact.vue'
+
   export default {
+    components: {
+      vueColorCompact
+    },
+
     computed: {
       modalIsActive () { return !this.configured },
 
@@ -107,6 +120,14 @@
 </script>
 
 <style>
+
+  .background-colour {
+    width: 100px;
+    height: 100px;
+    margin-right: .75em;
+    border: 1px solid darkgray;
+  }
+
   /* Put a min-width on the Show/Hide password toggle button in the Settings
     tab so that it doesn’t jump around due to the differing amount of space
     taken up by the different labels. The class name is set by the component

package-lock.json

@@ -6728,6 +6728,11 @@
         "lodash._reinterpolate": "3.0.0"
       }
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -6932,6 +6937,11 @@
         "object-visit": "1.0.1"
       }
     },
+    "material-colors": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.5.tgz",
+      "integrity": "sha1-UpJZPmdUyxvMK5gDDk4Najr8nqE="
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -12873,6 +12883,11 @@
         "setimmediate": "1.0.5"
       }
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -13523,6 +13538,16 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.13.tgz",
       "integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw=="
     },
+    "vue-color": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.4.5.tgz",
+      "integrity": "sha512-fopYHRqoFgC/hVeiAFsebcny2EKFKdNo0pCzEIirdaVZqdcXX+mqdx0WFM7+I4hBNt8cU6/MKMvgRXpkerja9w==",
+      "requires": {
+        "lodash.throttle": "4.1.1",
+        "material-colors": "1.2.5",
+        "tinycolor2": "1.4.1"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz",

package.json

@@ -49,6 +49,7 @@
     "sass-loader": "^6.0.7",
     "serve-favicon": "^2.4.5",
     "sweet-modal-vue": "^2.0.0",
+    "vue-color": "^2.4.5",
     "vue-password": "^1.1.2",
     "vue-quill-editor": "^3.0.5",
     "winston": "^2.4.0",

store/index.js

@@ -21,8 +21,9 @@ export const mutations = {
   backgroundImage (state, url) {
     state.backgroundImage = url
   },
-  backgroundColour (state, colorValue) {
-    staet.backgroundColour = colorValue
+  backgroundColour (state, colourValue) {
+    console.log(colourValue)
+    state.backgroundColour = colourValue.hex
   },
   configured (state, value) {
     state.configured = value