From f35f94ef8f02b095eb59ad34b970d21359554cc3 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Mon, 12 Feb 2018 19:02:19 +0900 Subject: [PATCH] wip --- src/web/app/desktop/-tags/repost-form.tag | 127 ----------------- .../desktop/views/components/repost-form.vue | 131 ++++++++++++++++++ 2 files changed, 131 insertions(+), 127 deletions(-) delete mode 100644 src/web/app/desktop/-tags/repost-form.tag create mode 100644 src/web/app/desktop/views/components/repost-form.vue diff --git a/src/web/app/desktop/-tags/repost-form.tag b/src/web/app/desktop/-tags/repost-form.tag deleted file mode 100644 index afe555b6d6..0000000000 --- a/src/web/app/desktop/-tags/repost-form.tag +++ /dev/null @@ -1,127 +0,0 @@ -<mk-repost-form> - <mk-post-preview post={ opts.post }/> - <template v-if="!quote"> - <footer> - <a class="quote" v-if="!quote" @click="onquote">%i18n:desktop.tags.mk-repost-form.quote%</a> - <button class="cancel" @click="cancel">%i18n:desktop.tags.mk-repost-form.cancel%</button> - <button class="ok" @click="ok" disabled={ wait }>{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }</button> - </footer> - </template> - <template v-if="quote"> - <mk-post-form ref="form" repost={ opts.post }/> - </template> - <style lang="stylus" scoped> - :scope - - > mk-post-preview - margin 16px 22px - - > div - padding 16px - - > footer - height 72px - background lighten($theme-color, 95%) - - > .quote - position absolute - bottom 16px - left 28px - line-height 40px - - button - display block - position absolute - bottom 16px - cursor pointer - padding 0 - margin 0 - width 120px - height 40px - font-size 1em - outline none - border-radius 4px - - &:focus - &:after - content "" - pointer-events none - position absolute - top -5px - right -5px - bottom -5px - left -5px - border 2px solid rgba($theme-color, 0.3) - border-radius 8px - - > .cancel - right 148px - color #888 - background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%) - border solid 1px #e2e2e2 - - &:hover - background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%) - border-color #dcdcdc - - &:active - background #ececec - border-color #dcdcdc - - > .ok - right 16px - font-weight bold - color $theme-color-foreground - background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) - border solid 1px lighten($theme-color, 15%) - - &:hover - background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) - border-color $theme-color - - &:active - background $theme-color - border-color $theme-color - - </style> - <script lang="typescript"> - import notify from '../scripts/notify'; - - this.mixin('api'); - - this.wait = false; - this.quote = false; - - this.cancel = () => { - this.$emit('cancel'); - }; - - this.ok = () => { - this.wait = true; - this.api('posts/create', { - repost_id: this.opts.post.id - }).then(data => { - this.$emit('posted'); - notify('%i18n:desktop.tags.mk-repost-form.success%'); - }).catch(err => { - notify('%i18n:desktop.tags.mk-repost-form.failure%'); - }).then(() => { - this.update({ - wait: false - }); - }); - }; - - this.onquote = () => { - this.update({ - quote: true - }); - - this.$refs.form.on('post', () => { - this.$emit('posted'); - }); - - this.$refs.form.focus(); - }; - </script> -</mk-repost-form> diff --git a/src/web/app/desktop/views/components/repost-form.vue b/src/web/app/desktop/views/components/repost-form.vue new file mode 100644 index 0000000000..9e9f7174f7 --- /dev/null +++ b/src/web/app/desktop/views/components/repost-form.vue @@ -0,0 +1,131 @@ +<template> +<div class="mk-repost-form"> + <mk-post-preview :post="post"/> + <template v-if="!quote"> + <footer> + <a class="quote" v-if="!quote" @click="onquote">%i18n:desktop.tags.mk-repost-form.quote%</a> + <button class="cancel" @click="cancel">%i18n:desktop.tags.mk-repost-form.cancel%</button> + <button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }}</button> + </footer> + </template> + <template v-if="quote"> + <mk-post-form ref="form" :repost="post" @posted="onChildFormPosted"/> + </template> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import notify from '../../scripts/notify'; + +export default Vue.extend({ + props: ['post'], + data() { + return { + wait: false, + quote: false + }; + }, + methods: { + ok() { + this.wait = true; + this.$root.$data.os.api('posts/create', { + repost_id: this.post.id + }).then(data => { + this.$emit('posted'); + notify('%i18n:desktop.tags.mk-repost-form.success%'); + }).catch(err => { + notify('%i18n:desktop.tags.mk-repost-form.failure%'); + }).then(() => { + this.wait = false; + }); + }, + cancel() { + this.$emit('canceled'); + }, + onQuote() { + this.quote = true; + + (this.$refs.form as any).focus(); + }, + onChildFormPosted() { + this.$emit('posted'); + } + } +}); +</script> + +<style lang="stylus" scoped> +.mk-repost-form + + > mk-post-preview + margin 16px 22px + + > div + padding 16px + + > footer + height 72px + background lighten($theme-color, 95%) + + > .quote + position absolute + bottom 16px + left 28px + line-height 40px + + button + display block + position absolute + bottom 16px + cursor pointer + padding 0 + margin 0 + width 120px + height 40px + font-size 1em + outline none + border-radius 4px + + &:focus + &:after + content "" + pointer-events none + position absolute + top -5px + right -5px + bottom -5px + left -5px + border 2px solid rgba($theme-color, 0.3) + border-radius 8px + + > .cancel + right 148px + color #888 + background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%) + border solid 1px #e2e2e2 + + &:hover + background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%) + border-color #dcdcdc + + &:active + background #ececec + border-color #dcdcdc + + > .ok + right 16px + font-weight bold + color $theme-color-foreground + background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) + border solid 1px lighten($theme-color, 15%) + + &:hover + background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) + border-color $theme-color + + &:active + background $theme-color + border-color $theme-color + +</style>