Merge branch 'disjointed-popovers' into shigusegubu-vue3

* 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

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)
     }

src/components/basic_user_card/basic_user_card.vue

@@ -1,24 +1,19 @@
 <template>
   <div class="basic-user-card">
-    <router-link :to="userProfileLink(user)">
+    <router-link @click.prevent :to="userProfileLink(user)">
+      <UserPopover
+        :userId="user.id"
+        :overlayCenters="true"
+        overlayCentersSelector=".avatar"
+      >
         <UserAvatar
-        class="avatar"
+          class="user-avatar avatar"
           :user="user"
-        @click.prevent="toggleUserExpanded"
+          @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;

src/components/popover/popover.js

@@ -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()

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"
@@ -261,10 +266,7 @@
             {{ $t('settings.mention_link_display') }}
           </ChoiceSetting>
         </li>
-        <ul
+        <li>
-          class="setting-list suboptions"
-        >
-          <li v-if="mentionLinkDisplay === 'short'">
           <BooleanSetting
             path="mentionLinkShowTooltip"
             expert="1"
@@ -272,7 +274,6 @@
             {{ $t('settings.mention_link_use_tooltip') }}
           </BooleanSetting>
         </li>
-        </ul>
         <li>
           <BooleanSetting
             path="useAtIcon"

src/components/timeline_menu/timeline_menu_content.vue

@@ -1,8 +1,8 @@
 <template>
-  <ul>
+  <div class="dropdown-menu">
-    <li v-if="currentUser">
     <router-link
-        class="menu-item"
+      v-if="currentUser"
+      class="dropdown-item button-default"
       :to="{ name: 'friends' }"
     >
       <FAIcon
@@ -11,10 +11,9 @@
         icon="home"
       />{{ $t("nav.home_timeline") }}
     </router-link>
-    </li>
-    <li v-if="currentUser || !privateMode">
     <router-link
-        class="menu-item"
+      v-if="currentUser || !privateMode"
+      class="dropdown-item button-default"
       :to="{ name: 'public-timeline' }"
     >
       <FAIcon
@@ -23,10 +22,9 @@
         icon="users"
       />{{ $t("nav.public_tl") }}
     </router-link>
-    </li>
-    <li v-if="federating && (currentUser || !privateMode)">
     <router-link
-        class="menu-item"
+      v-if="federating && (currentUser || !privateMode)"
+      class="dropdown-item button-default"
       :to="{ name: 'public-external-timeline' }"
     >
       <FAIcon
@@ -35,10 +33,9 @@
         icon="globe"
       />{{ $t("nav.twkn") }}
     </router-link>
-    </li>
-    <li v-if="currentUser">
     <router-link
-        class="menu-item"
+      v-if="currentUser"
+      class="dropdown-item button-default"
       :to="{ name: 'bookmarks'}"
     >
       <FAIcon
@@ -47,10 +44,9 @@
         icon="bookmark"
       />{{ $t("nav.bookmarks") }}
     </router-link>
-    </li>
-    <li v-if="currentUser">
     <router-link
-        class="menu-item"
+      v-if="currentUser"
+      class="dropdown-item button-default"
       :to="{ name: 'dms', params: { username: currentUser.screen_name } }"
     >
       <FAIcon
@@ -59,8 +55,7 @@
         icon="envelope"
       />{{ $t("nav.dms") }}
     </router-link>
-    </li>
+  </div>
-  </ul>
 </template>
 
 <script src="./timeline_menu_content.js" ></script>

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()
+      }
     }
   }
 }

src/components/user_card/user_card.vue

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

src/components/user_popover/user_popover.js

@@ -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
+    }
   }
 }
 

src/components/user_popover/user_popover.vue

@@ -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"
+      :allow-zooming-avatar="userPopoverZoom"
-      :onClose="close"
+      :on-avatar-click="userPopoverZoom ? null : close"
+      :on-close="close"
     />
   </template>
 </Popover>

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",

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