added ability to pick the style of highlighting

This commit is contained in:
Henry Jameson 2018-08-05 05:18:04 +03:00
parent d886ab752c
commit 6a81aa2745
6 changed files with 79 additions and 35 deletions

View file

@ -27,8 +27,7 @@ const Notification = {
userStyle () { userStyle () {
const highlight = this.$store.state.config.highlight const highlight = this.$store.state.config.highlight
const user = this.notification.action.user const user = this.notification.action.user
const color = highlight[user.screen_name] return highlightStyle(highlight[user.screen_name])
return highlightStyle(color)
} }
} }
} }

View file

@ -47,14 +47,12 @@ const Status = {
repeaterStyle () { repeaterStyle () {
const user = this.statusoid.user const user = this.statusoid.user
const highlight = this.$store.state.config.highlight const highlight = this.$store.state.config.highlight
const color = highlight[user.screen_name] return highlightStyle(highlight[user.screen_name])
return highlightStyle(color)
}, },
userStyle () { userStyle () {
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
const highlight = this.$store.state.config.highlight const highlight = this.$store.state.config.highlight
const color = highlight[user.screen_name] return highlightStyle(highlight[user.screen_name])
return highlightStyle(color)
}, },
hideAttachments () { hideAttachments () {
return (this.$store.state.config.hideAttachments && !this.inConversation) || return (this.$store.state.config.hideAttachments && !this.inConversation) ||

View file

@ -33,13 +33,15 @@ export default {
const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)) const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
return Math.round(this.user.statuses_count / days) return Math.round(this.user.statuses_count / days)
}, },
userHighlightEnabled: { userHighlightType: {
get () { 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) { set (type) {
if (enabled) { const data = this.$store.state.config.highlight[this.user.screen_name]
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: '#FFFFFF' }) if (type !== 'disabled') {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type })
} else { } else {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined }) this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
} }
@ -47,7 +49,8 @@ export default {
}, },
userHighlightColor: { userHighlightColor: {
get () { 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) { set (color) {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color }) this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })

View file

@ -26,10 +26,16 @@
</div> </div>
<div class="floater" v-if="switcher || isOtherUser"> <div class="floater" v-if="switcher || isOtherUser">
<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to --> <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
<input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightEnabled" v-model="userHighlightColor"/> <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
<input type="checkbox" class="userHighlightChk" :id="'userHighlightCheck'+user.id" v-model="userHighlightEnabled"> <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
<label :title="$t('settings.highlight')" :for="'userHighlightCheck'+user.id"> <label for="style-switcher" class='userHighlightSel select'>
<i class="icon-brush"></i> <select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType">
<option value="disabled">No highlight</option>
<option value="solid">Solid bg</option>
<option value="striped">Striped bg</option>
<option value="side">Side stripe</option>
</select>
<i class="icon-down-open"/>
</label> </label>
</div> </div>
</div> </div>
@ -307,12 +313,25 @@
.userHighlightCl { .userHighlightCl {
padding: 2px 10px; padding: 2px 10px;
height: 22px; }
vertical-align: top; .userHighlightSel,
margin-right: 0 .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; vertical-align: top;
margin-right: 0 margin-right: 0
} }

View file

@ -20,9 +20,12 @@ const config = {
setOption (state, { name, value }) { setOption (state, { name, value }) {
set(state, name, value) set(state, name, value)
}, },
setHighlight (state, { user, color }) { setHighlight (state, { user, color, type }) {
if (color) { const data = this.state.config.highlight[user]
set(state.highlight, user, color) console.log(user, color, type, data)
if (color || type) {
set(state.highlight, user, { color: color || data.color, type: type || data.type })
} else { } else {
del(state.highlight, user) del(state.highlight, user)
} }
@ -32,8 +35,8 @@ const config = {
setPageTitle ({state}, option = '') { setPageTitle ({state}, option = '') {
document.title = `${option} ${state.name}` document.title = `${option} ${state.name}`
}, },
setHighlight ({ commit, dispatch }, { user, color }) { setHighlight ({ commit, dispatch }, { user, color, type }) {
commit('setHighlight', {user, color}) commit('setHighlight', {user, color, type})
}, },
setOption ({ commit, dispatch }, { name, value }) { setOption ({ commit, dispatch }, { name, value }) {
commit('setOption', {name, value}) commit('setOption', {name, value})

View file

@ -1,18 +1,40 @@
import { hex2rgb } from '../color_convert/color_convert.js' 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 if (typeof color !== 'string') return
const rgb = hex2rgb(color) 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 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)` const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`
return { if (type === 'striped') {
backgroundImage: [ return {
'repeating-linear-gradient(-45deg,', backgroundImage: [
`${tintColor} ,`, 'repeating-linear-gradient(-45deg,',
`${tintColor} 20px,`, `${tintColor} ,`,
`${tintColor2} 20px,`, `${tintColor} 20px,`,
`${tintColor2} 40px` `${tintColor2} 20px,`,
].join(' '), `${tintColor2} 40px`
backgroundPosition: '0 0' ].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'
}
} }
} }