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

2
src/components/popover/popover.js
View File

@ -26,7 +26,7 @@ const Popover = {
data () {
return {
hidden: true,
hovered: false,
hovered: false,
styles: { opacity: 0 },
oldSize: { width: 0, height: 0 }
}

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

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

@ -91,40 +91,10 @@
</div>
<div class="user-meta">
<div
v-if="isOtherUser && (loggedIn || !switcher)"
class="highlighter"
v-if="relationship.followed_by && loggedIn && isOtherUser"
class="following"
>
<!-- 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"
>
<label
for="theme_tab"
class="userHighlightSel select"
>
<select
:id="'userHighlightSel'+user.id"
v-model="userHighlightType"
class="userHighlightSel"
>
<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>
{{ $t('user_card.follows_you') }}
</div>
</div>
<div
@ -155,14 +125,44 @@
:user="user"
:relationship="relationship"
/>
<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"
>
<label
for="theme_tab"
class="userHighlightSel select"
>
<select
:id="'userHighlightSel'+user.id"
v-model="userHighlightType"
class="userHighlightSel"
>
<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>
</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);