Merge branch 'restructure'
# Conflicts: # src/components/chatInformation.vueadd-admin-interface
commit
e52ea62fe3
@ -0,0 +1,35 @@
|
||||
module.exports = {
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es6": true
|
||||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:vue/essential"
|
||||
],
|
||||
"globals": {
|
||||
"Atomics": "readonly",
|
||||
"SharedArrayBuffer": "readonly"
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2018,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"vue"
|
||||
],
|
||||
"rules": {
|
||||
"indent": [
|
||||
"warn",
|
||||
2
|
||||
],
|
||||
"linebreak-style": [
|
||||
"error",
|
||||
"unix"
|
||||
],
|
||||
"quotes": [
|
||||
"warn",
|
||||
"single"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="timeline">
|
||||
<div class="timeGroup"
|
||||
v-for="timeGroup in splitArray(timeline,obj => getDate(obj.event.origin_server_ts),obj => obj.event)"
|
||||
:key="timeGroup[0].origin_server_ts"
|
||||
>
|
||||
<div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div>
|
||||
<div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
|
||||
<div class="thumbnailContainer">
|
||||
<div class="filler"></div>
|
||||
<userThumbnail
|
||||
v-if="group[0].sender !== user && groupTimeline"
|
||||
:fallback="group[0].sender"
|
||||
class="userThumbnail"
|
||||
:mxcURL="getUser(group[0].sender).avatarUrl"
|
||||
:size="2"
|
||||
:title="group[0].sender"
|
||||
/>
|
||||
</div>
|
||||
<div :class="groupTimeline?'indent username':'username'"
|
||||
v-if="group[0].sender !== user && groupTimeline">{{getUser(group[0].sender).displayName || group[0].sender}}
|
||||
</div>
|
||||
<div :class="groupTimeline?'indent event':'event'"
|
||||
v-for="event in group" :key="event.origin_server_ts"
|
||||
:title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
|
||||
>
|
||||
<message v-if="event.content.msgtype==='m.text'"
|
||||
:type="event.sender === user?'send':'receive'"
|
||||
:msg=event.content.body :time=getTime(event.origin_server_ts)
|
||||
/>
|
||||
<div v-else-if="event.type==='m.room.member'" class="info">{{membershipEvents[event.content.membership]}}</div>
|
||||
<div v-else class="info">unknown event</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import message from "@/components/message";
|
||||
import userThumbnail from "@/components/userThumbnail";
|
||||
import {matrix} from "@/main";
|
||||
import splitArray from "@/lib/splitArray";
|
||||
import {getDate, getTime} from "@/lib/getTimeStrings";
|
||||
|
||||
export default {
|
||||
name: 'eventGroup',
|
||||
components: {
|
||||
message,
|
||||
userThumbnail
|
||||
},
|
||||
props: {
|
||||
timeline: Array,
|
||||
user: String,
|
||||
groupTimeline: Boolean
|
||||
},
|
||||
methods: {
|
||||
getUser(userId) {
|
||||
return matrix.client.getUser(userId);
|
||||
},
|
||||
splitArray,
|
||||
getDate,
|
||||
getTime
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
membershipEvents:{
|
||||
invite: 'was invented',
|
||||
join: 'joined the room',
|
||||
leave: 'left the room',
|
||||
ban: 'was banned'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.timeline{
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
.timeGroup {
|
||||
.time {
|
||||
top: 0.25rem;
|
||||
position: sticky;
|
||||
z-index: 100;
|
||||
background-color: #2d2d2d;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
width: fit-content;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.eventGroup {
|
||||
position: relative;
|
||||
width: calc(100% - 1rem);
|
||||
height: fit-content;
|
||||
margin-top: 0.75rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
.thumbnailContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
.filler {
|
||||
height: calc(100% - 2rem);
|
||||
}
|
||||
.userThumbnail {
|
||||
position: sticky;
|
||||
bottom: 0.5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
.username{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.event{
|
||||
.info{
|
||||
font-style: italic;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
.indent{
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,46 +1,47 @@
|
||||
<template>
|
||||
<img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail" />
|
||||
<div v-else class="userThumbnail">
|
||||
<p>{{username?username.substr(0,2):userId.substr(1,2)}}</p>
|
||||
</div>
|
||||
<img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail image"/>
|
||||
<Identicon v-else :value="fallback" :theme="'jdenticon'" :size="this.getFontSize()*this.size" class="userThumbnail identicon"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import parseMXC from '@modular-matrix/parse-mxc';
|
||||
import matrix from '@/matrix.js';
|
||||
import {matrix} from "@/main";
|
||||
import Identicon from '@vue-polkadot/vue-identicon';
|
||||
|
||||
export default {
|
||||
name: "userThumbnail.vue",
|
||||
components: {
|
||||
Identicon
|
||||
},
|
||||
props: {
|
||||
mxcURL: String,
|
||||
username: String,
|
||||
userId: String,
|
||||
width: Number,
|
||||
height: Number,
|
||||
resizeMethod: String
|
||||
fallback: String,
|
||||
homeserver: String,
|
||||
size: Number
|
||||
},
|
||||
methods: {
|
||||
thumbnailUrl(){
|
||||
let mxc = parseMXC.parse(this.mxcURL);
|
||||
return `${this.homeserver}/_matrix/media/v1/thumbnail/${mxc.homeserver}/${mxc.id}?width=${this.width}&height=${this.height}&method=${this.resizeMethod}`;
|
||||
return `${this.homeserver||matrix.baseUrl}/_matrix/media/v1/thumbnail/${
|
||||
mxc.homeserver}/${mxc.id}?width=${this.imageSize}&height=${this.imageSize}&method=${this.resizeMethod}`;
|
||||
},
|
||||
getFontSize(){
|
||||
return window.getComputedStyle(document.body,null).fontSize.split("px", 1)||16;
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
homeserver: matrix.data().session.baseUrl
|
||||
resizeMethod: 'scale',
|
||||
imageSize: 128
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.userThumbnail{
|
||||
background-color: #42a7b9;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
img.userThumbnail{
|
||||
border-radius: 50%;
|
||||
background-color: unset;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,46 @@
|
||||
export class cookieHandler {
|
||||
constructor() {
|
||||
this.cookies = {};
|
||||
this.reload();
|
||||
this.expires = undefined;
|
||||
this.SameSite = 'Strict';
|
||||
}
|
||||
getCookies(){
|
||||
return this.cookies;
|
||||
}
|
||||
setCookie(cookies){
|
||||
Object.keys(cookies).forEach(key => {
|
||||
this.cookies[key] = cookies[key];
|
||||
})
|
||||
}
|
||||
parseCookie(string){
|
||||
let cookies = {};
|
||||
string.replace(/ /g, '').split(';').forEach(cookie => {
|
||||
let arr = cookie.split('=');
|
||||
cookies[arr[0]] = arr[1];
|
||||
})
|
||||
return cookies;
|
||||
}
|
||||
reload(){
|
||||
if (document.cookie) this.cookies = this.parseCookie(document.cookie);
|
||||
console.log('cookie loaded')
|
||||
console.log(this.cookies);
|
||||
}
|
||||
store(){
|
||||
Object.keys(this.cookies).forEach(key => {
|
||||
document.cookie = `${key}=${this.cookies[key]}; expires=${this.expires}; SameSite=${this.SameSite}; Secure;`;
|
||||
});
|
||||
console.log('cookie stored');
|
||||
console.log(this.cookies);
|
||||
}
|
||||
toString(cookies = this.cookies){
|
||||
let string = '';
|
||||
Object.keys(cookies).forEach(key => {
|
||||
string += `${key}=${cookies[key]}; `;
|
||||
})
|
||||
return string;
|
||||
}
|
||||
setExpire(days){
|
||||
this.expires = new Date(Date.now() + 86400 * 10000 * days);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
export function getTime(time) {
|
||||
let date = new Date(time);
|
||||
return `${date.getHours()}:${(date.getMinutes() < 10) ? '0' : ''}${date.getMinutes()}`;
|
||||
}
|
||||
|
||||
export function getDate(time) {
|
||||
let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
let date = new Date(time);
|
||||
return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
import matrix from 'matrix-js-sdk';
|
||||
|
||||
export class MatrixHandler {
|
||||
constructor(clientDisplayName = 'matrix-chat') {
|
||||
this.clientDisplayName = clientDisplayName;
|
||||
this.accessToken;
|
||||
this.client = undefined;
|
||||
this.rooms = [];
|
||||
this.loading = undefined;
|
||||
this.user = undefined;
|
||||
this.baseUrl = undefined;
|
||||
}
|
||||
login(user, password, baseUrl, onError, callback = ()=>{}){
|
||||
if (this.client){ console.log('there is already an active session'); return; }
|
||||
this.client = new matrix.createClient({
|
||||
baseUrl: baseUrl
|
||||
});
|
||||
this.client.login('m.login.password', {
|
||||
user: user,
|
||||
password: password,
|
||||
initial_device_display_name: this.clientDisplayName,
|
||||
}).then((response) => {
|
||||
if (response.error) {
|
||||
this.logout();
|
||||
console.log(`login error => ${response.error}`);
|
||||
onError(response.error);
|
||||
}
|
||||
if (response.access_token){
|
||||
console.log(`access token => ${response.access_token}`);
|
||||
callback(response.access_token);
|
||||
this.user = user;
|
||||
this.baseUrl = baseUrl;
|
||||
this.startSync()
|
||||
}
|
||||
}).catch(error => {
|
||||
this.logout();
|
||||
console.log(error);
|
||||
onError(error.toString());
|
||||
})
|
||||
}
|
||||
tokenLogin(baseUrl, accessToken, userId){
|
||||
if (this.client){ console.log('there is already an active session'); return; }
|
||||
this.client = new matrix.createClient({baseUrl, accessToken, userId});
|
||||
this.user = userId;
|
||||
this.baseUrl = baseUrl;
|
||||
this.startSync();
|
||||
}
|
||||
logout(){
|
||||
this.client.stopClient();
|
||||
this.client = undefined;
|
||||
}
|
||||
startSync(callback = ()=>{}){
|
||||
this.loading = true;
|
||||
this.client.startClient();
|
||||
this.client.once('sync', (state) => {
|
||||
console.log(state);
|
||||
this.rooms = this.client.getRooms();
|
||||
console.log(this.rooms)
|
||||
this.loading = false;
|
||||
callback();
|
||||
});
|
||||
this.client.on('event', (event) => {
|
||||
if (event.getType() === 'm.room.create') {
|
||||
console.log(event)
|
||||
}
|
||||
})
|
||||
}
|
||||
async sendEvent(msg, roomId){
|
||||
await this.client.sendEvent(roomId, msg.type, msg.content, '').then(() => {
|
||||
console.log('message sent successfully');
|
||||
}).catch((err) => {
|
||||
console.log(`error while sending message => ${err}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
export default function splitArray(arr, key, get=obj=>obj){
|
||||
let payload = [[]];
|
||||
arr.forEach((obj, i) => {
|
||||
let nextObj = arr[i+1];
|
||||
payload[payload.length-1].push(get(obj));
|
||||
if (!nextObj) return payload;
|
||||
if (key(obj) !== key(nextObj)) payload.push([]);
|
||||
})
|
||||
return payload;
|
||||
}
|
||||
@ -1,81 +1,26 @@
|
||||
import Vue from "vue"
|
||||
import VueRouter from "vue-router"
|
||||
import App from "./App.vue"
|
||||
import login from "./views/login.vue"
|
||||
import chat from "./views/chat.vue"
|
||||
import rooms from "./views/rooms.vue"
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import App from './App.vue'
|
||||
import {router} from './router.js'
|
||||
import {MatrixHandler} from './lib/matrixHandler.js'
|
||||
import {cookieHandler} from './lib/cookieHandler.js';
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(VueRouter)
|
||||
Vue.config.productionTip = false;
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const router = new VueRouter({
|
||||
routes: [
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: "/chat/*",
|
||||
name: "chat",
|
||||
component: chat
|
||||
},
|
||||
{
|
||||
path: "/rooms/*",
|
||||
name: "room",
|
||||
component: rooms
|
||||
},
|
||||
{
|
||||
path: "/rooms",
|
||||
name: "rooms",
|
||||
component: rooms
|
||||
}
|
||||
]
|
||||
})
|
||||
export let matrix = new MatrixHandler();
|
||||
|
||||
let chatroom = {
|
||||
name: "open chat",
|
||||
user: [],
|
||||
username: "you",
|
||||
messages: []
|
||||
}
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
chatroom: chatroom
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
error(msg){
|
||||
show_error(msg)
|
||||
},
|
||||
router(route){router.push(route)}
|
||||
}
|
||||
let cookie = new cookieHandler().getCookies();
|
||||
if (cookie && cookie.baseUrl && cookie.accessToken && cookie.userId) {
|
||||
matrix.tokenLogin(cookie.baseUrl, cookie.accessToken, cookie.userId);
|
||||
}
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
router,
|
||||
template: "<App/>",
|
||||
components: {App},
|
||||
data(){
|
||||
return {
|
||||
chatroom: chatroom
|
||||
}
|
||||
}
|
||||
}).$mount("#app")
|
||||
|
||||
function element(id){ return document.getElementById(id)}
|
||||
function show_error(msg) {
|
||||
let error_style = element("errorBox").style
|
||||
element("errorMessage").innerText = msg
|
||||
error_style.display = "block"
|
||||
error_style.animation = "slide-from-left alternate 0.2s"
|
||||
setTimeout(() => {error_style.animation = ""}, 200)
|
||||
}
|
||||
el: '#app',
|
||||
router,
|
||||
template: '<App/>',
|
||||
components: {App},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}).$mount('#app');
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
import VueRouter from 'vue-router';
|
||||
import login from '@/views/login';
|
||||
import chat from '@/views/chat';
|
||||
import rooms from '@/views/rooms';
|
||||
|
||||
export const router = new VueRouter({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/chat/*',
|
||||
name: 'chat',
|
||||
component: chat
|
||||
},
|
||||
{
|
||||
path: '/rooms/*',
|
||||
name: 'room',
|
||||
component: rooms
|
||||
},
|
||||
{
|
||||
path: '/rooms',
|
||||
name: 'rooms',
|
||||
component: rooms
|
||||
}
|
||||
]
|
||||
})
|
||||
@ -1,103 +1,112 @@
|
||||
<template>
|
||||
<div>
|
||||
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
||||
<div id="messages" class="messages">
|
||||
<p v-if="session.currentRoom.messages.length === 0" class="info">this room is empty</p>
|
||||
<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts">
|
||||
<div v-if="i===0 || getDate(session.currentRoom.messages[i-1].origin_server_ts)!==getDate(message.origin_server_ts)"
|
||||
style="margin-left: 2rem; margin-top: 1rem" class="info">{{getDate(message.origin_server_ts)}}
|
||||
</div>
|
||||
<div v-if="(message.sender !== session.user) && (i===0 || session.currentRoom.messages[i-1].sender!==message.sender)"
|
||||
style="margin-left: 2rem; margin-top: 1rem">{{message.sender}}
|
||||
</div>
|
||||
<message :msgClass="message.sender === session.user?'messageSend':'messageReceive'"
|
||||
:msg=message.content.body :time=getTime(message.origin_server_ts) />
|
||||
</div>
|
||||
<div ref="chatContainer" class="chatContainer">
|
||||
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
||||
<div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
|
||||
<p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
|
||||
<timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user"/>
|
||||
</div>
|
||||
<icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
||||
</div>
|
||||
<newMessage />
|
||||
<icon v-if="showScrollBtn" v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
||||
<topBanner />
|
||||
<newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
|
||||
<topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import message from '@/components/message.vue';
|
||||
import newMessage from '@/components/newMessage.vue';
|
||||
import topBanner from '@/components/topBanner.vue';
|
||||
import main from '@/main.js';
|
||||
import Icon from "@/components/icon";
|
||||
import matrix from '@/matrix.js';
|
||||
import Icon from '@/components/icon';
|
||||
import {matrix} from '@/main';
|
||||
import splitArray from '@/lib/splitArray.js'
|
||||
import timeline from '@/components/timeline';
|
||||
|
||||
export default {
|
||||
name: 'chat',
|
||||
components: {
|
||||
timeline,
|
||||
Icon,
|
||||
message,
|
||||
newMessage,
|
||||
topBanner
|
||||
},
|
||||
props: {
|
||||
room: [Object, undefined],
|
||||
user: String,
|
||||
closeChat: Function,
|
||||
openChatInfo: Function
|
||||
},
|
||||
methods:{
|
||||
scrollToBottom(){
|
||||
let msgContainer = document.getElementById("messagesContainer")
|
||||
msgContainer.scrollTo(0, msgContainer.scrollHeight)
|
||||
this.$refs.msgContainer.scrollTop = this.$refs.msgContainer.scrollHeight;
|
||||
},
|
||||
getTime(time){
|
||||
let date = new Date(time);
|
||||
return `${date.getHours()}:${(date.getMinutes()<10)?"0":""}${date.getMinutes()}`;
|
||||
scrollHandler(){
|
||||
if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
|
||||
let msg = this.$refs.msgContainer;
|
||||
this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
|
||||
},
|
||||
getDate(time){
|
||||
let months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
||||
let date = new Date(time);
|
||||
return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
|
||||
resize(height){
|
||||
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
|
||||
},
|
||||
scrollHandler(){
|
||||
if (this.$refs.msgContainer.scrollTop === 0){
|
||||
console.log("load messages")
|
||||
}
|
||||
let msgContainer = document.getElementById("messagesContainer")
|
||||
this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
|
||||
}
|
||||
isGroup(){
|
||||
return Object.keys(this.room.currentState.members).length > 2;
|
||||
},
|
||||
async loadEvents(){
|
||||
this.loadingStatus = 'loading ...';
|
||||
await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
|
||||
.then(state => this.loadingStatus = state?'load more':false);
|
||||
},
|
||||
getUser(userId){
|
||||
return matrix.client.getUser(userId);
|
||||
},
|
||||
splitArray
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
chatroom: main.data().chatroom,
|
||||
session: matrix.data().session,
|
||||
showScrollBtn: false,
|
||||
scrollOnUpdate: true
|
||||
scrollOnUpdate: true,
|
||||
loadingStatus: 'load more'
|
||||
}
|
||||
},
|
||||
updated(){
|
||||
//this.scrollToBottom();
|
||||
},
|
||||
mounted(){
|
||||
//this.scrollToBottom();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.messagesContainer{
|
||||
<style scoped lang="scss">
|
||||
.chatContainer{
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 3rem;
|
||||
height: calc(100% - 7rem);
|
||||
top: 3.5rem;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 7rem);
|
||||
.messagesContainer{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#scrollDown{
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
display: block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
.messages{
|
||||
.loadMore{
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#scrollDown{
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
bottom: 5rem;
|
||||
right: 1rem;
|
||||
display: block;
|
||||
}
|
||||
.info{
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
margin: 1rem;
|
||||
background-color: #2d2d2d;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
width: fit-content;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0);
|
||||
margin-top: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue