This commit is contained in:
syuilo 2018-10-14 10:16:02 +09:00
parent 3961fd08c9
commit c7988fb6f5
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
6 changed files with 28 additions and 18 deletions

View file

@ -9,7 +9,7 @@
<button @click="resolveInitPromise">%i18n:@retry%</button> <button @click="resolveInitPromise">%i18n:@retry%</button>
</div> </div>
<div class="skeleton" v-if="fetching"> <div class="placeholder" v-if="fetching">
<template v-for="i in 10"> <template v-for="i in 10">
<mk-note-skeleton :key="i"/> <mk-note-skeleton :key="i"/>
</template> </template>
@ -232,7 +232,7 @@ export default Vue.extend({
> * > *
transition transform .3s ease, opacity .3s ease transition transform .3s ease, opacity .3s ease
> .skeleton > .placeholder
padding 32px padding 32px
opacity 0.3 opacity 0.3

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-notifications"> <div class="mk-notifications">
<div class="skeleton" v-if="fetching"> <div class="placeholder" v-if="fetching">
<template v-for="i in 10"> <template v-for="i in 10">
<mk-note-skeleton :key="i"/> <mk-note-skeleton :key="i"/>
</template> </template>
@ -207,7 +207,7 @@ export default Vue.extend({
> * > *
transition transform .3s ease, opacity .3s ease transition transform .3s ease, opacity .3s ease
> .skeleton > .placeholder
padding 16px padding 16px
opacity 0.3 opacity 0.3

View file

@ -2,6 +2,12 @@
<div class="eamppglmnmimdhrlzhplwpvyeaqmmhxu"> <div class="eamppglmnmimdhrlzhplwpvyeaqmmhxu">
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot> <slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
<div class="placeholder" v-if="fetching">
<template v-for="i in 10">
<mk-note-skeleton :key="i"/>
</template>
</div>
<div v-if="!fetching && requestInitPromise != null"> <div v-if="!fetching && requestInitPromise != null">
<p>%i18n:@error%</p> <p>%i18n:@error%</p>
<button @click="resolveInitPromise">%i18n:@retry%</button> <button @click="resolveInitPromise">%i18n:@retry%</button>
@ -205,6 +211,10 @@ export default Vue.extend({
> * > *
transition transform .3s ease, opacity .3s ease transition transform .3s ease, opacity .3s ease
> .placeholder
padding 16px
opacity 0.3
> .notes > .notes
> .date > .date
display block display block

View file

@ -1,5 +1,11 @@
<template> <template>
<div class="oxynyeqmfvracxnglgulyqfgqxnxmehl"> <div class="oxynyeqmfvracxnglgulyqfgqxnxmehl">
<div class="placeholder" 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"> <component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
<template v-for="(notification, i) in _notifications"> <template v-for="(notification, i) in _notifications">
@ -14,7 +20,6 @@
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }} <template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
</button> </button>
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p> <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> </div>
</template> </template>
@ -161,6 +166,10 @@ export default Vue.extend({
> * > *
transition transform .3s ease, opacity .3s ease transition transform .3s ease, opacity .3s ease
> .placeholder
padding 16px
opacity 0.3
> .notifications > .notifications
> .notification:not(:last-child) > .notification:not(:last-child)
@ -207,13 +216,4 @@ export default Vue.extend({
text-align center text-align center
color #aaa color #aaa
> .loading
margin 0
padding 16px
text-align center
color #aaa
> [data-fa]
margin-right 4px
</style> </style>

View file

@ -4,7 +4,7 @@
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot> <slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
<div class="skeleton" v-if="fetching"> <div class="placeholder" v-if="fetching">
<template v-for="i in 10"> <template v-for="i in 10">
<mk-note-skeleton :key="i"/> <mk-note-skeleton :key="i"/>
</template> </template>
@ -253,7 +253,7 @@ export default Vue.extend({
[data-fa] [data-fa]
margin-right 8px margin-right 8px
> .skeleton > .placeholder
padding 16px padding 16px
opacity 0.3 opacity 0.3

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-notifications"> <div class="mk-notifications">
<div class="skeleton" v-if="fetching"> <div class="placeholder" v-if="fetching">
<template v-for="i in 10"> <template v-for="i in 10">
<mk-note-skeleton :key="i"/> <mk-note-skeleton :key="i"/>
</template> </template>
@ -184,7 +184,7 @@ export default Vue.extend({
text-align center text-align center
color #aaa color #aaa
> .skeleton > .placeholder
padding 16px padding 16px
opacity 0.3 opacity 0.3