AkkomaGang/akkoma-fe
4
13
Fork 56
Code Issues 74 Pull requests 14 Projects Releases 1 Wiki Activity

Use portal for modals

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/account_actions/account_actions.vue
View file

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

5
src/components/confirm_modal/confirm_modal.js
View file

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

1
src/components/confirm_modal/confirm_modal.vue
View file

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

22
src/components/desktop_nav/desktop_nav.vue
View file

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

24
src/components/extra_buttons/extra_buttons.vue
View file

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

56
src/components/follow_button/follow_button.vue
View file

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

22
src/components/mobile_nav/mobile_nav.vue
View file

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

22
src/components/retweet_button/retweet_button.vue
View file

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

36
src/components/user_card/user_card.vue
View file

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