Commit 95b3f310 authored by insert's avatar insert

Import flatbase drawer.

parent 86c23aa9
Pipeline #275 passed with stage
in 1 minute and 52 seconds
......@@ -22,6 +22,8 @@ import { ReactComponent as helpCircleSolid } from 'boxicons/svg/solid/bxs-help-c
import { ReactComponent as megaphoneSolid } from 'boxicons/svg/solid/bxs-megaphone.svg';
import { ReactComponent as chatSolid } from 'boxicons/svg/solid/bxs-chat.svg';
import { ReactComponent as groupSolid } from 'boxicons/svg/solid/bxs-group.svg';
import { ReactComponent as bellSolid } from 'boxicons/svg/solid/bxs-bell.svg';
/* === REGULAR ICONS === */
import { ReactComponent as plusRegular } from 'boxicons/svg/regular/bx-plus.svg';
......@@ -44,7 +46,8 @@ export type Icons = 'cogSolid' | 'plusRegular' | 'homeSolid' | 'newsSolid' | 'us
| 'idCardSolid' | 'extensionSolid' | 'microphoneSolid' | 'cardSolid' | 'brushSolid'
| 'bodyRegular' | 'slideshowSolid' | 'globeRegular' | 'wrenchSolid' | 'infoCircleSolid'
| 'fileRegular' | 'helpCircleSolid' | 'megaphoneSolid' | 'logoutRegular' | 'leftArrowAltRegular'
| 'xRegular' | 'checkRegular' | 'atRegular' | 'chatSolid' | 'groupSolid' | 'menuRegular';
| 'xRegular' | 'checkRegular' | 'atRegular' | 'chatSolid' | 'groupSolid' | 'menuRegular'
| 'bellSolid';
const INDEX: { [key in Icons]: FunctionComponent } = { cogSolid, plusRegular, homeSolid, newsSolid,
userDetailSolid, userPlusSolid, mobileRegular,
chevronDownRegular, shieldSolid, idCardSolid,
......@@ -54,7 +57,7 @@ const INDEX: { [key in Icons]: FunctionComponent } = { cogSolid, plusRegular, h
fileRegular, helpCircleSolid, megaphoneSolid,
logoutRegular, leftArrowAltRegular, xRegular,
checkRegular, atRegular, chatSolid, groupSolid,
menuRegular };
menuRegular, bellSolid };
interface IconProps extends Omit<SVGProps<SVGElement>, 'className'> {
icon: Icons,
color?: string,
......
import React, { Fragment } from 'react';
import styles from './Drawer.module.scss';
type DrawerProps = {
swipeable?: boolean,
open: boolean,
onChange: (open: boolean) => void
} & {
swipeable: true,
hysteresis?: number,
swipeAreaWidth?: number
}
export default function Drawer(props: DrawerProps) {
return (
<Fragment>
{ props.swipeable && <div className={styles.swipeArea} style={{ width: props.swipeAreaWidth || 20 }} /> }
</Fragment>
);
}
\ No newline at end of file
import React, { createContext, useState, memo } from 'react';
import React, { createContext, useState, memo, useEffect } from 'react';
import Helmet from 'react-helmet';
import styles from './Chat.module.scss';
import { SwipeableDrawer } from 'flatbase/dist';
import { HomeSidebar } from './chat/sidebar/conversation/Home';
import { GuildSidebar } from './chat/sidebar/conversation/Guild';
import Browser from './chat/sidebar/Browser';
import { Profile } from './chat/sidebar/conversation/Profile';
import Channel from './chat/Channel';
import Channel from './chat/Channel';
export enum Page {
GUILD = 0x1, // switches to guild specific sidebar
......@@ -32,6 +33,9 @@ export const ChatContext = createContext<{
const Chat = memo(() => {
let [ page, setPage ] = useState<Page>(Page.FRIENDS);
let [ channel, setChannel ] = useState<string>();
let [ drawer, setDrawer ] = useState(false);
useEffect(() => setDrawer(false), [page, channel]);
let states = {
page, setPage,
......@@ -53,13 +57,14 @@ const Chat = memo(() => {
<meta name="theme-color" content="#333234"/>
</Helmet>
<div className={styles.chat}>
<div className={styles.sidebar}>
<SwipeableDrawer className={styles.sidebar} open={drawer}
onChange={setDrawer} closeOnOpacityClick={true}>
<Browser />
<div className={styles.conversation}>
{ page ? <HomeSidebar /> : <GuildSidebar /> }
<Profile />
</div>
</div>
</SwipeableDrawer>
<div className={styles.main}>
{ body }
</div>
......
......@@ -22,6 +22,13 @@
.messages {
flex-grow: 1;
padding: 0px 30px;
user-select: text;
color: var(--body-text);
@media only screen and (max-width: 900px) { padding: 0 12px; }
}
.pending {
opacity: .45;
......@@ -35,6 +42,9 @@
.sidebar {
flex-shrink: 1;
&:not(.visible) {
display: none;
}
}
}
}
\ No newline at end of file
}
\ No newline at end of file
......@@ -51,6 +51,7 @@ export default function Channel(props: { id: string }) {
let sidebar = classNames({
[styles.sidebar]: true,
[hiddenScrollbar]: true,
[styles.visible]: !!((Page.GROUP | Page.GUILD) & chat.page)
});
......@@ -74,7 +75,7 @@ export default function Channel(props: { id: string }) {
</form>
</div>
</div>
<div className={classNames(sidebar, hiddenScrollbar)}>
<div className={sidebar}>
sidebar time
</div>
</div>
......
......@@ -3,6 +3,7 @@
display: flex;
align-items: center;
padding: 0 20px;
box-shadow: 0px 1px 6px 0px rgba(33, 33, 33, 0.3);
.info {
display: flex;
......@@ -25,15 +26,16 @@
.channel {
margin-right: 5px;
height: 22px;
width: 22px;
}
.title {
font-size: .875rem;
font-weight: 600;
}
.dropdown {
cursor: pointer;
}
.dropdown { margin: 0 4px; cursor: pointer; }
.divider {
width: 1px;
......@@ -68,4 +70,15 @@
}
}
}
.menu {
flex: 0 0 auto;
.icon {
margin-left: 10px;
&:first-child { margin-left: 0; }
}
.feedback { margin-left: 20px; }
}
}
\ No newline at end of file
import React, { useContext } from 'react';
import React, { useContext, Fragment } from 'react';
import styles from './Header.module.scss';
import { ChannelContext } from '../Channel';
......@@ -8,32 +8,36 @@ import { DMChannel, GroupChannel } from 'riotchat.js/dist/internal/Channel';
export default function Header() {
let channel = useContext(ChannelContext) as Channel;
let title, icon: Icons;
let title, icon: Icons, description;
if (channel instanceof DMChannel) {
title = channel.recipient.username;
icon = 'atRegular';
} else if (channel instanceof GroupChannel) {
title = channel.group.displayTitle;
icon = 'groupSolid';
description = channel.description;
} else {
title = 'TODO';
icon = 'chatSolid';
}
return (
<div className={styles.header}>
<div className={styles.info}>
<div className={styles.hamburger}><Icon icon="menuRegular"/></div>
<Icon className={styles.channel} icon={icon} />
<div className={styles.title}>{title}</div>
<div className={styles.dropdown}><Icon icon="chevronDownRegular"/></div>
<div className={styles.divider}/>
<div className={styles.description}>Hello this is a test description</div>
<div className={styles.indicator}/>
</div>
<div className={styles.menu}>
</div>
</div>
<div className={styles.header}>
<div className={styles.info}>
<div className={styles.hamburger}><Icon icon="menuRegular"/></div>
<Icon className={styles.channel} icon={icon} />
<div className={styles.title}>{title}</div>
{ channel instanceof DMChannel && <div className={styles.indicator}/> }
{ channel instanceof GroupChannel && <div className={styles.dropdown}><Icon icon="chevronDownRegular"/></div> }
{ description && <Fragment>
<div className={styles.divider}/>
<div className={styles.description}>{ description }</div>
</Fragment> }
</div>
<div className={styles.menu}>
<Icon className={styles.icon} icon="bellSolid" />
<Icon className={styles.feedback} icon="megaphoneSolid" />
</div>
</div>
);
}
\ No newline at end of file
import React from 'react';
import React, { memo } from 'react';
import styles from './Message.module.scss';
import { Message as RMessage } from 'riotchat.js/dist/internal/Message';
export default function Message(props: { message: RMessage }) {
const Message = memo((props: { message: RMessage }) => {
let msg = props.message;
return (
<div className={styles.message}>
......@@ -16,4 +16,6 @@ export default function Message(props: { message: RMessage }) {
</div>
</div>
);
}
\ No newline at end of file
});
export default Message;
\ No newline at end of file
......@@ -9,6 +9,8 @@ export function Profile() {
let app = useContext(AppContext);
let user = Instance.client.user;
//let [ statusMenu, setStatusMenu ] = useState(false);
return (
<div className={styles.profile}>
{/*this.state.statusMenuOpen && <StatusMenu onSet={(status: "online" | "away" | "busy" | "offline") => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment