diff options
| author | こぴなたみぽ <syuilotan@yahoo.co.jp> | 2018-02-15 21:29:59 +0900 |
|---|---|---|
| committer | こぴなたみぽ <syuilotan@yahoo.co.jp> | 2018-02-15 21:29:59 +0900 |
| commit | a215ef66808d29e7040daf5c58fa2395539e20f4 (patch) | |
| tree | 39f1c578ff1817a61e4e95fba30778573c18d63e /src/web | |
| parent | wip (diff) | |
| download | misskey-a215ef66808d29e7040daf5c58fa2395539e20f4.tar.gz misskey-a215ef66808d29e7040daf5c58fa2395539e20f4.tar.bz2 misskey-a215ef66808d29e7040daf5c58fa2395539e20f4.zip | |
wip
Diffstat (limited to 'src/web')
| -rw-r--r-- | src/web/app/mobile/tags/notify.tag | 40 | ||||
| -rw-r--r-- | src/web/app/mobile/views/components/notify.vue | 49 |
2 files changed, 49 insertions, 40 deletions
diff --git a/src/web/app/mobile/tags/notify.tag b/src/web/app/mobile/tags/notify.tag deleted file mode 100644 index ec36094972..0000000000 --- a/src/web/app/mobile/tags/notify.tag +++ /dev/null @@ -1,40 +0,0 @@ -<mk-notify> - <mk-notification-preview notification={ opts.notification }/> - <style lang="stylus" scoped> - :scope - display block - position fixed - z-index 1024 - bottom -64px - left 0 - width 100% - height 64px - pointer-events none - -webkit-backdrop-filter blur(2px) - backdrop-filter blur(2px) - background-color rgba(#000, 0.5) - - </style> - <script lang="typescript"> - import * as anime from 'animejs'; - - this.on('mount', () => { - anime({ - targets: this.root, - bottom: '0px', - duration: 500, - easing: 'easeOutQuad' - }); - - setTimeout(() => { - anime({ - targets: this.root, - bottom: '-64px', - duration: 500, - easing: 'easeOutQuad', - complete: () => this.$destroy() - }); - }, 6000); - }); - </script> -</mk-notify> diff --git a/src/web/app/mobile/views/components/notify.vue b/src/web/app/mobile/views/components/notify.vue new file mode 100644 index 0000000000..d3e09e450b --- /dev/null +++ b/src/web/app/mobile/views/components/notify.vue @@ -0,0 +1,49 @@ +<template> +<div class="mk-notify"> + <mk-notification-preview :notification="notification"/> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import * as anime from 'animejs'; + +export default Vue.extend({ + props: ['notification'], + mounted() { + Vue.nextTick(() => { + anime({ + targets: this.$el, + bottom: '0px', + duration: 500, + easing: 'easeOutQuad' + }); + + setTimeout(() => { + anime({ + targets: this.$el, + bottom: '-64px', + duration: 500, + easing: 'easeOutQuad', + complete: () => this.$destroy() + }); + }, 6000); + }); + } +}); +</script> + +<style lang="stylus" scoped> +.mk-notify + position fixed + z-index 1024 + bottom -64px + left 0 + width 100% + height 64px + pointer-events none + -webkit-backdrop-filter blur(2px) + backdrop-filter blur(2px) + background-color rgba(#000, 0.5) + +</style> |