Reworked input field
This commit is contained in:
N-Pex
parent
70d015e5ce
commit
1f3f3ff177
2 changed files with 77 additions and 62 deletions
|
|
@ -57,49 +57,55 @@ $chat-text-size: 0.7pt;
|
|||
}
|
||||
|
||||
.input-area {
|
||||
background-color: #cccccc;
|
||||
background-color: #e2e2e2;
|
||||
margin: 0;
|
||||
padding-left: $chat-standard-padding-s;
|
||||
padding-right: $chat-standard-padding-s;
|
||||
.currentImage {
|
||||
width: 6 * $chat-standard-padding-s;
|
||||
height: 6 * $chat-standard-padding-s;
|
||||
}
|
||||
}
|
||||
|
||||
.input-message {
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 15 * $chat-text-size;
|
||||
font-style: italic;
|
||||
height: 3 * $chat-standard-padding-s;
|
||||
padding: 0 10px 0 10px;
|
||||
margin: $chat-standard-padding-xs 0 0 0;
|
||||
color: #999999;
|
||||
//background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 0;
|
||||
.v-input__slot {
|
||||
/* Remove text underline */
|
||||
color: transparent !important;
|
||||
.input-area-outer {
|
||||
background-color: #e2e2e2;
|
||||
margin: 0;
|
||||
padding-left: 2 * $chat-standard-padding-s;
|
||||
padding-right: 2 * $chat-standard-padding-s;
|
||||
padding-top: 0px;
|
||||
.typing {
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 12 * $chat-text-size;
|
||||
color: #1c242a;
|
||||
text-align: center;
|
||||
min-height: 20px;
|
||||
}
|
||||
.v-text-field__slot {
|
||||
.input-area-inner {
|
||||
background-color: white;
|
||||
border-radius: $chat-standard-padding-s;
|
||||
}
|
||||
.input-area-button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 3 * $chat-standard-padding-s;
|
||||
height: 3 * $chat-standard-padding-s;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
textarea {
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
.v-input__prepend-outer {
|
||||
margin-top: 0px;
|
||||
.input-area-text {
|
||||
max-height: 30vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 0 0 0px;
|
||||
margin: 6px 0;
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 18 * $chat-text-size;
|
||||
.v-input__slot {
|
||||
/* Remove text underline */
|
||||
color: transparent !important;
|
||||
min-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messageJoin,
|
||||
.typing {
|
||||
.messageJoin {
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 15 * $chat-text-size;
|
||||
|
|
|
|||
|
|
@ -55,22 +55,19 @@
|
|||
</div>
|
||||
|
||||
<!-- Input area -->
|
||||
<div v-if="room" class="input-area flex-grow-0 flex-shrink-0">
|
||||
<!-- CONTACT IS TYPING -->
|
||||
<div v-show="contactIsTyping" class="typing">Someone is typing...</div>
|
||||
<v-textarea
|
||||
ref="messageInput"
|
||||
full-width
|
||||
v-model="currentInput"
|
||||
no-resize
|
||||
class="input-message"
|
||||
placeholder="Send message"
|
||||
hide-details
|
||||
background-color="white"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<label icon flat>
|
||||
<v-icon>attachment</v-icon>
|
||||
<v-container v-if="room" fluid class="input-area-outer">
|
||||
<v-row class="ma-0 pa-0">
|
||||
<!-- CONTACT IS TYPING -->
|
||||
<div class="typing">
|
||||
{{ contactIsTyping ? "Someone is typing..." : "" }}
|
||||
</div>
|
||||
</v-row>
|
||||
<v-row class="input-area-inner">
|
||||
<v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
|
||||
<label icon flat ref="attachmentLabel">
|
||||
<v-btn icon @click="$refs.attachment.click()">
|
||||
<v-icon>attachment</v-icon>
|
||||
</v-btn>
|
||||
<input
|
||||
ref="attachment"
|
||||
type="file"
|
||||
|
|
@ -80,17 +77,32 @@
|
|||
style="display: none"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
</v-textarea>
|
||||
<div align-self="end" class="text-right">
|
||||
<v-btn
|
||||
elevation="0"
|
||||
@click.stop="sendMessage"
|
||||
:disabled="sendButtonDisabled"
|
||||
>Send</v-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
|
||||
<v-textarea
|
||||
height="undefined"
|
||||
ref="messageInput"
|
||||
full-width
|
||||
auto-grow
|
||||
rows="1"
|
||||
v-model="currentInput"
|
||||
no-resize
|
||||
class="input-area-text"
|
||||
placeholder="Send message"
|
||||
hide-details
|
||||
background-color="white"
|
||||
v-on:keydown.enter.prevent="() => { sendMessage() }"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
|
||||
<v-btn icon @click.stop="sendMessage" :disabled="sendButtonDisabled">
|
||||
<v-icon>send</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<div v-if="currentImageInput">
|
||||
<v-dialog v-model="currentImageInput" class="ma-0 pa-0" width="50%">
|
||||
|
|
@ -227,7 +239,6 @@ export default {
|
|||
this.$matrix.on("Room.timeline", this.onEvent);
|
||||
this.$matrix.on("RoomMember.typing", this.onUserTyping);
|
||||
this.chatContainerSize = this.$refs.chatContainerResizer.$el.clientHeight;
|
||||
console.log("resize initial height: ", this.chatContainerSize);
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
|
|
@ -335,11 +346,9 @@ export default {
|
|||
* moving focus to the input field, we would still see the last message. Otherwise
|
||||
* if would be hidden behind the keyboard.
|
||||
*/
|
||||
handleChatContainerResize({ width, height }) {
|
||||
console.log("resized", width, height);
|
||||
handleChatContainerResize({ ignoredWidth, height }) {
|
||||
const delta = height - this.chatContainerSize;
|
||||
this.chatContainerSize = height;
|
||||
console.log("resized delta " + delta);
|
||||
const container = this.$refs.chatContainer;
|
||||
if (delta < 0) {
|
||||
container.scrollTop -= delta;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue