Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor

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

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

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

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

@ -2,22 +2,28 @@
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700">
<div v-if="tab === 'featured'" class="rknalgpo">
<div v-if="tab === 'featured'">
<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>
</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>
<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>
</div>
<div v-else-if="tab === 'liked'" class="rknalgpo">
<div v-else-if="tab === 'liked'">
<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>
</div>
</MkSpacer>
@ -79,21 +85,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-note',
})));
</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 #default="{items}">
<div class="_gaps">
<div v-for="token in items" :key="token.id" class="_panel bfomjevm">
<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
<div class="body">
<div class="name">{{ token.name }}</div>
<div class="description">{{ token.description }}</div>
<div v-for="token in items" :key="token.id" class="_panel" :class="$style.app">
<img v-if="token.iconUrl" :class="$style.appIcon" :src="token.iconUrl" alt=""/>
<div :class="$style.appBody">
<div :class="$style.appName">{{ token.name }}</div>
<div>{{ token.description }}</div>
<MkKeyValue oneline>
<template #key>{{ i18n.ts.installedDate }}</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>
</ul>
</details>
<div class="actions">
<div>
<MkButton inline danger @click="revoke(token)"><i class="ti ti-trash"></i></MkButton>
</div>
</div>
@ -75,27 +75,27 @@ definePageMetadata({
});
</script>
<style lang="scss" scoped>
.bfomjevm {
<style lang="scss" module>
.app {
display: flex;
padding: 16px;
}
> .icon {
display: block;
flex-shrink: 0;
margin: 0 12px 0 0;
width: 50px;
height: 50px;
border-radius: 8px;
}
.appIcon {
display: block;
flex-shrink: 0;
margin: 0 12px 0 0;
width: 50px;
height: 50px;
border-radius: 8px;
}
> .body {
width: calc(100% - 62px);
position: relative;
.appBody {
width: calc(100% - 62px);
position: relative;
}
> .name {
font-weight: bold;
}
}
.appName {
font-weight: bold;
}
</style>

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

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

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

@ -2,21 +2,19 @@
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<div>
<Transition name="fade" mode="out-in">
<div v-if="user">
<XHome v-if="tab === 'home'" :user="user"/>
<XTimeline v-else-if="tab === 'notes'" :user="user"/>
<XActivity v-else-if="tab === 'activity'" :user="user"/>
<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
<XReactions v-else-if="tab === 'reactions'" :user="user"/>
<XClips v-else-if="tab === 'clips'" :user="user"/>
<XLists v-else-if="tab === 'lists'" :user="user"/>
<XPages v-else-if="tab === 'pages'" :user="user"/>
<XGallery v-else-if="tab === 'gallery'" :user="user"/>
</div>
<MkError v-else-if="error" @retry="fetchUser()"/>
<MkLoading v-else/>
</Transition>
<div v-if="user">
<XHome v-if="tab === 'home'" :user="user"/>
<XTimeline v-else-if="tab === 'notes'" :user="user"/>
<XActivity v-else-if="tab === 'activity'" :user="user"/>
<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
<XReactions v-else-if="tab === 'reactions'" :user="user"/>
<XClips v-else-if="tab === 'clips'" :user="user"/>
<XLists v-else-if="tab === 'lists'" :user="user"/>
<XPages v-else-if="tab === 'pages'" :user="user"/>
<XGallery v-else-if="tab === 'gallery'" :user="user"/>
</div>
<MkError v-else-if="error" @retry="fetchUser()"/>
<MkLoading v-else/>
</div>
</MkStickyContainer>
</template>
@ -118,14 +116,3 @@ definePageMetadata(computed(() => user ? {
},
} : null));
</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>
<MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock class="mkw-clock">
<div class="vubelbmv" :class="widgetProps.size">
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div>
<MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock>
<div :class="[$style.root, $style[widgetProps.size]]">
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace" :class="[$style.label, $style.a]">{{ tzAbbrev }}</div>
<MkAnalogClock
class="clock"
:class="$style.clock"
:thickness="widgetProps.thickness"
:offset="tzOffset"
:graduations="widgetProps.graduations"
@ -11,8 +11,8 @@
:twentyfour="widgetProps.twentyFour"
:sAnimation="widgetProps.sAnimation"
/>
<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :showS="false" :offset="tzOffset"/>
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
<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" :class="[$style.label, $style.d]">{{ tzOffsetLabel }}</div>
</div>
</MkContainer>
</template>
@ -140,39 +140,10 @@ defineExpose<WidgetComponentExpose>({
});
</script>
<style lang="scss" scoped>
.vubelbmv {
<style lang="scss" module>
.root {
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 {
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>