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

2021-08-21 19:53:52 +03:00 · 2021-08-21 19:53:52 +03:00 · 850187e913
commit 850187e913
parent e6f78f8ec9
14 changed files with 58 additions and 48 deletions
--- a/bfrontend/src/API/Gateway/globalGatewayConnection.js
+++ b/bfrontend/src/API/Gateway/globalGatewayConnection.js
@ -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);
--- a/bfrontend/src/Components/Channels/ChannelMessageView.js
+++ b/bfrontend/src/Components/Channels/ChannelMessageView.js
@ -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>;
 }
--- a/bfrontend/src/Components/Channels/ChannelView.js
+++ b/bfrontend/src/Components/Channels/ChannelView.js
@ -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>
--- a/bfrontend/src/Components/Main/App.js
+++ b/bfrontend/src/Components/Main/App.js
@ -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>
--- a/bfrontend/src/Components/Main/LoggedInMount.js
+++ b/bfrontend/src/Components/Main/LoggedInMount.js
@ -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);
--- a/bfrontend/src/Components/UI/GradientBanner.js
+++ b/bfrontend/src/Components/UI/GradientBanner.js
@ -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>;
 }
--- a/bfrontend/src/Components/UI/ProfileLink.js
+++ b/bfrontend/src/Components/UI/ProfileLink.js
@ -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;

--- a/bfrontend/src/Styles/App.scss
+++ b/bfrontend/src/Styles/App.scss
@ -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%;
 }
--- a/bfrontend/src/Styles/Components/Card.scss
+++ b/bfrontend/src/Styles/Components/Card.scss
@ -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;
--- a/bfrontend/src/Styles/Components/Containers.scss
+++ b/bfrontend/src/Styles/Components/Containers.scss
@ -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);
 }
@ -51,4 +44,13 @@

 .hidden {
    visibility: hidden;
+}
+
+.no-select {
+    user-select: none;
+}
+
+.messages-scroll-div {
+    height: 18px;
+    visibility: hidden;
 }
--- a/bfrontend/src/Styles/Components/Message.scss
+++ b/bfrontend/src/Styles/Components/Message.scss
@ -10,6 +10,8 @@
 }

 .no-messages-warning {
+    @extend .no-select;
+
    display: flex;
    justify-content: center;
    align-items: center;
--- a/bfrontend/src/Styles/Components/Textbox.scss
+++ b/bfrontend/src/Styles/Components/Textbox.scss
@ -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;
    }
--- a/bfrontend/src/Styles/Components/properties.scss
+++ b/bfrontend/src/Styles/Components/properties.scss
@ -0,0 +1,3 @@
+.elevated {
+    box-shadow: var(--elevation-box-shadow);
+}
--- a/bfrontend/src/Styles/root.scss
+++ b/bfrontend/src/Styles/root.scss
@ -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%);