smitten/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

Wrap action buttons below user names

Browse source 
for more readable notification panel
This commit is contained in:
smitten 2023-07-31 18:39:54 -04:00
parent 14e789cf7a
commit 0a56cf37a9
Signed by: smitten
GPG key ID: 1DDD22F13552A07A
2 changed files with 99 additions and 262 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/user_card/user_card.scss
View file

@ -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;

343
src/components/user_card/user_card.vue
View file

@ -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>