misskey-awawa/src/web/app/common/views/components/messaging-form.vue

187 lines
3.4 KiB
Vue
Raw Normal View History

2018-02-13 06:56:11 +00:00
<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;
2018-02-18 03:35:18 +00:00
(this as any).api('messaging/messages/create', {
2018-02-13 06:56:11 +00:00
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>