hippoz/brainlet-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

minor visual improvements - add gradient banner back, polish some elements, combine some classes

Browse source
This commit is contained in:
hippoz 2021-08-21 19:53:52 +03:00
parent e6f78f8ec9
commit 850187e913
No known key found for this signature in database
GPG key ID: 7C52899193467641
14 changed files with 58 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bfrontend/src/API/Gateway/globalGatewayConnection.js
View file

@ -46,7 +46,7 @@ globalGatewayConnection.onclose = function() {
warn("Gateway connection closed");
store.dispatch({ type: 'authenticator/updatelocaluserobject', user: undefined });
store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } });
store.dispatch({ type: 'application/updatebannertext', text: "⚡ Hang tight! You've lost connection!" });
store.dispatch({ type: 'application/updatebannertext', text: "Hang tight! You've lost connection!" });
const interval = setInterval(() => {
if (globalGatewayConnection.ws.readyState === 1) {
clearInterval(interval);

22
bfrontend/src/Components/Channels/ChannelMessageView.js
View file

@ -2,28 +2,20 @@ import Message from "../Messages/Message";
import { useRef, useEffect } from 'react';
export default function ChannelMessageView({messages}) {
const invisibleBottomMessageRef = useRef(null);
const invisibleBottomMessageRef = useRef();
useEffect(() => {
if (invisibleBottomMessageRef && invisibleBottomMessageRef.current) {
invisibleBottomMessageRef.current.scrollIntoView({ behaviour: 'smooth' });
}
invisibleBottomMessageRef.current.scrollIntoView(true);
}, [messages]);
let messagesView = messages.map((m, i) => {
return <Message key={ m._id } message={ m } />;
});
if (messagesView === undefined || messagesView.length <= 0) {
messagesView = (
<div className='no-messages-warning'>
let messagesView = messages.map((message) => (<Message key={message._id} message={message} />));
if (messagesView === undefined || messagesView.length <= 0)
messagesView = (<div className='no-messages-warning'>
<span>No messages yet...</span>
</div>
);
}
</div>);
return <div className="message-list-card">
{ messagesView }
<div ref={ invisibleBottomMessageRef }></div>
<div className="messages-scroll-div" ref={ invisibleBottomMessageRef }></div>
</div>;
}

6
bfrontend/src/Components/Channels/ChannelView.js
View file

@ -28,7 +28,7 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
if (channel) {
return (
<div className="col-flex-card hidden-overflow">
<div className="bar-card-accent">
<div className="bar-card-accent no-select">
<ChannelProfile channel={ channel } size="24" />
{/*
{ (experiments.voiceSFUTesting) && <button className="button" onClick={ () => gatewayConnection.beginVoiceSession(channel._id) }>
@ -38,9 +38,9 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
</div>
<div className="row-flex-card hidden-overflow">
<div className="col-flex-card channel-message-panel hidden-overflow">
<div className="channel-message-panel">
<ChannelMessageView messages={messages}></ChannelMessageView>
<div className="invis-bar">
<div className="col-flex-card">
<input className="text-input message-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
</div>
</div>

3
bfrontend/src/Components/Main/App.js
View file

@ -4,7 +4,6 @@ import Root from '../Home/Root';
import Authenticator from '../../API/Authenticator';
import Notification from '../UI/Notification';
import './../../Styles/App.scss';
import Sidebar from '../UI/Sidebar';
import { useEffect, useState } from 'react';
import { useDispatch, connect } from 'react-redux'
@ -41,7 +40,7 @@ function App({ user }) {
/>
<Route path="/">
{ user && <Sidebar /> }
{ user && <LoggedInMount /> }
<Root user={user} />
</Route>
</Switch>

13
bfrontend/src/Components/Main/LoggedInMount.js
View file

@ -1,11 +1,20 @@
import { useParams } from "react-router-dom";
import Sidebar from "../UI/Sidebar";
import ChannelView from "../Channels/ChannelView";
import GradientBanner from "../UI/GradientBanner";
import { connect } from "react-redux";
export default function LoggedInMount() {
function LoggedInMount({ gradientBannerNotificationText }) {
const { id: channelId } = useParams();
return <>
<Sidebar />
<ChannelView channelId={ channelId } />
<div className="col-flex-card">
<GradientBanner text={ gradientBannerNotificationText }/>
{ (channelId) && <ChannelView channelId={ channelId } /> }
</div>
</>;
}
export default connect((state) => ({
gradientBannerNotificationText: state.gradientBannerNotificationText
}))(LoggedInMount);

10
bfrontend/src/Components/UI/GradientBanner.js
View file

@ -1,5 +1,9 @@
export default function GradientBanner() {
return (gradientBannerNotificationText !== undefined) && <div className="gradient-banner-card" onClick={ () => dispatch({ type: "application/updatebannertext", text: undefined }) }>
{ gradientBannerNotificationText }
import { useDispatch } from "react-redux";
export default function GradientBanner({ text }) {
const dispatch = useDispatch();
return (text !== undefined) && <div className="gradient-banner-card" onClick={ () => dispatch({ type: "application/updatebannertext", text: undefined }) }>
{ text }
</div>;
}

2
bfrontend/src/Components/UI/ProfileLink.js
View file

@ -1,4 +1,4 @@
// This is a mess pls fix later
// TODO: This is an actual, horrible mess
export default function ProfileLink({ object, size, type, offset=true, children=null, hideName=false }) {
let picture;

7
bfrontend/src/Styles/App.scss
View file

@ -8,6 +8,7 @@
@import "./Components/ProfileLink.scss";
@import "./Components/Message.scss";
@import "./Components/Textbox.scss";
@import "./Components/properties.scss";
::-webkit-scrollbar {
width: 0px;
@ -29,11 +30,7 @@ body {
padding: 0px;
}
button,
input,
optgroup,
select,
textarea {
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
}

2
bfrontend/src/Styles/Components/Card.scss
View file

@ -11,10 +11,10 @@
.bar-card {
@include card;
@extend .elevated;
height: 32px;
padding: 12px;
box-shadow: var(--bar-card-box-shadow);
display: flex;
align-items: center;
justify-content: left;

24
bfrontend/src/Styles/Components/Containers.scss
View file

@ -11,9 +11,9 @@
.sidebar {
@include fancy-scrollbar-firefox;
@include card;
@extend .no-select;
background-color: var(--sidebar-background-color);
display: flex;
flex-direction: column;
overflow: auto;
@ -30,17 +30,10 @@
margin: 5px;
}
.invis-bar {
display: flex;
flex-direction: column;
padding: 10px;
z-index: 100;
}
.channel-message-panel {
display: flex;
flex-direction: column;
@extend .hidden-overflow;
@extend .col-flex-card;
padding: 15px;
background-color: var(--channel-view-container-color);
}
@ -52,3 +45,12 @@
.hidden {
visibility: hidden;
}
.no-select {
user-select: none;
}
.messages-scroll-div {
height: 18px;
visibility: hidden;
}

2
bfrontend/src/Styles/Components/Message.scss
View file

@ -10,6 +10,8 @@
}
.no-messages-warning {
@extend .no-select;
display: flex;
justify-content: center;
align-items: center;

4
bfrontend/src/Styles/Components/Textbox.scss
View file

@ -11,7 +11,9 @@
border-radius: var(--message-box-border-radius);
background-color: var(--message-box-color);
height: 32px;
padding: 6px;
padding: 8px;
margin: 0;
margin-bottom: 5px;
padding-left: 16px;
font-size: 16px;
}

3
bfrontend/src/Styles/Components/properties.scss Normal file
View file

@ -0,0 +1,3 @@
.elevated {
box-shadow: var(--elevation-box-shadow);
}

2
bfrontend/src/Styles/root.scss
View file

@ -25,7 +25,7 @@
--channel-top-bar-color-accent: var(--background-color);
--channel-top-bar-color: var(--background-color);
--bar-card-box-shadow: 0 1px 0 0 hsla(230, 12%, 5%, 0.3), 0 2px 0 0 hsla(230, 12%, 6%, 0.2), 0 3px 0 0 hsla(230, 12%, 7%, 0.1);
--elevation-box-shadow: 0 1px 0 0 hsla(230, 12%, 5%, 0.3), 0 2px 0 0 hsla(230, 12%, 6%, 0.2), 0 3px 0 0 hsla(230, 12%, 7%, 0.1);
--message-box-color: var(--card-accent-color);
--sidebar-background-color: hsl(230, 12%, 12%);