commit: 748e01d3e966f94aad7c28478363d5b84e4e9977
parent: 020d2f83f9fe2290bd74dd118f7e796a415439a4
Author: Shpuld Shpludson <shp@cock.li>
Date: Wed, 11 Apr 2018 03:37:42 +0000
Merge branch 'feature/chat-styling-and-hiding' into 'develop'
Feature/chat styling and hiding
See merge request pleroma/pleroma-fe!224
Diffstat:
2 files changed, 43 insertions(+), 18 deletions(-)
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
@@ -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
}
}
}
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
@@ -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>