From 60571685c2e42e44b75157c3d52f162bf39c4bab Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 16 Jun 2022 17:06:16 +0300 Subject: popover controls for user-card --- src/components/user_card/user_card.js | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) (limited to 'src/components/user_card/user_card.js') diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index 4168c54a..52e8c079 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -14,7 +14,9 @@ import { faRss, faSearchPlus, faExternalLinkAlt, - faEdit + faEdit, + faTimes, + faExpandAlt } from '@fortawesome/free-solid-svg-icons' library.add( @@ -22,12 +24,21 @@ library.add( faBell, faSearchPlus, faExternalLinkAlt, - faEdit + faEdit, + faTimes, + faExpandAlt ) export default { props: [ - 'userId', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar' + 'userId', + 'switcher', + 'selected', + 'hideBio', + 'rounded', + 'bordered', + 'allowZoomingAvatar', + 'onClose' ], data () { return { @@ -47,9 +58,10 @@ export default { }, classes () { return [{ - 'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius - 'user-card-rounded': this.rounded === true, // set border-radius for all sides - 'user-card-bordered': this.bordered === true // set border for all sides + '-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius + '-rounded': this.rounded === true, // set border-radius for all sides + '-bordered': this.bordered === true, // set border for all sides + '-popover': !!this.onClose // set popover rounding }] }, style () { -- cgit v1.2.3-70-g09d2 From d232fa3dc3ff83a09a4ad583a123b419f4d4fa42 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Jun 2022 19:52:40 +0300 Subject: close on avatar click again, add zooming as option --- src/components/settings_modal/tabs/general_tab.vue | 5 +++++ src/components/user_card/user_card.js | 9 ++++++++- src/components/user_card/user_card.vue | 1 + src/components/user_popover/user_popover.js | 7 ++++++- src/components/user_popover/user_popover.vue | 7 ++++--- src/i18n/en.json | 1 + src/modules/config.js | 1 + 7 files changed, 26 insertions(+), 5 deletions(-) (limited to 'src/components/user_card/user_card.js') diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 61416394..0a300311 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -74,6 +74,11 @@ {{ $t('settings.show_scrollbars') }} +
  • + + {{ $t('settings.user_popover_avatar_zoom') }} + +
  • import('../popover/popover.vue')) + }, + computed: { + userPopoverZoom () { + return this.$store.getters.mergedConfig.userPopoverZoom + } } } diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue index f4f505ae..c14cea4d 100644 --- a/src/components/user_popover/user_popover.vue +++ b/src/components/user_popover/user_popover.vue @@ -2,7 +2,7 @@ @@ -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" /> 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_card/user_card.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 @@