Resolve #2618
This commit is contained in:
syuilo
parent
a72cfa7535
commit
0f8847bb74
13 changed files with 94 additions and 90 deletions
|
|
@ -213,6 +213,7 @@
|
|||
"vue": "2.5.17",
|
||||
"vue-chartjs": "3.4.0",
|
||||
"vue-color": "2.7.0",
|
||||
"vue-content-loading": "1.5.3",
|
||||
"vue-cropperjs": "2.2.2",
|
||||
"vue-js-modal": "1.3.26",
|
||||
"vue-json-tree-view": "2.1.4",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
import noteSkeleton from './note-skeleton.vue';
|
||||
import theme from './theme.vue';
|
||||
import instance from './instance.vue';
|
||||
import cwButton from './cw-button.vue';
|
||||
|
|
@ -44,6 +45,7 @@ import uiSelect from './ui/select.vue';
|
|||
import formButton from './ui/form/button.vue';
|
||||
import formRadio from './ui/form/radio.vue';
|
||||
|
||||
Vue.component('mk-note-skeleton', noteSkeleton);
|
||||
Vue.component('mk-theme', theme);
|
||||
Vue.component('mk-instance', instance);
|
||||
Vue.component('mk-cw-button', cwButton);
|
||||
|
|
|
|||
52
src/client/app/common/views/components/note-skeleton.vue
Normal file
52
src/client/app/common/views/components/note-skeleton.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div>
|
||||
<vue-content-loading v-if="width" :width="width" :height="100" :primary="primary" :secondary="secondary">
|
||||
<circle cx="30" cy="30" r="30" />
|
||||
<rect x="75" y="13" rx="4" ry="4" :width="150 + r1" height="15" />
|
||||
<rect x="75" y="39" rx="4" ry="4" :width="260 + r2" height="10" />
|
||||
<rect x="75" y="59" rx="4" ry="4" :width="230 + r3" height="10" />
|
||||
</vue-content-loading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import VueContentLoading from 'vue-content-loading';
|
||||
import * as tinycolor from 'tinycolor2';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
VueContentLoading,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
width: 0,
|
||||
r1: (Math.random() * 100) - 50,
|
||||
r2: (Math.random() * 100) - 50,
|
||||
r3: (Math.random() * 100) - 50
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
text(): tinycolor.Instance {
|
||||
const text = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text'));
|
||||
return text;
|
||||
},
|
||||
|
||||
primary(): string {
|
||||
return '#' + this.text.clone().toHex();
|
||||
},
|
||||
|
||||
secondary(): string {
|
||||
return '#' + this.text.clone().darken(20).toHex();
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let width = this.$el.clientWidth;
|
||||
if (width < 400) width = 400;
|
||||
this.width = width;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<div class="mk-ellipsis-icon">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-ellipsis-icon
|
||||
width 70px
|
||||
margin 0 auto
|
||||
text-align center
|
||||
|
||||
> div
|
||||
display inline-block
|
||||
width 18px
|
||||
height 18px
|
||||
background-color rgba(#000, 0.3)
|
||||
border-radius 100%
|
||||
animation bounce 1.4s infinite ease-in-out both
|
||||
|
||||
&:nth-child(1)
|
||||
animation-delay 0s
|
||||
|
||||
&:nth-child(2)
|
||||
margin 0 6px
|
||||
animation-delay 0.16s
|
||||
|
||||
&:nth-child(3)
|
||||
animation-delay 0.32s
|
||||
|
||||
@keyframes bounce
|
||||
0%, 80%, 100%
|
||||
transform scale(0)
|
||||
40%
|
||||
transform scale(1)
|
||||
|
||||
</style>
|
||||
|
|
@ -9,7 +9,6 @@ import subNoteContent from './sub-note-content.vue';
|
|||
import window from './window.vue';
|
||||
import noteFormWindow from './post-form-window.vue';
|
||||
import renoteFormWindow from './renote-form-window.vue';
|
||||
import ellipsisIcon from './ellipsis-icon.vue';
|
||||
import mediaImage from './media-image.vue';
|
||||
import mediaImageDialog from './media-image-dialog.vue';
|
||||
import mediaVideo from './media-video.vue';
|
||||
|
|
@ -39,7 +38,6 @@ Vue.component('mk-sub-note-content', subNoteContent);
|
|||
Vue.component('mk-window', window);
|
||||
Vue.component('mk-post-form-window', noteFormWindow);
|
||||
Vue.component('mk-renote-form-window', renoteFormWindow);
|
||||
Vue.component('mk-ellipsis-icon', ellipsisIcon);
|
||||
Vue.component('mk-media-image', mediaImage);
|
||||
Vue.component('mk-media-image-dialog', mediaImageDialog);
|
||||
Vue.component('mk-media-video', mediaVideo);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,12 @@
|
|||
<button @click="resolveInitPromise">%i18n:@retry%</button>
|
||||
</div>
|
||||
|
||||
<div class="skeleton" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
<mk-note-skeleton :key="i"/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
||||
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div" ref="notes">
|
||||
<template v-for="(note, i) in _notes">
|
||||
|
|
@ -226,6 +232,10 @@ export default Vue.extend({
|
|||
> *
|
||||
transition transform .3s ease, opacity .3s ease
|
||||
|
||||
> .skeleton
|
||||
padding 32px
|
||||
opacity 0.3
|
||||
|
||||
> .notes
|
||||
> .date
|
||||
display block
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<div class="mk-notifications">
|
||||
<div class="skeleton" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
<mk-note-skeleton :key="i"/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="notifications" v-if="notifications.length != 0">
|
||||
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
||||
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition" tag="div">
|
||||
|
|
@ -102,7 +108,6 @@
|
|||
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
|
||||
</button>
|
||||
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
|
||||
<p class="loading" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -202,6 +207,10 @@ export default Vue.extend({
|
|||
> *
|
||||
transition transform .3s ease, opacity .3s ease
|
||||
|
||||
> .skeleton
|
||||
padding 16px
|
||||
opacity 0.3
|
||||
|
||||
> .notifications
|
||||
> div
|
||||
> .notification
|
||||
|
|
@ -319,13 +328,4 @@ export default Vue.extend({
|
|||
text-align center
|
||||
color #aaa
|
||||
|
||||
> .loading
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<template>
|
||||
<div class="mk-timeline-core">
|
||||
<mk-friends-maker v-if="src == 'home' && alone"/>
|
||||
<div class="fetching" v-if="fetching">
|
||||
<mk-ellipsis-icon/>
|
||||
</div>
|
||||
|
||||
<mk-notes ref="timeline" :more="existMore ? more : null">
|
||||
<p :class="$style.empty" slot="empty">
|
||||
|
|
@ -170,15 +167,10 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
|
||||
.mk-timeline-core
|
||||
> .mk-friends-maker
|
||||
border-bottom solid 1px #eee
|
||||
|
||||
> .fetching
|
||||
padding 64px 0
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@
|
|||
<header :class="$style.header">
|
||||
<h1>{{ q }}</h1>
|
||||
</header>
|
||||
<div :class="$style.loading" v-if="fetching">
|
||||
<mk-ellipsis-icon/>
|
||||
</div>
|
||||
<p :class="$style.notAvailable" v-if="!fetching && notAvailable">%i18n:@not-available%</p>
|
||||
<p :class="$style.empty" v-if="!fetching && empty">%fa:search% {{ '%i18n:not-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:not-found%'.split('{}')[1] }}</p>
|
||||
<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
|
||||
|
|
@ -119,9 +116,6 @@ export default Vue.extend({
|
|||
border-radius 6px
|
||||
overflow hidden
|
||||
|
||||
.loading
|
||||
padding 64px 0
|
||||
|
||||
.empty
|
||||
display block
|
||||
margin 0 auto
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@
|
|||
<header :class="$style.header">
|
||||
<h1>#{{ $route.params.tag }}</h1>
|
||||
</header>
|
||||
<div :class="$style.loading" v-if="fetching">
|
||||
<mk-ellipsis-icon/>
|
||||
</div>
|
||||
<p :class="$style.empty" v-if="!fetching && empty">%fa:search% {{ '%i18n:no-posts-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:no-posts-found%'.split('{}')[1] }}</p>
|
||||
<mk-notes ref="timeline" :class="$style.notes" :more="existMore ? more : null"/>
|
||||
</mk-ui>
|
||||
|
|
@ -108,9 +105,6 @@ export default Vue.extend({
|
|||
border-radius 6px
|
||||
overflow hidden
|
||||
|
||||
.loading
|
||||
padding 64px 0
|
||||
|
||||
.empty
|
||||
display block
|
||||
margin 0 auto
|
||||
|
|
|
|||
|
|
@ -5,9 +5,6 @@
|
|||
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">%fa:comments% %i18n:@with-replies%</span>
|
||||
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">%fa:images% %i18n:@with-media%</span>
|
||||
</header>
|
||||
<div class="loading" v-if="fetching">
|
||||
<mk-ellipsis-icon/>
|
||||
</div>
|
||||
<mk-notes ref="timeline" :more="existMore ? more : null">
|
||||
<p class="empty" slot="empty">%fa:R comments%%i18n:@empty%</p>
|
||||
</mk-notes>
|
||||
|
|
@ -152,9 +149,6 @@ export default Vue.extend({
|
|||
&:hover
|
||||
color var(--desktopTimelineSrcHover)
|
||||
|
||||
> .loading
|
||||
padding 64px 0
|
||||
|
||||
> .empty
|
||||
display block
|
||||
margin 0 auto
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@
|
|||
|
||||
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
|
||||
|
||||
<div class="init" v-if="fetching">
|
||||
%fa:spinner .pulse%%i18n:common.loading%
|
||||
<div class="skeleton" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
<mk-note-skeleton :key="i"/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="!fetching && requestInitPromise != null">
|
||||
|
|
@ -251,13 +253,12 @@ export default Vue.extend({
|
|||
[data-fa]
|
||||
margin-right 8px
|
||||
|
||||
> .init
|
||||
padding 64px 0
|
||||
text-align center
|
||||
color #999
|
||||
> .skeleton
|
||||
padding 16px
|
||||
opacity 0.3
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
@media (min-width 500px)
|
||||
padding 32px
|
||||
|
||||
> .empty
|
||||
margin 0 auto
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<div class="mk-notifications">
|
||||
<div class="skeleton" v-if="fetching">
|
||||
<template v-for="i in 10">
|
||||
<mk-note-skeleton :key="i"/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- トランジションを有効にするとなぜかメモリリークする -->
|
||||
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
|
||||
<template v-for="(notification, i) in _notifications">
|
||||
|
|
@ -17,7 +23,6 @@
|
|||
</button>
|
||||
|
||||
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
|
||||
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -179,13 +184,11 @@ export default Vue.extend({
|
|||
text-align center
|
||||
color #aaa
|
||||
|
||||
> .fetching
|
||||
margin 0
|
||||
> .skeleton
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
opacity 0.3
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
@media (min-width 500px)
|
||||
padding 32px
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue