QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-15 20:30:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP: sidebar overlay component.

Browse Source
This commit is contained in:
a.bouhuolia
2021-08-01 22:11:44 +02:00
parent 44edc990ae
commit 9dbd128236
13 changed files with 277 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/App.js
View File

@@ -48,7 +48,7 @@ function App({ locale }) {
<div className="App">
<Router history={history}>
<Switch>
<Route path={'/auth'} component={Authentication} />
{/* <Route path={'/auth'} component={Authentication} /> */}
<Route path={'/'}>
<PrivateRoute component={DashboardPrivatePages} />
</Route>

6
client/src/components/Dashboard/Dashboard.js
View File

@@ -17,6 +17,8 @@ import DrawersContainer from 'components/DrawersContainer';
* Dashboard page.
*/
export default function Dashboard() {
const dashboardContentRef = React.createRef();
return (
<DashboardProvider>
<Switch>
@@ -29,8 +31,8 @@ export default function Dashboard() {
<Route path="/">
<DashboardSplitPane>
<Sidebar />
<DashboardContent />
<Sidebar dashboardContentRef={dashboardContentRef} />
<DashboardContent ref={dashboardContentRef} />
</DashboardSplitPane>
</Route>
</Switch>

6
client/src/components/Dashboard/DashboardContent.js
View File

@@ -5,14 +5,14 @@ import DashboardContentRoute from 'components/Dashboard/DashboardContentRoute';
import DashboardFooter from 'components/Dashboard/DashboardFooter';
import DashboardErrorBoundary from './DashboardErrorBoundary';
export default function () {
export default React.forwardRef(({}, ref) => {
return (
<ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
<div className="dashboard-content" id="dashboard">
<div className="dashboard-content" id="dashboard" ref={ref}>
<DashboardTopbar />
<DashboardContentRoute />
<DashboardFooter />
</div>
</ErrorBoundary>
);
}
});

8
client/src/components/Dashboard/PrivatePages.js
View File

@@ -17,16 +17,16 @@ export default function DashboardPrivatePages() {
return (
<PrivatePagesProvider>
<Switch>
<Route path={'/setup'}>
{/* <Route path={'/setup'}>
<EnsureOrganizationIsNotReady>
<SetupWizardPage />
</EnsureOrganizationIsNotReady>
</Route>
</Route> */}
<Route path='/'>
<EnsureOrganizationIsReady>
{/* <EnsureOrganizationIsReady> */}
<Dashboard />
</EnsureOrganizationIsReady>
{/* </EnsureOrganizationIsReady> */}
</Route>
</Switch>
</PrivatePagesProvider>

4
client/src/components/Dashboard/PrivatePagesProvider.js
View File

@@ -7,10 +7,10 @@ import { useCurrentOrganization } from '../../hooks/query/organization';
*/
export function PrivatePagesProvider({ children }) {
// Fetches the current user's organization.
const { isLoading } = useCurrentOrganization();
// const { isLoading } = useCurrentOrganization();
return (
<DashboardLoadingIndicator isLoading={isLoading}>
<DashboardLoadingIndicator isLoading={false}>
{children}
</DashboardLoadingIndicator>
)

14
client/src/components/Sidebar/Sidebar.js
View File

@@ -1,12 +1,12 @@
import React from 'react';
import { Menu, MenuItem } from '@blueprintjs/core';
import SidebarContainer from 'components/Sidebar/SidebarContainer';
import SidebarHead from 'components/Sidebar/SidebarHead';
import SidebarMenu from 'components/Sidebar/SidebarMenu';
import SidebarOverlay from 'components/SidebarOverlay';
import 'style/containers/Dashboard/Sidebar.scss';
export default function Sidebar() {
export default function Sidebar({ dashboardContentRef }) {
return (
<SidebarContainer>
<SidebarHead />
@@ -14,10 +14,8 @@ export default function Sidebar() {
<div className="sidebar__menu">
<SidebarMenu />
</div>
<div class="sidebar__version">
0.0.1-beta version.
</div>
<div class="sidebar__version">0.0.1-beta version.</div>
</SidebarContainer>
)
}
);
}

57
client/src/components/Sidebar/SidebarMenu.js
View File

@@ -6,11 +6,15 @@ import Icon from 'components/Icon';
import MenuItem from 'components/MenuItem';
import { MenuItemLabel } from 'components';
import classNames from 'classnames';
import SidebarOverlay from 'components/SidebarOverlay';
export default function SidebarMenu() {
const history = useHistory();
const location = useLocation();
const [isOpen, setIsOpen] = React.useState(false);
const [currentItem, setCurrentItem] = React.useState(null);
const menuItemsMapper = (list) => {
return list.map((item, index) => {
const children = Array.isArray(item.children)
@@ -18,33 +22,41 @@ export default function SidebarMenu() {
: null;
const matchPath = (pathname, path) => {
return item.matchExact ? pathname === path : pathname.indexOf(path) !== -1;
return item.matchExact
? pathname === path
: pathname.indexOf(path) !== -1;
};
const isActive = (item.children) ?
item.children.some((c) => matchPath(location.pathname, c.href)) :
(item.href && matchPath(location.pathname, item.href));
const isActive = item.children
? item.children.some((c) => matchPath(location.pathname, c.href))
: item.href && matchPath(location.pathname, item.href);
const handleItemClick = () => {
if (item.href) {
history.push(item.href);
}
setIsOpen(true);
setCurrentItem(item);
};
const maybeRenderLabel = (item) => item.newTabHref ? (
<Button
className="menu-item__add-btn"
icon={<Icon icon={'plus'} iconSize={16} />}
onClick={(event) => {
history.push(item.newTabHref);
event.stopPropagation();
}}
/>
) : null;
const maybeRenderLabel = (item) =>
item.newTabHref ? (
<Button
className="menu-item__add-btn"
icon={<Icon icon={'plus'} iconSize={16} />}
onClick={(event) => {
history.push(item.newTabHref);
event.stopPropagation();
}}
/>
) : null;
return item.spacer ? (
<div class="bp3-menu-spacer" style={{
'height': `${item.spacer}px`,
}}></div>
<div
class="bp3-menu-spacer"
style={{
height: `${item.spacer}px`,
}}
></div>
) : item.divider ? (
<MenuDivider key={index} title={item.title} />
) : item.label ? (
@@ -72,5 +84,14 @@ export default function SidebarMenu() {
};
const items = menuItemsMapper(sidebarMenuList);
return <Menu className="sidebar-menu">{items}</Menu>;
return (
<div>
<Menu className="sidebar-menu">{items}</Menu>{' '}
<SidebarOverlay
isOpen={isOpen}
items={currentItem?.children || []}
/>
</div>
);
}

19
client/src/components/SidebarOverlay/SidebarOverlayContainer.tsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import { Scrollbar } from 'react-scrollbars-custom';
interface ISidebarOverlayContainerProps {
children: JSX.Element | JSX.Element[],
}
/**
* Sidebar overlay container.
*/
export default function SidebarOverlayContainer({ children }: ISidebarOverlayContainerProps) {
return (
<div className={'sidebar-overlay__scroll-wrapper'}>
<Scrollbar noDefaultStyles={true}>
<div className="sidebar-overlay__inner">{children}</div>
</Scrollbar>
</div>
);
}

90
client/src/components/SidebarOverlay/index.tsx Normal file
View File

@@ -0,0 +1,90 @@
import React from 'react';
import { Overlay } from '@blueprintjs/core';
import { Link } from 'react-router-dom';
import SidebarOverlayContainer from './SidebarOverlayContainer';
interface ISidebarOverlayItem {
text: string;
href: string;
divider?: boolean;
label?: boolean
}
interface ISidebarOverlayProps {
isOpen: boolean;
items: ISidebarOverlayItem[];
overlayProps: any;
overlayContainerRef: any;
}
interface ISidebarOverlayItemProps {
text: string;
href: string;
}
interface ISidebarOverlayItemDivider {
divider: boolean;
}
/**
* Sidebar overlay item.
*/
function SidebarOverlayItem({ text, href }: ISidebarOverlayItemProps) {
return (
<div className="sidebar-overlay__item">
<Link to={href}>{text}</Link>
</div>
);
}
interface ISidebarOverlayItemLabel {
text: string;
}
function SidebarOverlayLabel({ text }: ISidebarOverlayItemLabel) {
return <div className="sidebar-overlay__label">{text}</div>;
}
function SidebarOverlayDivider() {
return <div className={'sidebar-overlay__divider'}></div>;
}
/**
* Sidebar overlay component.
*/
export default function SidebarOverlay({
isOpen = false,
items,
}: ISidebarOverlayProps) {
//
if (!isOpen) {
return '';
}
const handleOverlayClose = () => {
};
return (
<Overlay
isOpen={isOpen}
portalContainer={document.getElementById('dashboard') || document.body}
onClose={handleOverlayClose}
>
<div className="sidebar-overlay">
<SidebarOverlayContainer>
<div className="sidebar-overlay__menu">
{items.map((item) =>
item.divider ? (
<SidebarOverlayDivider />
) : item.label ? (
<SidebarOverlayLabel text={item.text} />
) : (
<SidebarOverlayItem text={item.text} href={item.href} />
),
)}
</div>
</SidebarOverlayContainer>
</div>
</Overlay>
);
}

1
client/src/config/sidebarMenu.js
View File

@@ -137,6 +137,7 @@ export default [
text: <T id={'all_reports'} />,
href: '/financial-reports',
matchExact: true,
label: true
},
{
divider: true,

117
client/src/style/App.scss
View File

@@ -47,11 +47,13 @@ body.hide-scrollbar .Pane2 {
}
.bp3-fill {
.bp3-popover-wrapper,
.bp3-popover-target {
display: block;
width: 100%;
}
.bp3-button {
width: 100%;
justify-content: start;
@@ -61,6 +63,7 @@ body.hide-scrollbar .Pane2 {
.bp3-datepicker-caption .bp3-html-select::after {
margin-right: 6px;
}
.bp3-select-popover .bp3-menu {
max-height: 300px;
max-width: 400px;
@@ -100,27 +103,21 @@ body.hide-scrollbar .Pane2 {
background-color: rgba(0, 10, 30, 0.7);
}
.ReactVirtualized__Collection {
}
.ReactVirtualized__Collection {}
.ReactVirtualized__Collection__innerScrollContainer {
}
.ReactVirtualized__Collection__innerScrollContainer {}
/* Grid default theme */
.ReactVirtualized__Grid {
}
.ReactVirtualized__Grid {}
.ReactVirtualized__Grid__innerScrollContainer {
}
.ReactVirtualized__Grid__innerScrollContainer {}
/* Table default theme */
.ReactVirtualized__Table {
}
.ReactVirtualized__Table {}
.ReactVirtualized__Table__Grid {
}
.ReactVirtualized__Table__Grid {}
.ReactVirtualized__Table__headerRow {
font-weight: 700;
@@ -129,6 +126,7 @@ body.hide-scrollbar .Pane2 {
flex-direction: row;
align-items: center;
}
.ReactVirtualized__Table__row {
display: flex;
flex-direction: row;
@@ -148,6 +146,7 @@ body.hide-scrollbar .Pane2 {
margin-right: 10px;
min-width: 0px;
}
.ReactVirtualized__Table__rowColumn {
text-overflow: ellipsis;
white-space: nowrap;
@@ -157,6 +156,7 @@ body.hide-scrollbar .Pane2 {
.ReactVirtualized__Table__rowColumn:first-of-type {
margin-left: 10px;
}
.ReactVirtualized__Table__sortableHeaderColumn {
cursor: pointer;
}
@@ -165,32 +165,115 @@ body.hide-scrollbar .Pane2 {
display: flex;
align-items: center;
}
.ReactVirtualized__Table__sortableHeaderIcon {
flex: 0 0 24px;
height: 1em;
width: 1em;
fill: currentColor;
}
.ReactVirtualized__Grid, .ReactVirtualized__List { direction: inherit !important; }
/* List default theme */
.ReactVirtualized__Grid,
.ReactVirtualized__List {
direction: inherit !important;
}
/* List default theme */
.bp3-drawer{
.ReactVirtualized__List {}
.bp3-drawer {
box-shadow: 0 0 0;
}
// RTL Icons.
html[dir="rtl"] {
.bp3-icon-caret-right{
.bp3-icon-caret-right {
transform: scaleX(-1);
}
}
html[lang^="ar"] {
body{
body {
letter-spacing: -0.01rem;
}
}
.sidebar-overlay {
background: #fff;
height: 100%;
width: 300px;
&__scroll-wrapper {
height: 100%
}
.ScrollbarsCustom-Track {
&.ScrollbarsCustom-TrackY,
&.ScrollbarsCustom-TrackX {
background: rgba(0, 0, 0, 0);
}
}
.ScrollbarsCustom-Thumb {
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
background: rgba(0, 0, 0, 0);
}
}
.ScrollbarsCustom-Content {
display: flex;
flex-direction: column;
height: 100%;
}
&:hover {
.ScrollbarsCustom-Thumb {
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
background: rgba(255, 255, 255, 0.25);
}
}
}
&__menu {
margin: 20px 0;
}
&__item {
font-size: 15px;
color: #032259;
a {
color: inherit;
display: block;
padding: 9px 22px;
text-decoration: none;
&:hover,
&:focus{
background: #f3f3f3;
}
}
}
&__divider {
height: 1px;
margin: 4px 0;
background: #ebebeb;
}
&__label{
text-transform: uppercase;
font-size: 12px;
padding: 4px 20px;
letter-spacing: 0.8px;
color: #707a85;
}
}

7
client/src/style/containers/Dashboard/Sidebar.scss
View File

@@ -6,6 +6,7 @@
color: $sidebar-text-color;
height: 100%;
z-index: $sidebar-zindex;
position: relative;
.ScrollbarsCustom-Track {
@@ -347,5 +348,11 @@
margin-left: 12px;
font-weight: 600;
}
&__divider{
margin: 4px 0;
height: 1px;
background: #ebebeb;
}
}
}

2
client/src/style/variables.scss
View File

@@ -15,7 +15,7 @@ $menu-item-color-active: $light-gray3;
$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
$sidebar-zindex: 15;
$sidebar-zindex: 21;
$pt-font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont,
Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue,
Icons16, sans-serif;