moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make the user popover look and work better

This commit is contained in:
Shpuld Shpuldson 2020-07-20 16:55:04 +03:00
parent c104c76889
commit df66af74dc
4 changed files with 65 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/status/status.vue
View File

@ -131,7 +131,10 @@
>
{{ status.user.name }}
</h4>
<UserPopover :user-id="status.user.id">
<UserPopover
:user-id="status.user.id"
class="account-name"
>
<router-link
class="account-name"
:to="userProfileLink"
@ -218,8 +221,13 @@
>
<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
</span>
<UserPopover :user-id="status.in_reply_to_user_id">
<router-link :to="replyProfileLink">
<UserPopover
:user-id="status.in_reply_to_user_id"
>
<router-link
:to="replyProfileLink"
class="reply-to-accountname"
>
{{ replyToName }}
</router-link>
</UserPopover>
@ -466,6 +474,7 @@ $status-margin: 0.75em;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 0;
display: block;
}
}
@ -488,12 +497,13 @@ $status-margin: 0.75em;
flex-wrap: wrap;
align-items: stretch;
> .reply-to-and-accountname > a {
.reply-to-accountname {
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
display: block;
}
}

72
src/components/user_card/user_card.vue
View File

@ -90,6 +90,41 @@
</div>
</div>
<div class="user-meta">
<div
v-if="relationship.followed_by && loggedIn && isOtherUser"
class="following"
>
{{ $t('user_card.follows_you') }}
</div>
</div>
<div
v-if="loggedIn && isOtherUser"
class="user-interactions"
>
<div class="btn-group">
<FollowButton :relationship="relationship" />
<template v-if="relationship.following">
<ProgressButton
v-if="!relationship.subscribing"
class="btn btn-default"
:click="subscribeUser"
:title="$t('user_card.subscribe')"
>
<i class="icon-bell-alt" />
</ProgressButton>
<ProgressButton
v-else
class="btn btn-default toggled"
:click="unsubscribeUser"
:title="$t('user_card.unsubscribe')"
>
<i class="icon-bell-ringing-o" />
</ProgressButton>
<AccountActions
v-if="isOtherUser && loggedIn"
:user="user"
:relationship="relationship"
/>
<div
v-if="isOtherUser && (loggedIn || !switcher)"
class="highlighter"
@ -126,43 +161,8 @@
<i class="icon-down-open" />
</label>
</div>
</div>
<div
v-if="loggedIn && isOtherUser"
class="user-interactions"
>
<div class="btn-group">
<FollowButton :relationship="relationship" />
<template v-if="relationship.following">
<ProgressButton
v-if="!relationship.subscribing"
class="btn btn-default"
:click="subscribeUser"
:title="$t('user_card.subscribe')"
>
<i class="icon-bell-alt" />
</ProgressButton>
<ProgressButton
v-else
class="btn btn-default toggled"
:click="unsubscribeUser"
:title="$t('user_card.unsubscribe')"
>
<i class="icon-bell-ringing-o" />
</ProgressButton>
<AccountActions
v-if="isOtherUser && loggedIn"
:user="user"
:relationship="relationship"
/>
</template>
</div>
<div
v-if="relationship.followed_by && loggedIn && isOtherUser"
class="following"
>
{{ $t('user_card.follows_you') }}
</div>
</div>
<div
v-if="!loggedIn && user.is_local"
@ -327,7 +327,7 @@
align-items: flex-start;
max-height: 56px;
.avatar {
.avatar.still-image {
flex: 1 0 100%;
width: 56px;
height: 56px;

18
src/components/user_popover/user_popover.vue
View File

@ -1,5 +1,6 @@
<template>
<Popover
class="user-popover-container"
trigger="hover"
popover-class="user-popover"
:bound-to="{ x: 'container' }"
@ -40,18 +41,19 @@
<style lang="scss">
@import '../../_variables.scss';
.user-popover-container {
max-width: 100%;
min-width: 0;
&:first-child {
max-width: 100%;
}
}
.user-popover {
font-size: 1rem;
min-width: 15em;
width: 30em;
max-width: 95%;
cursor: default;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-style: solid;
border-width: 1px;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
box-shadow: var(--popupShadow);