Merge remote-tracking branch 'origin/disjointed-popovers' into disjointed-popovers

* origin/disjointed-popovers:
  popover controls for user-card
  unify user popovers into a separate component

src/components/mention_link/mention_link.js

@@ -16,8 +16,7 @@ const MentionLink = {
   name: 'MentionLink',
   components: {
     UserAvatar,
-    Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
-    UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue'))
+    UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
   },
   props: {
     url: {

src/components/mention_link/mention_link.vue

@@ -10,84 +10,71 @@
       target="_blank"
       v-html="content"
     /><!-- eslint-enable vue/no-v-html -->
-    <Popover
-      trigger="click"
-      :bound-to="{ x: 'container'}"
-      bound-to-selector=".column"
-      popover-class="popover-default mention-popover"
+    <UserPopover
+      v-else
+      :userId="user.id"
       :disabled="!shouldShowTooltip"
     >
-      <template v-slot:trigger>
-        <span
-          v-if="user"
-          class="new"
-          :style="style"
-          :class="classnames"
+      <span
+        v-if="user"
+        class="new"
+        :style="style"
+        :class="classnames"
+      >
+        <a
+          class="short button-unstyled"
+          :class="{ '-with-tooltip': shouldShowTooltip }"
+          :href="url"
+          @click.prevent="onClick"
         >
-          <a
-            class="short button-unstyled"
-            :class="{ '-with-tooltip': shouldShowTooltip }"
-            :href="url"
-            @click.prevent="onClick"
+          <!-- eslint-disable vue/no-v-html -->
+          <UserAvatar
+            v-if="shouldShowAvatar"
+            class="mention-avatar"
+            :user="user"
+          /><span
+            class="shortName"
+          ><FAIcon
+            v-if="useAtIcon"
+            size="sm"
+            icon="at"
+            class="at"
+          />{{ !useAtIcon ? '@' : '' }}<span
+            class="userName"
+            v-html="userName"
+          /><span
+            v-if="shouldShowFullUserName"
+            class="serverName"
+            :class="{ '-faded': shouldFadeDomain }"
+            v-html="'@' + serverName"
+          />
+          </span>
+          <span
+            v-if="isYou && shouldShowYous"
+            :class="{ '-you': shouldBoldenYou }"
+          > {{ ' ' + $t('status.you') }}</span>
+          <!-- eslint-enable vue/no-v-html -->
+        </a><span
+          v-if="shouldShowTooltip"
+          class="full"
+        >
+          <span
+            class="userNameFull"
           >
             <!-- eslint-disable vue/no-v-html -->
-            <UserAvatar
-              v-if="shouldShowAvatar"
-              class="mention-avatar"
-              :user="user"
-            /><span
-              class="shortName"
-            ><FAIcon
-              v-if="useAtIcon"
-              size="sm"
-              icon="at"
-              class="at"
-            />{{ !useAtIcon ? '@' : '' }}<span
+            @<span
               class="userName"
               v-html="userName"
             /><span
-              v-if="shouldShowFullUserName"
               class="serverName"
               :class="{ '-faded': shouldFadeDomain }"
               v-html="'@' + serverName"
             />
-            </span>
-            <span
-              v-if="isYou && shouldShowYous"
-              :class="{ '-you': shouldBoldenYou }"
-            > {{ ' ' + $t('status.you') }}</span>
             <!-- eslint-enable vue/no-v-html -->
-          </a><span
-            v-if="shouldShowTooltip"
-            class="full"
-          >
-            <span
-              class="userNameFull"
-            >
-              <!-- eslint-disable vue/no-v-html -->
-              @<span
-                class="userName"
-                v-html="userName"
-              /><span
-                class="serverName"
-                :class="{ '-faded': shouldFadeDomain }"
-                v-html="'@' + serverName"
-              />
-              <!-- eslint-enable vue/no-v-html -->
-            </span>
           </span>
-        </span></template>
-      <template v-slot:content>
-        <UserCard
-          class="mention-link-popover"
-          :user-id="user.id"
-          :hide-bio="true"
-          :bordered="false"
-          :allow-zooming-avatar="true"
-          :rounded="true"
-        />
-      </template>
-    </Popover>
+        </span>
+      </span>
+    </UserPopover>
   </span>
 </template>
 

src/components/notification/notification.js

@@ -5,7 +5,7 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import Popover from '../popover/popover.vue'
+import UserPopover from '../user_popover/user_popover.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -48,7 +48,7 @@ const Notification = {
     Timeago,
     Status,
     RichContent,
-    Popover
+    UserPopover
   },
   methods: {
     toggleUserExpanded () {

src/components/notification/notification.vue

@@ -36,32 +36,18 @@
         :href="$router.resolve(userProfileLink).href"
         @click.prevent
       >
-        <Popover
-          trigger="click"
-          popover-class="popover-default user-popover"
-          :overlay-centers="true"
-          overlay-centers-selector=".user-info-avatar-link .Avatar"
+        <UserPopover
+          :userId="notification.from_profile.id"
+          :overlayCenters="true"
         >
-          <template v-slot:trigger>
-            <UserAvatar
-              class="post-avatar"
-              :bot="botIndicator"
-              :compact="true"
-              :better-shadow="betterShadow"
-              :user="notification.from_profile"
-            />
-          </template>
-          <template v-slot:content>
-            <UserCard
-              class="mention-link-popover"
-              :user-id="getUser(notification).id"
-              :hide-bio="true"
-              :bordered="false"
-              :allow-zooming-avatar="true"
-              :rounded="true"
-            />
-          </template>
-        </Popover>
+          <UserAvatar
+            class="post-avatar"
+            :bot="botIndicator"
+            :compact="true"
+            :better-shadow="betterShadow"
+            :user="notification.from_profile"
+          />
+        </UserPopover>
       </a>
       <div class="notification-right">
         <span class="notification-details">

src/components/popover/popover.js

@@ -81,7 +81,7 @@ const Popover = {
         y: anchorScreenBox.top + anchorHeight * 0.5
       }
       const content = this.$refs.content
-      const overlayCenter = this.overlayCentersSelector
+      const overlayCenter = this.overlayCenters
         ? this.$refs.content.querySelector(this.overlayCentersSelector)
         : null
 

src/components/status/status.js

@@ -4,14 +4,13 @@ import ReactButton from '../react_button/react_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import ExtraButtons from '../extra_buttons/extra_buttons.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
 import StatusContent from '../status_content/status_content.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import StatusPopover from '../status_popover/status_popover.vue'
-import Popover from '../popover/popover.vue'
+import UserPopover from '../user_popover/user_popover.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
@@ -106,7 +105,6 @@ const Status = {
     RetweetButton,
     ExtraButtons,
     PostStatusForm,
-    UserCard,
     UserAvatar,
     AvatarList,
     Timeago,
@@ -117,7 +115,7 @@ const Status = {
     RichContent,
     MentionLink,
     MentionsLine,
-    Popover
+    UserPopover
   },
   props: [
     'statusoid',

src/components/status/status.vue

@@ -123,42 +123,21 @@
           class="left-side"
         >
           <a :href="$router.resolve(userProfileLink).href" @click.prevent>
-            <Popover
-              trigger="click"
-              popover-class="popover-default user-popover"
-              :overlay-centers="true"
-              overlay-centers-selector=".user-info-avatar-link .Avatar"
+            <UserPopover
+              :userId="status.user.id"
+              :overlayCenters="true"
             >
-              <template v-slot:trigger>
-                <UserAvatar
-                  class="post-avatar"
-                  :bot="botIndicator"
-                  :compact="compact"
-                  :better-shadow="betterShadow"
-                  :user="status.user"
-                />
-              </template>
-              <template v-slot:content>
-                <UserCard
-                  class="mention-link-popover"
-                  :user-id="status.user.id"
-                  :hide-bio="true"
-                  :bordered="false"
-                  :allow-zooming-avatar="true"
-                  :rounded="true"
-                />
-              </template>
-            </Popover>
+              <UserAvatar
+                class="post-avatar"
+                :bot="botIndicator"
+                :compact="compact"
+                :better-shadow="betterShadow"
+                :user="status.user"
+              />
+            </UserPopover>
           </a>
         </div>
         <div class="right-side">
-          <UserCard
-            v-if="userExpanded"
-            :user-id="status.user.id"
-            :rounded="true"
-            :bordered="true"
-            class="usercard"
-          />
           <div
             v-if="!noHeading"
             class="status-heading"

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

src/components/user_card/user_card.scss

@@ -42,8 +42,10 @@
     mask-composite: exclude;
     background-size: cover;
     mask-size: 100% 60%;
-    border-top-left-radius: calc(var(--panelRadius) - 1px);
-    border-top-right-radius: calc(var(--panelRadius) - 1px);
+    border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
+    border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
+    border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
+    border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
     background-color: var(--profileBg);
     z-index: -2;
 
@@ -72,21 +74,33 @@
     }
   }
 
-  // Modifiers
-
-  &-rounded-t {
+  &.-rounded-t {
     border-top-left-radius: $fallback--panelRadius;
     border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
     border-top-right-radius: $fallback--panelRadius;
     border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+
+    --__roundnessTop: var(--panelRadius);
+    --__roundnessBottom: 0;
   }
 
-  &-rounded {
+  &.-rounded {
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
+
+    --__roundnessTop: var(--panelRadius);
+    --__roundnessBottom: var(--panelRadius);
   }
 
-  &-bordered {
+  &.-popover {
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+
+    --__roundnessTop: var(--tooltipRadius);
+    --__roundnessBottom: var(--tooltipRadius);
+  }
+
+  &.-bordered {
     border-width: 1px;
     border-style: solid;
     border-color: $fallback--border;
@@ -99,6 +113,15 @@
   color: var(--lightText, $fallback--lightText);
   padding: 0 26px;
 
+  a {
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
+
+    &:hover {
+      color: var(--icon);
+    }
+  }
+
   .container {
     min-width: 0;
     padding: 16px 0 6px;
@@ -206,8 +229,6 @@
       flex: 0 1 auto;
       text-overflow: ellipsis;
       overflow: hidden;
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
     }
 
     .dailyAvg {

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

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

src/components/user_popover/user_popover.vue

@@ -0,0 +1,33 @@
+<template>
+<Popover
+  trigger="click"
+  popover-class="popover-default user-popover"
+  overlay-centers-selector=".user-info-avatar-link .Avatar"
+  :overlay-centers="overlayCenters"
+  :disabled="disabled"
+>
+  <template v-slot:trigger>
+    <slot />
+  </template>
+  <template v-slot:content={close}>
+    <UserCard
+      class="user-popover"
+      :user-id="userId"
+      :hide-bio="true"
+      :allow-zooming-avatar="true"
+      :onClose="close"
+    />
+  </template>
+</Popover>
+</template>
+
+<script src="./user_popover.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+/* popover styles load on-demand, so we need to override */
+.user-popover.popover {
+}
+
+</style>