hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'disjointed-popovers' into shigusegubu-vue3

Browse source 
* disjointed-popovers:
  close on avatar click again, add zooming as option
  fix basicusercard
  make hover popovers less annoying to close
  move tooltips setting
  unify styling of timelines dropdown with other dropdown menus
  put modals on top of navbar
This commit is contained in:
Henry Jameson 2022-06-27 19:54:55 +03:00
commit 5794eeb5a9
11 changed files with 114 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/basic_user_card/basic_user_card.js
View file

@ -1,4 +1,4 @@
import UserCard from '../user_card/user_card.vue'
import UserPopover from '../user_popover/user_popover.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -7,20 +7,12 @@ const BasicUserCard = {
props: [
'user'
],
data () {
return {
userExpanded: false
}
},
components: {
UserCard,
UserPopover,
UserAvatar,
RichContent
},
methods: {
toggleUserExpanded () {
this.userExpanded = !this.userExpanded
},
userProfileLink (user) {
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
}

31
src/components/basic_user_card/basic_user_card.vue
View file

@ -1,24 +1,19 @@
<template>
<div class="basic-user-card">
<router-link :to="userProfileLink(user)">
<UserAvatar
class="avatar"
:user="user"
@click.prevent="toggleUserExpanded"
/>
<router-link @click.prevent :to="userProfileLink(user)">
<UserPopover
:userId="user.id"
:overlayCenters="true"
overlayCentersSelector=".avatar"
>
<UserAvatar
class="user-avatar avatar"
:user="user"
@click.prevent
/>
</UserPopover>
</router-link>
<div
v-if="userExpanded"
class="basic-user-card-expanded-content"
>
<UserCard
:user-id="user.id"
:rounded="true"
:bordered="true"
/>
</div>
<div
v-else
class="basic-user-card-collapsed-content"
>
<div
@ -53,6 +48,8 @@
margin: 0;
padding: 0.6em 1em;
--emoji-size: 14px;
&-collapsed-content {
margin-left: 0.7em;
text-align: left;

8
src/components/popover/popover.js
View file

@ -45,6 +45,10 @@ const Popover = {
inject: ['popoversZLayer'], // override popover z layer
data () {
return {
// lockReEntry is a flag that is set when mouse cursor is leaving the popover's content
// so that if mouse goes back into popover it won't be re-shown again to prevent annoyance
// with popovers refusing to be hidden when user wants to interact with something in below popover
lockReEntry: false,
hidden: true,
styles: {},
oldSize: { width: 0, height: 0 },
@ -202,6 +206,7 @@ const Popover = {
},
onMouseenter (e) {
if (this.trigger === 'hover') {
this.lockReEntry = false
clearTimeout(this.graceTimeout)
this.graceTimeout = null
this.showPopover()
@ -213,7 +218,8 @@ const Popover = {
}
},
onMouseenterContent (e) {
if (this.trigger === 'hover') {
if (this.trigger === 'hover' && !this.lockReEntry) {
this.lockReEntry = true
clearTimeout(this.graceTimeout)
this.graceTimeout = null
this.showPopover()

25
src/components/settings_modal/tabs/general_tab.vue
View file

@ -74,6 +74,11 @@
{{ $t('settings.show_scrollbars') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="userPopoverZoom">
{{ $t('settings.user_popover_avatar_zoom') }}
</BooleanSetting>
</li>
<li>
<ChoiceSetting
v-if="user"
@ -261,18 +266,14 @@
{{ $t('settings.mention_link_display') }}
</ChoiceSetting>
</li>
<ul
class="setting-list suboptions"
>
<li v-if="mentionLinkDisplay === 'short'">
<BooleanSetting
path="mentionLinkShowTooltip"
expert="1"
>
{{ $t('settings.mention_link_use_tooltip') }}
</BooleanSetting>
</li>
</ul>
<li>
<BooleanSetting
path="mentionLinkShowTooltip"
expert="1"
>
{{ $t('settings.mention_link_use_tooltip') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting
path="useAtIcon"

119
src/components/timeline_menu/timeline_menu_content.vue
View file

@ -1,66 +1,61 @@
<template>
<ul>
<li v-if="currentUser">
<router-link
class="menu-item"
:to="{ name: 'friends' }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="home"
/>{{ $t("nav.home_timeline") }}
</router-link>
</li>
<li v-if="currentUser || !privateMode">
<router-link
class="menu-item"
:to="{ name: 'public-timeline' }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="users"
/>{{ $t("nav.public_tl") }}
</router-link>
</li>
<li v-if="federating && (currentUser || !privateMode)">
<router-link
class="menu-item"
:to="{ name: 'public-external-timeline' }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="globe"
/>{{ $t("nav.twkn") }}
</router-link>
</li>
<li v-if="currentUser">
<router-link
class="menu-item"
:to="{ name: 'bookmarks'}"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="bookmark"
/>{{ $t("nav.bookmarks") }}
</router-link>
</li>
<li v-if="currentUser">
<router-link
class="menu-item"
:to="{ name: 'dms', params: { username: currentUser.screen_name } }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="envelope"
/>{{ $t("nav.dms") }}
</router-link>
</li>
</ul>
<div class="dropdown-menu">
<router-link
v-if="currentUser"
class="dropdown-item button-default"
:to="{ name: 'friends' }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="home"
/>{{ $t("nav.home_timeline") }}
</router-link>
<router-link
v-if="currentUser || !privateMode"
class="dropdown-item button-default"
:to="{ name: 'public-timeline' }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="users"
/>{{ $t("nav.public_tl") }}
</router-link>
<router-link
v-if="federating && (currentUser || !privateMode)"
class="dropdown-item button-default"
:to="{ name: 'public-external-timeline' }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="globe"
/>{{ $t("nav.twkn") }}
</router-link>
<router-link
v-if="currentUser"
class="dropdown-item button-default"
:to="{ name: 'bookmarks'}"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="bookmark"
/>{{ $t("nav.bookmarks") }}
</router-link>
<router-link
v-if="currentUser"
class="dropdown-item button-default"
:to="{ name: 'dms', params: { username: currentUser.screen_name } }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="envelope"
/>{{ $t("nav.dms") }}
</router-link>
</div>
</template>
<script src="./timeline_menu_content.js" ></script>

9
src/components/user_card/user_card.js
View file

@ -38,7 +38,8 @@ export default {
'rounded',
'bordered',
'allowZoomingAvatar',
'onClose'
'onClose',
'onAvatarClick'
],
data () {
return {
@ -182,6 +183,12 @@ export default {
},
mentionUser () {
this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
},
onAvatarClickHandler (e) {
if (this.onAvatarClick) {
e.preventDefault()
this.onAvatarClick()
}
}
}
}

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

@ -30,6 +30,7 @@
<router-link
v-else
:to="userProfileLink(user)"
@click="onAvatarClickHandler"
>
<UserAvatar
:better-shadow="betterShadow"

7
src/components/user_popover/user_popover.js
View file

@ -4,11 +4,16 @@ import { defineAsyncComponent } from 'vue'
const UserPopover = {
name: 'UserPopover',
props: [
'userId', 'overlayCenters', 'disabled'
'userId', 'overlayCenters', 'disabled', 'overlayCentersSelector'
],
components: {
UserCard,
Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
},
computed: {
userPopoverZoom () {
return this.$store.getters.mergedConfig.userPopoverZoom
}
}
}

7
src/components/user_popover/user_popover.vue
View file

@ -2,7 +2,7 @@
<Popover
trigger="click"
popover-class="popover-default user-popover"
overlay-centers-selector=".user-info-avatar-link .Avatar"
:overlay-centers-selector="overlayCentersSelector || '.user-info .Avatar'"
:overlay-centers="overlayCenters"
:disabled="disabled"
>
@ -14,8 +14,9 @@
class="user-popover"
:user-id="userId"
:hide-bio="true"
:allow-zooming-avatar="true"
:onClose="close"
:allow-zooming-avatar="userPopoverZoom"
:on-avatar-click="userPopoverZoom ? null : close"
:on-close="close"
/>
</template>
</Popover>

1
src/i18n/en.json
View file

@ -550,6 +550,7 @@
"mention_link_show_avatar": "Show user avatar beside the link",
"mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
"mention_link_bolden_you": "Highlight mention of you when you are mentioned",
"user_popover_avatar_zoom": "Clicking on user avatar in popover zooms it instead of closing the popover",
"fun": "Fun",
"greentext": "Meme arrows",
"show_yous": "Show (You)s",

1
src/modules/config.js
View file

@ -81,6 +81,7 @@ export const defaultState = {
useContainFit: true,
disableStickyHeaders: false,
showScrollbars: false,
userPopoverZoom: false,
greentext: undefined, // instance default
useAtIcon: undefined, // instance default
mentionLinkDisplay: undefined, // instance default