From c104c7688999e80f390622d059154d6f885928a0 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 17 Jul 2020 15:42:36 +0300
Subject: [PATCH] clean up user card a lot

---
 .../account_actions/account_actions.js        | 16 ++++++-
 .../account_actions/account_actions.vue       | 35 ++++++++++++--
 .../moderation_tools/moderation_tools.js      |  3 +-
 .../moderation_tools/moderation_tools.vue     |  3 +-
 src/components/notifications/notifications.js |  2 +-
 src/components/popover/popover.vue            | 14 +++++-
 src/components/tab_switcher/tab_switcher.scss |  8 ++--
 src/components/user_card/user_card.js         |  9 ----
 src/components/user_card/user_card.vue        | 48 ++++---------------
 9 files changed, 77 insertions(+), 61 deletions(-)

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 6d345bc7..ed1388a1 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -1,6 +1,7 @@
 import { mapState } from 'vuex'
 import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
+import ModerationTools from '../moderation_tools/moderation_tools.vue'
 
 const AccountActions = {
   props: [
@@ -11,7 +12,8 @@ const AccountActions = {
   },
   components: {
     ProgressButton,
-    Popover
+    Popover,
+    ModerationTools
   },
   methods: {
     showRepeats () {
@@ -20,6 +22,12 @@ const AccountActions = {
     hideRepeats () {
       this.$store.dispatch('hideReblogs', this.user.id)
     },
+    muteUser () {
+      this.$store.dispatch('muteUser', this.user.id)
+    },
+    unmuteUser () {
+      this.$store.dispatch('unmuteUser', this.user.id)
+    },
     blockUser () {
       this.$store.dispatch('blockUser', this.user.id)
     },
@@ -34,9 +42,15 @@ const AccountActions = {
         name: 'chat',
         params: { recipient_id: this.user.id }
       })
+    },
+    mentionUser () {
+      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
     }
   },
   computed: {
+    loggedIn () {
+      return this.$store.state.users.currentUser
+    },
     ...mapState({
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
     })
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 987e94b7..d2b2e8fe 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -30,6 +30,20 @@
               class="dropdown-divider"
             />
           </template>
+          <button
+            v-if="relationship.muting"
+            class="btn btn-default btn-block dropdown-item"
+            @click="unmuteUser"
+          >
+            {{ $t('user_card.muted') }}
+          </button>
+          <button
+            v-else
+            class="btn btn-default btn-block dropdown-item"
+            @click="muteUser"
+          >
+            {{ $t('user_card.mute') }}
+          </button>
           <button
             v-if="relationship.blocking"
             class="btn btn-default btn-block dropdown-item"
@@ -50,6 +64,10 @@
           >
             {{ $t('user_card.report') }}
           </button>
+          <div
+            role="separator"
+            class="dropdown-divider"
+          />
           <button
             v-if="pleromaChatMessagesAvailable"
             class="btn btn-default btn-block dropdown-item"
@@ -57,14 +75,25 @@
           >
             {{ $t('user_card.message') }}
           </button>
+          <button
+            class="btn btn-default btn-block dropdown-item"
+            @click="mentionUser"
+          >
+            {{ $t('user_card.mention') }}
+          </button>
+          <ModerationTools
+            v-if="loggedIn.role === &quot;admin&quot; || loggedIn"
+            button-class="btn btn-default btn-block dropdown-item"
+            :user="user"
+          />
         </div>
       </div>
-      <div
+      <button
         slot="trigger"
         class="btn btn-default ellipsis-button"
       >
         <i class="icon-ellipsis trigger-button" />
-      </div>
+      </button>
     </Popover>
   </div>
 </template>
@@ -74,7 +103,7 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .account-actions {
-  margin: 0 .8em;
+  margin: 0 .5em;
 }
 
 .account-actions button.dropdown-item {
diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index d4fdc53e..eec965e4 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -11,7 +11,8 @@ const QUARANTINE = 'mrf_tag:quarantine'
 
 const ModerationTools = {
   props: [
-    'user'
+    'user',
+    'buttonClass'
   ],
   data () {
     return {
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index b2d5acc5..d14dd0c8 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -124,8 +124,7 @@
       </div>
       <button
         slot="trigger"
-        class="btn btn-default btn-block"
-        :class="{ toggled }"
+        :class="`${buttonClass} ${toggled && 'toggled'}`"
       >
         {{ $t('user_card.admin_menu.moderation') }}
       </button>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index d951e2a8..9b77860e 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -24,7 +24,7 @@ const Notifications = {
       bottomedOut: false,
       // How many seen notifications to display in the list. The more there are,
       // the heavier the page becomes. This count is increased when loading
-      // older notifications, and cut back to default whenever hitting "Read!".
+      // older notifications, and cut back to default whenever hitting "Read!"1.
       seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
     }
   },
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index a271cb1b..fc055af1 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -31,7 +31,7 @@
 @import '../../_variables.scss';
 
 .popover {
-  z-index: 8;
+  z-index: 1000;
   position: absolute;
   min-width: 0;
   transition: opacity 0.3s;
@@ -60,7 +60,6 @@
   text-align: left;
   list-style: none;
   max-width: 100vw;
-  z-index: 10;
   white-space: nowrap;
 
   .dropdown-divider {
@@ -113,6 +112,17 @@
       }
     }
 
+    &.toggled {
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenuPopover, $fallback--lightBg);
+      color: $fallback--link;
+      color: var(--selectedMenuPopoverText, $fallback--link);
+      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
+      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
+    }
+
   }
 }
 </style>
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index d2ef4857..fea21b66 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -175,16 +175,16 @@
     }
 
     &:not(.active) {
-      z-index: 4;
+      z-index: 2;
 
       &:hover {
-        z-index: 6;
+        z-index: 4;
       }
     }
 
     &.active {
       background: transparent;
-      z-index: 5;
+      z-index: 3;
       color: $fallback--text;
       color: var(--tabActiveText, $fallback--text);
     }
@@ -216,7 +216,7 @@
       &::after {
         content: '';
         position: absolute;
-        z-index: 7;
+        z-index: 5;
       }
     }
   }
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 5f66f036..d341bb7a 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -111,12 +111,6 @@ export default {
     FollowButton
   },
   methods: {
-    muteUser () {
-      this.$store.dispatch('muteUser', this.user.id)
-    },
-    unmuteUser () {
-      this.$store.dispatch('unmuteUser', this.user.id)
-    },
     subscribeUser () {
       return this.$store.dispatch('subscribeUser', this.user.id)
     },
@@ -150,9 +144,6 @@ export default {
       }
       this.$store.dispatch('setMedia', [attachment])
       this.$store.dispatch('setCurrent', attachment)
-    },
-    mentionUser () {
-      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
     }
   }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5f7861b2..f6dcec60 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -59,11 +59,6 @@
               >
                 <i class="icon-link-ext usersettings" />
               </a>
-              <AccountActions
-                v-if="isOtherUser && loggedIn"
-                :user="user"
-                :relationship="relationship"
-              />
             </div>
             <div class="bottom-line">
               <router-link
@@ -95,12 +90,6 @@
           </div>
         </div>
         <div class="user-meta">
-          <div
-            v-if="relationship.followed_by && loggedIn && isOtherUser"
-            class="following"
-          >
-            {{ $t('user_card.follows_you') }}
-          </div>
           <div
             v-if="isOtherUser && (loggedIn || !switcher)"
             class="highlighter"
@@ -161,36 +150,19 @@
               >
                 <i class="icon-bell-ringing-o" />
               </ProgressButton>
+              <AccountActions
+                v-if="isOtherUser && loggedIn"
+                :user="user"
+                :relationship="relationship"
+              />
             </template>
           </div>
-          <div>
-            <button
-              v-if="relationship.muting"
-              class="btn btn-default btn-block toggled"
-              @click="unmuteUser"
-            >
-              {{ $t('user_card.muted') }}
-            </button>
-            <button
-              v-else
-              class="btn btn-default btn-block"
-              @click="muteUser"
-            >
-              {{ $t('user_card.mute') }}
-            </button>
+          <div
+            v-if="relationship.followed_by && loggedIn && isOtherUser"
+            class="following"
+          >
+            {{ $t('user_card.follows_you') }}
           </div>
-          <div>
-            <button
-              class="btn btn-default btn-block"
-              @click="mentionUser"
-            >
-              {{ $t('user_card.mention') }}
-            </button>
-          </div>
-          <ModerationTools
-            v-if="loggedIn.role === &quot;admin&quot;"
-            :user="user"
-          />
         </div>
         <div
           v-if="!loggedIn && user.is_local"