Fix application name position in status

This commit is contained in:
AkiraFukushima 2022-04-15 23:04:31 +09:00
parent 36c7c2a631
commit ede4b02f1e
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
1 changed files with 116 additions and 110 deletions

View File

@ -132,121 +132,123 @@
> >
</template> </template>
</div> </div>
<div class="tool-box"> <div class="toot-footer">
<el-button type="text" @click="openReply()" class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')"> <div class="tool-box">
<font-awesome-icon icon="reply" size="sm" /> <el-button type="text" @click="openReply()" class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')">
</el-button> <font-awesome-icon icon="reply" size="sm" />
<el-button v-show="locked" type="text" class="locked"> </el-button>
<font-awesome-icon icon="lock" size="sm" /> <el-button v-show="locked" type="text" class="locked">
</el-button> <font-awesome-icon icon="lock" size="sm" />
<el-button v-show="directed" type="text" class="directed"> </el-button>
<font-awesome-icon icon="envelope" size="sm" /> <el-button v-show="directed" type="text" class="directed">
</el-button> <font-awesome-icon icon="envelope" size="sm" />
<el-button </el-button>
v-show="!locked && !directed" <el-button
type="text" v-show="!locked && !directed"
@click="changeReblog(originalMessage)" type="text"
:class="originalMessage.reblogged ? 'reblogged' : 'reblog'" @click="changeReblog(originalMessage)"
:title="$t('cards.toot.reblog')" :class="originalMessage.reblogged ? 'reblogged' : 'reblog'"
> :title="$t('cards.toot.reblog')"
<font-awesome-icon icon="retweet" size="sm" /> >
</el-button> <font-awesome-icon icon="retweet" size="sm" />
<div class="count" v-if="reblogsCount"> </el-button>
{{ reblogsCount }} <div class="count" v-if="reblogsCount">
</div> {{ reblogsCount }}
<el-button </div>
type="text" <el-button
@click="changeFavourite(originalMessage)" type="text"
:class="originalMessage.favourited ? 'favourited animated bounceIn' : 'favourite'" @click="changeFavourite(originalMessage)"
:title="$t('cards.toot.fav')" :class="originalMessage.favourited ? 'favourited animated bounceIn' : 'favourite'"
:aria-label="$t('cards.toot.fav')" :title="$t('cards.toot.fav')"
> :aria-label="$t('cards.toot.fav')"
<font-awesome-icon icon="star" size="sm" /> >
</el-button> <font-awesome-icon icon="star" size="sm" />
<div class="count" v-if="favouritesCount"> </el-button>
{{ favouritesCount }} <div class="count" v-if="favouritesCount">
</div> {{ favouritesCount }}
<el-button </div>
@click="changeBookmark(originalMessage)" <el-button
:class="originalMessage.bookmarked ? 'bookmarked' : 'bookmark'" @click="changeBookmark(originalMessage)"
type="text" :class="originalMessage.bookmarked ? 'bookmarked' : 'bookmark'"
:text="$t('cards.toot.bookmark')" type="text"
:aria-label="$t('cards.toot.bookmark')" :text="$t('cards.toot.bookmark')"
v-if="bookmarkSupported" :aria-label="$t('cards.toot.bookmark')"
> v-if="bookmarkSupported"
<font-awesome-icon icon="bookmark" size="sm" /> >
</el-button> <font-awesome-icon icon="bookmark" size="sm" />
<el-button type="text" class="quote-btn" v-if="quoteSupported" @click="openQuote()"> </el-button>
<font-awesome-icon icon="quote-right" size="sm" /> <el-button type="text" class="quote-btn" v-if="quoteSupported" @click="openQuote()">
</el-button> <font-awesome-icon icon="quote-right" size="sm" />
<template v-if="sns !== 'mastodon'"> </el-button>
<template v-if="sns !== 'mastodon'">
<el-popover
placement="bottom"
width="281"
trigger="click"
popper-class="status-emoji-picker"
ref="status_emoji_picker"
@show="openPicker"
@hide="hidePicker"
>
<picker
v-if="openEmojiPicker"
set="emojione"
:autoFocus="true"
@select="selectEmoji"
:sheetSize="32"
:perLine="7"
:emojiSize="24"
:showPreview="false"
:emojiTooltip="true"
/>
<el-button slot="reference" class="emoji" type="text">
<font-awesome-icon :icon="['far', 'face-smile']" size="sm" />
</el-button>
</el-popover>
</template>
<el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-show="pinned">
<font-awesome-icon icon="thumbtack" size="sm" />
</el-button>
<el-popover <el-popover
placement="bottom" placement="bottom"
width="281" width="200"
trigger="click" trigger="click"
popper-class="status-emoji-picker" popper-class="status-menu-popper"
ref="status_emoji_picker" ref="status_menu_popper"
@show="openPicker" @show="openMenu"
@hide="hidePicker" @hide="hideMenu"
> >
<picker <ul class="menu-list" v-if="openToolMenu">
v-if="openEmojiPicker" <li role="button" @click="openDetail(message)" v-show="!detailed">
set="emojione" {{ $t('cards.toot.view_toot_detail') }}
:autoFocus="true" </li>
@select="selectEmoji" <li role="button" @click="openBrowser(originalMessage)">
:sheetSize="32" {{ $t('cards.toot.open_in_browser') }}
:perLine="7" </li>
:emojiSize="24" <li role="button" @click="copyLink(originalMessage)">
:showPreview="false" {{ $t('cards.toot.copy_link_to_toot') }}
:emojiTooltip="true" </li>
/> <li role="button" class="separate" @click="confirmMute()">
<el-button slot="reference" class="emoji" type="text"> {{ $t('cards.toot.mute') }}
<font-awesome-icon :icon="['far', 'face-smile']" size="sm" /> </li>
<li role="button" @click="block()">
{{ $t('cards.toot.block') }}
</li>
<li role="button" @click="reportUser()" v-if="!isMyMessage">
{{ $t('cards.toot.report') }}
</li>
<li role="button" class="separate" @click="deleteToot(message)" v-if="isMyMessage">
{{ $t('cards.toot.delete') }}
</li>
</ul>
<el-button slot="reference" type="text" :title="$t('cards.toot.detail')">
<font-awesome-icon icon="ellipsis" size="sm" />
</el-button> </el-button>
</el-popover> </el-popover>
</template> </div>
<el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-show="pinned"> <div class="application" v-show="application !== null">
<font-awesome-icon icon="thumbtack" size="sm" /> {{ $t('cards.toot.via', { application: application }) }}
</el-button> </div>
<el-popover
placement="bottom"
width="200"
trigger="click"
popper-class="status-menu-popper"
ref="status_menu_popper"
@show="openMenu"
@hide="hideMenu"
>
<ul class="menu-list" v-if="openToolMenu">
<li role="button" @click="openDetail(message)" v-show="!detailed">
{{ $t('cards.toot.view_toot_detail') }}
</li>
<li role="button" @click="openBrowser(originalMessage)">
{{ $t('cards.toot.open_in_browser') }}
</li>
<li role="button" @click="copyLink(originalMessage)">
{{ $t('cards.toot.copy_link_to_toot') }}
</li>
<li role="button" class="separate" @click="confirmMute()">
{{ $t('cards.toot.mute') }}
</li>
<li role="button" @click="block()">
{{ $t('cards.toot.block') }}
</li>
<li role="button" @click="reportUser()" v-if="!isMyMessage">
{{ $t('cards.toot.report') }}
</li>
<li role="button" class="separate" @click="deleteToot(message)" v-if="isMyMessage">
{{ $t('cards.toot.delete') }}
</li>
</ul>
<el-button slot="reference" type="text" :title="$t('cards.toot.detail')">
<font-awesome-icon icon="ellipsis" size="sm" />
</el-button>
</el-popover>
</div>
<div class="application" v-show="application !== null">
{{ $t('cards.toot.via', { application: application }) }}
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -950,6 +952,11 @@ export default {
} }
} }
.toot-footer {
display: flex;
justify-content: space-between;
}
.tool-box { .tool-box {
display: flex; display: flex;
@ -992,7 +999,6 @@ export default {
} }
.application { .application {
float: right;
color: #909399; color: #909399;
} }