From f69a12a912d425c9d2b4a456a0cbbb2378babd44 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 11 Apr 2018 00:17:05 +0300
Subject: [PATCH 1/3] Make chat collapsable and expandable, make chat look a
tiny bit nicer (still works like crap when it comes to scrolling)
---
src/components/chat_panel/chat_panel.js | 7 +++-
src/components/chat_panel/chat_panel.vue | 49 +++++++++++++++++++-----
2 files changed, 46 insertions(+), 10 deletions(-)
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index b146c5d9..afde7352 100644
--- 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: {
@@ -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
}
}
}
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 50bd0017..9339dfb6 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -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>
From 49aa2d5fb7e13398c2fde83966cb8ae2fe228008 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 11 Apr 2018 00:19:28 +0300
Subject: [PATCH 2/3] cleanup
---
src/components/chat_panel/chat_panel.js | 1 -
src/components/chat_panel/chat_panel.vue | 22 ++++++----------------
2 files changed, 6 insertions(+), 17 deletions(-)
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index afde7352..d528d0a1 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -13,7 +13,6 @@ const chatPanel = {
},
methods: {
submit (message) {
- console.log(this.currentMessage)
this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
this.currentMessage = ''
},
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 9339dfb6..969088f4 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -24,9 +24,7 @@
</div>
</div>
<div class="chat-input">
- <form @submit.prevent="submit(currentMessage)">
- <textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
- </form>
+ <textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
</div>
</div>
</div>
@@ -77,19 +75,11 @@
.chat-input {
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;
- }
+ textarea {
+ flex: 1;
+ margin: 0.6em;
+ min-height: 3.5em;
+ resize: none;
}
}
</style>
From 2258c9c1e7a2d8d6919e2514b5a8cdda74a4468e Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 11 Apr 2018 00:20:42 +0300
Subject: [PATCH 3/3] Make collapsed-state hide chat and not the wrong way
around
---
src/components/chat_panel/chat_panel.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 969088f4..46e011dc 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -1,5 +1,5 @@
<template>
- <div class="chat-panel" v-if="this.collapsed">
+ <div class="chat-panel" v-if="!this.collapsed">
<div class="panel panel-default">
<div class="panel-heading timeline-heading chat-heading" @click.stop.prevent="togglePanel">
<div class="title">