moved style generator into separate file. notifications are highlighted too now.

This commit is contained in:
Henry Jameson 2018-06-18 12:09:14 +03:00
parent f911182a2f
commit fa8c221f3a
4 changed files with 44 additions and 27 deletions

View File

@ -1,6 +1,7 @@
import Status from '../status/status.vue' import Status from '../status/status.vue'
import StillImage from '../still-image/still-image.vue' import StillImage from '../still-image/still-image.vue'
import UserCardContent from '../user_card_content/user_card_content.vue' import UserCardContent from '../user_card_content/user_card_content.vue'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
const Notification = { const Notification = {
data () { data () {
@ -18,6 +19,14 @@ const Notification = {
toggleUserExpanded () { toggleUserExpanded () {
this.userExpanded = !this.userExpanded this.userExpanded = !this.userExpanded
} }
},
computed: {
userClass () {
return highlightClass(this.notification.action.user, this.$store)
},
userStyle () {
return highlightStyle(this.notification.action.user, this.$store)
},
} }
} }

View File

@ -1,6 +1,6 @@
<template> <template>
<status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status> <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
<div class="non-mention" v-else> <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else>
<a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
<StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/> <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
</a> </a>

View File

@ -7,6 +7,7 @@ import UserCardContent from '../user_card_content/user_card_content.vue'
import StillImage from '../still-image/still-image.vue' import StillImage from '../still-image/still-image.vue'
import { filter, find } from 'lodash' import { filter, find } from 'lodash'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
const Status = { const Status = {
name: 'Status', name: 'Status',
@ -37,19 +38,19 @@ const Status = {
}, },
repeaterClass () { repeaterClass () {
const user = this.statusoid.user const user = this.statusoid.user
return this.highlightClass(user) return highlightClass(user, this.$store)
}, },
userClass () { userClass () {
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
return this.highlightClass(user) return highlightClass(user, this.$store)
}, },
repeaterStyle () { repeaterStyle () {
const user = this.statusoid.user const user = this.statusoid.user
return this.highlightStyle(user) return highlightStyle(user, this.$store)
}, },
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
return this.highlightStyle(user) return highlightStyle(user, this.$store)
}, },
hideAttachments () { hideAttachments () {
return (this.$store.state.config.hideAttachments && !this.inConversation) || return (this.$store.state.config.hideAttachments && !this.inConversation) ||
@ -183,28 +184,6 @@ const Status = {
replyLeave () { replyLeave () {
this.showPreview = false this.showPreview = false
}, },
highlightStyle (user) {
const color = this.$store.state.config.highlight[user.screen_name]
if (!color) 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)`
return {
backgroundImage: [
'repeating-linear-gradient(-45deg,',
tintColor, ',',
tintColor, '20px,',
tintColor2, '20px,',
tintColor2, '40px',
].join(' '),
backgroundPosition: '0 0'
}
},
highlightClass (user) {
return 'USER____' + user.screen_name
.replace(/\./g,'_')
.replace(/\@/g,'_AT_')
}
}, },
watch: { watch: {
'highlight': function (id) { 'highlight': function (id) {

View File

@ -0,0 +1,29 @@
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 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)`
return {
backgroundImage: [
'repeating-linear-gradient(-45deg,',
`${tintColor} ,`,
`${tintColor} 20px,`,
`${tintColor2} 20px,`,
`${tintColor2} 40px`
].join(' '),
backgroundPosition: '0 0'
}
}
const highlightClass = (user) => {
return 'USER____' + user.screen_name
.replace(/\./g, '_')
.replace(/@/g, '_AT_')
}
export {
highlightClass,
highlightStyle
}