Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

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

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

@ -1,32 +1,34 @@
<template> <template>
<div> <transition name="fade" mode="out-in">
<div class="_fullinfo" v-if="empty"> <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"/> <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.noNotes }}</div> <div>{{ $ts.noNotes }}</div>
</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);"> <div v-show="more && !reversed" style="margin-top: var(--margin);">
<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <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">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template> <template v-if="moreFetching"><MkLoading inline/></template>
</MkButton> </MkButton>
</div>
</div> </div>
</transition>
<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>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -57,11 +59,15 @@ export default defineComponent({
pagination: { pagination: {
required: true required: true
}, },
prop: { prop: {
type: String, type: String,
required: false required: false
} },
noGap: {
type: Boolean,
required: false,
default: false
},
}, },
emits: ['before', 'after'], emits: ['before', 'after'],
@ -92,3 +98,14 @@ export default defineComponent({
} }
}); });
</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>

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

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

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

@ -1,5 +1,5 @@
<template> <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> </template>
<script lang="ts"> <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"/> <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> </div>
</template> </template>

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

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

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

@ -5,7 +5,7 @@
<option value="replies">{{ $ts.notesAndReplies }}</option> <option value="replies">{{ $ts.notesAndReplies }}</option>
<option value="files">{{ $ts.withFiles }}</option> <option value="files">{{ $ts.withFiles }}</option>
</MkTab> </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> </div>
</template> </template>