newMessage auto resize

topBanner
adb 4 years ago
parent e91ec65c58
commit 6849cf1a0f

@ -26,9 +26,7 @@
<message msg="und Kuchen :P" /> <message msg="und Kuchen :P" />
<div class="spacer" style="height: 1rem;"></div> <div class="spacer" style="height: 1rem;"></div>
</div> </div>
<div class="newMessageBanner"> <newMessage />
<input class="newMessageInput" placeholder="type a message ..." type="text"/>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -36,12 +34,14 @@
<script> <script>
import message from './components/message.vue'; import message from './components/message.vue';
import messageReceive from './components/messageReceive.vue'; import messageReceive from './components/messageReceive.vue';
import newMessage from './components/newMessage.vue';
export default { export default {
name: 'App', name: 'App',
components: { components: {
message, message,
messageReceive messageReceive,
newMessage
} }
} }
</script> </script>
@ -52,9 +52,6 @@ body{
} }
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
position: absolute; position: absolute;
color: #ffffff; color: #ffffff;
background-color: #1d1d1d; background-color: #1d1d1d;
@ -81,25 +78,6 @@ body{
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
} }
.newMessageBanner{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 4rem;
background-color: #1d1d1d;
border-radius: 1rem 1rem 0 0;
}
.newMessageInput{
position: absolute;
top: 0.5rem;
left: 2rem;
height: 3rem;
width: calc(100% - 7rem);
background-color: #fff0;
border: 0;
color: #fff;
}
@media (max-width: 55rem){ @media (max-width: 55rem){
.content{ .content{

@ -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>

@ -29,9 +29,9 @@ export default {
min-width: 5rem; min-width: 5rem;
max-width: calc(100% - 3rem); max-width: calc(100% - 3rem);
padding: 1rem; padding: 1rem;
right: 0rem; right: 0;
background-color: #42b983; background-color: #42b983;
border-radius: 1rem 1rem 0rem 1rem; border-radius: 1rem 1rem 0 1rem;
text-align: left; text-align: left;
} }
</style> </style>

@ -28,9 +28,9 @@ export default {
min-width: 5rem; min-width: 5rem;
max-width: calc(100% - 3rem); max-width: calc(100% - 3rem);
padding: 1rem; padding: 1rem;
left: 0rem; left: 0;
background-color: #42a7b9; background-color: #42a7b9;
border-radius: 1rem 1rem 1rem 0rem; border-radius: 1rem 1rem 1rem 0;
text-align: left; text-align: left;
} }
</style> </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…
Cancel
Save