hippoz/brainlet-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

organize files and overhaul ui

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

13
bfrontend/src/Components/Channels/ChannelUserList.js
View file

@ -2,16 +2,17 @@ import UserProfileButton from '../Users/UserButton';
import { connect } from 'react-redux';
function Sidebar({ channelPresenceClientList }) {
function ChannelUserList({ channelPresenceClientList }) {
const users = [
{ username: "thgitrhiorg" },
{ username: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" },
{ username: "FDGFEGSDFHRFGHNERTYBNRNBTYJMNUM" }
{ username: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", _id: "a" },
{ username: "FDGFEGSDFHRFGHNERTYBNRNBTYJMNUM", _id: "b" }
];
return (
<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>
)
}
@ -22,4 +23,4 @@ const stateToProps = (state) => {
};
};
export default connect(stateToProps)(Sidebar);
export default connect(stateToProps)(ChannelUserList);

4
bfrontend/src/Components/Channels/ChannelView.js
View file

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

2
bfrontend/src/Components/Messages/Message.js
View file

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

2
bfrontend/src/Components/UI/Sidebar.js
View file

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

4
bfrontend/src/Global/store.js
View file

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

7
bfrontend/src/Styles/Components/Button.scss
View file

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

9
bfrontend/src/Styles/Components/Card.scss
View file

@ -16,7 +16,8 @@
@include card;
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;
padding: 8px;
@ -26,6 +27,12 @@
justify-content: left;
font-size: medium;
z-index: 100;
&-accent {
@extend .bar-card;
background-color: var(--channel-top-bar-color-accent);
}
}
.message-list-card {

4
bfrontend/src/Styles/Components/Containers.scss
View file

@ -35,4 +35,8 @@
padding: 10px;
z-index: 100;
}
.channel-view {
background-color: var(--channel-view-container-color);
}

2
bfrontend/src/Styles/Components/Message.scss
View file

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

6
bfrontend/src/Styles/Components/Textbox.scss
View file

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

18
bfrontend/src/Styles/root.scss
View file

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