mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-11 21:29:08 +09:00
Code

[Client] Add some animations 🎨

Browse Source
This commit is contained in:
syuilo 2018-12-16 11:32:20 +09:00
parent a70070ac7d
commit d18ee12d2f
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
7 changed files with 67 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -225,6 +225,7 @@
"vue-loader": "15.4.2",
"vue-marquee-text-component": "1.1.0",
"vue-router": "3.0.2",
"vue-sequential-entrance": "1.1.3",
"vue-style-loader": "4.1.2",
"vue-svg-inline-loader": "1.2.4",
"vue-template-compiler": "2.5.17",

36
src/client/app/admin/views/drive.vue
View File

@ -18,29 +18,31 @@
<option value="remote">{{ $t('origin.remote') }}</option>
</ui-select>
</ui-horizon-group>
<div class="kidvdlkg" v-for="file in files">
<div @click="file._open = !file._open">
<div>
<div class="thumbnail" :style="thumbnail(file)"></div>
</div>
<div>
<header>
<b>{{ file.name }}</b>
<span class="username">@{{ file.user | acct }}</span>
</header>
<sequential-entrance animation="entranceFromTop" delay="25">
<div class="kidvdlkg" v-for="file in files">
<div @click="file._open = !file._open">
<div>
<div class="thumbnail" :style="thumbnail(file)"></div>
</div>
<div>
<header>
<b>{{ file.name }}</b>
<span class="username">@{{ file.user | acct }}</span>
</header>
<div>
<span style="margin-right:16px;">{{ file.type }}</span>
<span>{{ file.datasize | bytes }}</span>
<div>
<span style="margin-right:16px;">{{ file.type }}</span>
<span>{{ file.datasize | bytes }}</span>
</div>
<div><mk-time :time="file.createdAt" mode="detail"/></div>
</div>
<div><mk-time :time="file.createdAt" mode="detail"/></div>
</div>
</div>
<div v-show="file._open">
<ui-button @click="del(file)"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
</div>
</div>
<div v-show="file._open">
<ui-button @click="del(file)"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</ui-button>
</div>
</div>
</sequential-entrance>
<ui-button v-if="existMore" @click="fetch">{{ $t('@.load-more') }}</ui-button>
</section>
</ui-card>

30
src/client/app/admin/views/users.vue
View File

@ -38,25 +38,27 @@
<option value="remote">{{ $t('users.origin.remote') }}</option>
</ui-select>
</ui-horizon-group>
<div class="kofvwchc" v-for="user in users">
<div>
<a :href="user | userPage(null, true)">
<mk-avatar class="avatar" :user="user" :disable-link="true"/>
</a>
</div>
<div>
<header>
<b><mk-user-name :user="user"/></b>
<span class="username">@{{ user | acct }}</span>
</header>
<sequential-entrance animation="entranceFromTop" delay="25">
<div class="kofvwchc" v-for="user in users">
<div>
<span>{{ $t('users.updatedAt') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
<a :href="user | userPage(null, true)">
<mk-avatar class="avatar" :user="user" :disable-link="true"/>
</a>
</div>
<div>
<span>{{ $t('users.createdAt') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
<header>
<b><mk-user-name :user="user"/></b>
<span class="username">@{{ user | acct }}</span>
</header>
<div>
<span>{{ $t('users.updatedAt') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
</div>
<div>
<span>{{ $t('users.createdAt') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
</div>
</div>
</div>
</div>
</sequential-entrance>
<ui-button v-if="existMore" @click="fetchUsers">{{ $t('@.load-more') }}</ui-button>
</section>
</ui-card>

16
src/client/app/animation.styl
View File

@ -10,3 +10,19 @@
opacity: 0;
transform: scaleY(0);
}
.entranceFromTop {
animation-duration: 0.5s;
animation-name: entranceFromTop;
}
@keyframes entranceFromTop {
from {
opacity: 0;
transform: translateY(-64px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

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

@ -1,9 +1,11 @@
<template>
<mk-ui>
<main v-if="!fetching">
<template v-for="favorite in favorites">
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
</template>
<sequential-entrance animation="entranceFromTop" delay="25">
<template v-for="favorite in favorites">
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
</template>
</sequential-entrance>
<div class="more" v-if="existMore">
<ui-button inline @click="more">{{ $t('@.load-more') }}</ui-button>
</div>
@ -75,7 +77,7 @@ main
padding 16px
max-width 700px
> .post
> * > .post
margin-bottom 16px
> .more

2
src/client/app/init.ts
View File

@ -8,6 +8,7 @@ import VueRouter from 'vue-router';
import VAnimateCss from 'v-animate-css';
import VModal from 'vue-js-modal';
import VueI18n from 'vue-i18n';
import SequentialEntrance from 'vue-sequential-entrance';
import VueHotkey from './common/hotkey';
import App from './app.vue';
@ -287,6 +288,7 @@ Vue.use(VAnimateCss);
Vue.use(VModal);
Vue.use(VueHotkey);
Vue.use(VueI18n);
Vue.use(SequentialEntrance);
Vue.component('fa', FontAwesomeIcon);

12
src/client/app/mobile/views/pages/favorites.vue
View File

@ -3,9 +3,11 @@
<span slot="header"><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('title') }}</span>
<main>
<template v-for="favorite in favorites">
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
</template>
<sequential-entrance animation="entranceFromTop" delay="25">
<template v-for="favorite in favorites">
<mk-note-detail class="post" :note="favorite.note" :key="favorite.note.id"/>
</template>
</sequential-entrance>
<ui-button v-if="existMore" @click="more">{{ $t('@.load-more') }}</ui-button>
</main>
</mk-ui>
@ -79,13 +81,13 @@ main
margin 0 auto
padding 8px
> .post
> * > .post
margin-bottom 8px
@media (min-width 500px)
padding 16px
> .post
> * > .post
margin-bottom 16px
@media (min-width 600px)