Fix application name position in status
This commit is contained in:
parent
36c7c2a631
commit
ede4b02f1e
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue