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

Compare commits

base: hippoz:52200b08abde6f750fb7b871ae0a7e1f57b09426
Branches Tags
hippoz:master
..
compare: hippoz:92fd25265eca362ccb65d2500ed0e598a63e35c3
Branches Tags
hippoz:master

No commits in common. "52200b08abde6f750fb7b871ae0a7e1f57b09426" and "92fd25265eca362ccb65d2500ed0e598a63e35c3" have entirely different histories.
52200b08ab ... 92fd25265e

21 changed files with 117 additions and 148 deletions
Show stats Expand all files Collapse all files

4
bfrontend/src/Components/Auth/Create.js
View file

@ -66,7 +66,7 @@ export default function Create() {
}
if (specialCodePrompt) return (
<div id="login-container">
<div id="login-container" className="card">
<h1>One more thing!</h1>
<p>You need a special code to sign up here!</p>
<label htmlFor="specialcode">Special Code</label>
@ -78,7 +78,7 @@ export default function Create() {
);
return (
<div id="login-container">
<div id="login-container" className="card">
<h1>Create an account</h1>
<label htmlFor="username">Username</label>
<br />

2
bfrontend/src/Components/Auth/Login.js
View file

@ -49,7 +49,7 @@ export default function Login() {
}
return (
<div id="login-container">
<div id="login-container" className="card">
<h1>Log in</h1>
<label htmlFor="username">Username</label>
<br />

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

@ -1,6 +1,5 @@
import Message from "../Messages/Message";
import { useRef, useEffect } from 'react';
import { CommentDiscussionIcon } from "@primer/octicons-react";
export default function ChannelMessageView({messages}) {
const invisibleBottomMessageRef = useRef();
@ -12,11 +11,10 @@ export default function ChannelMessageView({messages}) {
let messagesView = messages.map((message) => (<Message key={message._id} message={message} />));
if (messagesView === undefined || messagesView.length <= 0)
messagesView = (<div className='no-messages-warning'>
<CommentDiscussionIcon size={64} />
<span style={{ margin: "12px" }}>No messages yet...</span>
<span>No messages yet...</span>
</div>);
return <div className="message-list">
return <div className="message-list-card">
{ messagesView }
<div className="messages-scroll-div" ref={ invisibleBottomMessageRef }></div>
</div>;

19
bfrontend/src/Components/Channels/ChannelProfileLink.js
View file

@ -1,17 +1,8 @@
export default function ChannelProfileLink({ channel, size }) {
let picture = null;
if (size !== "0") {
if (channel.picture) picture = <img className={ `profile-picture profile-picture-${size}` } src={ channel.picture } alt="Profile"></img>
else picture = <div className="profile-picture default-channel" alt="Profile">
<span className="default-channel-styled-text">#</span>
</div>
}
import ProfileLink from '../UI/ProfileLink'
// TODO: Stop using this component and just use the ProfileLink component
export default function ChannelProfile({ channel, size, offset=false }) {
return (
<div className="profile-link">
{ picture }
<span className="profile-username">{ channel.title }</span>
</div>
<ProfileLink object={ channel } size={ size } type="channel" offset={ offset } />
);
};
}

4
bfrontend/src/Components/Channels/ChannelUserList.js
View file

@ -3,14 +3,14 @@ import ProfileLinkLoader from "../UI/ProfileLinkLoader";
function ChannelUserList({ presence }) {
if (!presence || presence.length === 0) return (
<div className="sidebar">
<div className="card sidebar">
<div className="channel-list">
<button className="button channel-button"><ProfileLinkLoader /></button>
</div>
</div>
);
return (
<div className="sidebar">
<div className="card sidebar">
<div className="channel-list">
{ Object.keys(presence).map((userId) => <UserProfileButton key={ userId } user={ presence[userId] } />) }
</div>

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

@ -28,8 +28,8 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
if (channel) {
return (
<div className="col-flex hidden-overflow">
<div className="bar-accent no-select">
<div className="col-flex-card hidden-overflow">
<div className="bar-card-accent no-select">
<ChannelProfile channel={ channel } size="24" />
{/*
{ (experiments.voiceSFUTesting) && <button className="button" onClick={ () => gatewayConnection.beginVoiceSession(channel._id) }>
@ -38,10 +38,10 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
*/}
</div>
<div className="row-flex hidden-overflow">
<div className="row-flex-card hidden-overflow">
<div className="channel-message-panel">
<ChannelMessageView messages={messages}></ChannelMessageView>
<div className="col-flex">
<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>
@ -51,15 +51,15 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
);
} else {
return (
<div className="col-flex hidden-overflow">
<div className="bar-accent no-select">
<div className="col-flex-card hidden-overflow">
<div className="bar-card-accent no-select">
<ProfileLinkLoader />
</div>
<div className="row-flex hidden-overflow">
<div className="row-flex-card hidden-overflow">
<div className="channel-message-panel">
<ChannelMessageView messages={[]}></ChannelMessageView>
<div className="col-flex">
<div className="col-flex-card">
<input className="text-input message-input" type="text" disabled="disabled" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
</div>
</div>

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

@ -35,10 +35,7 @@ function App({ user }) {
<Switch>
<Route path="/login" component={ Login } />
<Route path="/create" component={ Create } />
<Route path="/channels/:channelId"
render={() => <LoggedInMount />}
/>
<Route path="/user/:userId"
<Route path="/channels/:id"
render={() => <LoggedInMount />}
/>

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

@ -2,17 +2,15 @@ import { useParams } from "react-router-dom";
import Sidebar from "../UI/Sidebar";
import ChannelView from "../Channels/ChannelView";
import GradientBanner from "../UI/GradientBanner";
import UserView from "../Users/UserView";
import { connect } from "react-redux";
function LoggedInMount({ gradientBannerNotificationText }) {
const { channelId, userId } = useParams();
const { id: channelId } = useParams();
return <>
<Sidebar />
<div className="col-flex">
<div className="col-flex-card">
<GradientBanner text={ gradientBannerNotificationText }/>
{ (channelId) && <ChannelView channelId={ channelId } /> }
{ (userId) && <UserView userId={ userId } /> }
</div>
</>;
}

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

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

33
bfrontend/src/Components/UI/ProfileLink.js Normal file
View file

@ -0,0 +1,33 @@
// TODO: This is an actual, horrible mess
export default function ProfileLink({ object, size, type, offset=true, children=null, hideName=false }) {
let picture;
if (size !== "0") {
// TODO: Make a debug error message for then the size does not exist
const pictureClass = `profile-picture profile-picture-${size}`;
if (object.picture) {
// Not actually implemented on the server and can be unsafe, this is just futureproofing
picture = <img className={ pictureClass } src={ object.picture } alt="Profile"></img>
} else {
picture = <div className={`profile-picture default-${type}`} alt="Profile">
<span className={`default-${type}-styled-text`}>{ (type === "user") ? "@" : "#" }</span>
</div>
}
} else {
picture = null;
}
let classes = offset ? 'profile-link profile-link-offset-text' : 'profile-link';
if (type === "user") classes += " darker-text";
const title = type === 'channel' ? object.title : object.username;
const bottomInfo = offset ? children : null;
return (
<div className={ classes }>
{ picture }
<span className={ hideName ? "profile-username hidden" : "profile-username" }>{ title }</span>
{ bottomInfo }
</div>
);
};

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

@ -7,7 +7,7 @@ import { connect } from 'react-redux';
function Sidebar({ user }) {
return (
<div className="sidebar">
<div className="bar" style={{
<div className="bar-card" style={{
color: "var(--darker-text-color)"
}}>
{ user && <UserProfileLink user={ user } /> }

19
bfrontend/src/Components/Users/UserProfileLink.js
View file

@ -1,17 +1,8 @@
export default function UserProfileLink({ user, size }) {
let picture = null;
if (size !== "0") {
if (user.picture) picture = <img className={ `profile-picture profile-picture-${size}` } src={ user.picture } alt="Profile"></img>
else picture = <div className="profile-picture default-user" alt="Profile">
<span className="default-user-styled-text">@</span>
</div>
}
import ProfileLink from '../UI/ProfileLink'
// TODO: Stop using this component and just use the ProfileLink component
export default function UserProfile({ user, size, subtext, hideName }) {
return (
<div className="profile-link">
{ picture }
<span className="profile-username">{ user.username }</span>
</div>
<ProfileLink hideName={ hideName } object={ user } size={ size } type="user" offset={ subtext !== undefined } children={ (subtext) && (<span>{ subtext }</span>) } />
);
};
}

43
bfrontend/src/Components/Users/UserView.js
View file

@ -1,43 +0,0 @@
import { useEffect, useState } from "react";
import { PersonIcon, ShieldCheckIcon } from "@primer/octicons-react";
import APIRequest from "../../API/APIRequest";
import UserProfile from "./UserProfileLink";
import ProfileLinkLoader from "../UI/ProfileLinkLoader";
export default function UserView({ userId }) {
const [userObject, setUserObject] = useState(null);
useEffect(() => {
APIRequest.authenticated(`/api/v1/users/user/${userId}/info`, {
method: 'GET',
headers: {
"Accept": "application/json"
}
}).then(({ isOK, json }) => {
if (isOK) {
setUserObject(json.user);
}
});
}, [userId]);
let view = null;
if (userObject) {
view = <>
<UserProfile user={ userObject } size="32" />
{(userObject.role === "ADMIN") && <ShieldCheckIcon size={24} className="profile-badge" />}
{(userObject.role === "USER") && <PersonIcon size={24} className="profile-badge" />}
</>
} else {
view = <>
<ProfileLinkLoader />
</>
}
return (
<div className="center grow">
<div className="user-view center">
{view}
</div>
</div>
);
}

1
bfrontend/src/Styles/Components/Button.scss
View file

@ -1,4 +1,5 @@
.button {
@include card;
background-color: var(--button-color);
color: var(--default-text-color);

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

@ -1,4 +1,16 @@
.bar {
@mixin card {
padding: 0px;
margin: 0px;
background-color: rgba(0, 0, 0, 0);
border-radius: var(--default-border-radius);
}
.card {
@include card;
}
.bar-card {
@include card;
@extend .elevated;
height: 32px;
@ -10,33 +22,39 @@
z-index: 10;
&-accent {
@extend .bar;
@extend .bar-card;
background-color: var(--channel-top-bar-color-accent);
}
}
.message-list {
.message-list-card {
@include card;
@include fancy-scrollbar-firefox;
background-color: var(--channel-message-list-background-color);
flex-basis: 100%;
border-radius: 0px;
overflow: auto;
}
.col-flex {
.col-flex-card {
@include card;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.row-flex {
.row-flex-card {
@include card;
flex-grow: 10;
display: flex;
flex-direction: row;
}
.gradient-banner {
.gradient-banner-card {
background: var(--default-user-background);
height: 1.5rem;
padding: 10px;
@ -46,17 +64,4 @@
text-overflow: ellipsis;
white-space: nowrap;
cursor: default;
}
.elevated-modal {
@extend .elevated-2;
background-color: var(--accent-color-dark);
padding: 16px;
margin: 6px;
border-radius: var(--elevated-modal-border-radius);
}
.user-view {
@extend .elevated-modal;
}

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

@ -2,6 +2,7 @@
padding: 0px;
margin: 0px;
display: flex;
background-color: var(--background-color);
min-height: 100vh;
max-height: 100vh;
flex-direction: row;
@ -9,6 +10,7 @@
.sidebar {
@include fancy-scrollbar-firefox;
@include card;
@extend .no-select;
background-color: var(--sidebar-background-color);
@ -30,9 +32,10 @@
.channel-message-panel {
@extend .hidden-overflow;
@extend .col-flex;
@extend .col-flex-card;
padding: 15px;
background-color: var(--channel-view-container-color);
}
.hidden-overflow {
@ -50,18 +53,4 @@
.messages-scroll-div {
height: 18px;
visibility: hidden;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.grow {
flex-grow: 1;
}
.profile-badge {
margin: 16px;
}

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

@ -1,8 +1,12 @@
.message {
@include card;
display: flex;
flex-direction: row;
margin: 2px;
padding: 1px;
border-radius: var(--channel-message-border-radius);
background-color: var(--channel-message-color);
max-width: 150px;
}

3
bfrontend/src/Styles/Components/ProfileLink.scss
View file

@ -1,9 +1,10 @@
.profile-picture {
border-radius: 50%;
flex-shrink: 0;
margin: 6px;
margin: 5px;
width: 32px;
height: 32px;
margin-right: 6px;
&.default-channel {
border-radius: 12px;

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

@ -1,4 +1,6 @@
.text-input {
@include card;
margin: 1px;
padding: 5px;
border: none;

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

@ -1,7 +1,3 @@
.elevated {
box-shadow: var(--elevation-box-shadow);
}
.elevated-2 {
box-shadow: rgba(0, 0, 0, 0.50) 0px 25px 50px -4px;
}

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

@ -1,9 +1,9 @@
:root {
--background-color: hsl(230, 12%, 15%);
--accent-color: hsl(230, 12%, 18%);
--accent-color-dark: hsl(230, 12%, 12%);
--default-text-color: hsl(0, 0%, 80%);
--darker-text-color: hsl(0, 0%, 65%);
--card-accent-color: hsl(230, 12%, 18%);
--card-accent-color-dark: hsl(230, 12%, 12%);
--default-text-color: hsl(0, 0%, 79%);
--darker-text-color: hsl(0, 0%, 53%);
--default-user-background: linear-gradient(
to bottom right,
@ -18,23 +18,29 @@
hsl(225, 35%, 40%)
);
--default-scrollbar-color: var(--accent-color);
--default-scrollbar-color: var(--card-accent-color);
--default-scrollbar-color-track: var(--background-color);
--default-scrollbar-width: 1px;
--channel-top-bar-color-accent: var(--background-color);
--channel-top-bar-color: var(--background-color);
--sidebar-background-color: hsl(230, 12%, 12%);
--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(--accent-color);
--message-box-color: var(--card-accent-color);
--button-color: var(--accent-color-dark);
--button-hover-background-color: var(--accent-color);
--button-selected-background-color: var(--accent-color);
--sidebar-background-color: hsl(230, 12%, 12%);
--channel-message-list-background-color: var(--accent-color-dark);
--channel-message-color: var(--accent-color-dark);
--channel-view-container-color: var(--accent-color-dark);
--button-color: var(--card-accent-color-dark);
--button-hover-background-color: var(--card-accent-color);
--button-selected-background-color: var(--card-accent-color);
--channel-button-background: none;
--default-border-radius: 0px;
--default-button-border-radius: 0px;
--channel-message-border-radius: 0px;
--channel-button-border-radius: 10px;
--message-box-border-radius: 10px;
--elevated-modal-border-radius: 10px;
}