Use portal for modals

This commit is contained in:
Tusooa Zhu 2022-03-17 00:06:26 -04:00 committed by tusooa
commit 39e4746f61
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
9 changed files with 114 additions and 108 deletions

View file

@ -1,33 +1,33 @@
<template>
<div>
<button
class="btn button-default follow-button"
:class="{ toggled: isPressed }"
:disabled="disabled"
:title="title"
@click="onClick"
>
{{ label }}
</button>
<confirm-modal
:showing="showingConfirmUnfollow"
:title="$t('user_card.unfollow_confirm_title')"
:confirm-text="$t('user_card.unfollow_confirm_accept_button')"
:cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
@accepted="doUnfollow"
@cancelled="hideConfirmUnfollow"
>
<i18n
path="user_card.unfollow_confirm"
tag="span"
<button
class="btn button-default follow-button"
:class="{ toggled: isPressed }"
:disabled="disabled"
:title="title"
@click="onClick"
>
{{ label }}
<portal to="modal">
<confirm-modal
v-if="showingConfirmUnfollow"
:title="$t('user_card.unfollow_confirm_title')"
:confirm-text="$t('user_card.unfollow_confirm_accept_button')"
:cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
@accepted="doUnfollow"
@cancelled="hideConfirmUnfollow"
>
<span
place="user"
v-text="user.screen_name_ui"
/>
</i18n>
</confirm-modal>
</div>
<i18n
path="user_card.unfollow_confirm"
tag="span"
>
<span
place="user"
v-text="user.screen_name_ui"
/>
</i18n>
</confirm-modal>
</portal>
</button>
</template>
<script src="./follow_button.js"></script>