SWREI/switched
0
0
Fork 0
Code

🎨

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/app/desktop/views/components/notes.vue
View File

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

4
src/client/app/desktop/views/components/notifications.vue
View File

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

10
src/client/app/desktop/views/pages/deck/deck.notes.vue
View File

@ -2,6 +2,12 @@
<div class="eamppglmnmimdhrlzhplwpvyeaqmmhxu">
<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">
<p>%i18n:@error%</p>
<button @click="resolveInitPromise">%i18n:@retry%</button>
@ -205,6 +211,10 @@ export default Vue.extend({
> *
transition transform .3s ease, opacity .3s ease
> .placeholder
padding 16px
opacity 0.3
> .notes
> .date
display block

20
src/client/app/desktop/views/pages/deck/deck.notifications.vue
View File

@ -1,5 +1,11 @@
<template>
<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">
<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%' }}
</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>
@ -161,6 +166,10 @@ export default Vue.extend({
> *
transition transform .3s ease, opacity .3s ease
> .placeholder
padding 16px
opacity 0.3
> .notifications
> .notification:not(:last-child)
@ -207,13 +216,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>

4
src/client/app/mobile/views/components/notes.vue
View File

@ -4,7 +4,7 @@
<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">
<mk-note-skeleton :key="i"/>
</template>
@ -253,7 +253,7 @@ export default Vue.extend({
[data-fa]
margin-right 8px
> .skeleton
> .placeholder
padding 16px
opacity 0.3

4
src/client/app/mobile/views/components/notifications.vue
View File

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