change colors and redesign a few elements, also fix a few bugs

This commit is contained in:
hippoz 2021-02-09 18:35:06 +02:00
parent 9fefb7de20
commit 57e72d24c7
No known key found for this signature in database
GPG key ID: 7C52899193467641
6 changed files with 101 additions and 43 deletions

View file

@ -1,7 +1,7 @@
// import CategoryProfile from './CategoryProfile'; import CategoryProfile from './CategoryProfileLink';
import gatewayConnection from '../../Gateway/globalGatewayConnection';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import gatewayConnection from '../../Gateway/globalGatewayConnection';
export default function CategoryButton({ category }) { export default function CategoryButton({ category }) {
const history = useHistory(); const history = useHistory();
@ -14,12 +14,7 @@ export default function CategoryButton({ category }) {
return ( return (
<button className="button category-button" onClick={ handleClick }> <button className="button category-button" onClick={ handleClick }>
{/*
maybe enable someday...
<CategoryProfile category={ category } size="32" /> <CategoryProfile category={ category } size="32" />
*/}
{ category.title }
</button> </button>
); );
} }

View file

@ -10,29 +10,28 @@ import { useState, useRef, useEffect } from 'react';
function CategoryView({ categories, messages, isHandlingRoute=true, subscribedToCategories, gateway: { isConnected: isGatewayConnected } }) { function CategoryView({ categories, messages, isHandlingRoute=true, subscribedToCategories, gateway: { isConnected: isGatewayConnected } }) {
const { id } = useParams(); const { id } = useParams();
const [ textInput, setTextInput ] = useState(''); const [ textInput, setTextInput ] = useState('');
const [ category, setCategory ] = useState();
const textInputRef = useRef(null); const textInputRef = useRef(null);
const invisibleBottomMessageRef = useRef(null); const invisibleBottomMessageRef = useRef(null);
const dispatch = useDispatch();
let category; const dispatch = useDispatch();
const scrollToBottom = () => { const scrollToBottom = () => {
if (invisibleBottomMessageRef && invisibleBottomMessageRef.current) { if (invisibleBottomMessageRef && invisibleBottomMessageRef.current) {
invisibleBottomMessageRef.current.scrollIntoView({ behaviour: 'smooth' }); invisibleBottomMessageRef.current.scrollIntoView({ behaviour: 'smooth' });
} }
} }
useEffect(scrollToBottom, [messages]);
const handleTextboxKeydown = (e) => { const handleTextboxKeydown = (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
// Send message written in textbox
gatewayConnection.sendMessage(id, textInput); gatewayConnection.sendMessage(id, textInput);
textInputRef.current.value = ''; textInputRef.current.value = '';
setTextInput('');
} }
} }
useEffect(scrollToBottom, [messages]);
useEffect(() => { useEffect(() => {
if (isHandlingRoute) { if (isHandlingRoute) {
if (!id || id === '') return; if (!id || id === '') return;
@ -43,19 +42,31 @@ function CategoryView({ categories, messages, isHandlingRoute=true, subscribedTo
gatewayConnection.subscribeToCategoryChat(id); gatewayConnection.subscribeToCategoryChat(id);
} }
}, [dispatch, id, isHandlingRoute, subscribedToCategories, isGatewayConnected]); }, [dispatch, id, isHandlingRoute, subscribedToCategories, isGatewayConnected]);
if (categories) { useEffect(() => {
category = categories.find(x => x._id === id); if (!categories) return;
}
setCategory(categories.find(x => x._id === id));
}, [ categories, id ]);
if (category) { if (category) {
let messagesView = messages.map(m => <Message key={ m._id } message={ m } />);
if (messagesView === undefined || messagesView.length <= 0) {
messagesView = (
<div class='no-messages-warning'>
A bit empty in here...
</div>
);
}
return ( return (
<div className="card main-card main-content-card"> <div className="card main-card main-content-card">
<div className="card bar-card"> <div className="card bar-card">
<CategoryProfile category={ category } /> <CategoryProfile category={ category } />
</div> </div>
<div className="card message-list-card"> <div className="card message-list-card">
{ messages.map(m => <Message key={ m._id } message={ m } />) } { messagesView }
<div ref={ invisibleBottomMessageRef }></div> <div ref={ invisibleBottomMessageRef }></div>
</div> </div>
<div className="card bar-card-bottom"> <div className="card bar-card-bottom">

View file

@ -3,7 +3,7 @@ import UserProfileLink from '../Users/UserProfileLink';
export default function Message({ message }) { export default function Message({ message }) {
return ( return (
<div className="message"> <div className="message">
<UserProfileLink user={ message.author } /> <UserProfileLink size="40" user={ message.author } />
<span>{ message.content }</span> <span>{ message.content }</span>
</div> </div>
); );

View file

@ -1,9 +1,23 @@
import CategoryList from '../Categories/CategoryList'; import CategoryList from '../Categories/CategoryList';
import UserProfileLink from '../Users/UserProfileLink';
export default function Sidebar() { import { connect } from 'react-redux';
function Sidebar({ user }) {
return ( return (
<div className="card main-card category-list-container"> <div className="card main-card category-list-container">
<div className="card bar-card">
<UserProfileLink user={ user } />
</div>
<CategoryList /> <CategoryList />
</div> </div>
) )
} }
const stateToProps = (state) => {
return {
user: state?.user
};
};
export default connect(stateToProps)(Sidebar);

View file

@ -19,7 +19,7 @@ export default function UserProfileLink({ user, size }) {
} }
return ( return (
<div className="profile-link"> <div className="profile-link user-profile-link">
{ picture } { picture }
<span className="profile-username">{ user.username }</span> <span className="profile-username">{ user.username }</span>
</div> </div>

View file

@ -1,15 +1,37 @@
@import "../../node_modules/nord/src/sass/nord.scss"; $nord0darker: #22262e;
$nord1darker: #282b36;
$nord2darker: #333947;
$nord4darker: #9da2ad;
$nord0: #2E3440;
$nord1: #3B4252;
$nord2: #434C5E;
$nord3: #4C566A;
$nord4: #D8DEE9;
$nord5: #E5E9F0;
$nord6: #ECEFF4;
$nord7: #8FBCBB;
$nord8: #88C0D0;
$nord9: #81A1C1;
$nord10: #5E81AC;
$nord11: #BF616A;
$nord12: #D08770;
$nord13: #EBCB8B;
$nord14: #A3BE8C;
$nord15: #B48EAD;
:root { :root {
--background-color: #{$nord0}; --background-color: #{$nord0darker};
--default-main-card-color: var(--background-color); --default-main-card-color: var(--background-color);
--card-box-shadow-color:rgba(0, 0, 0, 0.27); --card-box-shadow-color:rgba(0, 0, 0, 0.27);
--default-text-color: #{$nord5}; --default-text-color: #{$nord5};
--darker-text-color: #{$nord4darker};
--accent-color-dark: #{$nord1}; --accent-color-dark: #{$nord1darker};
--accent-color-light: #{$nord2}; --accent-color-light: #{$nord2darker};
--category-top-bar-color: var(--accent-color-light); --category-top-bar-color: var(--accent-color-light);
--category-bottom-text-bar-color: var(--accent-color-light); --category-bottom-text-bar-color: var(--accent-color-light);
@ -21,7 +43,7 @@
--button-color: var(--accent-color-dark); --button-color: var(--accent-color-dark);
--button-hover-color: var(--accent-color-light); --button-hover-color: var(--accent-color-light);
--default-transition-duration: 200ms; --default-transition-duration: 50ms;
--default-border-radius: 0px; --default-border-radius: 0px;
--default-button-border-radius: 0px; --default-button-border-radius: 0px;
@ -133,13 +155,19 @@ body {
background-color: var(--button-color); background-color: var(--button-color);
color: var(--default-text-color); color: var(--default-text-color);
cursor: pointer; cursor: pointer;
transition: background-color, var(--default-transition-duration); // transition: background-color, var(--default-transition-duration);
border-radius: var(--default-button-border-radius); border-radius: var(--default-button-border-radius);
min-height: 25px; min-height: 25px;
&.category-button { &.category-button {
min-width: 100px; min-width: 200px;
max-width: 100px; max-width: 200px;
min-height: 40px;
max-height: 100px;
margin: 4px;
border-radius: 4px;
} }
&.pressed { &.pressed {
@ -163,9 +191,6 @@ body {
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
min-width: 110px;
max-width: 110px;
background-color: var(--category-list-background-color); background-color: var(--category-list-background-color);
} }
@ -189,6 +214,11 @@ body {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
&.profile-picture-40 {
width: 40px;
height: 40px;
}
&.profile-picture-64 { &.profile-picture-64 {
width: 64px; width: 64px;
@ -201,6 +231,11 @@ body {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: left; justify-content: left;
&.user-profile-link {
align-items: unset;
text-align: start;
}
} }
.profile-username { .profile-username {
@ -210,6 +245,8 @@ body {
.message { .message {
@include card; @include card;
box-shadow: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 5px; margin-top: 5px;
@ -218,7 +255,7 @@ body {
margin-right: 5px; margin-right: 5px;
padding: 5px; padding: 5px;
border-radius: var(--category-message-border-radius); border-radius: var(--category-message-border-radius);
background-color: var(--category-message-color); background-color: var(--background-color);
} }
.text-input { .text-input {
@ -231,14 +268,15 @@ body {
flex-grow: 1; flex-grow: 1;
} }
.no-messages-warning {
text-align: center;
padding: 50px;
color: var(--darker-text-color);
}
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.button.category-button { .button.category-button {
min-width: 50px; min-width: 100px;
max-width: 50px; max-width: 100px;
} }
}
.category-list-container {
min-width: 60px;
max-width: 60px;
}
}