diff options
Diffstat (limited to 'src/components/status')
| -rw-r--r-- | src/components/status/status.js | 42 | ||||
| -rw-r--r-- | src/components/status/status.vue | 9 |
2 files changed, 43 insertions, 8 deletions
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 { |