diff options
| author | Tusooa Zhu <tusooa@kazv.moe> | 2022-03-17 00:06:26 -0400 |
|---|---|---|
| committer | tusooa <tusooa@kazv.moe> | 2023-01-20 23:39:42 -0500 |
| commit | 39e4746f615970001839309e06a0f13d9613b175 (patch) | |
| tree | e072340f3e0abe63e8584f1cf6afea4dc53d5d40 /src/components/follow_button | |
| parent | 51ade260660b1a6586b5c0091d89c9701b684870 (diff) | |
Use portal for modals
Diffstat (limited to 'src/components/follow_button')
| -rw-r--r-- | src/components/follow_button/follow_button.vue | 56 |
1 files changed, 28 insertions, 28 deletions
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue index 4fc2233a..5c799406 100644 --- a/src/components/follow_button/follow_button.vue +++ b/src/components/follow_button/follow_button.vue @@ -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> |