wip
This commit is contained in:
こぴなたみぽ
parent
88ded14518
commit
e676bb1595
|
|
@ -1,175 +0,0 @@
|
|||
<mk-messaging-form>
|
||||
<textarea ref="text" onkeypress={ onkeypress } onpaste={ onpaste } placeholder="%i18n:common.input-message-here%"></textarea>
|
||||
<div class="files"></div>
|
||||
<mk-uploader ref="uploader"/>
|
||||
<button class="send" @click="send" disabled={ sending } title="%i18n:common.send%">
|
||||
<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
|
||||
</button>
|
||||
<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
|
||||
%fa:upload%
|
||||
</button>
|
||||
<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
|
||||
%fa:R folder-open%
|
||||
</button>
|
||||
<input name="file" type="file" accept="image/*"/>
|
||||
<style lang="stylus" scoped>
|
||||
:scope
|
||||
display block
|
||||
|
||||
> textarea
|
||||
cursor auto
|
||||
display block
|
||||
width 100%
|
||||
min-width 100%
|
||||
max-width 100%
|
||||
height 64px
|
||||
margin 0
|
||||
padding 8px
|
||||
font-size 1em
|
||||
color #000
|
||||
outline none
|
||||
border none
|
||||
border-top solid 1px #eee
|
||||
border-radius 0
|
||||
box-shadow none
|
||||
background transparent
|
||||
|
||||
> .send
|
||||
position absolute
|
||||
bottom 0
|
||||
right 0
|
||||
margin 0
|
||||
padding 10px 14px
|
||||
line-height 1em
|
||||
font-size 1em
|
||||
color #aaa
|
||||
transition color 0.1s ease
|
||||
|
||||
&:hover
|
||||
color $theme-color
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 10%)
|
||||
transition color 0s ease
|
||||
|
||||
.files
|
||||
display block
|
||||
margin 0
|
||||
padding 0 8px
|
||||
list-style none
|
||||
|
||||
&:after
|
||||
content ''
|
||||
display block
|
||||
clear both
|
||||
|
||||
> li
|
||||
display block
|
||||
float left
|
||||
margin 4px
|
||||
padding 0
|
||||
width 64px
|
||||
height 64px
|
||||
background-color #eee
|
||||
background-repeat no-repeat
|
||||
background-position center center
|
||||
background-size cover
|
||||
cursor move
|
||||
|
||||
&:hover
|
||||
> .remove
|
||||
display block
|
||||
|
||||
> .remove
|
||||
display none
|
||||
position absolute
|
||||
right -6px
|
||||
top -6px
|
||||
margin 0
|
||||
padding 0
|
||||
background transparent
|
||||
outline none
|
||||
border none
|
||||
border-radius 0
|
||||
box-shadow none
|
||||
cursor pointer
|
||||
|
||||
.attach-from-local
|
||||
.attach-from-drive
|
||||
margin 0
|
||||
padding 10px 14px
|
||||
line-height 1em
|
||||
font-size 1em
|
||||
font-weight normal
|
||||
text-decoration none
|
||||
color #aaa
|
||||
transition color 0.1s ease
|
||||
|
||||
&:hover
|
||||
color $theme-color
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 10%)
|
||||
transition color 0s ease
|
||||
|
||||
input[type=file]
|
||||
display none
|
||||
|
||||
</style>
|
||||
<script lang="typescript">
|
||||
this.mixin('api');
|
||||
|
||||
this.onpaste = e => {
|
||||
const data = e.clipboardData;
|
||||
const items = data.items;
|
||||
for (const item of items) {
|
||||
if (item.kind == 'file') {
|
||||
this.upload(item.getAsFile());
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.onkeypress = e => {
|
||||
if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
|
||||
this.send();
|
||||
}
|
||||
};
|
||||
|
||||
this.selectFile = () => {
|
||||
this.$refs.file.click();
|
||||
};
|
||||
|
||||
this.selectFileFromDrive = () => {
|
||||
const browser = document.body.appendChild(document.createElement('mk-select-file-from-drive-window'));
|
||||
const event = riot.observable();
|
||||
riot.mount(browser, {
|
||||
multiple: true,
|
||||
event: event
|
||||
});
|
||||
event.one('selected', files => {
|
||||
files.forEach(this.addFile);
|
||||
});
|
||||
};
|
||||
|
||||
this.send = () => {
|
||||
this.sending = true;
|
||||
this.api('messaging/messages/create', {
|
||||
user_id: this.opts.user.id,
|
||||
text: this.$refs.text.value
|
||||
}).then(message => {
|
||||
this.clear();
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
}).then(() => {
|
||||
this.sending = false;
|
||||
this.update();
|
||||
});
|
||||
};
|
||||
|
||||
this.clear = () => {
|
||||
this.$refs.text.value = '';
|
||||
this.files = [];
|
||||
this.update();
|
||||
};
|
||||
</script>
|
||||
</mk-messaging-form>
|
||||
186
src/web/app/common/views/components/messaging-form.vue
Normal file
186
src/web/app/common/views/components/messaging-form.vue
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
<template>
|
||||
<div>
|
||||
<textarea v-model="text" @keypress="onKeypress" @paste="onPaste" placeholder="%i18n:common.input-message-here%"></textarea>
|
||||
<div class="files"></div>
|
||||
<mk-uploader ref="uploader"/>
|
||||
<button class="send" @click="send" :disabled="sending" title="%i18n:common.send%">
|
||||
<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
|
||||
</button>
|
||||
<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
|
||||
%fa:upload%
|
||||
</button>
|
||||
<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
|
||||
%fa:R folder-open%
|
||||
</button>
|
||||
<input name="file" type="file" accept="image/*"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
props: ['user'],
|
||||
data() {
|
||||
return {
|
||||
text: null,
|
||||
files: [],
|
||||
sending: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onPaste(e) {
|
||||
const data = e.clipboardData;
|
||||
const items = data.items;
|
||||
for (const item of items) {
|
||||
if (item.kind == 'file') {
|
||||
this.upload(item.getAsFile());
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onKeypress(e) {
|
||||
if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
|
||||
this.send();
|
||||
}
|
||||
},
|
||||
|
||||
chooseFile() {
|
||||
(this.$refs.file as any).click();
|
||||
},
|
||||
|
||||
chooseFileFromDrive() {
|
||||
const w = new MkDriveChooserWindow({
|
||||
propsData: {
|
||||
multiple: true
|
||||
}
|
||||
}).$mount();
|
||||
w.$once('selected', files => {
|
||||
files.forEach(this.addFile);
|
||||
});
|
||||
document.body.appendChild(w.$el);
|
||||
},
|
||||
|
||||
send() {
|
||||
this.sending = true;
|
||||
this.$root.$data.os.api('messaging/messages/create', {
|
||||
user_id: this.user.id,
|
||||
text: this.text
|
||||
}).then(message => {
|
||||
this.clear();
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
}).then(() => {
|
||||
this.sending = false;
|
||||
});
|
||||
},
|
||||
|
||||
clear() {
|
||||
this.text = '';
|
||||
this.files = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-messaging-form
|
||||
> textarea
|
||||
cursor auto
|
||||
display block
|
||||
width 100%
|
||||
min-width 100%
|
||||
max-width 100%
|
||||
height 64px
|
||||
margin 0
|
||||
padding 8px
|
||||
font-size 1em
|
||||
color #000
|
||||
outline none
|
||||
border none
|
||||
border-top solid 1px #eee
|
||||
border-radius 0
|
||||
box-shadow none
|
||||
background transparent
|
||||
|
||||
> .send
|
||||
position absolute
|
||||
bottom 0
|
||||
right 0
|
||||
margin 0
|
||||
padding 10px 14px
|
||||
line-height 1em
|
||||
font-size 1em
|
||||
color #aaa
|
||||
transition color 0.1s ease
|
||||
|
||||
&:hover
|
||||
color $theme-color
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 10%)
|
||||
transition color 0s ease
|
||||
|
||||
.files
|
||||
display block
|
||||
margin 0
|
||||
padding 0 8px
|
||||
list-style none
|
||||
|
||||
&:after
|
||||
content ''
|
||||
display block
|
||||
clear both
|
||||
|
||||
> li
|
||||
display block
|
||||
float left
|
||||
margin 4px
|
||||
padding 0
|
||||
width 64px
|
||||
height 64px
|
||||
background-color #eee
|
||||
background-repeat no-repeat
|
||||
background-position center center
|
||||
background-size cover
|
||||
cursor move
|
||||
|
||||
&:hover
|
||||
> .remove
|
||||
display block
|
||||
|
||||
> .remove
|
||||
display none
|
||||
position absolute
|
||||
right -6px
|
||||
top -6px
|
||||
margin 0
|
||||
padding 0
|
||||
background transparent
|
||||
outline none
|
||||
border none
|
||||
border-radius 0
|
||||
box-shadow none
|
||||
cursor pointer
|
||||
|
||||
.attach-from-local
|
||||
.attach-from-drive
|
||||
margin 0
|
||||
padding 10px 14px
|
||||
line-height 1em
|
||||
font-size 1em
|
||||
font-weight normal
|
||||
text-decoration none
|
||||
color #aaa
|
||||
transition color 0.1s ease
|
||||
|
||||
&:hover
|
||||
color $theme-color
|
||||
|
||||
&:active
|
||||
color darken($theme-color, 10%)
|
||||
transition color 0s ease
|
||||
|
||||
input[type=file]
|
||||
display none
|
||||
|
||||
</style>
|
||||
Loading…
Reference in a new issue