natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor

This commit is contained in:
syuilo 2023-05-24 17:50:15 +09:00
parent bdf08c8a54
commit 1c57983bfd
9 changed files with 113 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/frontend/src/components/MkTagCloud.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div ref="rootEl" class="meijqfqm"> <div ref="rootEl" :class="$style.root">
<canvas :id="idForCanvas" ref="canvasEl" class="canvas" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas> <canvas :id="idForCanvas" ref="canvasEl" style="display: block;" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
<div :id="idForTags" ref="tagsEl" class="tags"> <div :id="idForTags" ref="tagsEl" :class="$style.tags">
<ul> <ul>
<slot></slot> <slot></slot>
</ul> </ul>
@ -70,21 +70,17 @@ defineExpose({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.meijqfqm { .root {
position: relative; position: relative;
overflow: clip; overflow: clip;
display: grid; display: grid;
place-items: center; place-items: center;
}
> .canvas { .tags {
display: block; position: absolute;
} top: 999px;
left: 999px;
> .tags {
position: absolute;
top: 999px;
left: 999px;
}
} }
</style> </style>

38
packages/frontend/src/components/form/slot.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="adhpbeou"> <div>
<div class="label" @click="focus"><slot name="label"></slot></div> <div :class="$style.label" @click="focus"><slot name="label"></slot></div>
<div class="content"> <div :class="$style.content">
<slot></slot> <slot></slot>
</div> </div>
<div class="caption"><slot name="caption"></slot></div> <div :class="$style.caption"><slot name="caption"></slot></div>
</div> </div>
</template> </template>
@ -16,26 +16,24 @@ function focus() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.adhpbeou { .label {
> .label { font-size: 0.85em;
font-size: 0.85em; padding: 0 0 8px 0;
padding: 0 0 8px 0; user-select: none;
user-select: none;
&:empty { &:empty {
display: none; display: none;
}
} }
}
> .caption { .caption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--fgTransparentWeak); color: var(--fgTransparentWeak);
&:empty { &:empty {
display: none; display: none;
}
} }
} }
</style> </style>

36
packages/frontend/src/pages/pages.vue
View File

@ -2,22 +2,28 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700"> <MkSpacer :contentMax="700">
<div v-if="tab === 'featured'" class="rknalgpo"> <div v-if="tab === 'featured'">
<MkPagination v-slot="{items}" :pagination="featuredPagesPagination"> <MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/> <div class="_gaps">
<MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
</div>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'my'" class="rknalgpo my"> <div v-else-if="tab === 'my'" class="_gaps">
<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton> <MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
<MkPagination v-slot="{items}" :pagination="myPagesPagination"> <MkPagination v-slot="{items}" :pagination="myPagesPagination">
<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/> <div class="_gaps">
<MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
</div>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'liked'" class="rknalgpo"> <div v-else-if="tab === 'liked'">
<MkPagination v-slot="{items}" :pagination="likedPagesPagination"> <MkPagination v-slot="{items}" :pagination="likedPagesPagination">
<MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/> <div class="_gaps">
<MkPagePreview v-for="like in items" :key="like.page.id" :page="like.page"/>
</div>
</MkPagination> </MkPagination>
</div> </div>
</MkSpacer> </MkSpacer>
@ -79,21 +85,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-note', icon: 'ti ti-note',
}))); })));
</script> </script>
<style lang="scss" scoped>
.rknalgpo {
&.my .ckltabjg:first-child {
margin-top: 16px;
}
.ckltabjg:not(:last-child) {
margin-bottom: 8px;
}
@media (min-width: 500px) {
.ckltabjg:not(:last-child) {
margin-bottom: 16px;
}
}
}
</style>

46
packages/frontend/src/pages/settings/apps.vue
View File

@ -9,11 +9,11 @@
</template> </template>
<template #default="{items}"> <template #default="{items}">
<div class="_gaps"> <div class="_gaps">
<div v-for="token in items" :key="token.id" class="_panel bfomjevm"> <div v-for="token in items" :key="token.id" class="_panel" :class="$style.app">
<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/> <img v-if="token.iconUrl" :class="$style.appIcon" :src="token.iconUrl" alt=""/>
<div class="body"> <div :class="$style.appBody">
<div class="name">{{ token.name }}</div> <div :class="$style.appName">{{ token.name }}</div>
<div class="description">{{ token.description }}</div> <div>{{ token.description }}</div>
<MkKeyValue oneline> <MkKeyValue oneline>
<template #key>{{ i18n.ts.installedDate }}</template> <template #key>{{ i18n.ts.installedDate }}</template>
<template #value><MkTime :time="token.createdAt"/></template> <template #value><MkTime :time="token.createdAt"/></template>
@ -28,7 +28,7 @@
<li v-for="p in token.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li> <li v-for="p in token.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
</ul> </ul>
</details> </details>
<div class="actions"> <div>
<MkButton inline danger @click="revoke(token)"><i class="ti ti-trash"></i></MkButton> <MkButton inline danger @click="revoke(token)"><i class="ti ti-trash"></i></MkButton>
</div> </div>
</div> </div>
@ -75,27 +75,27 @@ definePageMetadata({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.bfomjevm { .app {
display: flex; display: flex;
padding: 16px; padding: 16px;
}
> .icon { .appIcon {
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
margin: 0 12px 0 0; margin: 0 12px 0 0;
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 8px; border-radius: 8px;
} }
> .body { .appBody {
width: calc(100% - 62px); width: calc(100% - 62px);
position: relative; position: relative;
}
> .name { .appName {
font-weight: bold; font-weight: bold;
}
}
} }
</style> </style>

4
packages/frontend/src/pages/user/activity.vue
View File

@ -34,7 +34,3 @@ const props = defineProps<{
}>(); }>();
</script> </script>
<style lang="scss" scoped>
</style>

3
packages/frontend/src/pages/user/followers.vue
View File

@ -56,6 +56,3 @@ definePageMetadata(computed(() => user ? {
avatar: user, avatar: user,
} : null)); } : null));
</script> </script>
<style lang="scss" scoped>
</style>

3
packages/frontend/src/pages/user/following.vue
View File

@ -56,6 +56,3 @@ definePageMetadata(computed(() => user ? {
avatar: user, avatar: user,
} : null)); } : null));
</script> </script>
<style lang="scss" scoped>
</style>

39
packages/frontend/src/pages/user/index.vue
View File

@ -2,21 +2,19 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<div> <div>
<Transition name="fade" mode="out-in"> <div v-if="user">
<div v-if="user"> <XHome v-if="tab === 'home'" :user="user"/>
<XHome v-if="tab === 'home'" :user="user"/> <XTimeline v-else-if="tab === 'notes'" :user="user"/>
<XTimeline v-else-if="tab === 'notes'" :user="user"/> <XActivity v-else-if="tab === 'activity'" :user="user"/>
<XActivity v-else-if="tab === 'activity'" :user="user"/> <XAchievements v-else-if="tab === 'achievements'" :user="user"/>
<XAchievements v-else-if="tab === 'achievements'" :user="user"/> <XReactions v-else-if="tab === 'reactions'" :user="user"/>
<XReactions v-else-if="tab === 'reactions'" :user="user"/> <XClips v-else-if="tab === 'clips'" :user="user"/>
<XClips v-else-if="tab === 'clips'" :user="user"/> <XLists v-else-if="tab === 'lists'" :user="user"/>
<XLists v-else-if="tab === 'lists'" :user="user"/> <XPages v-else-if="tab === 'pages'" :user="user"/>
<XPages v-else-if="tab === 'pages'" :user="user"/> <XGallery v-else-if="tab === 'gallery'" :user="user"/>
<XGallery v-else-if="tab === 'gallery'" :user="user"/> </div>
</div> <MkError v-else-if="error" @retry="fetchUser()"/>
<MkError v-else-if="error" @retry="fetchUser()"/> <MkLoading v-else/>
<MkLoading v-else/>
</Transition>
</div> </div>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
@ -118,14 +116,3 @@ definePageMetadata(computed(() => user ? {
}, },
} : null)); } : null));
</script> </script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.125s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

74
packages/frontend/src/widgets/WidgetClock.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock class="mkw-clock"> <MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock>
<div class="vubelbmv" :class="widgetProps.size"> <div :class="[$style.root, $style[widgetProps.size]]">
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div> <div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace" :class="[$style.label, $style.a]">{{ tzAbbrev }}</div>
<MkAnalogClock <MkAnalogClock
class="clock" :class="$style.clock"
:thickness="widgetProps.thickness" :thickness="widgetProps.thickness"
:offset="tzOffset" :offset="tzOffset"
:graduations="widgetProps.graduations" :graduations="widgetProps.graduations"
@ -11,8 +11,8 @@
:twentyfour="widgetProps.twentyFour" :twentyfour="widgetProps.twentyFour"
:sAnimation="widgetProps.sAnimation" :sAnimation="widgetProps.sAnimation"
/> />
<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :showS="false" :offset="tzOffset"/> <MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" :class="[$style.label, $style.c]" class="_monospace" :showS="false" :offset="tzOffset"/>
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div> <div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace" :class="[$style.label, $style.d]">{{ tzOffsetLabel }}</div>
</div> </div>
</MkContainer> </MkContainer>
</template> </template>
@ -140,39 +140,10 @@ defineExpose<WidgetComponentExpose>({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.vubelbmv { .root {
position: relative; position: relative;
> .label {
position: absolute;
opacity: 0.7;
&.a {
top: 14px;
left: 14px;
}
&.b {
top: 14px;
right: 14px;
}
&.c {
bottom: 14px;
left: 14px;
}
&.d {
bottom: 14px;
right: 14px;
}
}
> .clock {
margin: auto;
}
&.small { &.small {
padding: 12px; padding: 12px;
@ -197,4 +168,33 @@ defineExpose<WidgetComponentExpose>({
} }
} }
} }
.label {
position: absolute;
opacity: 0.7;
&.a {
top: 14px;
left: 14px;
}
&.b {
top: 14px;
right: 14px;
}
&.c {
bottom: 14px;
left: 14px;
}
&.d {
bottom: 14px;
right: 14px;
}
}
.clock {
margin: auto;
}
</style> </style>