adb
/
matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Home V0.1

Browse Source
HomeChats
techcrafter 4 years ago
parent cfa47f5ddc
commit 1a28879299
7 changed files with 264 additions and 3 deletions
Show Stats Download Patch File Download Diff File

63
src/components/chatInformation.vue
Unescape Escape View File

@ -25,6 +25,69 @@
<div class="status">Online</div>
</div>
</div>
<div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="userName">Alban</div>
<div class="status">Online</div>
</div>
</div>
<div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="userName">Alban</div>
<div class="status">Online</div>
</div>
</div>
<div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="userName">Alban</div>
<div class="status">Online</div>
</div>
</div>
<div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="userName">Alban</div>
<div class="status">Online</div>
</div>
</div>
<div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="userName">Alban</div>
<div class="status">Online</div>
</div>
</div><div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="userName">Alban</div>
<div class="status">Online</div>
</div>
</div><div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="userName">Alban</div>
<div class="status">Online</div>
</div>
</div><div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="userName">Alban</div>
<div class="status">Online</div>
</div>
</div><div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="userName">Alban</div>
<div class="status">Online</div>
</div>
</div>
</div>
</div>
</template>

94
src/components/room.vue
Unescape Escape View File

@ -0,0 +1,94 @@
<template>
<div id="chatInformation">
<div class="box">
<div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="roomName">{{roomName}}</div>
<div class="status">{{onlineUsers}} Online</div>
</div>
</div>
<div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="roomName">Open Chatroom 2</div>
<div class="status">3 Online</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "room",
props: {
roomName: String,
onlineUsers: String
},
methods:{
showChatInfo(){
document.getElementById("chatInformation").style.display = 'block';
}
},
data(){
return {
roomInfo: {
name: "open chat",
user: []
}
}
}
}
</script>
<style scoped>
#chatInformation{
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 3rem;
width: 100%;
height: calc(100% - 3rem);
background-color: #1d1d1d;
box-shadow: 6px 6px 20px #111;
text-align: center;
}
.box{
position: relative;
background-color: #2d2d2d;
overflow: auto;
max-height: 100%;
}
.contentBox{
margin-top: 0.2rem;
height: 3.2rem;
border-bottom: 2px solid #9c9c9c ;
padding: 0.2rem;
max-height: 48px;
}
.picBox{
text-align: center;
background-color: #00BCD4;
width: 3rem;
height:3rem;
border-radius: 2rem;
}
.picPlaceholder{
padding-top: 0.001rem;
margin-bottom: 1rem;
}
.information{
position: relative;
text-align: left;
margin-top: -2.4rem;
margin-left: 3.7rem;
}
.roomName{
color: white;
}
.status{
font-size: 0.8rem;
color: #9c9c9c;
}
</style>

2
src/components/topBanner.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<div class="topBanner">
<div>
<icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
<router-link to="/login"><icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" /></router-link>
<icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
<div id="container">
<div id="chatName">{{roomInfo.name}}</div>

71
src/components/topBannerHome.vue
Unescape Escape View File

@ -0,0 +1,71 @@
<template>
<div class="topBannerHome">
<div>
<router-link to="/login"><icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" /></router-link>
<div id="container">
<div id="chatName">{{roomInfo.name}}</div>
</div>
<icon v-on:click.native="showChatInfo()" class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
</div>
</div>
</template>
<script>
import icon from '@/components/icon.vue';
export default {
name: "topBannerHome",
components:{
icon
},
methods:{
showChatInfo(){
document.getElementById("chatInformation").style.display = 'block';
}
},
data(){
return {
roomInfo: {
name: "open chat",
user: []
}
}
}
}
</script>
<style scoped>
.topBannerHome{
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;
}
#icon-menu{
position: absolute;
right: 1rem;
background-color: #2d2d2d;
}
#container{
position: absolute;
top: 0.5rem;
left: 4.2rem;
background-color: #2d2d2d;
border-radius: 2rem;
padding-left: 0.4rem;
padding-right: 0.4rem;
}
#chatName{
font-size: 1.8rem;
color: #ededed;
}
</style>

6
src/main.js
Unescape Escape View File

@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
import App from './App.vue'
import login from './views/login.vue'
import chat from './views/chat.vue'
import home from './views/home.vue'
Vue.config.productionTip = false
Vue.use(VueRouter)
@ -23,6 +24,11 @@ const router = new VueRouter({
path: '/chat',
name: 'chat',
component: chat
},
{
path: '/room',
name: 'room',
component: home
}
]
})

4
src/views/chat.vue
Unescape Escape View File

@ -35,8 +35,8 @@
import message from '@/components/message.vue';
import messageReceive from '@/components/messageReceive.vue';
import newMessage from '@/components/newMessage.vue';
import topBanner from "@/components/topBanner";
import chatInformation from "@/components/chatInformation";
import topBanner from "@/components/topBanner.vue";
import chatInformation from "@/components/chatInformation.vue";
export default {
name: 'chat',

27
src/views/home.vue
Unescape Escape View File

@ -0,0 +1,27 @@
<template>
<div>
<topBannerHome />
<room roomName="Test" onlineUsers="5" />
<room roomName="Test2" onlineUsers="5" />
</div>
</template>
<script>
import topBannerHome from '@/components/topBannerHome'
import room from '@/components/room'
export default {
name: 'home',
components: {
topBannerHome,
room
},
props:{
roomName: String,
onlineUsers: String
}
}
</script>
<style scoped>
</style>
Write Preview
Loading…
Cancel
Save