diff options
| author | taehoon <th.dev91@gmail.com> | 2019-05-20 16:21:53 -0400 |
|---|---|---|
| committer | taehoon <th.dev91@gmail.com> | 2019-06-06 13:37:27 -0400 |
| commit | 9c8af14908aca2ff278f16c9e71088570f2eb562 (patch) | |
| tree | e8441169df6c73415d99e65f3b94583bda31d0c4 | |
| parent | 5740123ee68fe59891b87bcaad297dc929346545 (diff) | |
render modal at the root level using portal
| -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 |
3 files changed, 17 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> |