Compare commits
No commits in common. "52200b08abde6f750fb7b871ae0a7e1f57b09426" and "92fd25265eca362ccb65d2500ed0e598a63e35c3" have entirely different histories.
52200b08ab
...
92fd25265e
21 changed files with 117 additions and 148 deletions
|
@ -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 />
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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>;
|
||||
|
|
|
@ -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 } />
|
||||
);
|
||||
};
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 />}
|
||||
/>
|
||||
|
||||
|
|
|
@ -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>
|
||||
</>;
|
||||
}
|
||||
|
|
|
@ -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
33
bfrontend/src/Components/UI/ProfileLink.js
Normal 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>
|
||||
);
|
||||
};
|
|
@ -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 } /> }
|
||||
|
|
|
@ -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>) } />
|
||||
);
|
||||
};
|
||||
}
|
|
@ -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,4 +1,5 @@
|
|||
.button {
|
||||
@include card;
|
||||
|
||||
background-color: var(--button-color);
|
||||
color: var(--default-text-color);
|
||||
|
|
|
@ -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;
|
||||
|
@ -47,16 +65,3 @@
|
|||
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;
|
||||
}
|
|
@ -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 {
|
||||
|
@ -51,17 +54,3 @@
|
|||
height: 18px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.profile-badge {
|
||||
margin: 16px;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
.text-input {
|
||||
@include card;
|
||||
|
||||
margin: 1px;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue