diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/frontend/src/components/MkClipPreview.vue | 39 | ||||
| -rw-r--r-- | packages/frontend/src/pages/my-clips/index.vue | 57 | ||||
| -rw-r--r-- | packages/frontend/src/pages/note.vue | 34 |
3 files changed, 52 insertions, 78 deletions
diff --git a/packages/frontend/src/components/MkClipPreview.vue b/packages/frontend/src/components/MkClipPreview.vue new file mode 100644 index 0000000000..c5fb718782 --- /dev/null +++ b/packages/frontend/src/components/MkClipPreview.vue @@ -0,0 +1,39 @@ +<template> +<div :class="$style.root" class="_panel"> + <b>{{ clip.name }}</b> + <div v-if="clip.description" :class="$style.description">{{ clip.description }}</div> + <div v-if="clip.lastClippedAt">{{ i18n.ts.updatedAt }}: <MkTime :time="clip.lastClippedAt" mode="detail"/></div> + <div :class="$style.user"> + <MkAvatar :user="clip.user" :class="$style.userAvatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/> + </div> +</div> +</template> + +<script lang="ts" setup> +import { i18n } from '@/i18n'; + +defineProps<{ + clip: any; +}>(); +</script> + +<style lang="scss" module> +.root { + display: block; + padding: 16px; +} + +.description { + padding: 8px 0; +} + +.user { + padding-top: 16px; + border-top: solid 0.5px var(--divider); +} + +.userAvatar { + width: 32px; + height: 32px; +} +</style> diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue index ad5f95e607..4c23985f3b 100644 --- a/packages/frontend/src/pages/my-clips/index.vue +++ b/packages/frontend/src/pages/my-clips/index.vue @@ -2,24 +2,18 @@ <MkStickyContainer> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <MkSpacer :content-max="700"> - <div v-if="tab === 'my'" class="qtcaoidl"> + <div v-if="tab === 'my'" class="_gaps"> <MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton> - <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list"> - <MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _margin"> - <b>{{ item.name }}</b> - <div v-if="item.description" class="description">{{ item.description }}</div> + <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="_gaps"> + <MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`"> + <MkClipPreview :clip="item"/> </MkA> </MkPagination> </div> <div v-else-if="tab === 'favorites'" class="_gaps"> - <MkA v-for="item in favorites" :key="item.id" :to="`/clips/${item.id}`" :class="$style.clip" class="_panel"> - <b>{{ item.name }}</b> - <div v-if="item.description" :class="$style.clipDescription">{{ item.description }}</div> - <div v-if="item.lastClippedAt">{{ i18n.ts.updatedAt }}: <MkTime :time="item.lastClippedAt" mode="detail"/></div> - <div :class="$style.clipUser"> - <MkAvatar :user="item.user" :class="$style.clipUserAvatar" indicator link preview/> <MkUserName :user="item.user" :nowrap="false"/> - </div> + <MkA v-for="item in favorites" :key="item.id" :to="`/clips/${item.id}`"> + <MkClipPreview :clip="item"/> </MkA> </div> </MkSpacer> @@ -30,6 +24,7 @@ import { watch } from 'vue'; import MkPagination from '@/components/MkPagination.vue'; import MkButton from '@/components/MkButton.vue'; +import MkClipPreview from '@/components/MkClipPreview.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; @@ -103,44 +98,6 @@ definePageMetadata({ }); </script> -<style lang="scss" scoped> -.qtcaoidl { - > .add { - margin: 0 auto 16px auto; - } - - > .list { - > .item { - display: block; - padding: 16px; - - > .description { - margin-top: 8px; - padding-top: 8px; - border-top: solid 0.5px var(--divider); - } - } - } -} -</style> - <style lang="scss" module> -.clip { - display: block; - padding: 16px; -} -.clipDescription { - padding: 8px 0; -} - -.clipUser { - padding-top: 16px; - border-top: solid 0.5px var(--divider); -} - -.clipUserAvatar { - width: 32px; - height: 32px; -} </style> diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue index 165e357ebd..45efe655fb 100644 --- a/packages/frontend/src/pages/note.vue +++ b/packages/frontend/src/pages/note.vue @@ -17,13 +17,11 @@ </div> <div v-if="clips && clips.length > 0" class="clips _margin"> <div class="title">{{ i18n.ts.clip }}</div> - <MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _margin"> - <b>{{ item.name }}</b> - <div v-if="item.description" class="description">{{ item.description }}</div> - <div class="user"> - <MkAvatar :user="item.user" class="avatar" indicator link preview/> <MkUserName :user="item.user" :nowrap="false"/> - </div> - </MkA> + <div class="_gaps"> + <MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`"> + <MkClipPreview :clip="item"/> + </MkA> + </div> </div> <MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="ti ti-chevron-down"></i></MkButton> </div> @@ -51,6 +49,7 @@ import * as os from '@/os'; import { definePageMetadata } from '@/scripts/page-metadata'; import { i18n } from '@/i18n'; import { dateString } from '@/filters/date'; +import MkClipPreview from '@/components/MkClipPreview.vue'; const props = defineProps<{ noteId: string; @@ -178,27 +177,6 @@ definePageMetadata(computed(() => note ? { font-weight: bold; padding: 12px; } - - > .item { - display: block; - padding: 16px; - - > .description { - padding: 8px 0; - } - - > .user { - $height: 32px; - padding-top: 16px; - border-top: solid 0.5px var(--divider); - line-height: $height; - - > .avatar { - width: $height; - height: $height; - } - } - } } } } |