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

experiment more with redesign

Browse source
This commit is contained in:
hippoz 2021-06-27 14:04:04 +03:00
parent f7bd8d82f3
commit 551d83fc06
No known key found for this signature in database
GPG key ID: 7C52899193467641
10 changed files with 45 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
bfrontend/src/API/APIRequest.js
View file

@ -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;

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

@ -1,7 +1,6 @@
import UserProfileButton from '../Users/UserButton';
function ChannelUserList({ presence }) {
console.log(presence);
return (
<div className="main-card sidebar">
<div className="channel-list">

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

@ -41,12 +41,20 @@ const ChannelView = ({ channels, messages, channel, selectedChannelId, experimen
}, [channels, id, dispatch, channel, selectedChannelId]);
if (channel) {
let messagesView = messages.map(m => <Message key={ m._id } message={ m } />);
let messagesView = messages.map((m, i) => {
//if (messages[i-1] && messages[i-1].author.username === m.author.username) return <Message key={ m._id } message={ m } hideUsername={ true } />
return <Message key={ m._id } message={ m } />;
});
if (messagesView === undefined || messagesView.length <= 0) {
messagesView = (
<div className='no-messages-warning'>
Wow, such empty!
<div className="profile-picture default-user no-messages-icon">
<div className="default-channel-styled-text no-messages-text">
#?
</div>
</div>
<span style={ { marginTop: "1em" } }>No messages yet...</span>
</div>
);
}

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

@ -1,9 +1,9 @@
import UserProfileLink from '../Users/UserProfileLink';
export default function Message({ message }) {
export default function Message({ message, hideUsername }) {
return (
<div className="message">
<UserProfileLink size="0" user={ message.author } />
<UserProfileLink size="0" user={ message.author } hideName={ hideUsername } />
<span className="message-content">{ message.content }</span>
</div>
);

4
bfrontend/src/Components/UI/ProfileLink.js
View file

@ -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 (
<div className={ classes }>
{ picture }
<span className="profile-username">{ title }</span>
<span className={ hideName ? "profile-username hidden" : "profile-username" }>{ title }</span>
{ bottomInfo }
</div>
);

4
bfrontend/src/Components/Users/UserProfileLink.js
View file

@ -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 (
<ProfileLink object={ user } size={ size } type="user" offset={ subtext !== undefined } children={ (subtext) && (<span>{ subtext }</span>) } />
<ProfileLink hideName={ hideName } object={ user } size={ size } type="user" offset={ subtext !== undefined } children={ (subtext) && (<span>{ subtext }</span>) } />
);
}

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

@ -46,4 +46,8 @@
.hidden-overflow {
overflow: hidden;
}
.hidden {
visibility: hidden;
}

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

@ -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);
}

15
bfrontend/src/Styles/Components/ProfileLink.scss
View file

@ -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 {

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

@ -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);