fixed more issures when merging.

This commit is contained in:
supertiger 2019-03-08 11:07:42 +00:00
parent b6f94c2b49
commit 5cbf411cc1

View file

@ -31,7 +31,6 @@
<news v-else/> <news v-else/>
<div class="chat-input-area" v-if="selectedChannelID"> <div class="chat-input-area" v-if="selectedChannelID">
<div class="message-area"> <div class="message-area">
<input type="file" ref="sendFileBrowse" @change="attachmentChange" class="hidden"> <input type="file" ref="sendFileBrowse" @change="attachmentChange" class="hidden">
<div class="attachment-button" @click="attachmentButton"> <div class="attachment-button" @click="attachmentButton">
<i class="material-icons">attach_file</i> <i class="material-icons">attach_file</i>
@ -42,16 +41,11 @@
ref="input-box" ref="input-box"
placeholder="Message" placeholder="Message"
@keydown="chatInput" @keydown="chatInput"
@keyup="delayedResize" @keyup="delayedResize"
@change="resize" @change="resize"
@input="onInput" @input="onInput"
v-model="message" v-model="message"
></textarea>
<button :class="{'send-button': true, 'error-send-button': messageLength > 5000}" @click="sendMessage">Send</button>
@input="onInput"
@paste="onPaste" @paste="onPaste"
v-model="message"
></textarea> ></textarea>
<button <button
:class="{'send-button': true, 'error-send-button': messageLength > 5000}" :class="{'send-button': true, 'error-send-button': messageLength > 5000}"
@ -179,37 +173,29 @@ export default {
}, },
resize(event) { resize(event) {
let input = this.$refs["input-box"] let input = this.$refs["input-box"];
if(input.scrollHeight < 50) { if (input.scrollHeight < 50) {
input.style.height = '1em' input.style.height = "1em";
} else { } else {
input.style.height = 'auto'; input.style.height = "auto";
input.style.height = `calc(${input.scrollHeight}px - 1em)`; input.style.height = `calc(${input.scrollHeight}px - 1em)`;
} }
}, },
delayedResize(event) { delayedResize(event) {
this.resize(event) this.resize(event);
}, },
async onInput(event){
this.delayedResize(event)
this.messageLength = this.message.length;
const value = event.target.value.trim();
if (value && this.postTimerID == null) {
this.postTimer()
async onInput(event) { async onInput(event) {
this.delayedResize(event);
this.messageLength = this.message.length; this.messageLength = this.message.length;
const value = event.target.value.trim(); const value = event.target.value.trim();
if (value && this.postTimerID == null) { if (value && this.postTimerID == null) {
// Post typing status
this.postTimer(); this.postTimer();
await typingService.post(this.selectedChannelID); await typingService.post(this.selectedChannelID);
} }
}, },
chatInput(event) { chatInput(event) {
this.delayedResize(event) this.delayedResize(event);
// when enter is press // when enter is press
if (event.keyCode == 13) { if (event.keyCode == 13) {
@ -245,8 +231,11 @@ export default {
//show a warning. //show a warning.
return; return;
} }
this.$store.dispatch('setFile', file) this.$store.dispatch("setFile", file);
this.$store.dispatch('setPopoutVisibility', {name: 'uploadDialog', visibility: true}) this.$store.dispatch("setPopoutVisibility", {
name: "uploadDialog",
visibility: true
});
}, },
attachmentChange(event) { attachmentChange(event) {
const file = event.target.files[0]; const file = event.target.files[0];
@ -254,13 +243,17 @@ export default {
this.uploadFile(file); this.uploadFile(file);
}, },
onPaste(event) { onPaste(event) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items; var items = (event.clipboardData || event.originalEvent.clipboardData)
.items;
for (let index in items) { for (let index in items) {
var item = items[index]; var item = items[index];
if (item.kind === "file") { if (item.kind === "file") {
var blob = item.getAsFile(); var blob = item.getAsFile();
this.$store.dispatch('setFile', blob) this.$store.dispatch("setFile", blob);
this.$store.dispatch('setPopoutVisibility', {name: 'uploadDialog', visibility: true}) this.$store.dispatch("setPopoutVisibility", {
name: "uploadDialog",
visibility: true
});
break; break;
} }
} }
@ -453,7 +446,7 @@ export default {
background: rgba(0, 0, 0, 0.158); background: rgba(0, 0, 0, 0.158);
color: white; color: white;
width: 100%; width: 100%;
height: 20px; min-height: 20px;
padding: 10px; padding: 10px;
margin: auto; margin: auto;
font-size: 15px; font-size: 15px;
@ -481,14 +474,15 @@ export default {
background: rgba(0, 0, 0, 0.274); background: rgba(0, 0, 0, 0.274);
border: none; border: none;
outline: none; outline: none;
margin: auto;
margin-left: 2px; margin-left: 2px;
margin-right: 20px; margin-right: 20px;
height: 40px; min-height: 40px;
width: 50px; width: 50px;
transition: 0.3s; transition: 0.3s;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
} }
.send-button .material-icons { .send-button .material-icons {
margin: auto; margin: auto;