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> </div>
<chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel> <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
<UserReportingModal /> <UserReportingModal />
<portal-target name="modal" />
</div> </div>
</template> </template>

View file

@ -62,6 +62,7 @@
.title { .title {
margin-bottom: 0; margin-bottom: 0;
text-align: center;
} }
} }
@ -80,6 +81,7 @@
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--lightBg, $fallback--lightBg);
border-top: 1px solid $fallback--bg; border-top: 1px solid $fallback--bg;
border-top: 1px solid var(--bg, $fallback--bg); border-top: 1px solid var(--bg, $fallback--bg);
display: flex;
justify-content: flex-end; justify-content: flex-end;
button { button {

View file

@ -65,18 +65,20 @@
{{ $t('user_card.admin_menu.moderation') }} {{ $t('user_card.admin_menu.moderation') }}
</button> </button>
</Popper> </Popper>
<portal to="modal">
<DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'> <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
<span slot="header">{{ $t('user_card.admin_menu.delete_user') }}</span> <template slot="header">{{ $t('user_card.admin_menu.delete_user') }}</template>
<p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p> <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
<span slot="footer"> <template slot="footer">
<button @click='deleteUserDialog(false)'> <button class="btn btn-default" @click='deleteUserDialog(false)'>
{{ $t('general.cancel') }} {{ $t('general.cancel') }}
</button> </button>
<button class="danger" @click='deleteUser()'> <button class="btn btn-default danger" @click='deleteUser()'>
{{ $t('user_card.admin_menu.delete_user') }} {{ $t('user_card.admin_menu.delete_user') }}
</button> </button>
</span> </template>
</DialogModal> </DialogModal>
</portal>
</div> </div>
</template> </template>