graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 05:13:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

tweak components

Browse source
This commit is contained in:
syuilo 2023-01-08 11:30:40 +09:00
parent f20d7cba74
commit 244ea9593a
4 changed files with 53 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
packages/frontend/src/components/MkNotification.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div ref="elRef" class="qglefbjs" :class="notification.type"> <div ref="elRef" class="qglefbjs" :class="notification.type">
<div class="head"> <div v-once class="head">
<MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/> <MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/>
<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/> <MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/> <img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
@ -31,37 +31,39 @@
<span v-else>{{ notification.header }}</span> <span v-else>{{ notification.header }}</span>
<MkTime v-if="withTime" :time="notification.createdAt" class="time"/> <MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
</header> </header>
<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> <div v-once class="content">
<i class="ti ti-quote"></i> <MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> <i class="ti ti-quote"></i>
<i class="ti ti-quote"></i> <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
</MkA> <i class="ti ti-quote"></i>
<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)"> </MkA>
<i class="ti ti-quote"></i> <MkA v-else-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full"/> <i class="ti ti-quote"></i>
<i class="ti ti-quote"></i> <Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full"/>
</MkA> <i class="ti ti-quote"></i>
<MkA v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> </MkA>
<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> <MkA v-else-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
</MkA> <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
<MkA v-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> </MkA>
<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> <MkA v-else-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
</MkA> <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
<MkA v-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> </MkA>
<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> <MkA v-else-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
</MkA> <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
<MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> </MkA>
<i class="ti ti-quote"></i> <MkA v-else-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> <i class="ti ti-quote"></i>
<i class="ti ti-quote"></i> <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
</MkA> <i class="ti ti-quote"></i>
<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span> </MkA>
<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span> <span v-else-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span> <span v-else-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span> <span v-else-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span>
<span v-if="notification.type === 'app'" class="text"> <span v-else-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span>
<Mfm :text="notification.body" :nowrap="!full"/> <span v-else-if="notification.type === 'app'" class="text">
</span> <Mfm :text="notification.body" :nowrap="!full"/>
</span>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -263,23 +265,25 @@ useTooltip(reactionRef, (showing) => {
} }
} }
> .text { > .content {
white-space: nowrap; > .text {
overflow: hidden; white-space: nowrap;
text-overflow: ellipsis; overflow: hidden;
text-overflow: ellipsis;
> i { > i {
vertical-align: super; vertical-align: super;
font-size: 50%; font-size: 50%;
opacity: 0.5; opacity: 0.5;
} }
> i:first-child { > i:first-child {
margin-right: 4px; margin-right: 4px;
} }
> i:last-child { > i:last-child {
margin-left: 4px; margin-left: 4px;
}
} }
} }
} }

2
packages/frontend/src/pages/about.emojis.vue
View file

@ -22,7 +22,7 @@
<MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis"> <MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis">
<template #header>{{ category || $ts.other }}</template> <template #header>{{ category || $ts.other }}</template>
<div class="zuvgdzyt"> <div class="zuvgdzyt">
<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/> <XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" v-once :key="emoji.name" class="emoji" :emoji="emoji"/>
</div> </div>
</MkFolder> </MkFolder>
</div> </div>

2
packages/frontend/src/pages/about.federation.vue
View file

@ -36,7 +36,7 @@
<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination"> <MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
<div class="dqokceoi"> <div class="dqokceoi">
<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`"> <MkA v-for="instance in items" v-once :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`">
<MkInstanceCardMini :instance="instance"/> <MkInstanceCardMini :instance="instance"/>
</MkA> </MkA>
</div> </div>

2
packages/frontend/src/pages/admin/users.vue
View file

@ -41,7 +41,7 @@
</div> </div>
<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users"> <MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/user-info/${user.id}`"> <MkA v-for="user in items" v-once :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/user-info/${user.id}`">
<MkUserCardMini :user="user"/> <MkUserCardMini :user="user"/>
</MkA> </MkA>
</MkPagination> </MkPagination>