From e79b132b91cb758bd52422ec7e6b64a5b14668c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?= <syuilotan@yahoo.co.jp> Date: Tue, 13 Feb 2018 19:00:54 +0900 Subject: [PATCH] wip --- src/web/app/desktop/-tags/input-dialog.tag | 172 ---------------- .../desktop/views/components/input-dialog.vue | 183 ++++++++++++++++++ .../app/desktop/views/components/window.vue | 2 +- 3 files changed, 184 insertions(+), 173 deletions(-) delete mode 100644 src/web/app/desktop/-tags/input-dialog.tag create mode 100644 src/web/app/desktop/views/components/input-dialog.vue diff --git a/src/web/app/desktop/-tags/input-dialog.tag b/src/web/app/desktop/-tags/input-dialog.tag deleted file mode 100644 index a1634429cf..0000000000 --- a/src/web/app/desktop/-tags/input-dialog.tag +++ /dev/null @@ -1,172 +0,0 @@ -<mk-input-dialog> - <mk-window ref="window" is-modal={ true } width={ '500px' }> - <yield to="header"> - %fa:i-cursor%{ parent.title } - </yield> - <yield to="content"> - <div class="body"> - <input ref="text" type={ parent.type } oninput={ parent.onInput } onkeydown={ parent.onKeydown } placeholder={ parent.placeholder }/> - </div> - <div class="action"> - <button class="cancel" @click="parent.cancel">キャンセル</button> - <button class="ok" disabled={ !parent.allowEmpty && refs.text.value.length == 0 } @click="parent.ok">決定</button> - </div> - </yield> - </mk-window> - <style lang="stylus" scoped> - :scope - display block - - > mk-window - [data-yield='header'] - > [data-fa] - margin-right 4px - - [data-yield='content'] - > .body - padding 16px - - > input - display block - padding 8px - margin 0 - width 100% - max-width 100% - min-width 100% - font-size 1em - color #333 - background #fff - outline none - border solid 1px rgba($theme-color, 0.1) - border-radius 4px - transition border-color .3s ease - - &:hover - border-color rgba($theme-color, 0.2) - transition border-color .1s ease - - &:focus - color $theme-color - border-color rgba($theme-color, 0.5) - transition border-color 0s ease - - &::-webkit-input-placeholder - color rgba($theme-color, 0.3) - - > .action - height 72px - background lighten($theme-color, 95%) - - .ok - .cancel - 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 - - &:disabled - opacity 0.7 - cursor default - - .ok - right 16px - 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%) - - &:not(:disabled) - font-weight bold - - &:hover:not(:disabled) - background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) - border-color $theme-color - - &:active:not(:disabled) - background $theme-color - border-color $theme-color - - .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 - - </style> - <script lang="typescript"> - this.done = false; - - this.title = this.opts.title; - this.placeholder = this.opts.placeholder; - this.default = this.opts.default; - this.allowEmpty = this.opts.allowEmpty != null ? this.opts.allowEmpty : true; - this.type = this.opts.type ? this.opts.type : 'text'; - - this.on('mount', () => { - this.text = this.$refs.window.refs.text; - if (this.default) this.text.value = this.default; - this.text.focus(); - - this.$refs.window.on('closing', () => { - if (this.done) { - this.opts.onOk(this.text.value); - } else { - if (this.opts.onCancel) this.opts.onCancel(); - } - }); - - this.$refs.window.on('closed', () => { - this.$destroy(); - }); - }); - - this.cancel = () => { - this.done = false; - this.$refs.window.close(); - }; - - this.ok = () => { - if (!this.allowEmpty && this.text.value == '') return; - this.done = true; - this.$refs.window.close(); - }; - - this.onInput = () => { - this.update(); - }; - - this.onKeydown = e => { - if (e.which == 13) { // Enter - e.preventDefault(); - e.stopPropagation(); - this.ok(); - } - }; - </script> -</mk-input-dialog> diff --git a/src/web/app/desktop/views/components/input-dialog.vue b/src/web/app/desktop/views/components/input-dialog.vue new file mode 100644 index 0000000000..684698a0f0 --- /dev/null +++ b/src/web/app/desktop/views/components/input-dialog.vue @@ -0,0 +1,183 @@ +<template> +<mk-window ref="window" is-modal width="500px" @before-close="beforeClose" @closed="$destroy"> + <span slot="header" :class="$style.header"> + %fa:i-cursor%{{ title }} + </span> + <div slot="content"> + <div :class="$style.body"> + <input ref="text" v-model="text" :type="type" @keydown="onKeydown" :placeholder="placeholder"/> + </div> + <div :class="$style.actions"> + <button :class="$style.cancel" @click="cancel">キャンセル</button> + <button :class="$style.ok" disabled="!parent.allowEmpty && text.length == 0" @click="ok">決定</button> + </div> + </div> +</mk-window> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + props: { + title: { + type: String + }, + placeholder: { + type: String + }, + default: { + type: String + }, + allowEmpty: { + default: true + }, + type: { + default: 'text' + }, + onOk: { + type: Function + }, + onCancel: { + type: Function + } + }, + data() { + return { + done: false, + text: '' + }; + }, + mounted() { + if (this.default) this.text = this.default; + (this.$refs.text as any).focus(); + }, + methods: { + ok() { + if (!this.allowEmpty && this.text == '') return; + this.done = true; + (this.$refs.window as any).close(); + }, + cancel() { + this.done = false; + (this.$refs.window as any).close(); + }, + beforeClose() { + if (this.done) { + this.onOk(this.text); + } else { + if (this.onCancel) this.onCancel(); + } + }, + onKeydown(e) { + if (e.which == 13) { // Enter + e.preventDefault(); + e.stopPropagation(); + this.ok(); + } + } + } +}); +</script> + + +<style lang="stylus" module> +.header + > [data-fa] + margin-right 4px + +.body + padding 16px + + > input + display block + padding 8px + margin 0 + width 100% + max-width 100% + min-width 100% + font-size 1em + color #333 + background #fff + outline none + border solid 1px rgba($theme-color, 0.1) + border-radius 4px + transition border-color .3s ease + + &:hover + border-color rgba($theme-color, 0.2) + transition border-color .1s ease + + &:focus + color $theme-color + border-color rgba($theme-color, 0.5) + transition border-color 0s ease + + &::-webkit-input-placeholder + color rgba($theme-color, 0.3) + +.actions + height 72px + background lighten($theme-color, 95%) + +.ok +.cancel + 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 + + &:disabled + opacity 0.7 + cursor default + +.ok + right 16px + 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%) + + &:not(:disabled) + font-weight bold + + &:hover:not(:disabled) + background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) + border-color $theme-color + + &:active:not(:disabled) + background $theme-color + border-color $theme-color + +.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 + +</style> diff --git a/src/web/app/desktop/views/components/window.vue b/src/web/app/desktop/views/components/window.vue index 61a433b36a..3a7531a6f1 100644 --- a/src/web/app/desktop/views/components/window.vue +++ b/src/web/app/desktop/views/components/window.vue @@ -134,7 +134,7 @@ export default Vue.extend({ }, close() { - this.$emit('closing'); + this.$emit('before-close'); const bg = this.$refs.bg as any; const main = this.$refs.main as any;