Use portal for modals

This commit is contained in:
Tusooa Zhu 2022-03-17 00:06:26 -04:00 committed by FloatingGhost
parent c77e3c31ed
commit 97fba09fd2
9 changed files with 115 additions and 109 deletions

View file

@ -59,24 +59,26 @@
</button>
</template>
</Popover>
<confirm-modal
:showing="showingConfirmBlock"
:title="$t('user_card.block_confirm_title')"
:confirm-text="$t('user_card.block_confirm_accept_button')"
:cancel-text="$t('user_card.block_confirm_cancel_button')"
@accepted="doBlockUser"
@cancelled="hideConfirmBlock"
>
<i18n
path="user_card.block_confirm"
tag="span"
<portal to="modal">
<confirm-modal
v-if="showingConfirmBlock"
:title="$t('user_card.block_confirm_title')"
:confirm-text="$t('user_card.block_confirm_accept_button')"
:cancel-text="$t('user_card.block_confirm_cancel_button')"
@accepted="doBlockUser"
@cancelled="hideConfirmBlock"
>
<span
place="user"
v-text="user.screen_name_ui"
/>
</i18n>
</confirm-modal>
<i18n
path="user_card.block_confirm"
tag="span"
>
<span
place="user"
v-text="user.screen_name_ui"
/>
</i18n>
</confirm-modal>
</portal>
</div>
</template>

View file

@ -11,12 +11,7 @@ const ConfirmModal = {
components: {
DialogModal
},
data: {
},
props: {
showing: {
type: Boolean
},
title: {
type: String
},

View file

@ -1,6 +1,5 @@
<template>
<dialog-modal
v-if="showing"
class="confirm-modal"
:on-cancel="onCancel"
>

View file

@ -167,16 +167,18 @@
</a>
</div>
</div>
<confirm-modal
:showing="showingConfirmLogout"
:title="$t('login.logout_confirm_title')"
:confirm-text="$t('login.logout_confirm_accept_button')"
:cancel-text="$t('login.logout_confirm_cancel_button')"
@accepted="doLogout"
@cancelled="hideConfirmLogout"
>
{{ $t('login.logout_confirm') }}
</confirm-modal>
<portal to="modal">
<confirm-modal
v-if="showingConfirmLogout"
:title="$t('login.logout_confirm_title')"
:confirm-text="$t('login.logout_confirm_accept_button')"
:cancel-text="$t('login.logout_confirm_cancel_button')"
@accepted="doLogout"
@cancelled="hideConfirmLogout"
>
{{ $t('login.logout_confirm') }}
</confirm-modal>
</portal>
</nav>
</template>
<script src="./desktop_nav.js"></script>

View file

@ -124,17 +124,19 @@
class="fa-scale-110 fa-old-padding"
icon="ellipsis-h"
/>
</button>
<ConfirmModal
:showing="showingDeleteDialog"
:title="$t('status.delete_confirm_title')"
:cancel-text="$t('status.delete_confirm_cancel_button')"
:confirm-text="$t('status.delete_confirm_accept_button')"
@cancelled="hideDeleteStatusConfirmDialog"
@accepted="doDeleteStatus"
>
{{ $t('status.delete_confirm') }}
</ConfirmModal>
</span>
<portal to="modal">
<ConfirmModal
v-if="showingDeleteDialog"
:title="$t('status.delete_confirm_title')"
:cancel-text="$t('status.delete_confirm_cancel_button')"
:confirm-text="$t('status.delete_confirm_accept_button')"
@cancelled="hideDeleteStatusConfirmDialog"
@accepted="doDeleteStatus"
>
{{ $t('status.delete_confirm') }}
</ConfirmModal>
</portal>
</template>
</Popover>
</template>

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>

View file

@ -76,16 +76,18 @@
ref="sideDrawer"
:logout="logout"
/>
<confirm-modal
:showing="showingConfirmLogout"
:title="$t('login.logout_confirm_title')"
:confirm-text="$t('login.logout_confirm_accept_button')"
:cancel-text="$t('login.logout_confirm_cancel_button')"
@accepted="doLogout"
@cancelled="hideConfirmLogout"
>
{{ $t('login.logout_confirm') }}
</confirm-modal>
<portal to="modal">
<confirm-modal
v-if="showingConfirmLogout"
:title="$t('login.logout_confirm_title')"
:confirm-text="$t('login.logout_confirm_accept_button')"
:cancel-text="$t('login.logout_confirm_cancel_button')"
@accepted="doLogout"
@cancelled="hideConfirmLogout"
>
{{ $t('login.logout_confirm') }}
</confirm-modal>
</portal>
</div>
</template>

View file

@ -33,16 +33,18 @@
>
{{ status.repeat_num }}
</span>
<confirm-modal
:showing="showingConfirmDialog"
:title="$t('status.repeat_confirm_title')"
:confirm-text="$t('status.repeat_confirm_accept_button')"
:cancel-text="$t('status.repeat_confirm_cancel_button')"
@accepted="doRetweet"
@cancelled="hideConfirmDialog"
>
{{ $t('status.repeat_confirm') }}
</confirm-modal>
<portal to="modal">
<confirm-modal
v-if="showingConfirmDialog"
:title="$t('status.repeat_confirm_title')"
:confirm-text="$t('status.repeat_confirm_accept_button')"
:cancel-text="$t('status.repeat_confirm_cancel_button')"
@accepted="doRetweet"
@cancelled="hideConfirmDialog"
>
{{ $t('status.repeat_confirm') }}
</confirm-modal>
</portal>
</div>
</template>

View file

@ -295,24 +295,26 @@
:handle-links="true"
/>
</div>
<confirm-modal
:showing="showingConfirmMute"
:title="$t('user_card.mute_confirm_title')"
:confirm-text="$t('user_card.mute_confirm_accept_button')"
:cancel-text="$t('user_card.mute_confirm_cancel_button')"
@accepted="doMuteUser"
@cancelled="hideConfirmMute"
>
<i18n
path="user_card.mute_confirm"
tag="span"
<portal to="modal">
<confirm-modal
v-if="showingConfirmMute"
:title="$t('user_card.mute_confirm_title')"
:confirm-text="$t('user_card.mute_confirm_accept_button')"
:cancel-text="$t('user_card.mute_confirm_cancel_button')"
@accepted="doMuteUser"
@cancelled="hideConfirmMute"
>
<span
place="user"
v-text="user.screen_name_ui"
/>
</i18n>
</confirm-modal>
<i18n
path="user_card.mute_confirm"
tag="span"
>
<span
place="user"
v-text="user.screen_name_ui"
/>
</i18n>
</confirm-modal>
</portal>
</div>
</template>