From d84cda7009d486a047953b1ca2d27acf35b8ddc1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 16 Jun 2022 16:30:05 +0300 Subject: unify user popovers into a separate component --- src/components/user_popover/user_popover.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/components/user_popover/user_popover.js (limited to 'src/components/user_popover/user_popover.js') diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js new file mode 100644 index 00000000..bffd5962 --- /dev/null +++ b/src/components/user_popover/user_popover.js @@ -0,0 +1,14 @@ +import { defineAsyncComponent } from 'vue' + +const UserPopover = { + name: 'UserPopover', + props: [ + 'userId', 'overlayCenters', 'disabled' + ], + components: { + UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue')), + Popover: defineAsyncComponent(() => import('../popover/popover.vue')) + } +} + +export default UserPopover -- cgit v1.2.3-70-g09d2 From af98bc2973eed8eb08927df866bc29ecae659d44 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 21 Jun 2022 01:03:20 +0300 Subject: don't use async component for user popover to fix the incorrect initial position. for some reason same doesn't work with status popover... --- src/components/user_popover/user_popover.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/components/user_popover/user_popover.js') diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js index bffd5962..962ae6a0 100644 --- a/src/components/user_popover/user_popover.js +++ b/src/components/user_popover/user_popover.js @@ -1,3 +1,4 @@ +import UserCard from '../user_card/user_card.vue' import { defineAsyncComponent } from 'vue' const UserPopover = { @@ -6,7 +7,7 @@ const UserPopover = { 'userId', 'overlayCenters', 'disabled' ], components: { - UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue')), + UserCard, Popover: defineAsyncComponent(() => import('../popover/popover.vue')) } } -- cgit v1.2.3-70-g09d2 From 700df11e9a0d36b3e1afdc50034567014c2b71cc Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Jun 2022 19:26:52 +0300 Subject: fix basicusercard --- src/components/basic_user_card/basic_user_card.js | 12 ++------- src/components/basic_user_card/basic_user_card.vue | 31 ++++++++++------------ src/components/user_popover/user_popover.js | 2 +- src/components/user_popover/user_popover.vue | 2 +- 4 files changed, 18 insertions(+), 29 deletions(-) (limited to 'src/components/user_popover/user_popover.js') diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js index 8f41e2fb..8b1a2c38 100644 --- a/src/components/basic_user_card/basic_user_card.js +++ b/src/components/basic_user_card/basic_user_card.js @@ -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) } diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue index eeca7828..effd9268 100644 --- a/src/components/basic_user_card/basic_user_card.vue +++ b/src/components/basic_user_card/basic_user_card.vue @@ -1,24 +1,19 @@ diff --git a/src/i18n/en.json b/src/i18n/en.json index 5f3f1334..9a8e54d6 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -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", diff --git a/src/modules/config.js b/src/modules/config.js index 6ae2e754..14add385 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -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 -- cgit v1.2.3-70-g09d2 From 2c3c2bb5b032f534a7ff9bc7be4687373baa2f8d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 19 Jul 2022 19:33:48 +0300 Subject: fix avatar not closing, add option to put popovers next to avatar instead of over it --- src/components/settings_modal/tabs/general_tab.vue | 5 +++++ src/components/user_card/user_card.js | 5 ++--- src/components/user_card/user_card.scss | 12 ++++++++---- src/components/user_card/user_card.vue | 14 ++++++++++---- src/components/user_popover/user_popover.js | 3 +++ src/components/user_popover/user_popover.vue | 5 ++--- src/components/user_profile/user_profile.vue | 2 +- src/i18n/en.json | 1 + src/modules/config.js | 1 + 9 files changed, 33 insertions(+), 15 deletions(-) (limited to 'src/components/user_popover/user_popover.js') diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 0a300311..abb0ed40 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -79,6 +79,11 @@ {{ $t('settings.user_popover_avatar_zoom') }} +
  • + + {{ $t('settings.user_popover_avatar_overlay') }} + +
  • a { + vertical-align: middle; + display: flex; + } + .Avatar { --_avatarShadowBox: var(--avatarShadow); --_avatarShadowFilter: var(--avatarShadowFilter); --_avatarShadowInset: var(--avatarShadowInset); - flex: 1 0 100%; width: 56px; height: 56px; object-fit: cover; } } - &-avatar-link { + &-avatar { position: relative; cursor: pointer; - &-overlay { + &.-overlay { position: absolute; left: 0; top: 0; @@ -169,7 +173,7 @@ } } - &:hover &-overlay { + &:hover &.-overlay { opacity: 1; } } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 62d4a94d..bc23e68e 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -12,25 +12,31 @@