aboutsummaryrefslogtreecommitdiff
path: root/src/components/chat/chat.vue
diff options
context:
space:
mode:
authorRoger Braun <rbraun@Bobble.local>2017-12-05 11:02:41 +0100
committerRoger Braun <rbraun@Bobble.local>2017-12-05 11:02:41 +0100
commit0e51fac2b24c752513afe65736e98eb5fb5ec3af (patch)
tree07cb3308f4c9bae81acb377168f11c02add13463 /src/components/chat/chat.vue
parentfbee80474baf3bfc41656268e22395983811f2f7 (diff)
Add missing component code.
Diffstat (limited to 'src/components/chat/chat.vue')
-rw-r--r--src/components/chat/chat.vue49
1 files changed, 49 insertions, 0 deletions
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
new file mode 100644
index 00000000..9d3ab39c
--- /dev/null
+++ b/src/components/chat/chat.vue
@@ -0,0 +1,49 @@
+<template>
+ <div class="chat-panel panel panel-default">
+ <div class="panel-heading timeline-heading base02-background base04">
+ <div class="title">
+ {{$t('chat.title')}}
+ </div>
+ </div>
+ <div class="panel-body base01-background">
+ <div class="chat-window">
+ <div class="chat-message" v-for="message in messages">
+ <span class="chat-avatar">
+ <img :src="message.author.avatar" />
+ {{message.author.username}}:
+ </span>
+ <span class="chat-text">
+ {{message.text}}
+ </span>
+ </div>
+ </div>
+ <div class="chat-input">
+ <input v-model="currentMessage" type="text" @keyup.enter="submit(currentMessage)">
+ </div>
+ </div>
+ </div>
+</template>
+
+<script src="./chat.js"></script>
+
+
+<style lang="scss">
+ .chat-message {
+ padding: 0.2em 0.5em
+ }
+ .chat-avatar {
+ img {
+ height: 32px;
+ width: 32px;
+ border-radius: 5px;
+ margin-right: 0.5em;
+ }
+ }
+ .chat-input {
+ display: flex;
+ input {
+ flex: auto;
+ margin: 0.5em;
+ }
+ }
+</style>