organize files and overhaul ui

This commit is contained in:
hippoz 2021-03-30 04:20:11 +03:00
parent 118a55fed9
commit 847ad0d9c5
Signed by: hippoz
GPG key ID: 7C52899193467641
11 changed files with 43 additions and 28 deletions

View file

@ -2,16 +2,17 @@ import UserProfileButton from '../Users/UserButton';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
function Sidebar({ channelPresenceClientList }) { function ChannelUserList({ channelPresenceClientList }) {
const users = [ const users = [
{ username: "thgitrhiorg" }, { username: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", _id: "a" },
{ username: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" }, { username: "FDGFEGSDFHRFGHNERTYBNRNBTYJMNUM", _id: "b" }
{ username: "FDGFEGSDFHRFGHNERTYBNRNBTYJMNUM" }
]; ];
return ( return (
<div className="main-card sidebar"> <div className="main-card sidebar">
{ users.map((user) => <UserProfileButton user={ user }></UserProfileButton>) } <div className="channel-list">
{ users.map((user) => <UserProfileButton key={ user._id } user={ user } />) }
</div>
</div> </div>
) )
} }
@ -22,4 +23,4 @@ const stateToProps = (state) => {
}; };
}; };
export default connect(stateToProps)(Sidebar); export default connect(stateToProps)(ChannelUserList);

View file

@ -53,12 +53,12 @@ const ChannelView = ({ channels, messages, channel, selectedChannelId }) => {
return ( return (
<div className="col-flex-card"> <div className="col-flex-card">
<div className="bar-card"> <div className="bar-card-accent">
<ChannelProfile channel={ channel } size="24" /> <ChannelProfile channel={ channel } size="24" />
</div> </div>
<div className="main-card row-flex-card"> <div className="main-card row-flex-card">
<div className="col-flex-card"> <div className="col-flex-card channel-view">
<div className="message-list-card"> <div className="message-list-card">
{ messagesView } { messagesView }
<div ref={ invisibleBottomMessageRef }></div> <div ref={ invisibleBottomMessageRef }></div>

View file

@ -4,7 +4,7 @@ export default function Message({ message }) {
return ( return (
<div className="message"> <div className="message">
<UserProfileLink size="0" user={ message.author }></UserProfileLink> <UserProfileLink size="0" user={ message.author }></UserProfileLink>
<span style={ {"padding-left": "5px"} }>{ message.content }</span> <span style={ {paddingLeft: "5px"} }>{ message.content }</span>
</div> </div>
); );
} }

View file

@ -9,7 +9,7 @@ function Sidebar({ user }) {
<div className="main-card sidebar"> <div className="main-card sidebar">
<div className="bar-card"> <div className="bar-card">
{ user && <UserProfileLink user={ user } /> } { user && <UserProfileLink user={ user } /> }
{ !user && <ProfileLinkLoader></ProfileLinkLoader> } { !user && <ProfileLinkLoader /> }
</div> </div>
<ChannelList /> <ChannelList />
</div> </div>

View file

@ -42,8 +42,8 @@ const reducer = (state = intitialState, payload) => {
...state, ...state,
messages: { messages: {
...state.messages, ...state.messages,
[payload.message.channel._id]: [ [payload.message.channel_id]: [
...state.messages[payload.message.channel._id] || [], ...state.messages[payload.message.channel_id] || [],
payload.message payload.message
] ]
} }

View file

@ -17,8 +17,7 @@
box-shadow: none; box-shadow: none;
border-radius: var(--channel-button-border-radius); border-radius: var(--channel-button-border-radius);
min-width: 200px; width: 200px;
max-width: 250px;
min-height: 40px; min-height: 40px;
margin: 4px; margin: 4px;
padding: 2px; padding: 2px;
@ -27,12 +26,12 @@
&-pressed { &-pressed {
@extend .button; @extend .button;
background-color: var(--accent-color-very-light); background-color: var(--button-selected-color);
} }
} }
.button:hover:not(.button-pressed) { .button:hover:not(.button-pressed) {
background-color: var(--accent-color-light); background-color: var(--button-hover-color);
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {

View file

@ -16,7 +16,8 @@
@include card; @include card;
background-color: var(--channel-top-bar-color); background-color: var(--channel-top-bar-color);
box-shadow: 0 1px 1px var(--card-box-shadow-color); // box-shadow: 0 8px 6px -6px black;
box-shadow: 1px 1px 1px -0px var(--card-box-shadow-color);
height: 32px; height: 32px;
padding: 8px; padding: 8px;
@ -26,6 +27,12 @@
justify-content: left; justify-content: left;
font-size: medium; font-size: medium;
z-index: 100; z-index: 100;
&-accent {
@extend .bar-card;
background-color: var(--channel-top-bar-color-accent);
}
} }
.message-list-card { .message-list-card {

View file

@ -36,3 +36,7 @@
z-index: 100; z-index: 100;
} }
.channel-view {
background-color: var(--channel-view-container-color);
}

View file

@ -9,7 +9,7 @@
margin-left: 10px; margin-left: 10px;
padding: 1px; padding: 1px;
border-radius: var(--channel-message-border-radius); border-radius: var(--channel-message-border-radius);
background-color: var(--background-color); background-color: var(--channel-message-color);
} }
.no-messages-warning { .no-messages-warning {

View file

@ -1,7 +1,7 @@
.text-input { .text-input {
@include card; @include card;
margin: 5px; margin: 1px;
padding: 5px; padding: 5px;
border: none; border: none;
color: var(--default-text-color); color: var(--default-text-color);
@ -9,7 +9,7 @@
&.message-input { &.message-input {
border-radius: var(--message-box-border-radius); border-radius: var(--message-box-border-radius);
background-color: var(--accent-color-dark); background-color: var(--message-box-color);
height: 24px; height: 32px;
} }
} }

View file

@ -2,7 +2,7 @@
--background-color: #{$dark1}; --background-color: #{$dark1};
--default-main-card-color: var(--background-color); --default-main-card-color: var(--background-color);
--card-box-shadow-color:#1f1c1c; --card-box-shadow-color: #111010be;
--default-text-color: #{$light3}; --default-text-color: #{$light3};
--darker-text-color: #{$light1}; --darker-text-color: #{$light1};
@ -11,15 +11,19 @@
--accent-color-light: #{$dark3}; --accent-color-light: #{$dark3};
--accent-color-very-light: #{$dark4}; --accent-color-very-light: #{$dark4};
--channel-top-bar-color: var(--accent-color-light); --channel-top-bar-color-accent: var(--accent-color-light);
--channel-bottom-text-bar-color: var(--accent-color-light); --channel-top-bar-color: var(--background-color);
--message-box-color: var(--accent-color-light);
--channel-top-bar-border-color: var(--accent-color-dark);
--channel-list-background-color: var(--accent-color-dark); --channel-list-background-color: var(--background-color);
--channel-message-list-background-color: var(--background-color); --channel-message-list-background-color: var(--accent-color-dark);
--channel-message-color: var(--accent-color-dark); --channel-message-color: var(--accent-color-dark);
--channel-view-container-color: var(--accent-color-dark);
--button-color: var(--accent-color-dark); --button-color: var(--background-color);
--button-hover-color: var(--accent-color-light); --button-hover-color: var(--accent-color-dark);
--button-selected-color: var(--accent-color-light);
--default-transition-duration: 50ms; --default-transition-duration: 50ms;