Compare commits

..

3 commits

Author SHA1 Message Date
hippoz
c60b8537ea
poorly fix button colors 2021-08-21 20:06:45 +03:00
hippoz
669e72194b
remove legacy scss file 2021-08-21 19:58:46 +03:00
hippoz
850187e913
minor visual improvements - add gradient banner back, polish some elements, combine some classes 2021-08-21 19:53:52 +03:00
16 changed files with 67 additions and 93 deletions

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);

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'>
<span>No messages yet...</span>
</div>
);
}
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>);
return <div className="message-list-card">
{ messagesView }
<div ref={ invisibleBottomMessageRef }></div>
<div className="messages-scroll-div" ref={ invisibleBottomMessageRef }></div>
</div>;
}

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>

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>

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);

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>;
}

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;

View file

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

View file

@ -24,13 +24,13 @@
&-pressed {
@extend .button;
background: var(--focus-accent-background);
background-color: var(--button-selected-background-color);
color: var(--default-text-color);
}
}
.button:hover:not(.button-pressed) {
background: var(--focus-accent-background-deep);
background-color: var(--button-hover-background-color);
}
@media only screen and (max-width: 600px) {

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;

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;
}

View file

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

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;
}

View file

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

View file

@ -1,34 +0,0 @@
$nord0darker: #22262e;
$nord1darker: #282b36;
$nord2darker: #333947;
$nord3darker: #40495a;
$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;
$dark1: #2d2929;
$dark2: #332f2f;
$dark3: #393636;
$dark4: #423f3f;
$dark5: #4d4a4a;
$light1: #999999;
$light2: #b0b0b0;
$light3: #c2c2c2;
$light4: #cfcfcf;
$light5: #d9d9d9;

View file

@ -1,14 +1,9 @@
:root {
--background-color: hsl(230, 12%, 15%);
--default-text-color: hsl(0, 0%, 79%);
--darker-text-color: hsl(0, 0%, 53%);
--card-accent-color: hsl(230, 12%, 18%);
--card-accent-color-dark: hsl(230, 12%, 12%);
--default-scrollbar-color: var(--background-color);
--focus-accent-background: var(--card-accent-color);
--focus-accent-background-deep: var(--card-accent-color-dark);
--default-text-color: hsl(0, 0%, 79%);
--darker-text-color: hsl(0, 0%, 53%);
--default-user-background: linear-gradient(
to bottom right,
@ -23,9 +18,11 @@
hsl(225, 35%, 40%)
);
--default-scrollbar-color: var(--background-color);
--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%);
@ -34,7 +31,9 @@
--channel-message-color: var(--accent-color-dark);
--channel-view-container-color: var(--accent-color-dark);
--button-color: var(--background-color);
--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;