diff --git a/src/components/status/status.js b/src/components/status/status.js
index f33293f4..f4d0aecb 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -6,6 +6,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
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'
const Status = {
name: 'Status',
@@ -34,12 +35,21 @@ const Status = {
muteWords () {
return this.$store.state.config.muteWords
},
+ repeaterClass () {
+ const user = this.statusoid.user
+ return this.highlightClass(user)
+ },
userClass () {
- console.log(this.statusoid.user)
- console.log(this.statusoid.user.screen_name)
- return 'USER____' + this.statusoid.user.screen_name
- .replace(/\./g,'_')
- .replace(/\@/g,'_AT_')
+ const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
+ return this.highlightClass(user)
+ },
+ repeaterStyle () {
+ const user = this.statusoid.user
+ return this.highlightStyle(user)
+ },
+ userStyle () {
+ const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
+ return this.highlightStyle(user)
},
hideAttachments () {
return (this.$store.state.config.hideAttachments && !this.inConversation) ||
@@ -172,6 +182,28 @@ 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: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index be4b9f18..97b6d39f 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -8,7 +8,7 @@
</div>
</template>
<template v-else>
- <div v-if="retweet && !noHeading" :class="[userClass]" class="media container retweet-info">
+ <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
<StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
<div class="media-body faint">
<a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
@@ -17,7 +17,7 @@
</div>
</div>
- <div :class="[userClass]" class="media status">
+ <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
<div v-if="!noHeading" class="media-left">
<a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
<StillImage class='avatar' :class="{'avatar-compact': compact}" :src="status.user.profile_image_url_original"/>
@@ -315,7 +315,7 @@
.retweet-info {
padding: 0.4em 0.6em 0 0.6em;
- margin: 0 0 -0.5em 0;
+ margin: 0;
.avatar {
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
@@ -427,6 +427,9 @@
.status {
display: flex;
padding: 0.6em;
+ &.is-retweet {
+ padding-top: 0.1em;
+ }
}
.status-conversation:last-child {
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 4d4266cb..7e0ea0da 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -3,17 +3,22 @@ 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
if (color) {
const rgb = hex2rgb(color)
const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
- console.log(rgb)
- console.log([
- `url(${this.user.cover_photo})`,
- `linear-gradient(to bottom, ${tintColor}, ${tintColor})`
- ].join(', '))
return {
backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
backgroundImage: [
@@ -37,6 +42,33 @@ export default {
dailyAvg () {
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: {
+ get () {
+ return this.userHighlightLocal
+ },
+ set (value) {
+ const config = this.$store.state.config
+ config.highlight = config.highlight || {}
+ if (value) {
+ this.userHighlightLocal = config.highlight[this.user.screen_name] = '#FFFFFF'
+ } else {
+ this.userHighlightLocal = undefined
+ delete config.highlight[this.user.screen_name]
+ }
+ }
+ },
+ userHighlightColor: {
+ get () {
+ const config = this.$store.state.config
+ config.highlight = config.highlight || {}
+ return 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
+ }
}
},
components: {
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 09e91271..7d48870b 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -5,9 +5,14 @@
<router-link to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
<i class="icon-cog usersettings"></i>
</router-link>
- <a :href="user.statusnet_profile_url" target="_blank" style="float: right; margin-top:16px;" v-if="isOtherUser">
+ <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
<i class="icon-link-ext usersettings"></i>
</a>
+ <div class="floater" v-if="switcher || isOtherUser">
+ <input type="checkbox" id="userHighlightCheck" v-model="userHighlightEnabled">
+ <label :title="$t('settings.highlight')" for="userHighlightCheck"></label>
+ <input type="color" id="userHighlightColor" v-if="userHighlightLocal" v-model="userHighlightColor"/>
+ </div>
<div class='container'>
<router-link :to="{ name: 'user-profile', params: { id: user.id } }">
<StillImage class="avatar" :src="user.profile_image_url_original"/>
@@ -278,4 +283,8 @@
font-size: 0.7em;
color: #CCC;
}
+.floater {
+ float: right;
+ margin-top: 16px;
+}
</style>
diff --git a/src/main.js b/src/main.js
index bacd7f6d..37a187c7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -53,6 +53,7 @@ const persistedStateOptions = {
'config.streaming',
'config.muteWords',
'config.customTheme',
+ 'config.highlight',
'users.lastLoginName'
]
}
diff --git a/src/modules/users.js b/src/modules/users.js
index 8303ecc1..740ffdf6 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -42,6 +42,14 @@ 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)
}
}