butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Reworked input field

Browse source
This commit is contained in:
N-Pex 2020-12-04 12:15:47 +01:00
parent 70d015e5ce
commit 1f3f3ff177
2 changed files with 77 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/assets/css/chat.scss
View file

@ -57,49 +57,55 @@ $chat-text-size: 0.7pt;
} }
.input-area { .input-area {
background-color: #cccccc; background-color: #e2e2e2;
margin: 0; margin: 0;
padding-left: $chat-standard-padding-s; padding-left: $chat-standard-padding-s;
padding-right: $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 { .input-area-outer {
font-family: 'Titillium Web', sans-serif; background-color: #e2e2e2;
font-weight: 300; margin: 0;
font-size: 15 * $chat-text-size; padding-left: 2 * $chat-standard-padding-s;
font-style: italic; padding-right: 2 * $chat-standard-padding-s;
height: 3 * $chat-standard-padding-s; padding-top: 0px;
padding: 0 10px 0 10px; .typing {
margin: $chat-standard-padding-xs 0 0 0; font-family: 'Titillium Web', sans-serif;
color: #999999; font-weight: 300;
//background-color: #ffffff; font-size: 12 * $chat-text-size;
overflow: hidden; color: #1c242a;
border: 1px solid #cccccc; text-align: center;
border-radius: 0; min-height: 20px;
.v-input__slot {
/* Remove text underline */
color: transparent !important;
} }
.v-text-field__slot { .input-area-inner {
background-color: white;
border-radius: $chat-standard-padding-s;
}
.input-area-button {
margin: 0;
padding: 0; padding: 0;
max-height: 3 * $chat-standard-padding-s; min-width: 48px;
height: 3 * $chat-standard-padding-s; min-height: 48px;
} }
textarea { .input-area-text {
line-height: 1.1rem; max-height: 30vh;
} overflow-x: hidden;
.v-input__prepend-outer { overflow-y: auto;
margin-top: 0px; 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, .messageJoin {
.typing {
font-family: 'Titillium Web', sans-serif; font-family: 'Titillium Web', sans-serif;
font-weight: 300; font-weight: 300;
font-size: 15 * $chat-text-size; font-size: 15 * $chat-text-size;

71
src/components/Chat.vue
View file

@ -55,22 +55,19 @@
</div> </div>
<!-- Input area --> <!-- Input area -->
<div v-if="room" class="input-area flex-grow-0 flex-shrink-0"> <v-container v-if="room" fluid class="input-area-outer">
<!-- CONTACT IS TYPING --> <v-row class="ma-0 pa-0">
<div v-show="contactIsTyping" class="typing">Someone is typing...</div> <!-- CONTACT IS TYPING -->
<v-textarea <div class="typing">
ref="messageInput" {{ contactIsTyping ? "Someone is typing..." : "" }}
full-width </div>
v-model="currentInput" </v-row>
no-resize <v-row class="input-area-inner">
class="input-message" <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
placeholder="Send message" <label icon flat ref="attachmentLabel">
hide-details <v-btn icon @click="$refs.attachment.click()">
background-color="white" <v-icon>attachment</v-icon>
> </v-btn>
<template v-slot:prepend>
<label icon flat>
<v-icon>attachment</v-icon>
<input <input
ref="attachment" ref="attachment"
type="file" type="file"
@ -80,17 +77,32 @@
style="display: none" style="display: none"
/> />
</label> </label>
</template> </v-col>
</v-textarea>
<div align-self="end" class="text-right"> <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
<v-btn <v-textarea
elevation="0" height="undefined"
@click.stop="sendMessage" ref="messageInput"
:disabled="sendButtonDisabled" full-width
>Send</v-btn auto-grow
> rows="1"
</div> v-model="currentInput"
</div> 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"> <div v-if="currentImageInput">
<v-dialog v-model="currentImageInput" class="ma-0 pa-0" width="50%"> <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("Room.timeline", this.onEvent);
this.$matrix.on("RoomMember.typing", this.onUserTyping); this.$matrix.on("RoomMember.typing", this.onUserTyping);
this.chatContainerSize = this.$refs.chatContainerResizer.$el.clientHeight; this.chatContainerSize = this.$refs.chatContainerResizer.$el.clientHeight;
console.log("resize initial height: ", this.chatContainerSize);
}, },
destroyed() { destroyed() {
@ -335,11 +346,9 @@ export default {
* moving focus to the input field, we would still see the last message. Otherwise * moving focus to the input field, we would still see the last message. Otherwise
* if would be hidden behind the keyboard. * if would be hidden behind the keyboard.
*/ */
handleChatContainerResize({ width, height }) { handleChatContainerResize({ ignoredWidth, height }) {
console.log("resized", width, height);
const delta = height - this.chatContainerSize; const delta = height - this.chatContainerSize;
this.chatContainerSize = height; this.chatContainerSize = height;
console.log("resized delta " + delta);
const container = this.$refs.chatContainer; const container = this.$refs.chatContainer;
if (delta < 0) { if (delta < 0) {
container.scrollTop -= delta; container.scrollTop -= delta;