experiment more with redesign

This commit is contained in:
hippoz 2021-06-27 14:04:04 +03:00
parent f7bd8d82f3
commit 551d83fc06
Signed by: hippoz
GPG key ID: 7C52899193467641
10 changed files with 45 additions and 20 deletions

View file

@ -37,15 +37,12 @@ APIRequest.authenticated = async function(endpoint, options) {
if (!options) options = {}; if (!options) options = {};
if (!options.headers) options.headers = {}; if (!options.headers) options.headers = {};
console.log(options);
options.headers = { options.headers = {
"Authorization": token.getToken(), "Authorization": token.getToken(),
...options.headers ...options.headers
}; };
try { try {
console.log(options);
res = await fetch(`${config.apiUrl}${endpoint}`, options); res = await fetch(`${config.apiUrl}${endpoint}`, options);
json = await res.json(); json = await res.json();
isOK = true; isOK = true;

View file

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

View file

@ -41,12 +41,20 @@ const ChannelView = ({ channels, messages, channel, selectedChannelId, experimen
}, [channels, id, dispatch, channel, selectedChannelId]); }, [channels, id, dispatch, channel, selectedChannelId]);
if (channel) { 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) { if (messagesView === undefined || messagesView.length <= 0) {
messagesView = ( messagesView = (
<div className='no-messages-warning'> <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> </div>
); );
} }

View file

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

View file

@ -1,5 +1,5 @@
// This is a mess pls fix later // 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; let picture;
if (size !== "0") { if (size !== "0") {
@ -26,7 +26,7 @@ export default function ProfileLink({ object, size, type, offset=true, children=
return ( return (
<div className={ classes }> <div className={ classes }>
{ picture } { picture }
<span className="profile-username">{ title }</span> <span className={ hideName ? "profile-username hidden" : "profile-username" }>{ title }</span>
{ bottomInfo } { bottomInfo }
</div> </div>
); );

View file

@ -1,8 +1,8 @@
import ProfileLink from '../UI/ProfileLink' import ProfileLink from '../UI/ProfileLink'
// TODO: Stop using this component and just use the ProfileLink component // 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 ( 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>) } />
); );
} }

View file

@ -47,3 +47,7 @@
.hidden-overflow { .hidden-overflow {
overflow: hidden; overflow: hidden;
} }
.hidden {
visibility: hidden;
}

View file

@ -6,14 +6,18 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 3px; margin: 3px;
margin-left: 15px; margin-left: 1rem;
padding: 1px; padding: 1px;
border-radius: var(--channel-message-border-radius); border-radius: var(--channel-message-border-radius);
background-color: var(--channel-message-color); background-color: var(--channel-message-color);
} }
.no-messages-warning { .no-messages-warning {
text-align: center; display: flex;
justify-content: center;
align-items: center;
justify-self: center;
flex-direction: column;
padding: 50px; padding: 50px;
color: var(--darker-text-color); color: var(--darker-text-color);
} }

View file

@ -4,8 +4,10 @@
margin: 5px; margin: 5px;
width: 32px; width: 32px;
height: 32px; height: 32px;
margin-right: 6px;
&.default-channel { &.default-channel {
border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -13,6 +15,12 @@
color: var(--default-text-color); color: var(--default-text-color);
} }
&.no-messages-icon {
border-radius: 0;
width: 16em;
height: 16em;
}
&.default-user { &.default-user {
display: flex; display: flex;
align-items: center; align-items: center;
@ -71,9 +79,14 @@
} }
.default-channel-styled-text { .default-channel-styled-text {
filter: drop-shadow(2px 2px hsl(300, 60%, 25%));
font-size: 24px !important; font-size: 24px !important;
filter: drop-shadow(2px 2px hsl(300, 60%, 25%));
user-select: none; user-select: none;
&.no-messages-text {
filter: drop-shadow(45px 0 hsl(300, 60%, 40%));
font-size: 8em !important;
}
} }
.default-user-styled-text { .default-user-styled-text {

View file

@ -14,14 +14,14 @@
--default-user-background: linear-gradient( --default-user-background: linear-gradient(
to bottom right, to bottom right,
hsl(275, 55%, 40%), 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( --default-channel-background: linear-gradient(
to bottom right, to top right,
hsl(150, 55%, 40%), 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); --channel-top-bar-color-accent: var(--background-color);