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

Style send button

Browse source
This commit is contained in:
N-Pex 2020-12-10 12:00:07 +01:00
parent 3530f4a162
commit c667a847cc
2 changed files with 8 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -87,7 +87,7 @@ $chat-text-size: 0.7pt;
} }
.input-area-outer { .input-area-outer {
background-color: #e2e2e2; background-color: #ffffff;
margin: 0; margin: 0;
padding-left: 2 * $chat-standard-padding-s; padding-left: 2 * $chat-standard-padding-s;
padding-right: 2 * $chat-standard-padding-s; padding-right: 2 * $chat-standard-padding-s;
@ -102,7 +102,8 @@ $chat-text-size: 0.7pt;
} }
.input-area-inner { .input-area-inner {
background-color: white; background-color: white;
border-radius: $chat-standard-padding-s; border: 1px solid #d4d4d4;
border-radius: 32px;
} }
.input-area-button { .input-area-button {
margin: 0; margin: 0;

10
src/components/Chat.vue
View file

@ -63,11 +63,11 @@
{{ typingMembersString }} {{ typingMembersString }}
</div> </div>
</v-row> </v-row>
<v-row class="input-area-inner"> <v-row class="input-area-inner align-center">
<v-col class="input-area-button text-center flex-grow-0 flex-shrink-1"> <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
<label icon flat ref="attachmentLabel"> <label icon flat ref="attachmentLabel">
<v-btn icon @click="$refs.attachment.click()"> <v-btn icon large color="black" @click="$refs.attachment.click()">
<v-icon>attachment</v-icon> <v-icon x-large>add_circle_outline</v-icon>
</v-btn> </v-btn>
<input <input
ref="attachment" ref="attachment"
@ -98,8 +98,8 @@
</v-col> </v-col>
<v-col class="input-area-button text-center flex-grow-0 flex-shrink-1"> <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
<v-btn icon @click.stop="sendMessage" :disabled="sendButtonDisabled"> <v-btn fab small elevation="0" color="black" @click.stop="sendMessage" :disabled="sendButtonDisabled">
<v-icon>send</v-icon> <v-icon color="white">arrow_upward</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
</v-row> </v-row>