diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index d2dd91de..33482891 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -22,11 +22,14 @@ const Notification = {
},
computed: {
userClass () {
- return highlightClass(this.notification.action.user, this.$store)
+ return highlightClass(this.notification.action.user)
},
userStyle () {
- return highlightStyle(this.notification.action.user, this.$store)
- },
+ const highlight = this.$store.state.config.highlight
+ const user = this.notification.action.user
+ const color = highlight[user.screen_name]
+ return highlightStyle(color)
+ }
}
}
diff --git a/src/components/status/status.js b/src/components/status/status.js
index fcdc6f61..2b5bcb55 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -38,19 +38,23 @@ const Status = {
},
repeaterClass () {
const user = this.statusoid.user
- return highlightClass(user, this.$store)
+ return highlightClass(user)
},
userClass () {
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
- return highlightClass(user, this.$store)
+ return highlightClass(user)
},
repeaterStyle () {
const user = this.statusoid.user
- return highlightStyle(user, this.$store)
+ const highlight = this.$store.state.config.highlight
+ const color = highlight[user.screen_name]
+ return highlightStyle(color)
},
userStyle () {
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
- return highlightStyle(user, this.$store)
+ const highlight = this.$store.state.config.highlight
+ const color = highlight[user.screen_name]
+ return highlightStyle(color)
},
hideAttachments () {
return (this.$store.state.config.hideAttachments && !this.inConversation) ||
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 } }">
diff --git a/src/modules/config.js b/src/modules/config.js
index 9a62905e..20e58250 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,4 +1,4 @@
-import { set } from 'vue'
+import { set, delete as del } from 'vue'
import StyleSetter from '../services/style_setter/style_setter.js'
const defaultState = {
@@ -10,7 +10,8 @@ const defaultState = {
autoLoad: true,
streaming: false,
hoverPreview: true,
- muteWords: []
+ muteWords: [],
+ highlight: {}
}
const config = {
@@ -18,12 +19,22 @@ const config = {
mutations: {
setOption (state, { name, value }) {
set(state, name, value)
+ },
+ setHighlight (state, { user, color }) {
+ if (color) {
+ set(state.highlight, user, color)
+ } else {
+ del(state.highlight, user)
+ }
}
},
actions: {
setPageTitle ({state}, option = '') {
document.title = `${option} ${state.name}`
},
+ setHighlight ({ commit, dispatch }, { user, color }) {
+ commit('setHighlight', {user, color})
+ },
setOption ({ commit, dispatch }, { name, value }) {
commit('setOption', {name, value})
switch (name) {
diff --git a/src/modules/users.js b/src/modules/users.js
index 740ffdf6..ba548765 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -43,10 +43,6 @@ export const mutations = {
setUserForStatus (state, status) {
status.user = state.usersObject[status.user.id]
},
- setHighlighted (state, { user: {id}, color }) {
- const user = state.usersObject[id]
- set(user, 'color', color)
- },
setColor (state, { user: {id}, highlighted }) {
const user = state.usersObject[id]
set(user, 'highlight', highlighted)
diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
index 94bf2c40..e10ef3bd 100644
--- a/src/services/user_highlighter/user_highlighter.js
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -1,7 +1,6 @@
import { hex2rgb } from '../color_convert/color_convert.js'
-const highlightStyle = (user, store) => {
- const color = store.state.config.highlight[user.screen_name]
- if (!color) return
+const highlightStyle = (color) => {
+ if (typeof color !== 'string') return
const rgb = hex2rgb(color)
const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`
const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`