pleroma-fe

commit: d232fa3dc3ff83a09a4ad583a123b419f4d4fa42
parent 700df11e9a0d36b3e1afdc50034567014c2b71cc
Author: Henry Jameson <me@hjkos.com>
Date:   Mon, 27 Jun 2022 19:52:40 +0300

close on avatar click again, add zooming as option

Diffstat:
M
src/components/settings_modal/tabs/general_tab.vue
5
+++++
M
src/components/user_card/user_card.js
9
++++++++-
M
src/components/user_card/user_card.vue
1
+
M
src/components/user_popover/user_popover.js
7
++++++-
M
src/components/user_popover/user_popover.vue
7
++++---
M
src/i18n/en.json
1
+
M
src/modules/config.js
1
+

7 files changed, 26 insertions(+), 5 deletions(-)
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
@@ -75,6 +75,11 @@
           </BooleanSetting>
         </li>
         <li>
+          <BooleanSetting path="userPopoverZoom">
+            {{ $t('settings.user_popover_avatar_zoom') }}
+          </BooleanSetting>
+        </li>
+        <li>
           <ChoiceSetting
             v-if="user"
             id="thirdColumnMode"
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
@@ -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()
+      }
     }
   }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
@@ -30,6 +30,7 @@
           <router-link
             v-else
             :to="userProfileLink(user)"
+            @click="onAvatarClickHandler"
           >
             <UserAvatar
               :better-shadow="betterShadow"
diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
@@ -4,11 +4,16 @@ import { defineAsyncComponent } from 'vue'
 const UserPopover = {
   name: 'UserPopover',
   props: [
-    'userId', 'overlayCenters', 'disabled', 'overlay-centers-selector'
+    'userId', 'overlayCenters', 'disabled', 'overlayCentersSelector'
   ],
   components: {
     UserCard,
     Popover: defineAsyncComponent(() => 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
@@ -2,7 +2,7 @@
 <Popover
   trigger="click"
   popover-class="popover-default user-popover"
-  :overlay-centers-selector="overlayCentersSelector || '.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>
diff --git 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
@@ -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