ifd3f/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'feature/chat-styling-and-hiding' into 'develop'

Browse source 
Feature/chat styling and hiding

See merge request pleroma/pleroma-fe!224
This commit is contained in:
Shpuld Shpludson 2018-04-11 03:37:42 +00:00
commit 748e01d3e9
2 changed files with 43 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,8 @@ const chatPanel = {
data () { data () {
return { return {
currentMessage: '', currentMessage: '',
channel: null channel: null,
collapsed: false
} }
}, },
computed: { computed: {
@ -14,6 +15,9 @@ const chatPanel = {
submit (message) { submit (message) {
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
} }
} }
} }

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

@ -1,26 +1,40 @@
<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 class="chat-text">
{{message.text}}
</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">
{{message.text}}
</span>
</div>
</div> </div>
</div> </div>
<div class="chat-input"> <div class="chat-input">
<form @submit.prevent="submit(currentMessage)"> <textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
<input v-model="currentMessage" type="text" > </div>
</form> </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> </div>
</div> </div>
@ -30,6 +44,9 @@
<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,28 +54,32 @@
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;
} }
} }
.chat-input { .chat-input {
display: flex; display: flex;
form { textarea {
flex: auto; flex: 1;
input { margin: 0.6em;
margin: 0.5em; min-height: 3.5em;
width: fill-available; resize: none;
}
} }
} }
</style> </style>