Add background colour picker to the Settings screen

parent d623cca4
......@@ -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
......
......@@ -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",
......
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment