mirror of https://github.com/vizality/vizality
dashboard components cleanup and reorganization
- SidebarHeader, SidebarItem, SidebarSeparator components removed and made into sub-components of Sidebar (Sidebar.Header, Sidebar.Item, Sidebar.Separator) - ContentSidebar improved - Card component addedpull/67/head
dperolio
3 years ago
parent
ea79e4c685
commit
e21571cdf4
@ -0,0 +1,47 @@
|
||||
import React, { memo } from 'react';
|
||||
|
||||
import { Button, Icon } from '..';
|
||||
|
||||
export default memo(({ icon, header, disabled, description, buttonText, buttonOnClick, route }) => {
|
||||
return (
|
||||
<div className='vz-dashboard-home-features-card-wrapper'>
|
||||
<div className='vz-dashboard-home-features-card'>
|
||||
<Icon
|
||||
name={icon}
|
||||
className='vz-dashboard-home-features-icon-wrapper'
|
||||
iconClassName='vz-dashboard-home-features-icon'
|
||||
size='100%'
|
||||
/>
|
||||
<div className='vz-dashboard-home-features-card-header'>
|
||||
{header}
|
||||
</div>
|
||||
<div className='vz-dashboard-home-features-card-body'>
|
||||
{description}
|
||||
</div>
|
||||
<div className='vz-dashboard-home-features-card-footer'>
|
||||
<Button
|
||||
className='vz-dashboard-home-features-button'
|
||||
onClick={evt => {
|
||||
try {
|
||||
evt?.persist?.();
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
if (buttonOnClick) {
|
||||
return buttonOnClick(evt);
|
||||
} else if (route) {
|
||||
return vizality.api.routes.navigateTo(route);
|
||||
}
|
||||
} catch (err) {
|
||||
|
||||
}
|
||||
}}
|
||||
size={Button.Sizes.LARGE}
|
||||
>
|
||||
{buttonText}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -1,17 +0,0 @@
|
||||
/**
|
||||
*
|
||||
* @component
|
||||
*/
|
||||
|
||||
import { DiscoverySidebarHeader } from '@vizality/components';
|
||||
import { joinClassNames } from '@vizality/util/dom';
|
||||
import React, { memo } from 'react';
|
||||
|
||||
export default memo(({ text, children, className }) => {
|
||||
return (
|
||||
<div className={joinClassNames('vz-dashboard-sidebar-header', className)}>
|
||||
<DiscoverySidebarHeader text={text} />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -1,67 +0,0 @@
|
||||
|
||||
/**
|
||||
* Dashboard sidebar navigation item.
|
||||
* @component
|
||||
*/
|
||||
|
||||
import { ContextMenu, Clickable, Icon } from '@vizality/components';
|
||||
import { getModule, contextMenu } from '@vizality/webpack';
|
||||
import { joinClassNames } from '@vizality/util/dom';
|
||||
import React, { memo, useState } from 'react';
|
||||
|
||||
const { closeContextMenu, openContextMenu } = contextMenu;
|
||||
|
||||
/**
|
||||
* Context menu for dashboard sidebar navigation items.
|
||||
* @component
|
||||
*/
|
||||
const ItemContextMenu = memo(({ path }) => {
|
||||
return (
|
||||
<ContextMenu.Menu navId='dashboard-item' onClose={closeContextMenu}>
|
||||
<ContextMenu.Item
|
||||
id='copy-link'
|
||||
label='Copy Link'
|
||||
action={() => DiscordNative?.clipboard?.copy(`<vizality:/${path.replace('vizality/', '')}>`)}
|
||||
/>
|
||||
</ContextMenu.Menu>
|
||||
);
|
||||
});
|
||||
|
||||
export default memo(({ icon, text, route, selected, disabled, onContextMenu, tooltip }) => {
|
||||
const [ isSelected ] = useState(typeof selected === 'boolean' ? selected : vizality.api.routes.getLocation()?.pathname?.startsWith(route));
|
||||
const { categoryItem, selectedCategoryItem, itemInner } = getModule('categoryItem', 'selectedCategoryItem', 'itemInner');
|
||||
const { container, selected: selectedClass, wrappedLayout, layout, avatar, content, nameAndDecorators, name, wrappedName, clickable } = getModule('wrappedLayout', 'wrappedName', 'layout');
|
||||
|
||||
return (
|
||||
<Clickable
|
||||
onContextMenu={evt => !disabled && (
|
||||
onContextMenu || (
|
||||
openContextMenu(evt, () => <ItemContextMenu path={route} />)
|
||||
)
|
||||
)}
|
||||
onClick={() => !disabled && vizality.api.routes.navigateTo(route)}
|
||||
className={joinClassNames('vz-dashboard-sidebar-item', categoryItem, container, {
|
||||
disabled,
|
||||
[`${selectedClass} ${selectedCategoryItem}`]: isSelected,
|
||||
[clickable]: !isSelected
|
||||
})}
|
||||
>
|
||||
<div className={joinClassNames('vz-dashboard-sidebar-item-inner', itemInner, layout, wrappedLayout)}>
|
||||
<Icon
|
||||
className={joinClassNames('vz-dashboard-sidebar-item-icon-wrapper', avatar)}
|
||||
iconClassName='vz-dashboard-sidebar-item-icon'
|
||||
name={icon}
|
||||
tooltip={tooltip}
|
||||
tooltipPosition='right'
|
||||
/>
|
||||
<div className={content}>
|
||||
<div className={nameAndDecorators}>
|
||||
<div className={joinClassNames(name, wrappedName)}>
|
||||
{text}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Clickable>
|
||||
);
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
/**
|
||||
* Dashboard sidebar navigation item separator.
|
||||
* @component
|
||||
*/
|
||||
|
||||
import { joinClassNames } from '@vizality/util/dom';
|
||||
import React, { memo } from 'react';
|
||||
|
||||
export default memo(({ className }) => (
|
||||
<div className={joinClassNames('vz-dashboard-sidebar-separator', className)} />
|
||||
));
|
||||
@ -0,0 +1,14 @@
|
||||
import { joinClassNames } from '@vizality/util/dom';
|
||||
import React, { memo } from 'react';
|
||||
|
||||
/**
|
||||
*
|
||||
* @component
|
||||
*/
|
||||
export default memo(({ color, className, ...other }) => {
|
||||
return <div class={joinClassNames('vz-wave-divider', className)} style={{ color }}>
|
||||
<svg class='vz-wave-divider-svg' xmlns='http://www.w3.org/2000/svg' viewBox="0 0 1440 100" {...other}>
|
||||
<path class='vz-wave-divider-svg-path' fill='currentColor' d='M826.337463,25.5396311 C670.970254,58.655965 603.696181,68.7870267 447.802481,35.1443383 C293.342778,1.81111414 137.33377,1.81111414 0,1.81111414 L0,150 L1920,150 L1920,1.81111414 C1739.53523,-16.6853983 1679.86404,73.1607868 1389.7826,37.4859505 C1099.70117,1.81111414 981.704672,-7.57670281 826.337463,25.5396311 Z' />
|
||||
</svg>
|
||||
</div>;
|
||||
});
|
||||
Loading…
Reference in new issue