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

200 lines
3.5 KiB
Vue
Raw Normal View History

2018-02-13 07:56:11 +01:00
<template>
2018-02-18 16:18:01 +01:00
<div class="mk-messaging-form">
2018-02-25 05:05:55 +01:00
<textarea
v-model="text"
ref="textarea"
@keypress="onKeypress"
@paste="onPaste"
placeholder="%i18n:common.input-message-here%"
v-autocomplete="'text'"
></textarea>
2018-02-22 13:15:24 +01:00
<div class="file" v-if="file">{{ file.name }}</div>
2018-02-13 07:56:11 +01:00
<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>
2018-02-22 13:15:24 +01:00
<button class="attach-from-local" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
2018-02-13 07:56:11 +01:00
%fa:upload%
</button>
2018-02-22 13:15:24 +01:00
<button class="attach-from-drive" @click="chooseFileFromDrive" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
2018-02-13 07:56:11 +01:00
%fa:R folder-open%
</button>
<input name="file" type="file" accept="image/*"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-02-24 18:57:19 +01:00
import * as autosize from 'autosize';
2018-02-13 07:56:11 +01:00
export default Vue.extend({
props: ['user'],
data() {
return {
text: null,
2018-02-18 15:51:41 +01:00
file: null,
2018-02-13 07:56:11 +01:00
sending: false
};
},
2018-02-24 18:57:19 +01:00
mounted() {
autosize(this.$refs.textarea);
},
2018-02-13 07:56:11 +01:00
methods: {
onPaste(e) {
const data = e.clipboardData;
const items = data.items;
for (const item of items) {
if (item.kind == 'file') {
2018-02-18 15:56:25 +01:00
//this.upload(item.getAsFile());
2018-02-13 07:56:11 +01:00
}
}
},
onKeypress(e) {
if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
this.send();
}
},
chooseFile() {
(this.$refs.file as any).click();
},
chooseFileFromDrive() {
2018-02-18 15:51:41 +01:00
(this as any).apis.chooseDriveFile({
multiple: false
}).then(file => {
this.file = file;
2018-02-13 07:56:11 +01:00
});
},
2018-02-18 15:51:41 +01:00
upload() {
// TODO
2018-02-18 15:56:25 +01:00
},
2018-02-18 15:51:41 +01:00
2018-02-13 07:56:11 +01:00
send() {
this.sending = true;
2018-02-18 04:35:18 +01:00
(this as any).api('messaging/messages/create', {
2018-02-13 07:56:11 +01: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 = '';
2018-02-18 15:56:25 +01:00
this.file = null;
2018-02-13 07:56:11 +01:00
}
}
});
</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
2018-02-24 18:57:19 +01:00
resize none
2018-02-13 07:56:11 +01:00
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>