fix: prevent the lost of focus on compose icons (#2253)

This commit is contained in:
TAKAHASHI Shuuji 2023-07-23 02:22:17 +09:00 committed by GitHub
parent 81e1383da5
commit b730fab643
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 10 deletions

View file

@ -378,26 +378,26 @@ onDeactivated(() => {
</button> </button>
</PublishEmojiPicker> </PublishEmojiPicker>
<CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')"> <CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')" no-auto-focus>
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments"> <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
<div i-ri:image-add-line /> <div i-ri:image-add-line />
</button> </button>
</CommonTooltip> </CommonTooltip>
<template v-if="draft.attachments.length === 0"> <template v-if="draft.attachments.length === 0">
<CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')"> <CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')" no-auto-focus>
<button btn-action-icon :aria-label="$t('polls.create')" @click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }"> <button btn-action-icon :aria-label="$t('polls.create')" @click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }">
<div i-ri:chat-poll-line /> <div i-ri:chat-poll-line />
</button> </button>
</CommonTooltip> </CommonTooltip>
<div v-else rounded-full b-1 border-dark flex="~ row" gap-1> <div v-else rounded-full b-1 border-dark flex="~ row" gap-1>
<CommonTooltip placement="top" :content="$t('polls.cancel')"> <CommonTooltip placement="top" :content="$t('polls.cancel')" no-auto-focus>
<button btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')" @click="draft.params.poll = undefined"> <button btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')" @click="draft.params.poll = undefined">
<div i-ri:close-line /> <div i-ri:close-line />
</button> </button>
</CommonTooltip> </CommonTooltip>
<CommonDropdown placement="top"> <CommonDropdown placement="top">
<CommonTooltip placement="top" :content="$t('polls.settings')"> <CommonTooltip placement="top" :content="$t('polls.settings')" no-auto-focus>
<button :aria-label="$t('polls.settings')" btn-action-icon w-12> <button :aria-label="$t('polls.settings')" btn-action-icon w-12>
<div i-ri:list-settings-line /> <div i-ri:list-settings-line />
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 /> <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
@ -411,7 +411,7 @@ onDeactivated(() => {
</template> </template>
</CommonDropdown> </CommonDropdown>
<CommonDropdown placement="bottom"> <CommonDropdown placement="bottom">
<CommonTooltip placement="top" :content="$t('polls.expiration')"> <CommonTooltip placement="top" :content="$t('polls.expiration')" no-auto-focus>
<button :aria-label="$t('polls.expiration')" btn-action-icon w-12> <button :aria-label="$t('polls.expiration')" btn-action-icon w-12>
<div i-ri:hourglass-line /> <div i-ri:hourglass-line />
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 /> <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
@ -436,7 +436,7 @@ onDeactivated(() => {
<PublishCharacterCounter :max="characterLimit" :length="characterCount" /> <PublishCharacterCounter :max="characterLimit" :length="characterCount" />
<CommonTooltip placement="top" :content="$t('tooltip.change_language')"> <CommonTooltip placement="top" :content="$t('tooltip.change_language')" no-auto-focus>
<CommonDropdown placement="bottom" auto-boundary-max-size> <CommonDropdown placement="bottom" auto-boundary-max-size>
<button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1> <button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
<span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span> <span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
@ -450,7 +450,7 @@ onDeactivated(() => {
</CommonDropdown> </CommonDropdown>
</CommonTooltip> </CommonTooltip>
<CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')"> <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')" no-auto-focus>
<button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive"> <button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
<div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange /> <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
<div v-else i-ri:alarm-warning-line /> <div v-else i-ri:alarm-warning-line />
@ -466,7 +466,7 @@ onDeactivated(() => {
</template> </template>
</PublishVisibilityPicker> </PublishVisibilityPicker>
<CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')"> <CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')" no-auto-focus>
<button <button
btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit aria-describedby="publish-failed-tooltip" btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit aria-describedby="publish-failed-tooltip"
> >
@ -477,7 +477,7 @@ onDeactivated(() => {
</button> </button>
</CommonTooltip> </CommonTooltip>
<CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)"> <CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)" no-auto-focus>
<button <button
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
md:w-fit md:w-fit

View file

@ -160,7 +160,7 @@ const forceShow = ref(false)
<div flex="~ gap1" items-center> <div flex="~ gap1" items-center>
<StatusVisibilityIndicator v-if="status.visibility !== 'public'" :status="status" /> <StatusVisibilityIndicator v-if="status.visibility !== 'public'" :status="status" />
<div flex> <div flex>
<CommonTooltip :content="createdAt"> <CommonTooltip :content="createdAt" no-auto-focus>
<NuxtLink :title="status.createdAt" :href="statusRoute.href" @click.prevent="go($event)"> <NuxtLink :title="status.createdAt" :href="statusRoute.href" @click.prevent="go($event)">
<time text-sm ws-nowrap hover:underline :datetime="status.createdAt"> <time text-sm ws-nowrap hover:underline :datetime="status.createdAt">
{{ timeago }} {{ timeago }}