From e1d6e56e1b5b189f0738fb174c23965b51bcd8f2 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 26 Apr 2019 00:39:43 -0400
Subject: clean up layout

---
 .../moderation_tools/moderation_tools.vue          | 244 +++++++--------------
 1 file changed, 84 insertions(+), 160 deletions(-)

(limited to 'src/components/moderation_tools')

diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index c6f8354b..785fe7ba 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -1,168 +1,85 @@
 <template>
-  <div
-    class="block"
-    style="position: relative"
-  >
-    <Popper
-      trigger="click"
-      append-to-body
-      :options="{
-        placement: 'bottom-end',
-        modifiers: {
-          arrow: { enabled: true },
-          offset: { offset: '0, 5px' },
-        }
-      }"
-      @hide="showDropDown = false"
-    >
-      <div class="popper-wrapper">
-        <div class="dropdown-menu">
-          <span v-if="user.is_local">
-            <button
-              class="dropdown-item"
-              @click="toggleRight(&quot;admin&quot;)"
-            >
-              {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
-            </button>
-            <button
-              class="dropdown-item"
-              @click="toggleRight(&quot;moderator&quot;)"
-            >
-              {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
-            </button>
-            <div
-              role="separator"
-              class="dropdown-divider"
-            />
-          </span>
-          <button
-            class="dropdown-item"
-            @click="toggleActivationStatus()"
-          >
-            {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
+<div>
+  <Popper
+    trigger="click"
+    @hide='showDropDown = false'
+    append-to-body
+    :options="{
+      placement: 'bottom-end',
+      modifiers: {
+        arrow: { enabled: true },
+        offset: { offset: '0, 5px' },
+      }
+    }">
+    <div class="popper-wrapper">
+      <div class="dropdown-menu">
+        <span v-if='user.is_local'>
+          <button class="dropdown-item" @click='toggleRight("admin")'>
+            {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
           </button>
-          <button
-            class="dropdown-item"
-            @click="deleteUserDialog(true)"
-          >
-            {{ $t('user_card.admin_menu.delete_account') }}
+          <button class="dropdown-item" @click='toggleRight("moderator")'>
+            {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
           </button>
-          <div
-            v-if="hasTagPolicy"
-            role="separator"
-            class="dropdown-divider"
-          />
-          <span v-if="hasTagPolicy">
-            <button
-              class="dropdown-item"
-              @click="toggleTag(tags.FORCE_NSFW)"
-            >
-              {{ $t('user_card.admin_menu.force_nsfw') }}
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
-              />
-            </button>
-            <button
-              class="dropdown-item"
-              @click="toggleTag(tags.STRIP_MEDIA)"
-            >
-              {{ $t('user_card.admin_menu.strip_media') }}
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
-              />
-            </button>
-            <button
-              class="dropdown-item"
-              @click="toggleTag(tags.FORCE_UNLISTED)"
-            >
-              {{ $t('user_card.admin_menu.force_unlisted') }}
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
-              />
-            </button>
-            <button
-              class="dropdown-item"
-              @click="toggleTag(tags.SANDBOX)"
-            >
-              {{ $t('user_card.admin_menu.sandbox') }}
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
-              />
-            </button>
-            <button
-              v-if="user.is_local"
-              class="dropdown-item"
-              @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
-            >
-              {{ $t('user_card.admin_menu.disable_remote_subscription') }}
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
-              />
-            </button>
-            <button
-              v-if="user.is_local"
-              class="dropdown-item"
-              @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
-            >
-              {{ $t('user_card.admin_menu.disable_any_subscription') }}
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
-              />
-            </button>
-            <button
-              v-if="user.is_local"
-              class="dropdown-item"
-              @click="toggleTag(tags.QUARANTINE)"
-            >
-              {{ $t('user_card.admin_menu.quarantine') }}
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
-              />
-            </button>
-          </span>
-        </div>
-      </div>
-      <button
-        slot="reference"
-        :class="{ pressed: showDropDown }"
-        @click="toggleMenu"
-      >
-        {{ $t('user_card.admin_menu.moderation') }}
-      </button>
-    </Popper>
-    <portal to="modal">
-      <DialogModal
-        v-if="showDeleteUserDialog"
-        :on-cancel="deleteUserDialog.bind(this, false)"
-      >
-        <template slot="header">
-          {{ $t('user_card.admin_menu.delete_user') }}
-        </template>
-        <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-        <template slot="footer">
-          <button
-            class="btn btn-default"
-            @click="deleteUserDialog(false)"
-          >
-            {{ $t('general.cancel') }}
+          <div role="separator" class="dropdown-divider"></div>
+        </span>
+        <button class="dropdown-item" @click='toggleActivationStatus()'>
+          {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
+        </button>
+        <button class="dropdown-item" @click='deleteUserDialog(true)'>
+          {{ $t('user_card.admin_menu.delete_account') }}
+        </button>
+        <div role="separator" class="dropdown-divider" v-if='hasTagPolicy'></div>
+        <span v-if='hasTagPolicy'>
+          <button class="dropdown-item" @click='toggleTag(tags.FORCE_NSFW)'>
+            {{ $t('user_card.admin_menu.force_nsfw') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"></span>
+          </button>
+          <button class="dropdown-item" @click='toggleTag(tags.STRIP_MEDIA)'>
+            {{ $t('user_card.admin_menu.strip_media') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"></span>
+          </button>
+          <button class="dropdown-item" @click='toggleTag(tags.FORCE_UNLISTED)'>
+            {{ $t('user_card.admin_menu.force_unlisted') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"></span>
+          </button>
+          <button class="dropdown-item" @click='toggleTag(tags.SANDBOX)'>
+            {{ $t('user_card.admin_menu.sandbox') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"></span>
+          </button>
+          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)'>
+            {{ $t('user_card.admin_menu.disable_remote_subscription') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"></span>
           </button>
-          <button
-            class="btn btn-default danger"
-            @click="deleteUser()"
-          >
-            {{ $t('user_card.admin_menu.delete_user') }}
+          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)'>
+            {{ $t('user_card.admin_menu.disable_any_subscription') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"></span>
           </button>
-        </template>
-      </DialogModal>
-    </portal>
-  </div>
+          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.QUARANTINE)'>
+            {{ $t('user_card.admin_menu.quarantine') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"></span>
+          </button>
+        </span>
+      </div>
+    </div>
+    <button slot="reference" class="btn btn-default moderation-toggle-btn" v-bind:class="{ pressed: showDropDown }" @click='toggleMenu'>
+      {{ $t('user_card.admin_menu.moderation') }}
+    </button>
+  </Popper>
+  <portal to="modal">
+    <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
+      <template slot="header">{{ $t('user_card.admin_menu.delete_user') }}</template>
+      <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
+      <template slot="footer">
+        <button class="btn btn-default" @click='deleteUserDialog(false)'>
+          {{ $t('general.cancel') }}
+        </button>
+        <button class="btn btn-default danger" @click='deleteUser()'>
+          {{ $t('user_card.admin_menu.delete_user') }}
+        </button>
+      </template>
+    </DialogModal>
+  </portal>
+</div>
 </template>
 
 <script src="./moderation_tools.js"></script>
@@ -190,4 +107,11 @@
   }
 }
 
+.moderation-toggle-btn {
+  &#{&} {
+    margin: 0;
+    width: 100%;
+  }
+}
+
 </style>
-- 
cgit v1.2.3-70-g09d2