From 60571685c2e42e44b75157c3d52f162bf39c4bab Mon Sep 17 00:00:00 2001
From: Henry Jameson <spam@hjkos.com>
Date: Thu, 16 Jun 2022 17:06:16 +0300
Subject: popover controls for user-card

---
 src/components/user_card/user_card.vue | 37 ++++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

(limited to 'src/components/user_card/user_card.vue')

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 67837845..936d6798 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -8,7 +8,7 @@
       :style="style"
       class="background-image"
     />
-    <div class="panel-heading -flexible-height">
+    <div :class="onClose ? '' : panel-heading -flexible-height">
       <div class="user-info">
         <div class="container">
           <a
@@ -38,12 +38,16 @@
           </router-link>
           <div class="user-summary">
             <div class="top-line">
-              <RichContent
-                :title="user.name"
+              <router-link
+                :to="userProfileLink(user)"
                 class="user-name"
-                :html="user.name"
-                :emoji="user.emoji"
-              />
+              >
+                <RichContent
+                  :title="user.name"
+                  :html="user.name"
+                  :emoji="user.emoji"
+                />
+              </router-link>
               <button
                 v-if="!isOtherUser && user.is_local"
                 class="button-unstyled edit-profile-button"
@@ -72,6 +76,27 @@
                 :user="user"
                 :relationship="relationship"
               />
+              <router-link
+                v-if="onClose"
+                :to="userProfileLink(user)"
+                class="button-unstyled external-link-button"
+                @click="onClose"
+              >
+                <FAIcon
+                  class="icon"
+                  icon="expand-alt"
+                />
+              </router-link>
+              <button
+                v-if="onClose"
+                class="button-unstyled external-link-button"
+                @click="onClose"
+              >
+                <FAIcon
+                  class="icon"
+                  icon="times"
+                />
+              </button>
             </div>
             <div class="bottom-line">
               <router-link
-- 
cgit v1.2.3-70-g09d2


From d232fa3dc3ff83a09a4ad583a123b419f4d4fa42 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
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.vue')

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') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="userPopoverZoom">
+            {{ $t('settings.user_popover_avatar_zoom') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             v-if="user"
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 52e8c079..9a8dcb23 100644
--- 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
index 936d6798..62d4a94d 100644
--- 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
index 3b3722ce..fa7f9781 100644
--- 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
index f4f505ae..c14cea4d 100644
--- 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
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 <me@hjkos.com>
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.vue')

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') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="userPopoverOverlay">
+            {{ $t('settings.user_popover_avatar_overlay') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             v-if="user"
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 9a8dcb23..b0fa11b3 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -37,9 +37,8 @@ export default {
     'hideBio',
     'rounded',
     'bordered',
-    'allowZoomingAvatar',
-    'onClose',
-    'onAvatarClick'
+    'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
+    'onClose'
   ],
   data () {
     return {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 65299e60..a0bbc6a6 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -133,23 +133,27 @@
       min-width: 0;
     }
 
+    > 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 @@
       <div class="user-info">
         <div class="container">
           <a
-            v-if="allowZoomingAvatar"
-            class="user-info-avatar-link"
+            v-if="avatarAction === 'zoom'"
+            class="user-info-avatar -link"
             @click="zoomAvatar"
           >
             <UserAvatar
               :better-shadow="betterShadow"
               :user="user"
             />
-            <div class="user-info-avatar-link-overlay">
+            <div class="user-info-avatar -link -overlay">
               <FAIcon
                 class="fa-scale-110 fa-old-padding"
                 icon="search-plus"
               />
             </div>
           </a>
+          <UserAvatar
+            v-else-if="typeof avatarAction === 'function'"
+            @click="avatarAction"
+            class="user-info-avatar"
+            :better-shadow="betterShadow"
+            :user="user"
+          />
           <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
index fa7f9781..69b25383 100644
--- a/src/components/user_popover/user_popover.js
+++ b/src/components/user_popover/user_popover.js
@@ -13,6 +13,9 @@ const UserPopover = {
   computed: {
     userPopoverZoom () {
       return this.$store.getters.mergedConfig.userPopoverZoom
+    },
+    userPopoverOverlay () {
+      return this.$store.getters.mergedConfig.userPopoverOverlay
     }
   }
 }
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index c14cea4d..72bb7f77 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -3,7 +3,7 @@
   trigger="click"
   popover-class="popover-default user-popover"
   :overlay-centers-selector="overlayCentersSelector || '.user-info .Avatar'"
-  :overlay-centers="overlayCenters"
+  :overlay-centers="overlayCenters && userPopoverOverlay"
   :disabled="disabled"
 >
   <template v-slot:trigger>
@@ -14,8 +14,7 @@
       class="user-popover"
       :user-id="userId"
       :hide-bio="true"
-      :allow-zooming-avatar="userPopoverZoom"
-      :on-avatar-click="userPopoverZoom ? null : close"
+      :avatar-action="userPopoverZoom ? 'zoom' : close"
       :on-close="close"
     />
   </template>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 62792599..430d0915 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -8,7 +8,7 @@
         :user-id="userId"
         :switcher="true"
         :selected="timeline.viewing"
-        :allow-zooming-avatar="true"
+        :avatar-action="zoom"
         rounded="top"
       />
       <div
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9a8e54d6..fe02664f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -551,6 +551,7 @@
     "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",
+    "user_popover_avatar_overlay": "Show user popover over user avatar",
     "fun": "Fun",
     "greentext": "Meme arrows",
     "show_yous": "Show (You)s",
diff --git a/src/modules/config.js b/src/modules/config.js
index 14add385..f7f142ad 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -82,6 +82,7 @@ export const defaultState = {
   disableStickyHeaders: false,
   showScrollbars: false,
   userPopoverZoom: false,
+  userPopoverOverlay: true,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
   mentionLinkDisplay: undefined, // instance default
-- 
cgit v1.2.3-70-g09d2