QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 14:20: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>
);
}

83
client/src/containers/Dashboard/Items/ItemsActionsBar.js
View File

@@ -1,16 +1,19 @@
import React, {useMemo} from 'react';
import {useRouteMatch} from 'react-router-dom'
import {useRouteMatch, useHistory} from 'react-router-dom'
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { compose } from 'utils';
import {
MenuItem,
Popover,
NavbarGroup,
Menu,
NavbarDivider,
PopoverInteractionKind,
Position,
Button,
Classes,
Intent,
} from '@blueprintjs/core';
import classNames from 'classnames';
import Icon from 'components/Icon';
@@ -27,13 +30,12 @@ const ItemsActionsBar = ({
bulkSelected,
}) => {
const {path} = useRouteMatch();
const history = useHistory();
const viewsMenuItems = views.map((view) => {
return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
});
const onClickNewItem = () => {
};
const onClickNewItem = () => { history.push('/dashboard/items/new'); };
const itemsFields = getResourceFields('items');
const filterDropdown = FilterDropdown({
@@ -46,42 +48,57 @@ const ItemsActionsBar = ({
return (
<DashboardActionsBar>
<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>
<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>
<Popover
content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}>
<NavbarDivider />
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text="Filter"
icon={ <Icon icon="filter" /> } />
</Popover>
<Popover
content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}>
<Button
className={Classes.MINIMAL}
icon={ <Icon icon="plus" /> }
text="New Item"
onClick={onClickNewItem} />
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text="Filter"
icon={ <Icon icon="filter" /> } />
</Popover>
{hasBulkActionsSelected && (
<Button
className={Classes.MINIMAL}
icon={ <Icon icon="trash" />}
text="Delete" />)}
icon={ <Icon icon="plus" /> }
text="New Item"
onClick={onClickNewItem} />
{hasBulkActionsSelected && (
<Button
className={Classes.MINIMAL}
intent={Intent.DANGER}
icon={ <Icon icon="trash" />}
text="Delete" />)}
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
text='Import'
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
text='Export'
/>
</NavbarGroup>
</DashboardActionsBar>
);
};

8
client/src/static/json/icons.js
View File

@@ -66,5 +66,13 @@ export default {
"receipt": {
path: ['M344 288H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zM400.8 5.7L357.3 37 318.7 9.2c-16.8-12.1-39.2-12.1-56.1 0L224 37 185.4 9.2a47.888 47.888 0 0 0-56.1 0L90.7 37 47.2 5.7C27.4-8.5 0 5.6 0 29.9v452.3c0 23.8 27.1 38.6 47.2 24.2L90.7 475l38.6 27.8c16.8 12.1 39.2 12.1 56.1 0L224 475l38.6 27.8c16.8 12.1 39.3 12.1 56.1 0l38.6-27.8 43.5 31.3c19.8 14.2 47.2.1 47.2-24.1V29.9C448 6 420.9-8.7 400.8 5.7zm-.8 440.8l-42.7-30.7-66.7 48-66.7-48-66.7 48-66.7-48L48 446.5v-381l42.7 30.7 66.7-48 66.7 48 66.7-48 66.7 48L400 65.5v381zM344 176H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zz'],
viewBox: '0 0 448 512',
},
"trash": {
path: ['M432 80h-82.4l-34-56.7A48 48 0 0 0 274.4 0H173.6a48 48 0 0 0-41.2 23.3L98.4 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16l21.2 339a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM173.6 48h100.8l19.2 32H154.4zm173.3 416H101.11l-21-336h287.8z'],
viewBox: '0 0 448 512',
},
"archive": {
path: ['M464 32H48C21.5 32 0 53.5 0 80v80c0 8.8 7.2 16 16 16h16v272c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V176h16c8.8 0 16-7.2 16-16V80c0-26.5-21.5-48-48-48zm-32 400H80V176h352v256zm32-304H48V80h416v48zM204 272h104c6.6 0 12-5.4 12-12v-24c0-6.6-5.4-12-12-12H204c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12'],
viewBox: '0 0 512 512',
}
}

15
client/src/style/pages/dashboard.scss
View File

@@ -122,12 +122,27 @@
color: #666;
margin-right: 7px;
}
&.#{$ns}-minimal.#{$ns}-intent-danger{
color: #c23030;
&:hover,
&:focus{
background: rgba(219, 55, 55, 0.1);
}
}
}
.button--table-views{
.#{$ns}-icon{
color: #1183DA;
}
.#{$ns}-button-text{
margin-right: 3px;
}
.#{$ns}-icon-caret-down{
margin-right: 0;
}
}
}
}