text box, you can send messages! woohoo!
This commit is contained in:
hippoz
parent
f2ef7c5c77
commit
68b8568174
GPG key ID:
7C52899193467641
2 changed files with 63 additions and 19 deletions
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue