render modal at the root level using portal

This commit is contained in:
taehoon 2019-05-20 16:21:53 -04:00
parent 5740123ee6
commit 9c8af14908
3 changed files with 17 additions and 12 deletions

View file

@ -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>

View file

@ -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 {

View file

@ -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>