From 8ccebbe1564fe76b376eee83ad985b934edcbfa9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 19 Jun 2018 16:17:50 +0300 Subject: [PATCH] both bugs fixed. it's reactive and no more conflicting cards --- src/components/notification/notification.js | 9 +++-- src/components/status/status.js | 12 ++++--- .../user_card_content/user_card_content.js | 33 +++++-------------- .../user_card_content/user_card_content.vue | 7 ++-- src/modules/config.js | 15 +++++++-- src/modules/users.js | 4 --- .../user_highlighter/user_highlighter.js | 5 ++- 7 files changed, 41 insertions(+), 44 deletions(-) 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 @@
- - - + + + +
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)`