diff options
Diffstat (limited to 'src/components/moderation_tools')
| -rw-r--r-- | src/components/moderation_tools/moderation_tools.js | 12 | ||||
| -rw-r--r-- | src/components/moderation_tools/moderation_tools.vue | 283 |
2 files changed, 164 insertions, 131 deletions
diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js index 3eedeaa1..11de9f93 100644 --- a/src/components/moderation_tools/moderation_tools.js +++ b/src/components/moderation_tools/moderation_tools.js @@ -52,12 +52,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 +66,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 +80,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 +89,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 c24a2280..f1ab67a6 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -1,83 +1,166 @@ <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> + <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') }} </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> - <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'> - <span slot="header">{{ $t('user_card.admin_menu.delete_user') }}</span> - <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p> - <span slot="footer"> - <button @click='deleteUserDialog(false)'> - {{ $t('general.cancel') }} + <button + slot="reference" + class="btn btn-default btn-block" + :class="{ pressed: showDropDown }" + @click="toggleMenu" + > + {{ $t('user_card.admin_menu.moderation') }} </button> - <button class="danger" @click='deleteUser()'> - {{ $t('user_card.admin_menu.delete_user') }} - </button> - </span> - </DialogModal> -</div> + </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') }} + </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> @@ -86,56 +169,6 @@ @import '../../_variables.scss'; @import '../popper/popper.scss'; -.dropdown-menu { - display: block; - padding: .5rem 0; - font-size: 1rem; - text-align: left; - list-style: none; - max-width: 100vw; - z-index: 10; - box-shadow: 1px 1px 4px rgba(0,0,0,.6); - box-shadow: var(--panelShadow); - border: none; - border-radius: $fallback--btnRadius; - border-radius: var(--btnRadius, $fallback--btnRadius); - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); - - .dropdown-divider { - height: 0; - margin: .5rem 0; - overflow: hidden; - border-top: 1px solid $fallback--border; - border-top: 1px solid var(--border, $fallback--border); - } - - .dropdown-item { - line-height: 21px; - margin-right: 5px; - overflow: auto; - display: block; - padding: .25rem 1.0rem .25rem 1.5rem; - clear: both; - font-weight: 400; - text-align: inherit; - white-space: normal; - border: none; - border-radius: 0px; - background-color: transparent; - box-shadow: none; - width: 100%; - height: 100%; - - &:hover { - // TODO: improve the look on breeze themes - background-color: $fallback--fg; - background-color: var(--btn, $fallback--fg); - box-shadow: none; - } - } -} - .menu-checkbox { float: right; min-width: 22px; |