newMessage auto resize
parent
e91ec65c58
commit
6849cf1a0f
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="iconContainer" >
|
||||
<img class="icon" :src="ic" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "icon",
|
||||
props: {
|
||||
ic: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.iconContainer{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 1.5rem;
|
||||
background-color: #42a7b9;
|
||||
box-shadow: 3px 3px 10px #111;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.icon{
|
||||
position: absolute;
|
||||
height: 1.5rem;
|
||||
width: auto;
|
||||
top: 0.75rem;
|
||||
left: 0.75rem;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="newMessageBanner">
|
||||
<textarea name="input" id="newMessageInput" class="newMessageInput" placeholder="type a message ..." type="text" v-model="content" />
|
||||
<icon style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icon from './icon.vue';
|
||||
|
||||
export default {
|
||||
name: "newMessage",
|
||||
components: {
|
||||
icon
|
||||
},
|
||||
props: {
|
||||
content: String,
|
||||
},
|
||||
mounted() {
|
||||
ResizeListener(document.getElementById("newMessageInput"));
|
||||
}
|
||||
}
|
||||
|
||||
export const ResizeListener = (id) => {
|
||||
id.addEventListener("input", resize);
|
||||
}
|
||||
function resize() {
|
||||
this.style.height = "auto";
|
||||
this.style.height = `${this.scrollHeight}px`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.newMessageBanner{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
min-height: 4rem;
|
||||
background-color: #1d1d1d;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
.newMessageInput{
|
||||
position: relative;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
left: 2rem;
|
||||
min-height: 3rem;
|
||||
max-height: 14rem;
|
||||
width: calc(100% - 7rem);
|
||||
background-color: #fff0;
|
||||
border: 0 solid #fff0;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
resize: none;
|
||||
vertical-align: middle;
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,4 @@
|
||||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
After Width: | Height: | Size: 201 B |
Loading…
Reference in New Issue