mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-27 22:38:34 +09:00
Code

Tweak UI

Browse Source
This commit is contained in:
syuilo 2021-04-17 00:12:50 +09:00
parent e62d7bc1ba
commit 27c373ddf4
9 changed files with 89 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/client/components/date-separated-list.vue
View File

@ -18,7 +18,12 @@ export default defineComponent({
type: Boolean,
required: false,
default: false
}
},
noGap: {
type: Boolean,
required: false,
default: false
},
},
methods: {
@ -37,18 +42,16 @@ export default defineComponent({
},
render() {
const noGap = [...document.querySelectorAll('._noGap_')].some(el => el.contains(this.$parent.$el));
if (this.items.length === 0) return;
return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
class: 'sqadhkmv' + (noGap ? ' _block' : ''),
class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
name: 'list',
tag: 'div',
'data-direction': this.direction,
'data-reversed': this.reversed ? 'true' : 'false',
} : {
class: 'sqadhkmv',
class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
}, this.items.map((item, i) => {
const el = this.$slots.default({
item: item
@ -154,17 +157,17 @@ export default defineComponent({
}
}
}
}
._noGap_ .sqadhkmv {
> * {
margin: 0 !important;
border: none;
border-radius: 0;
box-shadow: none;
&.noGap {
> * {
margin: 0 !important;
border: none;
border-radius: 0;
box-shadow: none;
&:not(:last-child) {
border-bottom: solid 0.5px var(--divider);
&:not(:last-child) {
border-bottom: solid 0.5px var(--divider);
}
}
}
}

1
src/client/components/form/suspense.vue
View File

@ -80,7 +80,6 @@ export default defineComponent({
.fade-leave-active {
transition: opacity 0.125s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;

1
src/client/components/global/loading.vue
View File

@ -6,7 +6,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import * as os from '@client/os';
export default defineComponent({
props: {

63
src/client/components/notes.vue
View File

@ -1,32 +1,34 @@
<template>
<div>
<div class="_fullinfo" v-if="empty">
<transition name="fade" mode="out-in">
<MkLoading v-if="fetching"/>
<MkError v-else-if="error" @retry="init()"/>
<div class="_fullinfo" v-else-if="empty">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.noNotes }}</div>
</div>
<MkLoading v-if="fetching"/>
<div v-else>
<div v-show="more && reversed" style="margin-bottom: var(--margin);">
<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>
</div>
<MkError v-if="error" @retry="init()"/>
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap">
<XNote :note="note" class="_block" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
</XList>
<div v-show="more && reversed" style="margin-bottom: var(--margin);">
<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>
<div v-show="more && !reversed" style="margin-top: var(--margin);">
<MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>
</div>
</div>
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
<XNote :note="note" class="_block" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
</XList>
<div v-show="more && !reversed" style="margin-top: var(--margin);">
<MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>
</div>
</div>
</transition>
</template>
<script lang="ts">
@ -57,11 +59,15 @@ export default defineComponent({
pagination: {
required: true
},
prop: {
type: String,
required: false
}
},
noGap: {
type: Boolean,
required: false,
default: false
},
},
emits: ['before', 'after'],
@ -92,3 +98,14 @@ export default defineComponent({
}
});
</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>

50
src/client/components/notifications.vue
View File

@ -1,21 +1,23 @@
<template>
<div class="mfcuwfyp _noGap_ _magnetParent">
<transition name="fade" mode="out-in">
<MkLoading v-if="fetching"/>
<XList class="notifications _magnetChild" :items="items" v-slot="{ item: notification }">
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
</XList>
<MkError v-else-if="error" @retry="init()"/>
<button class="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</button>
<p class="mfcuwfyp" v-else-if="empty">{{ $ts.noNotifications }}</p>
<p class="empty" v-if="empty">{{ $ts.noNotifications }}</p>
<div v-else class="_magnetParent">
<XList class="notifications _magnetChild" :items="items" v-slot="{ item: notification }" :no-gap="true">
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
</XList>
<MkError v-if="error" @retry="init()"/>
</div>
<button class="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</button>
</div>
</transition>
</template>
<script lang="ts">
@ -122,17 +124,19 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.mfcuwfyp {
> .empty {
margin: 0;
padding: 16px;
text-align: center;
color: var(--fg);
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.125s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
> .placeholder {
padding: 32px;
opacity: 0.3;
}
.mfcuwfyp {
margin: 0;
padding: 16px;
text-align: center;
color: var(--fg);
}
</style>

2
src/client/components/timeline.vue
View File

@ -1,5 +1,5 @@
<template>
<XNotes :class="{ _noGap_: !$store.state.showGapBetweenNotesInTimeline }" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
<XNotes :no-gap="!$store.state.showGapBetweenNotesInTimeline" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
</template>
<script lang="ts">

2
src/client/pages/channel.vue
View File

@ -22,7 +22,7 @@
<XPostForm :channel="channel" class="post-form _content _panel _gap" fixed v-if="$i"/>
<XTimeline class="_content _gap _noGap_" src="channel" :key="channelId" :channel="channelId" @before="before" @after="after"/>
<XTimeline class="_content _gap" src="channel" :key="channelId" :channel="channelId" @before="before" @after="after"/>
</div>
</template>

4
src/client/pages/note.vue
View File

@ -2,7 +2,7 @@
<div class="fcuexfpr _root">
<div v-if="note" class="note" v-anim>
<div class="_gap" v-if="showNext">
<XNotes class="_content _noGap_" :pagination="next"/>
<XNotes class="_content" :pagination="next" :no-gap="true"/>
</div>
<div class="main _gap">
@ -25,7 +25,7 @@
</div>
<div class="_gap" v-if="showPrev">
<XNotes class="_content _noGap_" :pagination="prev"/>
<XNotes class="_content" :pagination="prev" :no-gap="true"/>
</div>
</div>

2
src/client/pages/user/index.timeline.vue
View File

@ -5,7 +5,7 @@
<option value="replies">{{ $ts.notesAndReplies }}</option>
<option value="files">{{ $ts.withFiles }}</option>
</MkTab>
<XNotes ref="timeline" class="_noGap_" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
<XNotes ref="timeline" :no-gap="true" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
</div>
</template>