diff options
Diffstat (limited to 'src/components/moderation_tools/moderation_tools.vue')
| -rw-r--r-- | src/components/moderation_tools/moderation_tools.vue | 244 |
1 files changed, 84 insertions, 160 deletions
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("admin")" - > - {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }} - </button> - <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 - 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> |