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 StillImage from '../still-image/still-image.vue'
import UserCardContent from '../user_card_content/user_card_content.vue'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
const Notification = {
data () {
@ -18,6 +19,14 @@ const Notification = {
toggleUserExpanded () {
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>
<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">
<StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
</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 { filter, find } from 'lodash'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
const Status = {
name: 'Status',
@ -37,19 +38,19 @@ const Status = {
},
repeaterClass () {
const user = this.statusoid.user
return this.highlightClass(user)
return highlightClass(user, this.$store)
},
userClass () {
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
return this.highlightClass(user)
return highlightClass(user, this.$store)
},
repeaterStyle () {
const user = this.statusoid.user
return this.highlightStyle(user)
return highlightStyle(user, this.$store)
},
userStyle () {
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
return this.highlightStyle(user)
return highlightStyle(user, this.$store)
},
hideAttachments () {
return (this.$store.state.config.hideAttachments && !this.inConversation) ||
@ -183,28 +184,6 @@ const Status = {
replyLeave () {
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: {
'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
}