wip
This commit is contained in:
こぴなたみぽ
parent
02def5c3dd
commit
e79b132b91
3 changed files with 184 additions and 173 deletions
|
|
@ -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>
|
||||
183
src/web/app/desktop/views/components/input-dialog.vue
Normal file
183
src/web/app/desktop/views/components/input-dialog.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue