monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

#1533

Browse source
This commit is contained in:
syuilo 2018-04-22 17:32:56 +09:00
parent 08b8d829f9
commit ed0885ce5c
1 changed files with 178 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/client/app/desktop/views/components/notifications.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<div class="mk-notifications"> <div class="mk-notifications">
<div class="notifications" v-if="notifications.length != 0"> <div class="notifications" v-if="notifications.length != 0">
<transition-group name="mk-notifications" class="transition">
<template v-for="(notification, i) in _notifications"> <template v-for="(notification, i) in _notifications">
<div class="notification" :class="notification.type" :key="notification.id"> <div class="notification" :class="notification.type" :key="notification.id">
<mk-time :time="notification.createdAt"/> <mk-time :time="notification.createdAt"/>
@ -91,6 +92,7 @@
<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span> <span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
</p> </p>
</template> </template>
</transition-group>
</div> </div>
<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications"> <button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }} <template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }}
@ -186,7 +188,17 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
.transition
.mk-notifications-enter
.mk-notifications-leave-to
opacity 0
transform translateY(-30px)
> *
transition transform .3s ease, opacity .3s ease
> .notifications > .notifications
> *
> .notification > .notification
margin 0 margin 0
padding 16px padding 16px