Make chat collapsable and expandable, make chat look a tiny bit nicer (still works like crap when it comes to scrolling)

This commit is contained in:
shpuld 2018-04-11 00:17:05 +03:00
parent 716e37d95c
commit f69a12a912
2 changed files with 46 additions and 10 deletions

View file

@ -2,7 +2,8 @@ const chatPanel = {
data () { data () {
return { return {
currentMessage: '', currentMessage: '',
channel: null channel: null,
collapsed: false
} }
}, },
computed: { computed: {
@ -12,8 +13,12 @@ const chatPanel = {
}, },
methods: { methods: {
submit (message) { submit (message) {
console.log(this.currentMessage)
this.$store.state.chat.channel.push('new_msg', {text: message}, 10000) this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
this.currentMessage = '' this.currentMessage = ''
},
togglePanel () {
this.collapsed = !this.collapsed
} }
} }
} }

View file

@ -1,35 +1,54 @@
<template> <template>
<div class="chat-panel"> <div class="chat-panel" v-if="this.collapsed">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading timeline-heading"> <div class="panel-heading timeline-heading chat-heading" @click.stop.prevent="togglePanel">
<div class="title"> <div class="title">
{{$t('chat.title')}} {{$t('chat.title')}}
<i class="icon-cancel" style="float: right;"></i>
</div> </div>
</div> </div>
<div class="chat-window" v-chat-scroll> <div class="chat-window" v-chat-scroll>
<div class="chat-message" v-for="message in messages" :key="message.id"> <div class="chat-message" v-for="message in messages" :key="message.id">
<span class="chat-avatar"> <span class="chat-avatar">
<img :src="message.author.avatar" /> <img :src="message.author.avatar" />
{{message.author.username}}:
</span> </span>
<div class="chat-content">
<router-link class="chat-name" :to="{ name: 'user-profile', params: { id: message.author.id } }">
{{message.author.username}}
</router-link>
<br>
<span class="chat-text"> <span class="chat-text">
{{message.text}} {{message.text}}
</span> </span>
</div> </div>
</div> </div>
</div>
<div class="chat-input"> <div class="chat-input">
<form @submit.prevent="submit(currentMessage)"> <form @submit.prevent="submit(currentMessage)">
<input v-model="currentMessage" type="text" > <textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<div v-else class="chat-panel">
<div class="panel panel-default">
<div class="panel-heading panel-footer timeline-heading chat-heading" @click.stop.prevent="togglePanel">
<div class="title">
{{$t('chat.title')}}
<i class="icon-plus-squared" style="float: right;"></i>
</div>
</div>
</div>
</div>
</template> </template>
<script src="./chat_panel.js"></script> <script src="./chat_panel.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.chat-heading {
cursor: pointer;
}
.chat-window { .chat-window {
max-height: 200px; max-height: 200px;
@ -37,17 +56,22 @@
overflow-x: hidden; overflow-x: hidden;
} }
.chat-name {
}
.chat-message { .chat-message {
display: flex;
padding: 0.2em 0.5em padding: 0.2em 0.5em
} }
.chat-avatar { .chat-avatar {
img { img {
height: 32px; height: 24px;
width: 32px; width: 24px;
border-radius: $fallback--avatarRadius; border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius); border-radius: var(--avatarRadius, $fallback--avatarRadius);
margin-right: 0.5em; margin-right: 0.5em;
margin-top: 0.25em;
} }
} }
@ -55,10 +79,17 @@
display: flex; display: flex;
form { form {
flex: auto; flex: auto;
display: flex;
input { input {
margin: 0.5em; margin: 0.5em;
width: fill-available; width: fill-available;
} }
textarea {
flex: 1;
margin: 0.6em;
min-height: 3.5em;
resize: none;
}
} }
} }
</style> </style>