itepechi/akkoma-fe
1
0
Fork 0
Code Issues Pull requests Releases 1 Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/chat_panel/chat_panel.js
View file

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

49
src/components/chat_panel/chat_panel.vue
View file

@ -1,35 +1,54 @@
<template>
<div class="chat-panel">
<div class="chat-panel" v-if="this.collapsed">
<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">
{{$t('chat.title')}}
<i class="icon-cancel" style="float: right;"></i>
</div>
</div>
<div class="chat-window" v-chat-scroll>
<div class="chat-message" v-for="message in messages" :key="message.id">
<span class="chat-avatar">
<img :src="message.author.avatar" />
{{message.author.username}}:
</span>
<span class="chat-text">
{{message.text}}
</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">
{{message.text}}
</span>
</div>
</div>
</div>
<div class="chat-input">
<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>
</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>
<script src="./chat_panel.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.chat-heading {
cursor: pointer;
}
.chat-window {
max-height: 200px;
@ -37,17 +56,22 @@
overflow-x: hidden;
}
.chat-name {
}
.chat-message {
display: flex;
padding: 0.2em 0.5em
}
.chat-avatar {
img {
height: 32px;
width: 32px;
height: 24px;
width: 24px;
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
margin-right: 0.5em;
margin-top: 0.25em;
}
}
@ -55,10 +79,17 @@
display: flex;
form {
flex: auto;
display: flex;
input {
margin: 0.5em;
width: fill-available;
}
textarea {
flex: 1;
margin: 0.6em;
min-height: 3.5em;
resize: none;
}
}
}
</style>