sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 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 () {
return {
currentMessage: '',
channel: null
channel: null,
collapsed: false
}
},
computed: {
@ -14,6 +15,9 @@ const chatPanel = {
submit (message) {
this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
this.currentMessage = ''
},
togglePanel () {
this.collapsed = !this.collapsed
}
}
}

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

@ -1,26 +1,40 @@
<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" >
</form>
<textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
</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>
@ -30,6 +44,9 @@
<style lang="scss">
@import '../../_variables.scss';
.chat-heading {
cursor: pointer;
}
.chat-window {
max-height: 200px;
@ -37,28 +54,32 @@
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;
}
}
.chat-input {
display: flex;
form {
flex: auto;
input {
margin: 0.5em;
width: fill-available;
}
textarea {
flex: 1;
margin: 0.6em;
min-height: 3.5em;
resize: none;
}
}
</style>