From 9c8af14908aca2ff278f16c9e71088570f2eb562 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 20 May 2019 16:21:53 -0400
Subject: [PATCH] render modal at the root level using portal
---
src/App.vue | 1 +
src/components/dialog_modal/dialog_modal.vue | 2 ++
.../moderation_tools/moderation_tools.vue | 26 ++++++++++---------
3 files changed, 17 insertions(+), 12 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 21abd694e..769e075dc 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 7621fb202..3da543dec 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 146673a56..6a5e8cc00 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>
--
GitLab