From 6a81aa274533b6af1f2514508f6f9fa3b0795c9f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 5 Aug 2018 05:18:04 +0300 Subject: [PATCH] added ability to pick the style of highlighting --- src/components/notification/notification.js | 3 +- src/components/status/status.js | 6 +-- .../user_card_content/user_card_content.js | 15 ++++--- .../user_card_content/user_card_content.vue | 35 ++++++++++++---- src/modules/config.js | 13 +++--- .../user_highlighter/user_highlighter.js | 42 ++++++++++++++----- 6 files changed, 79 insertions(+), 35 deletions(-) diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index 33482891..c786f2cc 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -27,8 +27,7 @@ const Notification = { userStyle () { const highlight = this.$store.state.config.highlight const user = this.notification.action.user - const color = highlight[user.screen_name] - return highlightStyle(color) + return highlightStyle(highlight[user.screen_name]) } } } diff --git a/src/components/status/status.js b/src/components/status/status.js index 2b5bcb55..3a9363ab 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -47,14 +47,12 @@ const Status = { repeaterStyle () { const user = this.statusoid.user const highlight = this.$store.state.config.highlight - const color = highlight[user.screen_name] - return highlightStyle(color) + return highlightStyle(highlight[user.screen_name]) }, userStyle () { const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user const highlight = this.$store.state.config.highlight - const color = highlight[user.screen_name] - return highlightStyle(color) + return highlightStyle(highlight[user.screen_name]) }, 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 48e0ea02..76a5577e 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -33,13 +33,15 @@ export default { const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)) return Math.round(this.user.statuses_count / days) }, - userHighlightEnabled: { + userHighlightType: { get () { - return this.$store.state.config.highlight[this.user.screen_name] + const data = this.$store.state.config.highlight[this.user.screen_name] + return data && data.type || 'disabled' }, - set (enabled) { - if (enabled) { - this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: '#FFFFFF' }) + set (type) { + const data = this.$store.state.config.highlight[this.user.screen_name] + if (type !== 'disabled') { + this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type }) } else { this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined }) } @@ -47,7 +49,8 @@ export default { }, userHighlightColor: { get () { - return this.$store.state.config.highlight[this.user.screen_name] + const data = this.$store.state.config.highlight[this.user.screen_name] + return data && data.color }, 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 d3238b09..abdf0dfe 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -26,10 +26,16 @@
- - -
@@ -307,12 +313,25 @@ .userHighlightCl { padding: 2px 10px; - height: 22px; - vertical-align: top; - margin-right: 0 + } + .userHighlightSel, + .userHighlightSel.select { + padding-top: 0; + padding-bottom: 0; + } + .userHighlightSel.select i { + line-height: 22px; } - .userHighlightChk + label::before { + .userHighlightText { + width: 70px; + } + + .userHighlightCl, + .userHighlightText, + .userHighlightSel, + .userHighlightSel.select { + height: 22px; vertical-align: top; margin-right: 0 } diff --git a/src/modules/config.js b/src/modules/config.js index 20e58250..2d597640 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -20,9 +20,12 @@ const config = { setOption (state, { name, value }) { set(state, name, value) }, - setHighlight (state, { user, color }) { - if (color) { - set(state.highlight, user, color) + setHighlight (state, { user, color, type }) { + const data = this.state.config.highlight[user] + console.log(user, color, type, data) + + if (color || type) { + set(state.highlight, user, { color: color || data.color, type: type || data.type }) } else { del(state.highlight, user) } @@ -32,8 +35,8 @@ const config = { setPageTitle ({state}, option = '') { document.title = `${option} ${state.name}` }, - setHighlight ({ commit, dispatch }, { user, color }) { - commit('setHighlight', {user, color}) + setHighlight ({ commit, dispatch }, { user, color, type }) { + commit('setHighlight', {user, color, type}) }, setOption ({ commit, dispatch }, { name, value }) { commit('setOption', {name, value}) diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js index e10ef3bd..31eba2c8 100644 --- a/src/services/user_highlighter/user_highlighter.js +++ b/src/services/user_highlighter/user_highlighter.js @@ -1,18 +1,40 @@ import { hex2rgb } from '../color_convert/color_convert.js' -const highlightStyle = (color) => { +const highlightStyle = (prefs) => { + if (prefs === undefined) { + return + } + const {color, type} = prefs + console.log(arguments) if (typeof color !== 'string') return const rgb = hex2rgb(color) + const solidColor = `rgb(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)})` 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)` - return { - backgroundImage: [ - 'repeating-linear-gradient(-45deg,', - `${tintColor} ,`, - `${tintColor} 20px,`, - `${tintColor2} 20px,`, - `${tintColor2} 40px` - ].join(' '), - backgroundPosition: '0 0' + if (type === 'striped') { + return { + backgroundImage: [ + 'repeating-linear-gradient(-45deg,', + `${tintColor} ,`, + `${tintColor} 20px,`, + `${tintColor2} 20px,`, + `${tintColor2} 40px` + ].join(' '), + backgroundPosition: '0 0' + } + } else if (type === 'solid') { + return { + backgroundColor: tintColor2 + } + } else if (type === 'side') { + return { + backgroundImage: [ + 'linear-gradient(to right,', + `${solidColor} ,`, + `${solidColor} 2px,`, + `transparent 6px` + ].join(' '), + backgroundPosition: '0 0' + } } }