From 01d5e385ec1659d9ca1c766cd44183da896eeb35 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Tue, 10 Jan 2023 14:16:59 +0900 Subject: [PATCH] refactor(client): use css modules --- .../src/components/MkNotification.vue | 295 +++++++++--------- 1 file changed, 146 insertions(+), 149 deletions(-) diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue index 7f21bb298a..6687cfc332 100644 --- a/packages/frontend/src/components/MkNotification.vue +++ b/packages/frontend/src/components/MkNotification.vue @@ -1,10 +1,10 @@ <template> -<div ref="elRef" class="qglefbjs" :class="notification.type"> - <div v-once class="head"> - <MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/> - <MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/> - <img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/> - <div class="sub-icon" :class="notification.type"> +<div ref="elRef" :class="$style.root"> + <div v-once :class="$style.head"> + <MkAvatar v-if="notification.type === 'pollEnded'" :class="$style.icon" :user="notification.note.user"/> + <MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user"/> + <img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/> + <div :class="[$style.subIcon, $style['t_' + notification.type]]"> <i v-if="notification.type === 'follow'" class="ti ti-plus"></i> <i v-else-if="notification.type === 'receiveFollowRequest'" class="ti ti-clock"></i> <i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i> @@ -21,46 +21,47 @@ :reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction" :custom-emojis="notification.note.emojis" :no-style="true" + style="width: 100%; height: 100%;" /> </div> </div> - <div class="tail"> - <header> + <div :class="$style.tail"> + <header :class="$style.header"> <span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span> - <MkA v-else-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA> + <MkA v-else-if="notification.user" v-user-preview="notification.user.id" :class="$style.headerName" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA> <span v-else>{{ notification.header }}</span> - <MkTime v-if="withTime" :time="notification.createdAt" class="time"/> + <MkTime v-if="withTime" :time="notification.createdAt" :class="$style.headerTime"/> </header> - <div v-once class="content"> - <MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> - <i class="ti ti-quote"></i> + <div v-once :class="$style.content"> + <MkA v-if="notification.type === 'reaction'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> + <i class="ti ti-quote" :class="$style.quote"></i> <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> - <i class="ti ti-quote"></i> + <i class="ti ti-quote" :class="$style.quote"></i> </MkA> - <MkA v-else-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)"> - <i class="ti ti-quote"></i> + <MkA v-else-if="notification.type === 'renote'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)"> + <i class="ti ti-quote" :class="$style.quote"></i> <Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full"/> - <i class="ti ti-quote"></i> + <i class="ti ti-quote" :class="$style.quote"></i> </MkA> - <MkA v-else-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> + <MkA v-else-if="notification.type === 'reply'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> </MkA> - <MkA v-else-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> + <MkA v-else-if="notification.type === 'mention'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> </MkA> - <MkA v-else-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> + <MkA v-else-if="notification.type === 'quote'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> </MkA> - <MkA v-else-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> - <i class="ti ti-quote"></i> + <MkA v-else-if="notification.type === 'pollEnded'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> + <i class="ti ti-quote" :class="$style.quote"></i> <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> - <i class="ti ti-quote"></i> + <i class="ti ti-quote" :class="$style.quote"></i> </MkA> - <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-else-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</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-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> - <span v-else-if="notification.type === 'app'" class="text"> + <span v-else-if="notification.type === 'follow'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span> + <span v-else-if="notification.type === 'followRequestAccepted'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span> + <span v-else-if="notification.type === 'receiveFollowRequest'" :class="$style.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 === 'groupInvited'" :class="$style.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 === 'app'" :class="$style.text"> <Mfm :text="notification.body" :nowrap="!full"/> </span> </div> @@ -156,8 +157,8 @@ useTooltip(reactionRef, (showing) => { }); </script> -<style lang="scss" scoped> -.qglefbjs { +<style lang="scss" module> +.root { position: relative; box-sizing: border-box; padding: 24px 32px; @@ -165,139 +166,135 @@ useTooltip(reactionRef, (showing) => { overflow-wrap: break-word; display: flex; contain: content; +} - > .head { - position: sticky; - top: 0; - flex-shrink: 0; - width: 42px; - height: 42px; - margin-right: 8px; +.head { + position: sticky; + top: 0; + flex-shrink: 0; + width: 42px; + height: 42px; + margin-right: 8px; +} - > .icon { - display: block; - width: 100%; - height: 100%; - border-radius: 6px; - } +.icon { + display: block; + width: 100%; + height: 100%; + border-radius: 6px; +} - > .sub-icon { - position: absolute; - z-index: 1; - bottom: -2px; - right: -2px; - width: 20px; - height: 20px; - box-sizing: border-box; - border-radius: 100%; - background: var(--panel); - box-shadow: 0 0 0 3px var(--panel); - font-size: 12px; - text-align: center; +.subIcon { + position: absolute; + z-index: 1; + bottom: -2px; + right: -2px; + width: 20px; + height: 20px; + box-sizing: border-box; + border-radius: 100%; + background: var(--panel); + box-shadow: 0 0 0 3px var(--panel); + font-size: 12px; + text-align: center; + color: #fff; - &:empty { - display: none; - } - - > * { - color: #fff; - width: 100%; - height: 100%; - } - - &.follow, &.followRequestAccepted, &.receiveFollowRequest, &.groupInvited { - padding: 3px; - background: #36aed2; - pointer-events: none; - } - - &.renote { - padding: 3px; - background: #36d298; - pointer-events: none; - } - - &.quote { - padding: 3px; - background: #36d298; - pointer-events: none; - } - - &.reply { - padding: 3px; - background: #007aff; - pointer-events: none; - } - - &.mention { - padding: 3px; - background: #88a6b7; - pointer-events: none; - } - - &.pollEnded { - padding: 3px; - background: #88a6b7; - pointer-events: none; - } - } - } - - > .tail { - flex: 1; - min-width: 0; - - > header { - display: flex; - align-items: baseline; - white-space: nowrap; - - > .name { - text-overflow: ellipsis; - white-space: nowrap; - min-width: 0; - overflow: hidden; - } - - > .time { - margin-left: auto; - font-size: 0.9em; - } - } - - > .content { - > .text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - > i { - vertical-align: super; - font-size: 50%; - opacity: 0.5; - } - - > i:first-child { - margin-right: 4px; - } - - > i:last-child { - margin-left: 4px; - } - } - } + &:empty { + display: none; } } +.t_follow, .t_followRequestAccepted, .t_receiveFollowRequest, .t_groupInvited { + padding: 3px; + background: #36aed2; + pointer-events: none; +} + +.t_renote { + padding: 3px; + background: #36d298; + pointer-events: none; +} + +.t_quote { + padding: 3px; + background: #36d298; + pointer-events: none; +} + +.t_reply { + padding: 3px; + background: #007aff; + pointer-events: none; +} + +.t_mention { + padding: 3px; + background: #88a6b7; + pointer-events: none; +} + +.t_pollEnded { + padding: 3px; + background: #88a6b7; + pointer-events: none; +} + +.tail { + flex: 1; + min-width: 0; +} + +.header { + display: flex; + align-items: baseline; + white-space: nowrap; +} + +.headerName { + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; + overflow: hidden; +} + +.headerTime { + margin-left: auto; + font-size: 0.9em; +} + +.content { +} + +.text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.quote { + vertical-align: super; + font-size: 50%; + opacity: 0.5; +} + +.quote:first-child { + margin-right: 4px; +} + +.quote:last-child { + margin-left: 4px; +} + @container (max-width: 600px) { - .qglefbjs { + .root { padding: 16px; font-size: 0.9em; } } @container (max-width: 500px) { - .qglefbjs { + .root { padding: 12px; font-size: 0.85em; }