mirror of
https://iceshrimp.dev/iceshrimp/iceshrimp
synced 2024-12-24 19:48:08 +09:00
187 lines
3.4 KiB
Vue
187 lines
3.4 KiB
Vue
|
<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>
|