aboutsummaryrefslogtreecommitdiff
path: root/src/components/moderation_tools
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/moderation_tools')
-rw-r--r--src/components/moderation_tools/moderation_tools.js19
-rw-r--r--src/components/moderation_tools/moderation_tools.vue237
2 files changed, 167 insertions, 89 deletions
diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index 3eedeaa1..8aadc8c5 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -1,5 +1,4 @@
import DialogModal from '../dialog_modal/dialog_modal.vue'
-import Popper from 'vue-popperjs/src/component/popper.js.vue'
const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
const STRIP_MEDIA = 'mrf_tag:media-strip'
@@ -29,8 +28,7 @@ const ModerationTools = {
}
},
components: {
- DialogModal,
- Popper
+ DialogModal
},
computed: {
tagsSet () {
@@ -41,9 +39,6 @@ const ModerationTools = {
}
},
methods: {
- toggleMenu () {
- this.showDropDown = !this.showDropDown
- },
hasTag (tagName) {
return this.tagsSet.has(tagName)
},
@@ -52,12 +47,12 @@ const ModerationTools = {
if (this.tagsSet.has(tag)) {
store.state.api.backendInteractor.untagUser(this.user, tag).then(response => {
if (!response.ok) { return }
- store.commit('untagUser', {user: this.user, tag})
+ store.commit('untagUser', { user: this.user, tag })
})
} else {
store.state.api.backendInteractor.tagUser(this.user, tag).then(response => {
if (!response.ok) { return }
- store.commit('tagUser', {user: this.user, tag})
+ store.commit('tagUser', { user: this.user, tag })
})
}
},
@@ -66,12 +61,12 @@ const ModerationTools = {
if (this.user.rights[right]) {
store.state.api.backendInteractor.deleteRight(this.user, right).then(response => {
if (!response.ok) { return }
- store.commit('updateRight', {user: this.user, right: right, value: false})
+ store.commit('updateRight', { user: this.user, right: right, value: false })
})
} else {
store.state.api.backendInteractor.addRight(this.user, right).then(response => {
if (!response.ok) { return }
- store.commit('updateRight', {user: this.user, right: right, value: true})
+ store.commit('updateRight', { user: this.user, right: right, value: true })
})
}
},
@@ -80,7 +75,7 @@ const ModerationTools = {
const status = !!this.user.deactivated
store.state.api.backendInteractor.setActivationStatus(this.user, status).then(response => {
if (!response.ok) { return }
- store.commit('updateActivationStatus', {user: this.user, status: status})
+ store.commit('updateActivationStatus', { user: this.user, status: status })
})
},
deleteUserDialog (show) {
@@ -89,7 +84,7 @@ const ModerationTools = {
deleteUser () {
const store = this.$store
const user = this.user
- const {id, name} = user
+ const { id, name } = user
store.state.api.backendInteractor.deleteUser(user)
.then(e => {
this.$store.dispatch('markStatusesAsDeleted', status => user.id === status.user.id)
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 6a5e8cc0..d97ca3aa 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -1,85 +1,161 @@
<template>
-<div class='block' style='position: relative'>
- <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') }}
+ <div>
+ <v-popover
+ trigger="click"
+ class="moderation-tools-popover"
+ :container="false"
+ placement="bottom-end"
+ :offset="5"
+ @show="showDropDown = true"
+ @hide="showDropDown = false"
+ >
+ <div slot="popover">
+ <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') }}
</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
+ class="dropdown-item"
+ @click="deleteUserDialog(true)"
+ >
+ {{ $t('user_card.admin_menu.delete_account') }}
</button>
- <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="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>
- <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
+ 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>
- </div>
- <button slot="reference" 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()'>
+ <button
+ class="btn btn-default btn-block"
+ :class="{ pressed: showDropDown }"
+ >
+ {{ $t('user_card.admin_menu.moderation') }}
+ </button>
+ </v-popover>
+ <portal to="modal">
+ <DialogModal
+ v-if="showDeleteUserDialog"
+ :on-cancel="deleteUserDialog.bind(this, false)"
+ >
+ <template slot="header">
{{ $t('user_card.admin_menu.delete_user') }}
- </button>
- </template>
- </DialogModal>
- </portal>
-</div>
+ </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>
@@ -107,4 +183,11 @@
}
}
+.moderation-tools-popover {
+ height: 100%;
+ .trigger {
+ display: flex !important;
+ height: 100%;
+ }
+}
</style>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 16:44:12 +0000