diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js index 11de9f93..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) }, diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index f1ab67a6..4990a151 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -1,18 +1,13 @@ <template> <div> - <Popper + <v-popover trigger="click" - append-to-body - :options="{ - placement: 'bottom-end', - modifiers: { - arrow: { enabled: true }, - offset: { offset: '0, 5px' }, - } - }" + class="moderation-tools-popover" + :container="false" + @show="showDropDown = true" @hide="showDropDown = false" > - <div class="popper-wrapper"> + <div class="popper-wrapper" slot="popover"> <div class="dropdown-menu"> <span v-if="user.is_local"> <button @@ -127,14 +122,12 @@ </div> </div> <button - slot="reference" class="btn btn-default btn-block" :class="{ pressed: showDropDown }" - @click="toggleMenu" > {{ $t('user_card.admin_menu.moderation') }} </button> - </Popper> + </v-popover> <portal to="modal"> <DialogModal v-if="showDeleteUserDialog" @@ -188,4 +181,11 @@ } } +.moderation-tools-popover { + height: 100%; + .trigger { + display: flex !important; + height: 100%; + } +} </style>