Merge branch 'topBanner' into master

HomeChats
adb 4 years ago
commit 40cf3e9cca

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>

After

Width:  |  Height:  |  Size: 210 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path fill="#fff" d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>

After

Width:  |  Height:  |  Size: 350 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/></svg>

After

Width:  |  Height:  |  Size: 465 B

@ -28,7 +28,8 @@ name: "icon",
position: absolute; position: absolute;
height: 1.5rem; height: 1.5rem;
width: auto; width: auto;
top: 0.75rem; top: 50%;
left: 0.75rem; left: 50%;
transform: translate(-50%, -50%);
} }
</style> </style>

@ -1,8 +1,10 @@
<template> <template>
<div class="newMessageBanner"> <div class="newMessageBanner">
<label for="newMessageInput"></label> <label for="newMessageInput"></label>
<textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput" autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" /> <textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
<icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" /> autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
<icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;"
ic="./sym/ic_send_white_24px.svg" />
</div> </div>
</template> </template>
@ -30,7 +32,7 @@ export default {
id.style.height = `${id.scrollHeight}px` id.style.height = `${id.scrollHeight}px`
let msgContainer = document.getElementById("messagesContainer") let msgContainer = document.getElementById("messagesContainer")
msgContainer.style.height msgContainer.style.height
= `calc(100% - ${id.parentElement.clientHeight}px)` = `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
//msgContainer.scrollTo(0, msgContainer.scrollHeight) //msgContainer.scrollTo(0, msgContainer.scrollHeight)
} }
}, },
@ -76,4 +78,5 @@ export default {
vertical-align: middle; vertical-align: middle;
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
} }
</style> </style>

@ -0,0 +1,73 @@
<template>
<div class="topBanner">
<div>
<icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
<icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
<div id="container">
<div id="chatName">{{roomInfo.name}}</div>
<div id="users">{{roomInfo.user.length}} members</div>
</div>
<icon class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
</div>
</div>
</template>
<script>
import icon from '@/components/icon.vue';
export default {
name: "topBanner",
components:{
icon
},
data(){
return {
roomInfo: {
name: "open chat",
user: []
}
}
}
}
</script>
<style scoped>
.topBanner{
position: absolute;
width: 100%;
height: 3rem;
background-color: #1d1d1d;
box-shadow: 0 3px 10px #111;
}
.smallIcon{
top: 0.25rem;
background-color: #2d2d2d;
height: 2.5rem;
width: 2.5rem;
}
#icon-arrow{
position: absolute;
left: 1rem;
}
#picTop{
position: absolute;
left: 4rem;
background-color: #42a7b9;
}
#icon-menu{
position: absolute;
right: 1rem;
background-color: #2d2d2d;
}
#container{
position: absolute;
top: 0.55rem;
left: 7.5rem;
}
#chatName{
font-size: 1rem;
color: #ededed;
}
#users{
font-size: 0.75rem;
color: #9c9c9c;
}
</style>

@ -26,6 +26,7 @@
</div> </div>
</div> </div>
<newMessage /> <newMessage />
<topBanner />
</div> </div>
</template> </template>
@ -33,13 +34,15 @@
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'; import newMessage from '@/components/newMessage.vue';
import topBanner from "@/components/topBanner";
export default { export default {
name: 'chat', name: 'chat',
components: { components: {
message, message,
messageReceive, messageReceive,
newMessage newMessage,
topBanner
} }
} }
</script> </script>
@ -49,8 +52,8 @@ export default {
position: absolute; position: absolute;
margin: 0; margin: 0;
left: 0; left: 0;
top: 0; top: 3rem;
height: calc(100% - 4rem); height: calc(100% - 7rem);
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
} }

Loading…
Cancel
Save