diff options
Diffstat (limited to 'src/components/user_card_content')
| -rw-r--r-- | src/components/user_card_content/user_card_content.js | 33 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 7 |
2 files changed, 12 insertions, 28 deletions
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 7e0ea0da..48e0ea02 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -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 }) } } }, diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 7d48870b..c7a270f1 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -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 } }"> |