diff options
| -rw-r--r-- | src/components/status/status.js | 42 | ||||
| -rw-r--r-- | src/components/status/status.vue | 9 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.js | 42 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 11 | ||||
| -rw-r--r-- | src/main.js | 1 | ||||
| -rw-r--r-- | src/modules/users.js | 8 |
6 files changed, 99 insertions, 14 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 { 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) } } |