diff options
Diffstat (limited to 'src/components/user_card_content')
| -rw-r--r-- | src/components/user_card_content/user_card_content.js | 148 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 420 |
2 files changed, 0 insertions, 568 deletions
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js deleted file mode 100644 index 96c6036c..00000000 --- a/src/components/user_card_content/user_card_content.js +++ /dev/null @@ -1,148 +0,0 @@ -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-content-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius - 'user-card-content-r': this.rounded === true, // set border-radius for all sides - 'user-card-content-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) - } - } -} diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue deleted file mode 100644 index e003e850..00000000 --- a/src/components/user_card_content/user_card_content.vue +++ /dev/null @@ -1,420 +0,0 @@ -<template> -<div class="user-card-content" :class="classes" :style="style"> - <div class="panel-heading"> - <div class='user-info'> - <div class='container'> - <router-link :to="userProfileLink(user)"> - <UserAvatar :betterShadow="betterShadow" :src="user.profile_image_url_original"/> - </router-link> - <div class="name-and-screen-name"> - <div class="top-line"> - <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div> - <div :title="user.name" class='user-name' v-else>{{user.name}}</div> - <router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser"> - <i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i> - </router-link> - <a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser && !user.is_local"> - <i class="icon-link-ext usersettings"></i> - </a> - </div> - - <router-link class='user-screen-name' :to="userProfileLink(user)"> - <span class="handle">@{{user.screen_name}} - <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span> - </span><span v-if="user.locked"><i class="icon icon-lock"></i></span> - <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span> - </router-link> - </div> - </div> - <div class="user-meta"> - <div v-if="user.follows_you && loggedIn && isOtherUser" class="following"> - {{ $t('user_card.follows_you') }} - </div> - <div class="highlighter" v-if="isOtherUser && (loggedIn || !switcher)"> - <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to --> - <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/> - <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/> - <label for="style-switcher" class='userHighlightSel select'> - <select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType"> - <option value="disabled">No highlight</option> - <option value="solid">Solid bg</option> - <option value="striped">Striped bg</option> - <option value="side">Side stripe</option> - </select> - <i class="icon-down-open"/> - </label> - </div> - </div> - <div v-if="isOtherUser" class="user-interactions"> - <div class="follow" v-if="loggedIn"> - <span v-if="user.following"> - <!--Following them!--> - <button @click="unfollowUser" class="pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')"> - <template v-if="followRequestInProgress"> - {{ $t('user_card.follow_progress') }} - </template> - <template v-else> - {{ $t('user_card.following') }} - </template> - </button> - </span> - <span v-if="!user.following"> - <button @click="followUser" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''"> - <template v-if="followRequestInProgress"> - {{ $t('user_card.follow_progress') }} - </template> - <template v-else-if="followRequestSent"> - {{ $t('user_card.follow_sent') }} - </template> - <template v-else> - {{ $t('user_card.follow') }} - </template> - </button> - </span> - </div> - <div class='mute' v-if='isOtherUser && loggedIn'> - <span v-if='user.muted'> - <button @click="toggleMute" class="pressed"> - {{ $t('user_card.muted') }} - </button> - </span> - <span v-if='!user.muted'> - <button @click="toggleMute"> - {{ $t('user_card.mute') }} - </button> - </span> - </div> - <div class="remote-follow" v-if='!loggedIn && user.is_local'> - <form method="POST" :action='subscribeUrl'> - <input type="hidden" name="nickname" :value="user.screen_name"> - <input type="hidden" name="profile" value=""> - <button click="submit" class="remote-button"> - {{ $t('user_card.remote_follow') }} - </button> - </form> - </div> - <div class='block' v-if='isOtherUser && loggedIn'> - <span v-if='user.statusnet_blocking'> - <button @click="unblockUser" class="pressed"> - {{ $t('user_card.blocked') }} - </button> - </span> - <span v-if='!user.statusnet_blocking'> - <button @click="blockUser"> - {{ $t('user_card.block') }} - </button> - </span> - </div> - </div> - </div> - </div> - <div class="panel-body" v-if="!hideBio"> - <div v-if="!hideUserStatsLocal && switcher" class="user-counts"> - <div class="user-count" v-on:click.prevent="setProfileView('statuses')"> - <h5>{{ $t('user_card.statuses') }}</h5> - <span>{{user.statuses_count}} <br></span> - </div> - <div class="user-count" v-on:click.prevent="setProfileView('friends')"> - <h5>{{ $t('user_card.followees') }}</h5> - <span>{{user.friends_count}}</span> - </div> - <div class="user-count" v-on:click.prevent="setProfileView('followers')"> - <h5>{{ $t('user_card.followers') }}</h5> - <span>{{user.followers_count}}</span> - </div> - </div> - <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-content-bio" v-html="user.description_html"></p> - <p v-else-if="!hideBio" class="user-card-content-bio">{{ user.description }}</p> - </div> -</div> -</template> - -<script src="./user_card_content.js"></script> - -<style lang="scss"> -@import '../../_variables.scss'; - -.user-card-content { - background-size: cover; - overflow: hidden; - - .panel-heading { - padding: .5em 0; - text-align: center; - box-shadow: none; - background: transparent; - flex-direction: column; - align-items: stretch; - } - - .panel-body { - word-wrap: break-word; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%); - } - - p { - margin-bottom: 0; - } - - &-bio { - text-align: center; - } - - // - // Modifiers - - &-rt { - 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 { - border-radius: $fallback--panelRadius; - border-radius: var(--panelRadius, $fallback--panelRadius); - } - - &-b { - border-width: 1px; - border-style: solid; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - } -} - -.user-info { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - padding: 0 26px; - - .container { - padding: 16px 0 6px; - display: flex; - max-height: 56px; - - .avatar { - flex: 1 0 100%; - width: 56px; - height: 56px; - box-shadow: 0px 1px 8px rgba(0,0,0,0.75); - box-shadow: var(--avatarShadow); - object-fit: cover; - } - } - - &:hover .animated.avatar { - canvas { - display: none; - } - img { - visibility: visible; - } - } - - .usersettings { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - opacity: .8; - } - - .name-and-screen-name { - display: block; - margin-left: 0.6em; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1 1 0; - // This is so that text doesn't get overlapped by avatar's shadow if it has - // big one - z-index: 1; - - img { - width: 26px; - height: 26px; - vertical-align: middle; - object-fit: contain - } - .top-line { - display: flex; - } - } - - .user-name { - text-overflow: ellipsis; - overflow: hidden; - flex: 1 1 auto; - margin-right: 1em; - font-size: 15px; - - img { - object-fit: contain; - height: 16px; - width: 16px; - vertical-align: middle; - } - } - - .user-screen-name { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - display: inline-block; - font-weight: light; - font-size: 15px; - padding-right: 0.1em; - width: 100%; - display: flex; - - .dailyAvg { - min-width: 1px; - flex: 0 0 auto; - margin-left: 1em; - font-size: 0.7em; - color: $fallback--text; - color: var(--text, $fallback--text); - } - - .handle { - min-width: 1px; - flex: 0 1 auto; - text-overflow: ellipsis; - overflow: hidden; - } - - // TODO use proper colors - .staff { - text-transform: capitalize; - color: $fallback--text; - color: var(--btnText, $fallback--text); - background-color: $fallback--fg; - background-color: var(--btn, $fallback--fg); - } - } - - .user-meta { - margin-bottom: .15em; - display: flex; - align-items: baseline; - font-size: 14px; - line-height: 22px; - flex-wrap: wrap; - - .following { - flex: 1 0 auto; - margin: 0; - margin-bottom: .25em; - text-align: left; - } - - .highlighter { - flex: 0 1 auto; - display: flex; - flex-wrap: wrap; - margin-right: -.5em; - align-self: start; - - .userHighlightCl { - padding: 2px 10px; - flex: 1 0 auto; - } - - .userHighlightSel, - .userHighlightSel.select { - padding-top: 0; - padding-bottom: 0; - flex: 1 0 auto; - } - .userHighlightSel.select i { - line-height: 22px; - } - - .userHighlightText { - width: 70px; - flex: 1 0 auto; - } - - .userHighlightCl, - .userHighlightText, - .userHighlightSel, - .userHighlightSel.select { - height: 22px; - vertical-align: top; - margin-right: .5em; - margin-bottom: .25em; - } - } - } - .user-interactions { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - - margin-right: -.75em; - - div { - flex: 1 0 0; - margin-right: .75em; - margin-bottom: .6em; - white-space: nowrap; - } - - .mute { - max-width: 220px; - min-height: 28px; - } - - .remote-follow { - max-width: 220px; - min-height: 28px; - } - - .follow { - max-width: 220px; - min-height: 28px; - } - - button { - width: 100%; - height: 100%; - margin: 0; - } - - .remote-button { - height: 28px !important; - width: 92%; - } - - .pressed { - border-bottom-color: rgba(255, 255, 255, 0.2); - border-top-color: rgba(0, 0, 0, 0.2); - } - } -} - -.user-counts { - display: flex; - line-height:16px; - padding: .5em 1.5em 0em 1.5em; - text-align: center; - justify-content: space-between; - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - flex-wrap: wrap; -} - -.user-count { - flex: 1 0 auto; - padding: .5em 0 .5em 0; - margin: 0 .5em; - - h5 { - font-size:1em; - font-weight: bolder; - margin: 0 0 0.25em; - } - a { - text-decoration: none; - } -} -</style> |