wip
This commit is contained in:
parent
4785ee8c32
commit
ebbc42bebc
|
@ -27,8 +27,6 @@ export default Vue.extend({
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.mjndxjcg {
|
||||
max-width: 350px;
|
||||
margin: 0 auto;
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
|
||||
|
|
|
@ -9,7 +9,6 @@ import ellipsis from './ellipsis.vue';
|
|||
import time from './time.vue';
|
||||
import url from './url.vue';
|
||||
import loading from './loading.vue';
|
||||
import SequentialEntrance from './sequential-entrance.vue';
|
||||
import error from './error.vue';
|
||||
import streamIndicator from './stream-indicator.vue';
|
||||
|
||||
|
@ -23,5 +22,4 @@ Vue.component('mk-time', time);
|
|||
Vue.component('mk-url', url);
|
||||
Vue.component('mk-loading', loading);
|
||||
Vue.component('mk-error', error);
|
||||
Vue.component('sequential-entrance', SequentialEntrance);
|
||||
Vue.component('stream-indicator', streamIndicator);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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)">
|
||||
<div v-if="item === null" class="divider" :key="i"></div>
|
||||
<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>
|
||||
</button>
|
||||
</template>
|
||||
</sequential-entrance>
|
||||
</div>
|
||||
</x-popup>
|
||||
</template>
|
||||
|
||||
|
@ -91,7 +91,7 @@ export default Vue.extend({
|
|||
mounted() {
|
||||
if (this.viaKeyboard) {
|
||||
this.$nextTick(() => {
|
||||
focusNext(this.$refs.items.$slots.default[0].elm, true);
|
||||
focusNext(this.$refs.items.children[0], true);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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>
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<sequential-entrance class="cxiknjgy" :class="{ autoMargin }">
|
||||
<div class="cxiknjgy" :class="{ autoMargin }">
|
||||
<slot :items="items"></slot>
|
||||
<div class="empty" v-if="empty" key="_empty_">
|
||||
<slot name="empty"></slot>
|
||||
|
@ -10,7 +10,7 @@
|
|||
<template v-if="moreFetching"><mk-loading inline/></template>
|
||||
</mk-button>
|
||||
</div>
|
||||
</sequential-entrance>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
@ -6,15 +6,15 @@
|
|||
<button class="_button" @click="close()"><fa :icon="faTimes"/></button>
|
||||
</div>
|
||||
|
||||
<sequential-entrance class="users">
|
||||
<router-link v-for="(item, i) in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage">
|
||||
<div class="users">
|
||||
<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"/>
|
||||
<div class="body">
|
||||
<mk-user-name :user="extract ? extract(item) : item" class="name"/>
|
||||
<mk-acct :user="extract ? extract(item) : item" class="acct"/>
|
||||
</div>
|
||||
</router-link>
|
||||
</sequential-entrance>
|
||||
</div>
|
||||
|
||||
<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
|
||||
<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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">
|
||||
<div><fa :icon="faGlobe"/></div>
|
||||
<div>
|
||||
|
@ -29,7 +29,7 @@
|
|||
<span>{{ $t('_visibility.specifiedDescription') }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</sequential-entrance>
|
||||
</div>
|
||||
</x-popup>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -11,12 +11,12 @@
|
|||
<canvas ref="chart"></canvas>
|
||||
</div>
|
||||
<div class="_content" style="max-height: 180px; overflow: auto;">
|
||||
<sequential-entrance :delay="15" v-if="jobs.length > 0">
|
||||
<div v-for="(job, i) in jobs" :key="job[0]">
|
||||
<div v-if="jobs.length > 0">
|
||||
<div v-for="job in jobs" :key="job[0]">
|
||||
<span>{{ job[0] }}</span>
|
||||
<span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span>
|
||||
</div>
|
||||
</sequential-entrance>
|
||||
</div>
|
||||
<span v-else style="opacity: 0.5;">{{ $t('noJobs') }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
<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"
|
||||
class="message _panel"
|
||||
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
|
||||
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</sequential-entrance>
|
||||
</div>
|
||||
<div class="no-history" v-if="!fetching && messages.length == 0">
|
||||
<img src="https://xn--931a.moe/assets/info.png" class="_ghost"/>
|
||||
<div>{{ $t('noHistory') }}</div>
|
||||
|
|
|
@ -80,9 +80,9 @@
|
|||
</div>
|
||||
<router-view :user="user"></router-view>
|
||||
<template v-if="$route.name == 'user'">
|
||||
<sequential-entrance class="pins">
|
||||
<x-note v-for="(note, i) in user.pinnedNotes" class="note" :note="note" :key="note.id" :detail="true" :pinned="true"/>
|
||||
</sequential-entrance>
|
||||
<div class="pins">
|
||||
<x-note v-for="note in user.pinnedNotes" class="note" :note="note" :key="note.id" :detail="true" :pinned="true"/>
|
||||
</div>
|
||||
<mk-container :body-togglable="true" class="content">
|
||||
<template #header><fa :icon="faImage"/>{{ $t('images') }}</template>
|
||||
<div>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
:root {
|
||||
--radius: 8px;
|
||||
--marginFull: 16px;
|
||||
--marginHalf: 8px;
|
||||
--marginHalf: 10px;
|
||||
|
||||
--margin: var(--marginFull);
|
||||
|
||||
|
|
Loading…
Reference in New Issue