QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 05:40:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Dashboard actions bar styled.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-03-26 19:43:40 +02:00
parent 6c4f86431c
commit a399052a30
5 changed files with 152 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/Accounts/AccountsActionsBar.js
View File

@@ -3,14 +3,14 @@ import Icon from 'components/Icon';
import {
Button,
NavbarGroup,
Navbar,
Classes,
NavbarDivider,
MenuItem,
Menu,
Popover,
PopoverInteractionKind,
Position
Position,
Intent,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { connect } from 'react-redux';
@@ -40,7 +40,7 @@ function AccountsActionsBar({
const hasBulkActionsSelected = useMemo(() => {
return Object.keys(bulkActions).length > 0;
}, [bulkActions]);
const filterDropdown = FilterDropdown({
fields: accountsFields,
onFilterChange,
@@ -70,7 +70,6 @@ function AccountsActionsBar({
text='New Account'
onClick={onClickNewAccount}
/>
<Popover
content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
@@ -86,7 +85,7 @@ function AccountsActionsBar({
{hasBulkActionsSelected && (
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' />}
icon={<Icon icon='archive' iconSize={15} />}
text='Archive'
/>
)}
@@ -94,17 +93,16 @@ function AccountsActionsBar({
{hasBulkActionsSelected && (
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' />}
icon={<Icon icon='trash' iconSize={15} />}
text='Delete'
intent={Intent.DANGER}
/>
)}
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
text='Import'
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}

96
client/src/components/Expenses/ExpensesActionsBar.js
View File

@@ -1,32 +1,82 @@
import React from 'react';
import { Button, AnchorButton, Classes, Icon } from '@blueprintjs/core';
import {
Button,
AnchorButton,
Classes,
NavbarGroup,
Popover,
MenuItem,
PopoverInteractionKind,
Position,
Menu,
NavbarDivider,
Intent,
} from '@blueprintjs/core';
import { useRouteMatch } from 'react-router-dom'
import classNames from 'classnames';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import Icon from 'components/Icon';
export default function ExpensesActionsBar() {
export default function ExpensesActionsBar({
}) {
const {path} = useRouteMatch();
const onClickNewAccount = () => {};
const views = [];
const viewsMenuItems = views.map((view) => {
return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
});
return (
<div class='dashboard__actions-bar'>
<AnchorButton
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
href='/dashboard/expenses/new'
text='New Expense'
onClick={onClickNewAccount}
/>
<DashboardActionsBar>
<NavbarGroup>
<Popover
content={<Menu>{viewsMenuItems}</Menu>}
minimal={true}
interactionKind={PopoverInteractionKind.HOVER}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='table' />}
text='Table Views'
rightIcon={'caret-down'}
/>
</Popover>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text='Delete Expense'
onClick={onClickNewAccount}
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text='Bulk Update'
onClick={onClickNewAccount}
/>
</div>
<AnchorButton
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
href='/dashboard/expenses/new'
text='New Expense'
onClick={onClickNewAccount}
/>
<Button
className={Classes.MINIMAL}
intent={Intent.DANGER}
icon={<Icon icon='plus' />}
text='Delete'
onClick={onClickNewAccount}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text='Bulk Update'
onClick={onClickNewAccount}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
text='Import'
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
/>
</NavbarGroup>
</DashboardActionsBar>
);
}