working, somewhat

This commit is contained in:
Henry Jameson 2018-06-18 11:36:58 +03:00
parent 148e691199
commit f911182a2f
6 changed files with 99 additions and 14 deletions

View file

@ -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 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'
const Status = { const Status = {
name: 'Status', name: 'Status',
@ -34,12 +35,21 @@ const Status = {
muteWords () { muteWords () {
return this.$store.state.config.muteWords return this.$store.state.config.muteWords
}, },
repeaterClass () {
const user = this.statusoid.user
return this.highlightClass(user)
},
userClass () { userClass () {
console.log(this.statusoid.user) const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
console.log(this.statusoid.user.screen_name) return this.highlightClass(user)
return 'USER____' + this.statusoid.user.screen_name },
.replace(/\./g,'_') repeaterStyle () {
.replace(/\@/g,'_AT_') 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 () { hideAttachments () {
return (this.$store.state.config.hideAttachments && !this.inConversation) || return (this.$store.state.config.hideAttachments && !this.inConversation) ||
@ -172,6 +182,28 @@ 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: {

View file

@ -8,7 +8,7 @@
</div> </div>
</template> </template>
<template v-else> <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"/> <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
<div class="media-body faint"> <div class="media-body faint">
<a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a> <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> </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"> <div v-if="!noHeading" class="media-left">
<a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> <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"/> <StillImage class='avatar' :class="{'avatar-compact': compact}" :src="status.user.profile_image_url_original"/>
@ -315,7 +315,7 @@
.retweet-info { .retweet-info {
padding: 0.4em 0.6em 0 0.6em; padding: 0.4em 0.6em 0 0.6em;
margin: 0 0 -0.5em 0; margin: 0;
.avatar { .avatar {
border-radius: $fallback--avatarAltRadius; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
@ -427,6 +427,9 @@
.status { .status {
display: flex; display: flex;
padding: 0.6em; padding: 0.6em;
&.is-retweet {
padding-top: 0.1em;
}
} }
.status-conversation:last-child { .status-conversation:last-child {

View file

@ -3,17 +3,22 @@ import { hex2rgb } from '../../services/color_convert/color_convert.js'
export default { export default {
props: [ 'user', 'switcher', 'selected', 'hideBio' ], 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: { computed: {
headingStyle () { headingStyle () {
const color = this.$store.state.config.colors.bg const color = this.$store.state.config.colors.bg
if (color) { if (color) {
const rgb = hex2rgb(color) const rgb = hex2rgb(color)
const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` 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 { return {
backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
backgroundImage: [ backgroundImage: [
@ -37,6 +42,33 @@ export default {
dailyAvg () { dailyAvg () {
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: {
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: { components: {

View file

@ -5,9 +5,14 @@
<router-link to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser"> <router-link to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
<i class="icon-cog usersettings"></i> <i class="icon-cog usersettings"></i>
</router-link> </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> <i class="icon-link-ext usersettings"></i>
</a> </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'> <div class='container'>
<router-link :to="{ name: 'user-profile', params: { id: user.id } }"> <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
<StillImage class="avatar" :src="user.profile_image_url_original"/> <StillImage class="avatar" :src="user.profile_image_url_original"/>
@ -278,4 +283,8 @@
font-size: 0.7em; font-size: 0.7em;
color: #CCC; color: #CCC;
} }
.floater {
float: right;
margin-top: 16px;
}
</style> </style>

View file

@ -53,6 +53,7 @@ const persistedStateOptions = {
'config.streaming', 'config.streaming',
'config.muteWords', 'config.muteWords',
'config.customTheme', 'config.customTheme',
'config.highlight',
'users.lastLoginName' 'users.lastLoginName'
] ]
} }

View file

@ -42,6 +42,14 @@ export const mutations = {
}, },
setUserForStatus (state, status) { setUserForStatus (state, status) {
status.user = state.usersObject[status.user.id] 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)
} }
} }