mirror of
https://github.com/misskey-dev/misskey
synced 2024-11-29 07:18:52 +09:00
[Client] Use class selector to improve performance
This commit is contained in:
syuilo
parent
9789b9a083
commit
c2c79c4a87
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<span class="mk-avatar" :style="style" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
|
||||
<span class="mk-avatar" :style="style" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick" v-once>
|
||||
<span class="inner" :style="icon"></span>
|
||||
</span>
|
||||
<span class="mk-avatar" :style="style" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
|
||||
<span class="mk-avatar" :style="style" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick" v-once>
|
||||
<span class="inner" :style="icon"></span>
|
||||
</span>
|
||||
<router-link class="mk-avatar" :style="style" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
|
||||
<router-link class="mk-avatar" :style="style" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id" v-once>
|
||||
<span class="inner" :style="icon"></span>
|
||||
</router-link>
|
||||
<router-link class="mk-avatar" :style="style" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
|
||||
<router-link class="mk-avatar" :style="style" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview" v-once>
|
||||
<span class="inner" :style="icon"></span>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<mfm-core v-bind="$attrs" class="havbbuyv"/>
|
||||
<mfm-core v-bind="$attrs" class="havbbuyv" v-once/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -39,30 +39,30 @@
|
||||
<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="compact"/>
|
||||
</div>
|
||||
</div>
|
||||
<footer v-if="appearNote.deletedAt == null">
|
||||
<footer v-if="appearNote.deletedAt == null" class="footer">
|
||||
<span class="app" v-if="appearNote.app && narrow && $store.state.settings.showVia">via <b>{{ appearNote.app.name }}</b></span>
|
||||
<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
|
||||
<button class="replyButton" @click="reply()" :title="$t('reply')">
|
||||
<button class="replyButton button" @click="reply()" :title="$t('reply')">
|
||||
<template v-if="appearNote.reply"><fa icon="reply-all"/></template>
|
||||
<template v-else><fa icon="reply"/></template>
|
||||
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
|
||||
</button>
|
||||
<button v-if="['public', 'home'].includes(appearNote.visibility)" class="renoteButton" @click="renote()" :title="$t('renote')">
|
||||
<button v-if="['public', 'home'].includes(appearNote.visibility)" class="renoteButton button" @click="renote()" :title="$t('renote')">
|
||||
<fa icon="retweet"/>
|
||||
<p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
|
||||
</button>
|
||||
<button v-else class="inhibitedButton">
|
||||
<button v-else class="inhibitedButton button">
|
||||
<fa icon="ban"/>
|
||||
</button>
|
||||
<button v-if="!isMyNote && appearNote.myReaction == null" class="reactionButton" @click="react()" ref="reactButton" :title="$t('add-reaction')">
|
||||
<button v-if="!isMyNote && appearNote.myReaction == null" class="reactionButton button" @click="react()" ref="reactButton" :title="$t('add-reaction')">
|
||||
<fa icon="plus"/>
|
||||
<p class="count" v-if="Object.values(appearNote.reactionCounts).some(x => x)">{{ Object.values(appearNote.reactionCounts).reduce((a, c) => a + c, 0) }}</p>
|
||||
</button>
|
||||
<button v-if="!isMyNote && appearNote.myReaction != null" class="reactionButton reacted" @click="undoReact(appearNote)" ref="reactButton" :title="$t('undo-reaction')">
|
||||
<button v-if="!isMyNote && appearNote.myReaction != null" class="reactionButton reacted button" @click="undoReact(appearNote)" ref="reactButton" :title="$t('undo-reaction')">
|
||||
<fa icon="minus"/>
|
||||
<p class="count" v-if="Object.values(appearNote.reactionCounts).some(x => x)">{{ Object.values(appearNote.reactionCounts).reduce((a, c) => a + c, 0) }}</p>
|
||||
</button>
|
||||
<button @click="menu()" ref="menuButton">
|
||||
<button @click="menu()" ref="menuButton" class="button">
|
||||
<fa icon="ellipsis-h"/>
|
||||
</button>
|
||||
</footer>
|
||||
@ -274,7 +274,7 @@ export default Vue.extend({
|
||||
border dashed var(--lineWidth) var(--quoteBorder)
|
||||
border-radius 8px
|
||||
|
||||
> footer
|
||||
> .footer
|
||||
> .app
|
||||
display block
|
||||
margin-top 0.5em
|
||||
@ -282,7 +282,7 @@ export default Vue.extend({
|
||||
color var(--noteHeaderInfo)
|
||||
font-size 0.8em
|
||||
|
||||
> button
|
||||
> .button
|
||||
margin 0 28px 0 0
|
||||
padding 0 8px
|
||||
line-height 32px
|
||||
|
||||
@ -36,26 +36,26 @@
|
||||
</div>
|
||||
<span class="app" v-if="appearNote.app && $store.state.settings.showVia">via <b>{{ appearNote.app.name }}</b></span>
|
||||
</div>
|
||||
<footer v-if="appearNote.deletedAt == null">
|
||||
<footer v-if="appearNote.deletedAt == null" class="footer">
|
||||
<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
|
||||
<button @click="reply()">
|
||||
<button @click="reply()" class="button">
|
||||
<template v-if="appearNote.reply"><fa icon="reply-all"/></template>
|
||||
<template v-else><fa icon="reply"/></template>
|
||||
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
|
||||
</button>
|
||||
<button v-if="['public', 'home'].includes(appearNote.visibility)" @click="renote()" title="Renote">
|
||||
<button v-if="['public', 'home'].includes(appearNote.visibility)" @click="renote()" title="Renote" class="button">
|
||||
<fa icon="retweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
|
||||
</button>
|
||||
<button v-else>
|
||||
<button v-else class="button">
|
||||
<fa icon="ban"/>
|
||||
</button>
|
||||
<button v-if="!isMyNote && appearNote.myReaction == null" class="reactionButton" @click="react()" ref="reactButton">
|
||||
<button v-if="!isMyNote && appearNote.myReaction == null" class="button" @click="react()" ref="reactButton">
|
||||
<fa icon="plus"/>
|
||||
</button>
|
||||
<button v-if="!isMyNote && appearNote.myReaction != null" class="reactionButton reacted" @click="undoReact(appearNote)" ref="reactButton">
|
||||
<button v-if="!isMyNote && appearNote.myReaction != null" class="button reacted" @click="undoReact(appearNote)" ref="reactButton">
|
||||
<fa icon="minus"/>
|
||||
</button>
|
||||
<button class="menu" @click="menu()" ref="menuButton">
|
||||
<button class="button" @click="menu()" ref="menuButton">
|
||||
<fa icon="ellipsis-h"/>
|
||||
</button>
|
||||
</footer>
|
||||
@ -237,8 +237,8 @@ export default Vue.extend({
|
||||
font-size 12px
|
||||
color #ccc
|
||||
|
||||
> footer
|
||||
> button
|
||||
> .footer
|
||||
> .button
|
||||
margin 0
|
||||
padding 8px
|
||||
background transparent
|
||||
|
||||
Loading…
Reference in New Issue
Block a user