Skip to content

GitLab

Verified Commit e3cb7d82 authored by Aral Balkan's avatar Aral Balkan
Browse files

Refactor: move Settings component into Settings page

parent 9c5a7d56
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 159 deletions
client/components/settings.vue deleted 100644 → 0
View file @ 9c5a7d56
<template>
<div>
<form @submit.prevent>
<b-field label='Name'>
<b-input v-model='name' placeholder='Anonymous'></b-input>
</b-field>
<b-field label='Bio'>
<b-input v-model='bio' placeholder='Anonymous'></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 || "/not-available.png"' :alt='backgroundImage ? "Preview of background image" : "No background image set"' class='background-image-preview' />
<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-if='!backgroundImage' v-model='backgroundColour' />
<span v-if='backgroundImage'>(Hidden by the background image.)</span>
</b-field>
</form>
<registrationModal :isActive='registrationModalActive' />
</div>
</template>
<script>
import vueColorCompact from '~/../node_modules/vue-color/src/components/Compact.vue'
import registrationModal from '~/components/registrationModal'
export default {
components: {
vueColorCompact,
registrationModal
},
computed: {
registrationModalActive () { return !this.configured },
name: {
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) }
},
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)
// Very basic example of theming based on background colour.
// TODO: Refactor into a more robust, global solution.
// (See default.vue layout for redundancy)
let style = document.createElement('style')
document.head.appendChild(style)
let sheet = style.sheet
console.log('Background colour: ' + value.hex)
sheet.insertRule(`.tabs li.is-active a { color: ${value.hex}; border-bottom-color: ${value.hex}; }`)
sheet.insertRule(`.button.is-primary { background-color: ${value.hex}; }`)
sheet.insertRule(`.button.is-primary:hover { background-color: ${value.hex}; }`)
}
},
configured: {
get () { return this.$store.state.configured },
set (value) { this.$store.commit('configured', value) }
}
},
data () {
return {
}
},
methods: {
}
}
</script>
<style>
.background-colour {
width: 100px;
height: 65px;
margin-right: .75em;
border: 1px solid #333;
}
.background-image-preview {
width: 100px;
height: 65px;
margin-right: .75em;
border: 1px solid #333;
}
div.control {
margin-bottom: 1em;
}
div.card-content {
padding-top: 1em;
}
.modal-card-title {
margin: 0;
}
.modal-card-body {
padding-top: 0;
/* padding-bottom: 0; */
}
div.vc-compact {
width: 246px;
}
.profile-image-preview {
width: 100px;
height: 100px;
margin-right: .75em;
border: 1px solid #333;
}
</style>
client/pages/settings.vue
View file @ e3cb7d82
<template>
<div class='page'>
<indie-header />
<main>
<settings />
<form @submit.prevent>
<b-field label='Name'>
<b-input v-model='name' placeholder='Anonymous'></b-input>
</b-field>
<b-field label='Bio'>
<b-input v-model='bio' placeholder='Anonymous'></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 || "/not-available.png"' :alt='backgroundImage ? "Preview of background image" : "No background image set"' class='background-image-preview' />
<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-if='!backgroundImage' v-model='backgroundColour' />
<span v-if='backgroundImage'>(Hidden by the background image.)</span>
</b-field>
</form>
<registrationModal :isActive='registrationModalActive' />
</main>
</div>
</template>
<script>
import indieHeader from '~/components/indieHeader'
import settings from '~/components/settings'
export default {
components: {
indieHeader,
settings
import indieHeader from '~/components/indieHeader'
import vueColorCompact from '~/../node_modules/vue-color/src/components/Compact.vue'
import registrationModal from '~/components/registrationModal'
export default {
components: {
indieHeader,
vueColorCompact,
registrationModal
},
computed: {
registrationModalActive () { return !this.configured },
name: {
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) }
},
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)
// Very basic example of theming based on background colour.
// TODO: Refactor into a more robust, global solution.
// (See default.vue layout for redundancy)
let style = document.createElement('style')
document.head.appendChild(style)
let sheet = style.sheet
console.log('Background colour: ' + value.hex)
sheet.insertRule(`.tabs li.is-active a { color: ${value.hex}; border-bottom-color: ${value.hex}; }`)
sheet.insertRule(`.button.is-primary { background-color: ${value.hex}; }`)
sheet.insertRule(`.button.is-primary:hover { background-color: ${value.hex}; }`)
}
},
configured: {
get () { return this.$store.state.configured },
set (value) { this.$store.commit('configured', value) }
}
},
data () {
return {
}
},
methods: {
}
}
}
</script>
<style>
.background-colour {
width: 100px;
height: 65px;
margin-right: .75em;
border: 1px solid #333;
}
.background-image-preview {
width: 100px;
height: 65px;
margin-right: .75em;
border: 1px solid #333;
}
div.control {
margin-bottom: 1em;
}
div.card-content {
padding-top: 1em;
}
.modal-card-title {
margin: 0;
}
.modal-card-body {
padding-top: 0;
/* padding-bottom: 0; */
}
div.vc-compact {
width: 246px;
}
.profile-image-preview {
width: 100px;
height: 100px;
margin-right: .75em;
border: 1px solid #333;
}
</style>
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

Like this? Fund us! Your patronage helps keep us independent and going.