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"); warn("Gateway connection closed");
store.dispatch({ type: 'authenticator/updatelocaluserobject', user: undefined }); store.dispatch({ type: 'authenticator/updatelocaluserobject', user: undefined });
store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } }); 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(() => { const interval = setInterval(() => {
if (globalGatewayConnection.ws.readyState === 1) { if (globalGatewayConnection.ws.readyState === 1) {
clearInterval(interval); clearInterval(interval);

View file

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

View file

@ -28,7 +28,7 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
if (channel) { if (channel) {
return ( return (
<div className="col-flex-card hidden-overflow"> <div className="col-flex-card hidden-overflow">
<div className="bar-card-accent"> <div className="bar-card-accent no-select">
<ChannelProfile channel={ channel } size="24" /> <ChannelProfile channel={ channel } size="24" />
{/* {/*
{ (experiments.voiceSFUTesting) && <button className="button" onClick={ () => gatewayConnection.beginVoiceSession(channel._id) }> { (experiments.voiceSFUTesting) && <button className="button" onClick={ () => gatewayConnection.beginVoiceSession(channel._id) }>
@ -38,9 +38,9 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
</div> </div>
<div className="row-flex-card hidden-overflow"> <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> <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> <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>
</div> </div>

View file

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

View file

@ -1,11 +1,20 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import Sidebar from "../UI/Sidebar"; import Sidebar from "../UI/Sidebar";
import ChannelView from "../Channels/ChannelView"; 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(); const { id: channelId } = useParams();
return <> return <>
<Sidebar /> <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() { import { useDispatch } from "react-redux";
return (gradientBannerNotificationText !== undefined) && <div className="gradient-banner-card" onClick={ () => dispatch({ type: "application/updatebannertext", text: undefined }) }>
{ gradientBannerNotificationText } 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>; </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 }) { export default function ProfileLink({ object, size, type, offset=true, children=null, hideName=false }) {
let picture; let picture;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -11,7 +11,9 @@
border-radius: var(--message-box-border-radius); border-radius: var(--message-box-border-radius);
background-color: var(--message-box-color); background-color: var(--message-box-color);
height: 32px; height: 32px;
padding: 6px; padding: 8px;
margin: 0;
margin-bottom: 5px;
padding-left: 16px; padding-left: 16px;
font-size: 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 { :root {
--background-color: hsl(230, 12%, 15%); --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: hsl(230, 12%, 18%);
--card-accent-color-dark: hsl(230, 12%, 12%); --card-accent-color-dark: hsl(230, 12%, 12%);
--default-text-color: hsl(0, 0%, 79%);
--default-scrollbar-color: var(--background-color); --darker-text-color: hsl(0, 0%, 53%);
--focus-accent-background: var(--card-accent-color);
--focus-accent-background-deep: var(--card-accent-color-dark);
--default-user-background: linear-gradient( --default-user-background: linear-gradient(
to bottom right, to bottom right,
@ -23,9 +18,11 @@
hsl(225, 35%, 40%) hsl(225, 35%, 40%)
); );
--default-scrollbar-color: var(--background-color);
--channel-top-bar-color-accent: var(--background-color); --channel-top-bar-color-accent: var(--background-color);
--channel-top-bar-color: 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); --message-box-color: var(--card-accent-color);
--sidebar-background-color: hsl(230, 12%, 12%); --sidebar-background-color: hsl(230, 12%, 12%);
@ -34,7 +31,9 @@
--channel-message-color: var(--accent-color-dark); --channel-message-color: var(--accent-color-dark);
--channel-view-container-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; --channel-button-background: none;
--default-border-radius: 0px; --default-border-radius: 0px;