Site header details now all dynamically set from site configuration

parent 538c6415
......@@ -2,6 +2,9 @@
"domain": "aral.eu.ngrok.io",
"name": "Aral Balkan",
"bio": "Cyborg Rights Activist",
"profileImage": "/profile-image.jpg",
"backgroundImage": false,
"backgroundColour": "lightblue",
"privateKey": "encrypted private key",
"publicKey": "public key"
}
<template>
<header class='profile'>
<img class='profile-image' src='/profile-image.jpg' alt='Profile image'>
<header class='profile' :style='headerStyles'>
<img class='profile-image' v-if='profileImage' :src='profileImage' alt='Profile image'>
<div class='profile-information'>
<h1 class='profile-name'>{{name}}</h1>
......@@ -15,8 +15,18 @@ export default {
computed: {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio },
profileImage () { return this.$store.state.profileImage },
signedIn () { return this.$store.state.signedIn },
configured () { return this.$store.state.configured }
configured () { return this.$store.state.configured },
headerStyles () {
let styles = {
backgroundColor: this.$store.state.backgroundColour
}
if (this.$store.state.backgroundImage) {
styles.backgroundImage = `url('${this.$store.state.backgroundImage}')`
}
return styles
}
},
methods: {
followButtonPress () {
......@@ -34,13 +44,10 @@ export default {
.profile
{
/* Note: the background colour and image are dynamically set on the
header itself, based on the site configuration settings. */
align-items: center;
color: white;
/* background-image: url('/background-image.jpg'); */
/* background-color: red; */
/* background-color: white; */
/* background-color: black; */
background-color: lightblue;
background-size: cover;
/* position relatively so contained items align to this container */
position: relative;
......
......@@ -9,6 +9,20 @@
<b-field label='Bio'>
<b-input v-model='bio'></b-input>
</b-field>
<label class='label' for='profile-image-upload'>Profile image</label>
<b-field>
<img :src='profileImage' class='profile-image-preview' />
<input id='profile-image-upload' type='file' />
</b-field>
<label class='label' for='background-image-upload'>Background image</label>
<b-field>
<img :src='backgroundImage' v-if='backgroundImage' class='background-image-preview' />
<span v-if='!backgroundImage'>None.</span>
<input id='background-image-upload' type='file' />
</b-field>
</form>
<!-- Buefy docs recommend adding has-modal-card property for better
......@@ -55,28 +69,28 @@
modalIsActive () { return !this.configured },
name: {
get () {
return this.$store.state.name
},
set (value) {
this.$store.commit('name', value)
}
get () { return this.$store.state.name },
set (value) { this.$store.commit('name', value) }
},
bio: {
get () {
return this.$store.state.bio
},
set (value) {
this.$store.commit('bio', value)
}
get () { return this.$store.state.bio },
set (value) { this.$store.commit('bio', value) }
},
profileImage: {
get () { return this.$store.state.profileImage },
set (value) { this.$store.commit('profileImage', value) }
},
backgroundImage: {
get () { return this.$store.state.backgroundImage },
set (value) { this.$store.commit('backgroundImage', value) }
},
backgroundColour: {
get () { return this.$store.state.backgroundColour },
set (value) { this.$store.commit('backgroundColour', value) }
},
configured: {
get () {
return this.$store.state.configured
},
set (value) {
this.$store.commit('configured', value)
}
get () { return this.$store.state.configured },
set (value) { this.$store.commit('configured', value) }
}
},
data () {
......@@ -147,4 +161,9 @@
#password-field {
margin-bottom: 0;
}
.profile-image-preview {
width: 150px;
height: 150px;
}
</style>
......@@ -15,6 +15,15 @@ export const mutations = {
bio (state, text) {
state.bio = text
},
profileImage (state, url) {
state.profileImage = url
},
backgroundImage (state, url) {
state.backgroundImage = url
},
backgroundColour (state, colorValue) {
staet.backgroundColour = colorValue
},
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