text box, you can send messages! woohoo!

This commit is contained in:
hippoz 2021-01-12 00:24:45 +02:00
parent f2ef7c5c77
commit 68b8568174
Signed by: hippoz
GPG key ID: 7C52899193467641
2 changed files with 63 additions and 19 deletions

View file

@ -1,12 +1,16 @@
import CategoryViewLoader from './CategoryViewLoader';
import CategoryProfile from './CategoryProfileLink';
import Message from '../Messages/Message';
import gatewayConnection from '../../Gateway/globalGatewayConnection';
import { useParams } from 'react-router-dom';
import { connect } from 'react-redux'
import { connect } from 'react-redux';
import { useState, useRef } from 'react';
function CategoryView({ categories, messages }) {
const { id } = useParams();
const [ textInput, setTextInput ] = useState('');
const textInputRef = useRef(null);
let category;
@ -14,6 +18,15 @@ function CategoryView({ categories, messages }) {
category = categories.find(x => x._id === id);
}
const handleTextboxKeydown = (e) => {
if (e.key === 'Enter') {
// Send message written in textbox
gatewayConnection.sendMessage(id, textInput);
textInputRef.current.value = '';
}
}
if (category) {
return (
<div className="card main-card main-content-card">
@ -24,8 +37,7 @@ function CategoryView({ categories, messages }) {
{ messages.map(m => <Message key={ m._id } message={ m } />) }
</div>
<div className="card bar-card-bottom">
The hearing of the average cat is at least five times keener than that of a human adult.
In the largest cat breed, the average male weighs approximately 20 pounds.
<input className="text-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
</div>
</div>
)

View file

@ -3,13 +3,23 @@
:root {
--background-color: #{$nord0};
--default-main-card-color: #{$nord1};
--card-box-shadow-color:rgba(0, 0, 0, 0.25);
--default-main-card-color: var(--background-color);
--card-box-shadow-color:rgba(0, 0, 0, 0.27);
--default-text-color: #{$nord5};
--accent-color-dark: #{$nord2};
--accent-color-light: #{$nord3};
--accent-color-dark: #{$nord1};
--accent-color-light: #{$nord2};
--category-top-bar-color: var(--accent-color-light);
--category-bottom-text-bar-color: var(--accent-color-light);
--category-list-background-color: var(--background-color);
--category-message-list-background-color: var(--background-color);
--category-message-color: var(--accent-color-dark);
--button-color: var(--accent-color-dark);
--button-hover-color: var(--accent-color-light);
--default-transition-duration: 200ms;
--default-border-radius: 0px;
@ -63,8 +73,9 @@ body {
@include card;
&.bar-card {
background-color: var(--accent-color-dark);
min-height: 40px;
background-color: var(--category-top-bar-color);
min-height: 50px;
padding: 5px;
border-radius: var(--default-button-border-radius) var(--default-button-border-radius) 0px 0px;
display: flex;
@ -72,27 +83,35 @@ body {
justify-content: left;
font-size: large;
z-index: 99;
}
&.bar-card-bottom {
background-color: var(--accent-color-dark);
min-height: 30px;
background-color: var(--category-bottom-text-bar-color);
box-shadow: 0px -3px 5px var(--card-box-shadow-color);
min-height: 40px;
border-radius: 0px 0px var(--default-button-border-radius) var(--default-button-border-radius);
display: flex;
z-index: 100;
}
&.message-list-card {
@include fancy-scrollbar-firefox;
border-radius: 0px;
flex-grow: 1;
box-shadow: none;
overflow: auto;
background-color: var(--category-message-list-background-color);
}
}
.main-card {
@include card;
margin: 12px;
&.main-content-card {
flex-grow: 1;
display: flex;
@ -106,7 +125,7 @@ body {
padding: 5px;
margin: 5px;
border: 0px;
background-color: var(--accent-color-dark);
background-color: var(--button-color);
color: var(--default-text-color);
cursor: pointer;
transition: background-color, var(--default-transition-duration);
@ -141,6 +160,8 @@ body {
min-width: 110px;
max-width: 110px;
background-color: var(--category-list-background-color);
}
.profile-picture {
@ -186,6 +207,21 @@ body {
display: flex;
flex-direction: column;
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;
padding: 5px;
background-color: var(--category-message-color);
}
.text-input {
@include card;
margin: 5px;
padding: 5px;
border: none;
color: var(--default-text-color);
flex-grow: 1;
}
@media only screen and (max-width: 600px) {
@ -198,8 +234,4 @@ body {
min-width: 60px;
max-width: 60px;
}
.main-card {
margin: 6px;
}
}