From 551d83fc06780ede9037ce3796c4c969ef93bbe2 Mon Sep 17 00:00:00 2001 From: hippoz Date: Sun, 27 Jun 2021 14:04:04 +0300 Subject: [PATCH] experiment more with redesign --- bfrontend/src/API/APIRequest.js | 3 --- .../src/Components/Channels/ChannelUserList.js | 1 - bfrontend/src/Components/Channels/ChannelView.js | 12 ++++++++++-- bfrontend/src/Components/Messages/Message.js | 4 ++-- bfrontend/src/Components/UI/ProfileLink.js | 4 ++-- bfrontend/src/Components/Users/UserProfileLink.js | 4 ++-- bfrontend/src/Styles/Components/Containers.scss | 4 ++++ bfrontend/src/Styles/Components/Message.scss | 8 ++++++-- bfrontend/src/Styles/Components/ProfileLink.scss | 15 ++++++++++++++- bfrontend/src/Styles/root.scss | 10 +++++----- 10 files changed, 45 insertions(+), 20 deletions(-) diff --git a/bfrontend/src/API/APIRequest.js b/bfrontend/src/API/APIRequest.js index 2559115..212ee82 100644 --- a/bfrontend/src/API/APIRequest.js +++ b/bfrontend/src/API/APIRequest.js @@ -37,15 +37,12 @@ APIRequest.authenticated = async function(endpoint, options) { if (!options) options = {}; if (!options.headers) options.headers = {}; - console.log(options); - options.headers = { "Authorization": token.getToken(), ...options.headers }; try { - console.log(options); res = await fetch(`${config.apiUrl}${endpoint}`, options); json = await res.json(); isOK = true; diff --git a/bfrontend/src/Components/Channels/ChannelUserList.js b/bfrontend/src/Components/Channels/ChannelUserList.js index 74f56e6..81985be 100644 --- a/bfrontend/src/Components/Channels/ChannelUserList.js +++ b/bfrontend/src/Components/Channels/ChannelUserList.js @@ -1,7 +1,6 @@ import UserProfileButton from '../Users/UserButton'; function ChannelUserList({ presence }) { - console.log(presence); return (
diff --git a/bfrontend/src/Components/Channels/ChannelView.js b/bfrontend/src/Components/Channels/ChannelView.js index 412c7bf..f98f505 100644 --- a/bfrontend/src/Components/Channels/ChannelView.js +++ b/bfrontend/src/Components/Channels/ChannelView.js @@ -41,12 +41,20 @@ const ChannelView = ({ channels, messages, channel, selectedChannelId, experimen }, [channels, id, dispatch, channel, selectedChannelId]); if (channel) { - let messagesView = messages.map(m => ); + let messagesView = messages.map((m, i) => { + //if (messages[i-1] && messages[i-1].author.username === m.author.username) return + return ; + }); if (messagesView === undefined || messagesView.length <= 0) { messagesView = (
- Wow, such empty! +
+
+ #? +
+
+ No messages yet...
); } diff --git a/bfrontend/src/Components/Messages/Message.js b/bfrontend/src/Components/Messages/Message.js index 35994a2..3ae6c8e 100644 --- a/bfrontend/src/Components/Messages/Message.js +++ b/bfrontend/src/Components/Messages/Message.js @@ -1,9 +1,9 @@ import UserProfileLink from '../Users/UserProfileLink'; -export default function Message({ message }) { +export default function Message({ message, hideUsername }) { return (
- + { message.content }
); diff --git a/bfrontend/src/Components/UI/ProfileLink.js b/bfrontend/src/Components/UI/ProfileLink.js index 22acb6b..b5f32f5 100644 --- a/bfrontend/src/Components/UI/ProfileLink.js +++ b/bfrontend/src/Components/UI/ProfileLink.js @@ -1,5 +1,5 @@ // This is a mess pls fix later -export default function ProfileLink({ object, size, type, offset=true, children=null }) { +export default function ProfileLink({ object, size, type, offset=true, children=null, hideName=false }) { let picture; if (size !== "0") { @@ -26,7 +26,7 @@ export default function ProfileLink({ object, size, type, offset=true, children= return (
{ picture } - { title } + { title } { bottomInfo }
); diff --git a/bfrontend/src/Components/Users/UserProfileLink.js b/bfrontend/src/Components/Users/UserProfileLink.js index fe46ca9..e509ef6 100644 --- a/bfrontend/src/Components/Users/UserProfileLink.js +++ b/bfrontend/src/Components/Users/UserProfileLink.js @@ -1,8 +1,8 @@ import ProfileLink from '../UI/ProfileLink' // TODO: Stop using this component and just use the ProfileLink component -export default function UserProfile({ user, size, subtext }) { +export default function UserProfile({ user, size, subtext, hideName }) { return ( - { subtext }) } /> + { subtext }) } /> ); } \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Containers.scss b/bfrontend/src/Styles/Components/Containers.scss index 056a717..9b7e65b 100644 --- a/bfrontend/src/Styles/Components/Containers.scss +++ b/bfrontend/src/Styles/Components/Containers.scss @@ -46,4 +46,8 @@ .hidden-overflow { overflow: hidden; +} + +.hidden { + visibility: hidden; } \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Message.scss b/bfrontend/src/Styles/Components/Message.scss index faace9c..a3427db 100644 --- a/bfrontend/src/Styles/Components/Message.scss +++ b/bfrontend/src/Styles/Components/Message.scss @@ -6,14 +6,18 @@ display: flex; flex-direction: row; margin: 3px; - margin-left: 15px; + margin-left: 1rem; padding: 1px; border-radius: var(--channel-message-border-radius); background-color: var(--channel-message-color); } .no-messages-warning { - text-align: center; + display: flex; + justify-content: center; + align-items: center; + justify-self: center; + flex-direction: column; padding: 50px; color: var(--darker-text-color); } diff --git a/bfrontend/src/Styles/Components/ProfileLink.scss b/bfrontend/src/Styles/Components/ProfileLink.scss index 9ec407f..9f1648c 100644 --- a/bfrontend/src/Styles/Components/ProfileLink.scss +++ b/bfrontend/src/Styles/Components/ProfileLink.scss @@ -4,8 +4,10 @@ margin: 5px; width: 32px; height: 32px; + margin-right: 6px; &.default-channel { + border-radius: 12px; display: flex; align-items: center; justify-content: center; @@ -13,6 +15,12 @@ color: var(--default-text-color); } + &.no-messages-icon { + border-radius: 0; + width: 16em; + height: 16em; + } + &.default-user { display: flex; align-items: center; @@ -71,9 +79,14 @@ } .default-channel-styled-text { - filter: drop-shadow(2px 2px hsl(300, 60%, 25%)); font-size: 24px !important; + filter: drop-shadow(2px 2px hsl(300, 60%, 25%)); user-select: none; + + &.no-messages-text { + filter: drop-shadow(45px 0 hsl(300, 60%, 40%)); + font-size: 8em !important; + } } .default-user-styled-text { diff --git a/bfrontend/src/Styles/root.scss b/bfrontend/src/Styles/root.scss index dbd9888..a61a1cf 100644 --- a/bfrontend/src/Styles/root.scss +++ b/bfrontend/src/Styles/root.scss @@ -14,14 +14,14 @@ --default-user-background: linear-gradient( to bottom right, hsl(275, 55%, 40%), - hsl(300, 55%, 40%), - hsl(325, 55%, 40%) + hsl(325, 55%, 40%), + hsl(350, 55%, 40%) ); --default-channel-background: linear-gradient( - to bottom right, + to top right, hsl(150, 55%, 40%), - hsl(175, 55%, 40%), - hsl(200, 55%, 40%) + hsl(200, 55%, 40%), + hsl(225, 55%, 40%) ); --channel-top-bar-color-accent: var(--background-color);