both bugs fixed. it's reactive and no more conflicting cards

This commit is contained in:
Henry Jameson 2018-06-19 16:17:50 +03:00
parent fa8c221f3a
commit 8ccebbe156
7 changed files with 41 additions and 44 deletions

View file

@ -3,16 +3,6 @@ import { hex2rgb } from '../../services/color_convert/color_convert.js'
export default {
props: [ 'user', 'switcher', 'selected', 'hideBio' ],
data() {
return {
userHighlightLocal: ''
}
},
mounted () {
const config = this.$store.state.config
config.highlight = config.highlight || {}
this.userHighlightLocal = config.highlight[this.user.screen_name]
},
computed: {
headingStyle () {
const color = this.$store.state.config.colors.bg
@ -45,29 +35,22 @@ export default {
},
userHighlightEnabled: {
get () {
return this.userHighlightLocal
return this.$store.state.config.highlight[this.user.screen_name]
},
set (value) {
const config = this.$store.state.config
config.highlight = config.highlight || {}
if (value) {
this.userHighlightLocal = config.highlight[this.user.screen_name] = '#FFFFFF'
set (enabled) {
if (enabled) {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: '#FFFFFF' })
} else {
this.userHighlightLocal = undefined
delete config.highlight[this.user.screen_name]
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
}
}
},
userHighlightColor: {
get () {
const config = this.$store.state.config
config.highlight = config.highlight || {}
return config.highlight[this.user.screen_name]
return this.$store.state.config.highlight[this.user.screen_name]
},
set (value) {
const config = this.$store.state.config
config.highlight = config.highlight || {}
config.highlight[this.user.screen_name] = value
set (color) {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
}
}
},

View file

@ -9,9 +9,10 @@
<i class="icon-link-ext usersettings"></i>
</a>
<div class="floater" v-if="switcher || isOtherUser">
<input type="checkbox" id="userHighlightCheck" v-model="userHighlightEnabled">
<label :title="$t('settings.highlight')" for="userHighlightCheck"></label>
<input type="color" id="userHighlightColor" v-if="userHighlightLocal" v-model="userHighlightColor"/>
<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
<input type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightEnabled" v-model="userHighlightColor"/>
<input type="checkbox" class="button" :id="'userHighlightCheck'+user.id" v-model="userHighlightEnabled">
<label :title="$t('settings.highlight')" :for="'userHighlightCheck'+user.id"></label>
</div>
<div class='container'>
<router-link :to="{ name: 'user-profile', params: { id: user.id } }">