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

149 lines
2.9 KiB
Vue
Raw Normal View History

2017-12-05 10:02:41 +00:00
<template>
2019-07-05 07:17:44 +00:00
<div
2019-07-06 21:54:17 +00:00
v-if="!collapsed || !floating"
2019-07-05 07:17:44 +00:00
class="chat-panel"
>
<div class="panel panel-default">
2019-07-05 07:17:44 +00:00
<div
class="panel-heading timeline-heading"
:class="{ 'chat-heading': floating }"
@click.stop.prevent="togglePanel"
>
2018-01-26 14:11:34 +00:00
<div class="title">
{{ $t('shoutbox.title') }}
2020-10-20 21:01:28 +00:00
<FAIcon
2019-07-05 07:17:44 +00:00
v-if="floating"
2020-10-20 18:18:23 +00:00
icon="times"
class="close-icon"
2019-07-05 07:17:44 +00:00
/>
2018-01-26 14:11:34 +00:00
</div>
2017-12-05 10:02:41 +00:00
</div>
<div class="chat-window">
2019-07-05 07:17:44 +00:00
<div
v-for="message in messages"
:key="message.id"
class="chat-message"
>
2017-12-05 10:02:41 +00:00
<span class="chat-avatar">
2019-07-05 07:17:44 +00:00
<img :src="message.author.avatar">
2017-12-05 10:02:41 +00:00
</span>
<div class="chat-content">
<router-link
class="chat-name"
2019-07-05 07:17:44 +00:00
:to="userProfileLink(message.author)"
>
{{ message.author.username }}
</router-link>
<br>
<span class="chat-text">
2019-07-05 07:17:44 +00:00
{{ message.text }}
</span>
</div>
2017-12-05 10:02:41 +00:00
</div>
</div>
<div class="chat-input">
2019-07-05 07:17:44 +00:00
<textarea
v-model="currentMessage"
class="chat-input-textarea"
rows="1"
@keyup.enter="submit(currentMessage)"
/>
2017-12-05 10:02:41 +00:00
</div>
</div>
</div>
2019-07-05 07:17:44 +00:00
<div
v-else
class="chat-panel"
>
<div class="panel panel-default">
2019-07-05 07:17:44 +00:00
<div
class="panel-heading stub timeline-heading chat-heading"
@click.stop.prevent="togglePanel"
>
<div class="title">
2020-10-20 21:31:16 +00:00
<FAIcon
class="icon"
icon="bullhorn"
/>
{{ $t('shoutbox.title') }}
</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';
.floating-chat {
position: fixed;
right: 0px;
bottom: 0px;
z-index: 1000;
max-width: 25em;
}
2020-05-07 13:10:53 +00:00
.chat-panel {
.chat-heading {
cursor: pointer;
2020-10-20 21:01:28 +00:00
.icon {
2020-05-07 13:10:53 +00:00
color: $fallback--text;
color: var(--text, $fallback--text);
margin-right: 0.5em;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
2020-05-07 13:10:53 +00:00
}
}
2020-05-07 13:10:53 +00:00
.chat-window {
overflow-y: auto;
overflow-x: hidden;
max-height: 20em;
}
2020-05-07 13:10:53 +00:00
.chat-window-container {
height: 100%;
}
2020-05-07 13:10:53 +00:00
.chat-message {
display: flex;
padding: 0.2em 0.5em
2018-04-07 16:30:27 +00:00
}
2020-05-07 13:10:53 +00:00
.chat-avatar {
img {
height: 24px;
width: 24px;
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
}
2020-05-07 13:10:53 +00:00
.chat-input {
display: flex;
2020-05-07 13:10:53 +00:00
textarea {
flex: 1;
margin: 0.6em;
min-height: 3.5em;
resize: none;
}
}
.chat-panel {
.title {
display: flex;
justify-content: space-between;
}
}
}
2017-12-05 10:02:41 +00:00
</style>