akkoma-fe/src/components/chat_panel/chat_panel.vue

96 lines
2.3 KiB
Vue
Raw Normal View History

2017-12-05 10:02:41 +00:00
<template>
<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">
2018-01-26 14:11:34 +00:00
<div class="title">
{{$t('chat.title')}}
<i class="icon-cancel" style="float: right;"></i>
2018-01-26 14:11:34 +00:00
</div>
2017-12-05 10:02:41 +00:00
</div>
2018-01-26 14:11:34 +00:00
<div class="chat-window" v-chat-scroll>
2017-12-05 13:20:34 +00:00
<div class="chat-message" v-for="message in messages" :key="message.id">
2017-12-05 10:02:41 +00:00
<span class="chat-avatar">
<img :src="message.author.avatar" />
</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>
2017-12-05 10:02:41 +00:00
</div>
</div>
<div class="chat-input">
2017-12-05 11:09:54 +00:00
<form @submit.prevent="submit(currentMessage)">
<textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
2017-12-05 11:09:54 +00:00
</form>
2017-12-05 10:02:41 +00:00
</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>
2017-12-05 10:02:41 +00:00
</template>
2018-01-26 14:11:34 +00:00
<script src="./chat_panel.js"></script>
2017-12-05 10:02:41 +00:00
<style lang="scss">
@import '../../_variables.scss';
.chat-heading {
cursor: pointer;
}
.chat-window {
2018-04-07 16:30:27 +00:00
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.chat-name {
}
.chat-message {
display: flex;
2018-04-07 16:30:27 +00:00
padding: 0.2em 0.5em
}
.chat-avatar {
2018-04-07 16:30:27 +00:00
img {
height: 24px;
width: 24px;
2018-04-07 16:30:27 +00:00
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
margin-right: 0.5em;
margin-top: 0.25em;
2018-04-07 16:30:27 +00:00
}
}
.chat-input {
2018-04-07 16:30:27 +00:00
display: flex;
form {
flex: auto;
display: flex;
2018-04-07 16:30:27 +00:00
input {
margin: 0.5em;
width: fill-available;
}
textarea {
flex: 1;
margin: 0.6em;
min-height: 3.5em;
resize: none;
}
2018-04-07 16:30:27 +00:00
}
}
2017-12-05 10:02:41 +00:00
</style>