forked from AkkomaGang/akkoma-fe
Wrap action buttons below user names
for more readable notification panel
This commit is contained in:
parent
14e789cf7a
commit
0a56cf37a9
GPG Key ID:
1DDD22F13552A07A
|
|
@ -97,14 +97,13 @@
|
|||
.user-info {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
padding: 0 26px;
|
||||
padding: 0 1.5em;
|
||||
|
||||
.container {
|
||||
min-width: 0;
|
||||
padding: 16px 0 6px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
max-height: 56px;
|
||||
|
||||
> * {
|
||||
min-width: 0;
|
||||
|
|
@ -165,7 +164,8 @@
|
|||
}
|
||||
|
||||
.user-summary {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0.6em;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -184,6 +184,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.user-names {
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
@ -228,6 +233,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button-line {
|
||||
display: flex;
|
||||
min-width: 10em;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
margin-bottom: .15em;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,188 +1,84 @@
|
|||
<template>
|
||||
<div
|
||||
class="user-card"
|
||||
:class="classes"
|
||||
>
|
||||
<div
|
||||
:class="{ 'hide-bio': hideBio }"
|
||||
:style="style"
|
||||
class="background-image"
|
||||
/>
|
||||
<div class="user-card" :class="classes">
|
||||
<div :class="{ 'hide-bio': hideBio }" :style="style" class="background-image" />
|
||||
<div class="panel-heading -flexible-height">
|
||||
<div class="user-info">
|
||||
<div class="container">
|
||||
<a
|
||||
v-if="allowZoomingAvatar"
|
||||
class="user-info-avatar-link"
|
||||
@click="zoomAvatar"
|
||||
>
|
||||
<UserAvatar
|
||||
:better-shadow="betterShadow"
|
||||
:user="user"
|
||||
/>
|
||||
<a v-if="allowZoomingAvatar" class="user-info-avatar-link" @click="zoomAvatar">
|
||||
<UserAvatar :better-shadow="betterShadow" :user="user" />
|
||||
<div class="user-info-avatar-link-overlay">
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="search-plus"
|
||||
/>
|
||||
<FAIcon class="fa-scale-110 fa-old-padding" icon="search-plus" />
|
||||
</div>
|
||||
</a>
|
||||
<router-link
|
||||
v-else
|
||||
:to="userProfileLink(user)"
|
||||
>
|
||||
<UserAvatar
|
||||
:better-shadow="betterShadow"
|
||||
:user="user"
|
||||
/>
|
||||
<router-link v-else :to="userProfileLink(user)">
|
||||
<UserAvatar :better-shadow="betterShadow" :user="user" />
|
||||
</router-link>
|
||||
<div class="user-summary">
|
||||
<div class="top-line">
|
||||
<RichContent
|
||||
:title="user.name"
|
||||
class="user-name"
|
||||
:html="user.name"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
<button
|
||||
v-if="!isOtherUser && user.is_local"
|
||||
class="button-unstyled edit-profile-button"
|
||||
@click.stop="openProfileTab"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="icon"
|
||||
icon="edit"
|
||||
:title="$t('user_card.edit_profile')"
|
||||
/>
|
||||
</button>
|
||||
<a
|
||||
v-if="isOtherUser && !user.is_local"
|
||||
:href="user.statusnet_profile_url"
|
||||
target="_blank"
|
||||
class="button-unstyled external-link-button"
|
||||
:title="$t('user_card.external_source')"
|
||||
>
|
||||
<FAIcon
|
||||
class="icon"
|
||||
icon="external-link-alt"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
v-if="fediLinkURL && showFediLinks && !hideBio"
|
||||
:href="fediLinkURL"
|
||||
target="_blank"
|
||||
class="button-unstyled external-link-button"
|
||||
:title="$t('user_card.open_fedi_link')"
|
||||
>
|
||||
<FAIcon
|
||||
class="icon"
|
||||
:icon="['fac', 'activity-pub']"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
v-if="isOtherUser"
|
||||
:href="user.statusnet_profile_url + '.rss'"
|
||||
target="_blank"
|
||||
class="button-unstyled external-link-button"
|
||||
>
|
||||
<FAIcon
|
||||
class="icon"
|
||||
icon="rss"
|
||||
/>
|
||||
</a>
|
||||
<AccountActions
|
||||
v-if="isOtherUser && loggedIn"
|
||||
:user="user"
|
||||
:relationship="relationship"
|
||||
/>
|
||||
<div class="user-names">
|
||||
<div class="top-line">
|
||||
<RichContent :title="user.name" class="user-name" :html="user.name" :emoji="user.emoji" />
|
||||
</div>
|
||||
<div class="bottom-line">
|
||||
<router-link class="user-screen-name" :title="user.screen_name_ui" :to="userProfileLink(user)">
|
||||
@{{ user.screen_name_ui }}
|
||||
</router-link>
|
||||
<template v-if="!hideBio">
|
||||
<span v-if="user.deactivated" class="alert user-role">
|
||||
{{ $t('user_card.deactivated') }}
|
||||
</span>
|
||||
<span v-if="!!visibleRole" class="alert user-role">
|
||||
{{ $t(`general.role.${visibleRole}`) }}
|
||||
</span>
|
||||
<span v-if="user.bot" class="alert user-role">
|
||||
{{ $t('user_card.bot') }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-if="user.locked">
|
||||
<FAIcon class="lock-icon" icon="lock" size="sm" />
|
||||
</span>
|
||||
<span v-if="!mergedConfig.hideUserStats && !hideBio" class="dailyAvg">{{ dailyAvg }} {{
|
||||
$t('user_card.per_day') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-line">
|
||||
<router-link
|
||||
class="user-screen-name"
|
||||
:title="user.screen_name_ui"
|
||||
:to="userProfileLink(user)"
|
||||
>
|
||||
@{{ user.screen_name_ui }}
|
||||
</router-link>
|
||||
<template v-if="!hideBio">
|
||||
<span
|
||||
v-if="user.deactivated"
|
||||
class="alert user-role"
|
||||
>
|
||||
{{ $t('user_card.deactivated') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="!!visibleRole"
|
||||
class="alert user-role"
|
||||
>
|
||||
{{ $t(`general.role.${visibleRole}`) }}
|
||||
</span>
|
||||
<span
|
||||
v-if="user.bot"
|
||||
class="alert user-role"
|
||||
>
|
||||
{{ $t('user_card.bot') }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-if="user.locked">
|
||||
<FAIcon
|
||||
class="lock-icon"
|
||||
icon="lock"
|
||||
size="sm"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="!mergedConfig.hideUserStats && !hideBio"
|
||||
class="dailyAvg"
|
||||
>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
|
||||
<div class="button-line">
|
||||
<button v-if="!isOtherUser && user.is_local" class="button-unstyled edit-profile-button"
|
||||
@click.stop="openProfileTab">
|
||||
<FAIcon fixed-width class="icon" icon="edit" :title="$t('user_card.edit_profile')" />
|
||||
</button>
|
||||
<a v-if="isOtherUser && !user.is_local" :href="user.statusnet_profile_url" target="_blank"
|
||||
class="button-unstyled external-link-button" :title="$t('user_card.external_source')">
|
||||
<FAIcon class="icon" icon="external-link-alt" />
|
||||
</a>
|
||||
<a v-if="fediLinkURL && showFediLinks && !hideBio" :href="fediLinkURL" target="_blank"
|
||||
class="button-unstyled external-link-button" :title="$t('user_card.open_fedi_link')">
|
||||
<FAIcon class="icon" :icon="['fac', 'activity-pub']" />
|
||||
</a>
|
||||
<a v-if="isOtherUser" :href="user.statusnet_profile_url + '.rss'" target="_blank"
|
||||
class="button-unstyled external-link-button">
|
||||
<FAIcon class="icon" icon="rss" />
|
||||
</a>
|
||||
<AccountActions v-if="isOtherUser && loggedIn" :user="user" :relationship="relationship" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-meta">
|
||||
<div
|
||||
v-if="relationship.blocked_by && loggedIn && isOtherUser"
|
||||
class="blocking"
|
||||
>
|
||||
<div v-if="relationship.blocked_by && loggedIn && isOtherUser" class="blocking">
|
||||
{{ $t('user_card.blocks_you') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="relationship.followed_by && loggedIn && isOtherUser"
|
||||
class="following"
|
||||
>
|
||||
<div v-if="relationship.followed_by && loggedIn && isOtherUser" class="following">
|
||||
{{ $t('user_card.follows_you') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="relationship.requested_by && loggedIn && isOtherUser"
|
||||
class="requested_by"
|
||||
>
|
||||
<div v-if="relationship.requested_by && loggedIn && isOtherUser" class="requested_by">
|
||||
{{ $t('user_card.requested_by') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="isOtherUser && (loggedIn || !switcher)"
|
||||
class="highlighter"
|
||||
>
|
||||
<div v-if="isOtherUser && (loggedIn || !switcher)" class="highlighter">
|
||||
<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
|
||||
<input
|
||||
v-if="userHighlightType !== 'disabled'"
|
||||
:id="'userHighlightColorTx'+user.id"
|
||||
v-model="userHighlightColor"
|
||||
class="userHighlightText"
|
||||
type="text"
|
||||
>
|
||||
<input
|
||||
v-if="userHighlightType !== 'disabled'"
|
||||
:id="'userHighlightColor'+user.id"
|
||||
v-model="userHighlightColor"
|
||||
class="userHighlightCl"
|
||||
type="color"
|
||||
>
|
||||
<input v-if="userHighlightType !== 'disabled'" :id="'userHighlightColorTx' + user.id"
|
||||
v-model="userHighlightColor" class="userHighlightText" type="text">
|
||||
<input v-if="userHighlightType !== 'disabled'" :id="'userHighlightColor' + user.id" v-model="userHighlightColor"
|
||||
class="userHighlightCl" type="color">
|
||||
{{ ' ' }}
|
||||
<Select
|
||||
:id="'userHighlightSel'+user.id"
|
||||
v-model="userHighlightType"
|
||||
class="userHighlightSel"
|
||||
>
|
||||
<Select :id="'userHighlightSel' + user.id" v-model="userHighlightType" class="userHighlightSel">
|
||||
<option value="disabled">
|
||||
{{ $t('user_card.highlight.disabled') }}
|
||||
</option>
|
||||
|
|
@ -198,141 +94,70 @@
|
|||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="loggedIn && isOtherUser"
|
||||
class="user-interactions"
|
||||
>
|
||||
<div v-if="loggedIn && isOtherUser" class="user-interactions">
|
||||
<div class="btn-group">
|
||||
<FollowButton
|
||||
:relationship="relationship"
|
||||
:user="user"
|
||||
:disabled="relationship.blocked_by"
|
||||
/>
|
||||
<FollowButton :relationship="relationship" :user="user" :disabled="relationship.blocked_by" />
|
||||
<template v-if="relationship.following">
|
||||
<ProgressButton
|
||||
v-if="!relationship.subscribing"
|
||||
class="btn button-default"
|
||||
:click="subscribeUser"
|
||||
:title="$t('user_card.subscribe')"
|
||||
>
|
||||
<ProgressButton v-if="!relationship.subscribing" class="btn button-default" :click="subscribeUser"
|
||||
:title="$t('user_card.subscribe')">
|
||||
<FAIcon icon="bell" />
|
||||
</ProgressButton>
|
||||
<ProgressButton
|
||||
v-else
|
||||
class="btn button-default toggled"
|
||||
:click="unsubscribeUser"
|
||||
:title="$t('user_card.unsubscribe')"
|
||||
>
|
||||
<ProgressButton v-else class="btn button-default toggled" :click="unsubscribeUser"
|
||||
:title="$t('user_card.unsubscribe')">
|
||||
<FALayers>
|
||||
<FAIcon
|
||||
icon="rss"
|
||||
transform="left-5 shrink-6 up-3 rotate-20"
|
||||
flip="horizontal"
|
||||
/>
|
||||
<FAIcon
|
||||
icon="rss"
|
||||
transform="right-5 shrink-6 up-3 rotate-20"
|
||||
/>
|
||||
<FAIcon icon="rss" transform="left-5 shrink-6 up-3 rotate-20" flip="horizontal" />
|
||||
<FAIcon icon="rss" transform="right-5 shrink-6 up-3 rotate-20" />
|
||||
<FAIcon icon="bell" />
|
||||
</FALayers>
|
||||
</ProgressButton>
|
||||
</template>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
v-if="relationship.muting"
|
||||
class="btn button-default btn-block toggled"
|
||||
:disabled="user.deactivated"
|
||||
@click="unmuteUser"
|
||||
>
|
||||
<button v-if="relationship.muting" class="btn button-default btn-block toggled" :disabled="user.deactivated"
|
||||
@click="unmuteUser">
|
||||
{{ $t('user_card.muted') }}
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn button-default btn-block"
|
||||
:disabled="user.deactivated"
|
||||
@click="muteUser"
|
||||
>
|
||||
<button v-else class="btn button-default btn-block" :disabled="user.deactivated" @click="muteUser">
|
||||
{{ $t('user_card.mute') }}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="btn button-default btn-block"
|
||||
:disabled="user.deactivated"
|
||||
@click="mentionUser"
|
||||
>
|
||||
<button class="btn button-default btn-block" :disabled="user.deactivated" @click="mentionUser">
|
||||
{{ $t('user_card.mention') }}
|
||||
</button>
|
||||
</div>
|
||||
<ModerationTools
|
||||
v-if="loggedIn.role === 'admin'"
|
||||
:user="user"
|
||||
/>
|
||||
<ModerationTools v-if="loggedIn.role === 'admin'" :user="user" />
|
||||
</div>
|
||||
<div
|
||||
v-if="!loggedIn && user.is_local"
|
||||
class="user-interactions"
|
||||
>
|
||||
<div v-if="!loggedIn && user.is_local" class="user-interactions">
|
||||
<RemoteFollow :user="user" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!hideBio"
|
||||
class="panel-body"
|
||||
>
|
||||
<div
|
||||
v-if="!mergedConfig.hideUserStats && switcher"
|
||||
class="user-counts"
|
||||
>
|
||||
<div
|
||||
class="user-count"
|
||||
@click.prevent="setProfileView('statuses')"
|
||||
>
|
||||
<div v-if="!hideBio" class="panel-body">
|
||||
<div v-if="!mergedConfig.hideUserStats && switcher" class="user-counts">
|
||||
<div class="user-count" @click.prevent="setProfileView('statuses')">
|
||||
<h5>{{ $t('user_card.statuses') }}</h5>
|
||||
<span>{{ user.statuses_count }} <br></span>
|
||||
</div>
|
||||
<div
|
||||
class="user-count"
|
||||
@click.prevent="setProfileView('friends')"
|
||||
>
|
||||
<div class="user-count" @click.prevent="setProfileView('friends')">
|
||||
<h5>{{ $t('user_card.followees') }}</h5>
|
||||
<span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="user-count"
|
||||
@click.prevent="setProfileView('followers')"
|
||||
>
|
||||
<div class="user-count" @click.prevent="setProfileView('followers')">
|
||||
<h5>{{ $t('user_card.followers') }}</h5>
|
||||
<span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<RichContent
|
||||
v-if="!hideBio"
|
||||
class="user-card-bio"
|
||||
:html="user.description_html"
|
||||
:emoji="user.emoji"
|
||||
:handle-links="true"
|
||||
/>
|
||||
<RichContent v-if="!hideBio" class="user-card-bio" :html="user.description_html" :emoji="user.emoji"
|
||||
:handle-links="true" />
|
||||
</div>
|
||||
<teleport to="#modal">
|
||||
<confirm-modal
|
||||
v-if="showingConfirmMute"
|
||||
:title="$t('user_card.mute_confirm_title')"
|
||||
<confirm-modal v-if="showingConfirmMute" :title="$t('user_card.mute_confirm_title')"
|
||||
:confirm-text="$t('user_card.mute_confirm_accept_button')"
|
||||
:cancel-text="$t('user_card.mute_confirm_cancel_button')"
|
||||
@accepted="doMuteUser"
|
||||
@cancelled="hideConfirmMute"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="user_card.mute_confirm"
|
||||
tag="span"
|
||||
>
|
||||
:cancel-text="$t('user_card.mute_confirm_cancel_button')" @accepted="doMuteUser" @cancelled="hideConfirmMute">
|
||||
<i18n-t keypath="user_card.mute_confirm" tag="span">
|
||||
<template #user>
|
||||
<span
|
||||
v-text="user.screen_name_ui"
|
||||
/>
|
||||
<span v-text="user.screen_name_ui" />
|
||||
</template>
|
||||
</i18n-t>
|
||||
</confirm-modal>
|
||||
|
|
|
|||
Loading…
Reference in New Issue