diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 1 | ||||
| -rw-r--r-- | src/components/dialog_modal/dialog_modal.vue | 2 | ||||
| -rw-r--r-- | src/components/moderation_tools/moderation_tools.vue | 26 | ||||
| -rw-r--r-- | src/main.js | 2 |
4 files changed, 19 insertions, 12 deletions
diff --git a/src/App.vue b/src/App.vue index 21abd694..769e075d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -49,6 +49,7 @@ </div> <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel> <UserReportingModal /> + <portal-target name="modal" /> </div> </template> diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue index 7621fb20..3da543de 100644 --- a/src/components/dialog_modal/dialog_modal.vue +++ b/src/components/dialog_modal/dialog_modal.vue @@ -62,6 +62,7 @@ .title { margin-bottom: 0; + text-align: center; } } @@ -80,6 +81,7 @@ background-color: var(--lightBg, $fallback--lightBg); border-top: 1px solid $fallback--bg; border-top: 1px solid var(--bg, $fallback--bg); + display: flex; justify-content: flex-end; button { diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index 146673a5..6a5e8cc0 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -65,18 +65,20 @@ {{ $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> - <button class="danger" @click='deleteUser()'> - {{ $t('user_card.admin_menu.delete_user') }} - </button> - </span> - </DialogModal> + <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> diff --git a/src/main.js b/src/main.js index 92f843b1..e12db6a3 100644 --- a/src/main.js +++ b/src/main.js @@ -24,6 +24,7 @@ import messages from './i18n/messages.js' import VueChatScroll from 'vue-chat-scroll' import VueClickOutside from 'v-click-outside' +import PortalVue from 'portal-vue' import afterStoreSetup from './boot/after_store.js' @@ -42,6 +43,7 @@ Vue.use(VueTimeago, { Vue.use(VueI18n) Vue.use(VueChatScroll) Vue.use(VueClickOutside) +Vue.use(PortalVue) const i18n = new VueI18n({ // By default, use the browser locale, we will update it if neccessary |