From fe219cd42b579f7703937a128651bf1188782add Mon Sep 17 00:00:00 2001 From: hippoz Date: Wed, 2 Jun 2021 04:44:08 +0300 Subject: [PATCH] massive redesign and voice sort of works (this time the actual commit) --- .../src/API/Gateway/GatewayConnection.js | 13 ++++-- bfrontend/src/Components/Messages/Message.js | 4 +- bfrontend/src/Components/UI/ProfileLink.js | 8 +++- bfrontend/src/Components/UI/Sidebar.js | 4 +- bfrontend/src/Styles/App.scss | 4 ++ bfrontend/src/Styles/Components/Card.scss | 5 +-- .../src/Styles/Components/Containers.scss | 1 + bfrontend/src/Styles/Components/Message.scss | 7 +++- .../src/Styles/Components/ProfileLink.scss | 41 ++++++++++++++++++- bfrontend/src/Styles/Components/Textbox.scss | 3 ++ bfrontend/src/Styles/root.scss | 26 ++++++------ 11 files changed, 90 insertions(+), 26 deletions(-) diff --git a/bfrontend/src/API/Gateway/GatewayConnection.js b/bfrontend/src/API/Gateway/GatewayConnection.js index b358661..d0b9e3a 100644 --- a/bfrontend/src/API/Gateway/GatewayConnection.js +++ b/bfrontend/src/API/Gateway/GatewayConnection.js @@ -14,7 +14,8 @@ const opcodes = { 22: { name: "EVENT_VOICE_ASSIGN_SERVER", data: "JSON" }, 23: { name: "ACTION_VOICE_CONNECTION_REQUEST", data: "JSON" }, 24: { name: "EVENT_VOICE_CONNECTION_ANSWER", data: "JSON" }, - 25: { name: "EVENT_RENEGOTIATE_REQUIRED", data: "JSON" } + 25: { name: "EVENT_RENEGOTIATE_REQUIRED", data: "JSON" }, + 26: { name: "EVENT_TRACK_NOTIFICATION", data: "JSON" } }; const opcodeSeparator = "@"; @@ -98,7 +99,7 @@ GatewayConnection.prototype.connect = function(token) { break; } case "EVENT_VOICE_CONNECTION_ANSWER": { - if (!this.webrtcConnection) throw new Error("rtc: got remote answer without local offer"); + if (!this.webrtcConnection) throw new Error("rtc: got remote answer without local connection"); if (this.webrtcConnection.signalingState === "stable") { logRtc("Server sent answer, but we were in stable state"); return; @@ -113,7 +114,7 @@ GatewayConnection.prototype.connect = function(token) { break; } case "EVENT_RENEGOTIATE_REQUIRED": { - if (!this.webrtcConnection) throw new Error("rtc: got remote EVENT_RENEGOTIATE_REQUIRED without local offer"); + if (!this.webrtcConnection) throw new Error("rtc: got remote EVENT_RENEGOTIATE_REQUIRED without local connection"); logRtc("Server requested renegotiation"); @@ -121,6 +122,12 @@ GatewayConnection.prototype.connect = function(token) { break; } + case "EVENT_TRACK_NOTIFICATION": { + if (!this.webrtcConnection) throw new Error("rtc: got remote EVENT_TRACK_NOTIFICATION without local connection"); + this.webrtcConnection.addTransceiver(packet.data.kind); + + break; + } default: { logGateway("Got unknown packet", message.data); break; diff --git a/bfrontend/src/Components/Messages/Message.js b/bfrontend/src/Components/Messages/Message.js index 2679949..35994a2 100644 --- a/bfrontend/src/Components/Messages/Message.js +++ b/bfrontend/src/Components/Messages/Message.js @@ -3,8 +3,8 @@ import UserProfileLink from '../Users/UserProfileLink'; export default function Message({ message }) { return (
- - { message.content } + + { message.content }
); } \ No newline at end of file diff --git a/bfrontend/src/Components/UI/ProfileLink.js b/bfrontend/src/Components/UI/ProfileLink.js index 5b57d45..358dd66 100644 --- a/bfrontend/src/Components/UI/ProfileLink.js +++ b/bfrontend/src/Components/UI/ProfileLink.js @@ -1,5 +1,6 @@ import defaultProfile from '../../Content/Images/defaultprofile_256px-256px.png' +// This is a mess pls fix later export default function ProfileLink({ object, size, type, offset=true, children=null }) { let picture; @@ -11,13 +12,16 @@ export default function ProfileLink({ object, size, type, offset=true, children= // Not actually implemented on the server and can be unsafe, this is just futureproofing picture = Profile } else { - picture = Profile + picture =
+ { (type === "user") ? "@" : "#" } +
} } else { picture = null; } - const classes = offset ? 'profile-link profile-link-offset-text' : 'profile-link'; + 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; diff --git a/bfrontend/src/Components/UI/Sidebar.js b/bfrontend/src/Components/UI/Sidebar.js index 1098815..b64f88e 100644 --- a/bfrontend/src/Components/UI/Sidebar.js +++ b/bfrontend/src/Components/UI/Sidebar.js @@ -7,7 +7,9 @@ import { connect } from 'react-redux'; function Sidebar({ user }) { return (
-
+
{ user && } { !user && }
diff --git a/bfrontend/src/Styles/App.scss b/bfrontend/src/Styles/App.scss index f3cdc84..8095916 100644 --- a/bfrontend/src/Styles/App.scss +++ b/bfrontend/src/Styles/App.scss @@ -27,4 +27,8 @@ body { max-height: 100vh; margin: 0px; padding: 0px; +} + +* { + font-size: 18px !important; } \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Card.scss b/bfrontend/src/Styles/Components/Card.scss index c32ae03..f476f74 100644 --- a/bfrontend/src/Styles/Components/Card.scss +++ b/bfrontend/src/Styles/Components/Card.scss @@ -16,12 +16,9 @@ @include card; background-color: var(--channel-top-bar-color); - // box-shadow: 0 8px 6px -6px black; - box-shadow: var(--card-box-shadow-color); - height: 32px; padding: 8px; - border-radius: var(--bar-cards-border-radius); + border-bottom: var(--bar-card-border-bottom); display: flex; align-items: center; justify-content: left; diff --git a/bfrontend/src/Styles/Components/Containers.scss b/bfrontend/src/Styles/Components/Containers.scss index d774b54..f658c47 100644 --- a/bfrontend/src/Styles/Components/Containers.scss +++ b/bfrontend/src/Styles/Components/Containers.scss @@ -17,6 +17,7 @@ flex-direction: column; overflow: auto; overflow-x: hidden; + min-width: 230px; } .channel-list { diff --git a/bfrontend/src/Styles/Components/Message.scss b/bfrontend/src/Styles/Components/Message.scss index 858a970..0f1cdb4 100644 --- a/bfrontend/src/Styles/Components/Message.scss +++ b/bfrontend/src/Styles/Components/Message.scss @@ -6,7 +6,7 @@ display: flex; flex-direction: row; margin: 3px; - margin-left: 10px; + margin-left: 15px; padding: 1px; border-radius: var(--channel-message-border-radius); background-color: var(--channel-message-color); @@ -20,4 +20,9 @@ .unread-indicator { float: right; +} + +.message-content { + padding-left: 6px; + text-rendering: "optimizeLegibility"; } \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/ProfileLink.scss b/bfrontend/src/Styles/Components/ProfileLink.scss index 53b0245..b831412 100644 --- a/bfrontend/src/Styles/Components/ProfileLink.scss +++ b/bfrontend/src/Styles/Components/ProfileLink.scss @@ -1,9 +1,32 @@ .profile-picture { border-radius: 50%; + flex-shrink: 0; margin: 5px; width: 32px; height: 32px; + &.default-channel { + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient( + hsl(225, 80%, 50%), + hsl(299, 80%, 50%) + ); + color: var(--default-text-color); + } + + &.default-user { + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient( + hsl(9, 100%, 62%), + hsl(327, 100%, 62%) + ); + color: var(--default-text-color); + } + &.profile-picture-8 { width: 8px; height: 8px; @@ -44,5 +67,21 @@ } .profile-username { - font-weight: 550; + font-weight: 500; + font-size: 1rem; + line-height: 1.256rem; +} + +.darker-text { + color: var(--darker-text-color); +} + +.default-channel-styled-text { + font-size: 24px !important; + user-select: none; +} + +.default-user-styled-text { + font-size: 24px !important; + user-select: none; } \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Textbox.scss b/bfrontend/src/Styles/Components/Textbox.scss index fb73e69..e9f2893 100644 --- a/bfrontend/src/Styles/Components/Textbox.scss +++ b/bfrontend/src/Styles/Components/Textbox.scss @@ -11,5 +11,8 @@ border-radius: var(--message-box-border-radius); background-color: var(--message-box-color); height: 32px; + padding: 6px; + padding-left: 16px; + font-size: 16px !important; } } \ No newline at end of file diff --git a/bfrontend/src/Styles/root.scss b/bfrontend/src/Styles/root.scss index 4251ffb..a77844c 100644 --- a/bfrontend/src/Styles/root.scss +++ b/bfrontend/src/Styles/root.scss @@ -1,19 +1,21 @@ :root { - --background-color: #{$dark1}; + --background-color: #030303; --default-main-card-color: var(--background-color); --card-box-shadow-color: 0 1px 0 #1d1a1abe; - --default-text-color: #{$light3}; - --darker-text-color: #{$light1}; + --default-text-color: #cacaca; + --darker-text-color: #808080; - --accent-color-dark: #{$dark2}; - --accent-color-light: #{$dark3}; - --accent-color-very-light: #{$dark4}; + --card-accent-color: #212121; + --focus-accent-color: hsl(246, 57%, 38%); + --focus-accent-color-deep: hsl(255, 70%, 30%); - --channel-top-bar-color-accent: var(--accent-color-light); + --channel-top-bar-color-accent: var(--background-color); --channel-top-bar-color: var(--background-color); - --message-box-color: var(--accent-color-light); + --bar-card-border-bottom: solid 1px #1d1d1d; + --message-box-color: var(--card-accent-color); + --message-box-shadow: #22222273 6px 8px 12px; --channel-top-bar-border-color: var(--accent-color-dark); --channel-list-background-color: var(--background-color); @@ -22,8 +24,8 @@ --channel-view-container-color: var(--accent-color-dark); --button-color: var(--background-color); - --button-hover-color: var(--accent-color-dark); - --button-selected-color: var(--accent-color-light); + --button-hover-color: var(--focus-accent-color-deep); + --button-selected-color: var(--focus-accent-color); --default-transition-duration: 50ms; @@ -31,6 +33,6 @@ --default-button-border-radius: 0px; --channel-message-border-radius: 0px; --bar-cards-border-radius: 0px; - --channel-button-border-radius: 4px; - --message-box-border-radius: 4px; + --channel-button-border-radius: 10px; + --message-box-border-radius: 10px; } \ No newline at end of file