From 7bceabb5bda1f7d0737f8f51e0aa07879b7ce72e Mon Sep 17 00:00:00 2001 From: taehoon Date: Tue, 5 Mar 2019 14:01:49 -0500 Subject: Rename UserCardContent to UserCard --- src/components/user_card/user_card.js | 148 ++++++++++++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 src/components/user_card/user_card.js (limited to 'src/components/user_card/user_card.js') diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js new file mode 100644 index 00000000..0cb616f4 --- /dev/null +++ b/src/components/user_card/user_card.js @@ -0,0 +1,148 @@ +import UserAvatar from '../user_avatar/user_avatar.vue' +import { hex2rgb } from '../../services/color_convert/color_convert.js' +import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate' +import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' + +export default { + props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ], + data () { + return { + followRequestInProgress: false, + followRequestSent: false, + hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined' + ? this.$store.state.instance.hideUserStats + : this.$store.state.config.hideUserStats, + betterShadow: this.$store.state.interface.browserSupport.cssFilter + } + }, + computed: { + classes () { + return [{ + 'user-card-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius + 'user-card-r': this.rounded === true, // set border-radius for all sides + 'user-card-b': this.bordered === true // set border for all sides + }] + }, + style () { + const color = this.$store.state.config.customTheme.colors + ? this.$store.state.config.customTheme.colors.bg // v2 + : this.$store.state.config.colors.bg // v1 + + if (color) { + const rgb = (typeof color === 'string') ? hex2rgb(color) : color + const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` + + const gradient = [ + [tintColor, this.hideBio ? '60%' : ''], + this.hideBio ? [ + color, '100%' + ] : [ + tintColor, '' + ] + ].map(_ => _.join(' ')).join(', ') + + return { + backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, + backgroundImage: [ + `linear-gradient(to bottom, ${gradient})`, + `url(${this.user.cover_photo})` + ].join(', ') + } + } + }, + isOtherUser () { + return this.user.id !== this.$store.state.users.currentUser.id + }, + subscribeUrl () { + // eslint-disable-next-line no-undef + const serverUrl = new URL(this.user.statusnet_profile_url) + return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus` + }, + loggedIn () { + return this.$store.state.users.currentUser + }, + 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) + }, + userHighlightType: { + get () { + const data = this.$store.state.config.highlight[this.user.screen_name] + return data && data.type || 'disabled' + }, + set (type) { + const data = this.$store.state.config.highlight[this.user.screen_name] + if (type !== 'disabled') { + this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type }) + } else { + this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined }) + } + } + }, + userHighlightColor: { + get () { + const data = this.$store.state.config.highlight[this.user.screen_name] + return data && data.color + }, + set (color) { + this.$store.dispatch('setHighlight', { user: this.user.screen_name, color }) + } + }, + visibleRole () { + const validRole = (this.user.role === 'admin' || this.user.role === 'moderator') + const showRole = this.isOtherUser || this.user.show_role + + return validRole && showRole && this.user.role + } + }, + components: { + UserAvatar + }, + methods: { + followUser () { + this.followRequestInProgress = true + requestFollow(this.user, this.$store).then(({sent}) => { + this.followRequestInProgress = false + this.followRequestSent = sent + }) + }, + unfollowUser () { + this.followRequestInProgress = true + requestUnfollow(this.user, this.$store).then(() => { + this.followRequestInProgress = false + }) + }, + blockUser () { + const store = this.$store + store.state.api.backendInteractor.blockUser(this.user.id) + .then((blockedUser) => store.commit('addNewUsers', [blockedUser])) + }, + unblockUser () { + const store = this.$store + store.state.api.backendInteractor.unblockUser(this.user.id) + .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser])) + }, + toggleMute () { + const store = this.$store + store.commit('setMuted', {user: this.user, muted: !this.user.muted}) + store.state.api.backendInteractor.setUserMute(this.user) + }, + setProfileView (v) { + if (this.switcher) { + const store = this.$store + store.commit('setProfileView', { v }) + } + }, + linkClicked ({target}) { + if (target.tagName === 'SPAN') { + target = target.parentNode + } + if (target.tagName === 'A') { + window.open(target.href, '_blank') + } + }, + userProfileLink (user) { + return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) + } + } +} -- cgit v1.2.3-70-g09d2 From 5f51fe897dcd7d32c46a67a8d31c8b4ffc8858b2 Mon Sep 17 00:00:00 2001 From: taehoon Date: Tue, 5 Mar 2019 21:52:04 -0500 Subject: Revert modifier class notation --- src/components/user_card/user_card.js | 6 +++--- src/components/user_card/user_card.vue | 7 +++---- 2 files changed, 6 insertions(+), 7 deletions(-) (limited to 'src/components/user_card/user_card.js') diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index 0cb616f4..81c938c0 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -18,9 +18,9 @@ export default { computed: { classes () { return [{ - 'user-card-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius - 'user-card-r': this.rounded === true, // set border-radius for all sides - 'user-card-b': this.bordered === true // set border for all sides + 'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius + 'user-card-rounded': this.rounded === true, // set border-radius for all sides + 'user-card-bordered': this.bordered === true // set border for all sides }] }, style () { diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index b90f57a1..cc2ce6b8 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -161,22 +161,21 @@ text-align: center; } - // // Modifiers - &-rt { + &-rounded-t { border-top-left-radius: $fallback--panelRadius; border-top-left-radius: var(--panelRadius, $fallback--panelRadius); border-top-right-radius: $fallback--panelRadius; border-top-right-radius: var(--panelRadius, $fallback--panelRadius); } - &-r { + &-rounded { border-radius: $fallback--panelRadius; border-radius: var(--panelRadius, $fallback--panelRadius); } - &-b { + &-bordered { border-width: 1px; border-style: solid; border-color: $fallback--border; -- cgit v1.2.3-70-g09d2