This commit is contained in:
syuilo 2020-03-21 00:21:33 +09:00
parent 4785ee8c32
commit ebbc42bebc
11 changed files with 19 additions and 63 deletions

View file

@ -27,8 +27,6 @@ export default Vue.extend({
<style lang="scss" scoped> <style lang="scss" scoped>
.mjndxjcg { .mjndxjcg {
max-width: 350px;
margin: 0 auto;
padding: 32px; padding: 32px;
text-align: center; text-align: center;

View file

@ -9,7 +9,6 @@ import ellipsis from './ellipsis.vue';
import time from './time.vue'; import time from './time.vue';
import url from './url.vue'; import url from './url.vue';
import loading from './loading.vue'; import loading from './loading.vue';
import SequentialEntrance from './sequential-entrance.vue';
import error from './error.vue'; import error from './error.vue';
import streamIndicator from './stream-indicator.vue'; import streamIndicator from './stream-indicator.vue';
@ -23,5 +22,4 @@ Vue.component('mk-time', time);
Vue.component('mk-url', url); Vue.component('mk-url', url);
Vue.component('mk-loading', loading); Vue.component('mk-loading', loading);
Vue.component('mk-error', error); Vue.component('mk-error', error);
Vue.component('sequential-entrance', SequentialEntrance);
Vue.component('stream-indicator', streamIndicator); Vue.component('stream-indicator', streamIndicator);

View file

@ -1,6 +1,6 @@
<template> <template>
<x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap"> <x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
<sequential-entrance class="rrevdjwt" :class="{ left: align === 'left' }" :delay="15" :direction="direction" ref="items"> <div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items">
<template v-for="(item, i) in items.filter(item => item !== undefined)"> <template v-for="(item, i) in items.filter(item => item !== undefined)">
<div v-if="item === null" class="divider" :key="i"></div> <div v-if="item === null" class="divider" :key="i"></div>
<span v-else-if="item.type === 'label'" class="label item" :key="i"> <span v-else-if="item.type === 'label'" class="label item" :key="i">
@ -28,7 +28,7 @@
<i v-if="item.indicate"><fa :icon="faCircle"/></i> <i v-if="item.indicate"><fa :icon="faCircle"/></i>
</button> </button>
</template> </template>
</sequential-entrance> </div>
</x-popup> </x-popup>
</template> </template>
@ -91,7 +91,7 @@ export default Vue.extend({
mounted() { mounted() {
if (this.viaKeyboard) { if (this.viaKeyboard) {
this.$nextTick(() => { this.$nextTick(() => {
focusNext(this.$refs.items.$slots.default[0].elm, true); focusNext(this.$refs.items.children[0], true);
}); });
} }
}, },

View file

@ -1,40 +0,0 @@
<template>
<transition-group v-if="$store.state.device.animation"
class="uupnnhew"
name="staggered"
tag="div"
appear
>
<slot></slot>
</transition-group>
<div v-else>
<slot></slot>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
methods: {
focus() {
this.$slots.default[0].elm.focus();
}
},
});
</script>
<style lang="scss">
.uupnnhew {
> .staggered-enter {
opacity: 0;
transform: translateY(-64px);
}
@for $i from 1 through 30 {
> .staggered-enter-active:nth-child(#{$i}) {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1)), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) (15ms * ($i - 1));
}
}
}
</style>

View file

@ -1,5 +1,5 @@
<template> <template>
<sequential-entrance class="cxiknjgy" :class="{ autoMargin }"> <div class="cxiknjgy" :class="{ autoMargin }">
<slot :items="items"></slot> <slot :items="items"></slot>
<div class="empty" v-if="empty" key="_empty_"> <div class="empty" v-if="empty" key="_empty_">
<slot name="empty"></slot> <slot name="empty"></slot>
@ -10,7 +10,7 @@
<template v-if="moreFetching"><mk-loading inline/></template> <template v-if="moreFetching"><mk-loading inline/></template>
</mk-button> </mk-button>
</div> </div>
</sequential-entrance> </div>
</template> </template>
<script lang="ts"> <script lang="ts">

View file

@ -6,15 +6,15 @@
<button class="_button" @click="close()"><fa :icon="faTimes"/></button> <button class="_button" @click="close()"><fa :icon="faTimes"/></button>
</div> </div>
<sequential-entrance class="users"> <div class="users">
<router-link v-for="(item, i) in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage"> <router-link v-for="item in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage">
<mk-avatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/> <mk-avatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/>
<div class="body"> <div class="body">
<mk-user-name :user="extract ? extract(item) : item" class="name"/> <mk-user-name :user="extract ? extract(item) : item" class="name"/>
<mk-acct :user="extract ? extract(item) : item" class="acct"/> <mk-acct :user="extract ? extract(item) : item" class="acct"/>
</div> </div>
</router-link> </router-link>
</sequential-entrance> </div>
<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching"> <button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
<template v-if="!moreFetching">{{ $t('loadMore') }}</template> <template v-if="!moreFetching">{{ $t('loadMore') }}</template>

View file

@ -1,6 +1,6 @@
<template> <template>
<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }"> <x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
<sequential-entrance class="gqyayizv" :delay="30"> <div class="gqyayizv">
<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public"> <button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
<div><fa :icon="faGlobe"/></div> <div><fa :icon="faGlobe"/></div>
<div> <div>
@ -29,7 +29,7 @@
<span>{{ $t('_visibility.specifiedDescription') }}</span> <span>{{ $t('_visibility.specifiedDescription') }}</span>
</div> </div>
</button> </button>
</sequential-entrance> </div>
</x-popup> </x-popup>
</template> </template>

View file

@ -11,12 +11,12 @@
<canvas ref="chart"></canvas> <canvas ref="chart"></canvas>
</div> </div>
<div class="_content" style="max-height: 180px; overflow: auto;"> <div class="_content" style="max-height: 180px; overflow: auto;">
<sequential-entrance :delay="15" v-if="jobs.length > 0"> <div v-if="jobs.length > 0">
<div v-for="(job, i) in jobs" :key="job[0]"> <div v-for="job in jobs" :key="job[0]">
<span>{{ job[0] }}</span> <span>{{ job[0] }}</span>
<span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span> <span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span>
</div> </div>
</sequential-entrance> </div>
<span v-else style="opacity: 0.5;">{{ $t('noJobs') }}</span> <span v-else style="opacity: 0.5;">{{ $t('noJobs') }}</span>
</div> </div>
</section> </section>

View file

@ -5,7 +5,7 @@
<mk-button @click="start" primary class="start"><fa :icon="faPlus"/> {{ $t('startMessaging') }}</mk-button> <mk-button @click="start" primary class="start"><fa :icon="faPlus"/> {{ $t('startMessaging') }}</mk-button>
<sequential-entrance class="history" v-if="messages.length > 0" :delay="30"> <div class="history" v-if="messages.length > 0">
<router-link v-for="(message, i) in messages" <router-link v-for="(message, i) in messages"
class="message _panel" class="message _panel"
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`" :to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
@ -30,7 +30,7 @@
</div> </div>
</div> </div>
</router-link> </router-link>
</sequential-entrance> </div>
<div class="no-history" v-if="!fetching && messages.length == 0"> <div class="no-history" v-if="!fetching && messages.length == 0">
<img src="https://xn--931a.moe/assets/info.png" class="_ghost"/> <img src="https://xn--931a.moe/assets/info.png" class="_ghost"/>
<div>{{ $t('noHistory') }}</div> <div>{{ $t('noHistory') }}</div>

View file

@ -80,9 +80,9 @@
</div> </div>
<router-view :user="user"></router-view> <router-view :user="user"></router-view>
<template v-if="$route.name == 'user'"> <template v-if="$route.name == 'user'">
<sequential-entrance class="pins"> <div class="pins">
<x-note v-for="(note, i) in user.pinnedNotes" class="note" :note="note" :key="note.id" :detail="true" :pinned="true"/> <x-note v-for="note in user.pinnedNotes" class="note" :note="note" :key="note.id" :detail="true" :pinned="true"/>
</sequential-entrance> </div>
<mk-container :body-togglable="true" class="content"> <mk-container :body-togglable="true" class="content">
<template #header><fa :icon="faImage"/>{{ $t('images') }}</template> <template #header><fa :icon="faImage"/>{{ $t('images') }}</template>
<div> <div>

View file

@ -3,7 +3,7 @@
:root { :root {
--radius: 8px; --radius: 8px;
--marginFull: 16px; --marginFull: 16px;
--marginHalf: 8px; --marginHalf: 10px;
--margin: var(--marginFull); --margin: var(--marginFull);