161sh/iceshrimp-161sh
1
0
Fork 0
mirror of https://iceshrimp.dev/crimekillz/iceshrimp-161sh.git synced 2024-11-22 04:03:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Resolve #2618

Browse Source
This commit is contained in:
syuilo 2018-10-14 09:47:38 +09:00
parent 6b5127c2e2
commit 88204e04e8
13 changed files with 94 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

2
src/client/app/common/views/components/index.ts
View File

@ -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
View 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>

37
src/client/app/desktop/views/components/ellipsis-icon.vue
View File

@ -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>

2
src/client/app/desktop/views/components/index.ts
View File

@ -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);

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

@ -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

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

@ -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>

8
src/client/app/desktop/views/components/timeline.core.vue
View File

@ -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>

6
src/client/app/desktop/views/pages/search.vue
View File

@ -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

6
src/client/app/desktop/views/pages/tag.vue
View File

@ -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

6
src/client/app/desktop/views/pages/user/user.timeline.vue
View File

@ -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

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

@ -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

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

@ -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>