QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-21 23:30:32 +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 { import {
Button, Button,
NavbarGroup, NavbarGroup,
Navbar,
Classes, Classes,
NavbarDivider, NavbarDivider,
MenuItem, MenuItem,
Menu, Menu,
Popover, Popover,
PopoverInteractionKind, PopoverInteractionKind,
Position Position,
Intent,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import classNames from 'classnames'; import classNames from 'classnames';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@@ -40,7 +40,7 @@ function AccountsActionsBar({
const hasBulkActionsSelected = useMemo(() => { const hasBulkActionsSelected = useMemo(() => {
return Object.keys(bulkActions).length > 0; return Object.keys(bulkActions).length > 0;
}, [bulkActions]); }, [bulkActions]);
const filterDropdown = FilterDropdown({ const filterDropdown = FilterDropdown({
fields: accountsFields, fields: accountsFields,
onFilterChange, onFilterChange,
@@ -70,7 +70,6 @@ function AccountsActionsBar({
text='New Account' text='New Account'
onClick={onClickNewAccount} onClick={onClickNewAccount}
/> />
<Popover <Popover
content={filterDropdown} content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK} interactionKind={PopoverInteractionKind.CLICK}
@@ -86,7 +85,7 @@ function AccountsActionsBar({
{hasBulkActionsSelected && ( {hasBulkActionsSelected && (
<Button <Button
className={Classes.MINIMAL} className={Classes.MINIMAL}
icon={<Icon icon='trash' />} icon={<Icon icon='archive' iconSize={15} />}
text='Archive' text='Archive'
/> />
)} )}
@@ -94,17 +93,16 @@ function AccountsActionsBar({
{hasBulkActionsSelected && ( {hasBulkActionsSelected && (
<Button <Button
className={Classes.MINIMAL} className={Classes.MINIMAL}
icon={<Icon icon='trash' />} icon={<Icon icon='trash' iconSize={15} />}
text='Delete' text='Delete'
intent={Intent.DANGER}
/> />
)} )}
<Button <Button
className={Classes.MINIMAL} className={Classes.MINIMAL}
icon={<Icon icon='file-import' />} icon={<Icon icon='file-import' />}
text='Import' text='Import'
/> />
<Button <Button
className={Classes.MINIMAL} className={Classes.MINIMAL}
icon={<Icon icon='file-export' />} icon={<Icon icon='file-export' />}

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

@@ -1,32 +1,82 @@
import React from 'react'; 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 onClickNewAccount = () => {};
const views = [];
const viewsMenuItems = views.map((view) => {
return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
});
return ( return (
<div class='dashboard__actions-bar'> <DashboardActionsBar>
<AnchorButton <NavbarGroup>
className={Classes.MINIMAL} <Popover
icon={<Icon icon='plus' />} content={<Menu>{viewsMenuItems}</Menu>}
href='/dashboard/expenses/new' minimal={true}
text='New Expense' interactionKind={PopoverInteractionKind.HOVER}
onClick={onClickNewAccount} position={Position.BOTTOM_LEFT}
/> >
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='table' />}
text='Table Views'
rightIcon={'caret-down'}
/>
</Popover>
<Button <NavbarDivider />
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text='Delete Expense'
onClick={onClickNewAccount}
/>
<Button <AnchorButton
className={Classes.MINIMAL} className={Classes.MINIMAL}
icon={<Icon icon='plus' />} icon={<Icon icon='plus' />}
text='Bulk Update' href='/dashboard/expenses/new'
onClick={onClickNewAccount} text='New Expense'
/> onClick={onClickNewAccount}
</div> />
<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 React, {useMemo} from 'react';
import {useRouteMatch} from 'react-router-dom' import {useRouteMatch, useHistory} from 'react-router-dom'
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { compose } from 'utils'; import { compose } from 'utils';
import { import {
MenuItem, MenuItem,
Popover, Popover,
NavbarGroup,
Menu, Menu,
NavbarDivider,
PopoverInteractionKind, PopoverInteractionKind,
Position, Position,
Button, Button,
Classes, Classes,
Intent,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import classNames from 'classnames'; import classNames from 'classnames';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
@@ -27,13 +30,12 @@ const ItemsActionsBar = ({
bulkSelected, bulkSelected,
}) => { }) => {
const {path} = useRouteMatch(); const {path} = useRouteMatch();
const history = useHistory();
const viewsMenuItems = views.map((view) => { const viewsMenuItems = views.map((view) => {
return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />); 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 itemsFields = getResourceFields('items');
const filterDropdown = FilterDropdown({ const filterDropdown = FilterDropdown({
@@ -46,42 +48,57 @@ const ItemsActionsBar = ({
return ( return (
<DashboardActionsBar> <DashboardActionsBar>
<Popover <NavbarGroup>
content={<Menu>{viewsMenuItems}</Menu>} <Popover
minimal={true} content={<Menu>{viewsMenuItems}</Menu>}
interactionKind={PopoverInteractionKind.HOVER} minimal={true}
position={Position.BOTTOM_LEFT}> interactionKind={PopoverInteractionKind.HOVER}
position={Position.BOTTOM_LEFT}>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')} <Button
icon={ <Icon icon="table" /> } className={classNames(Classes.MINIMAL, 'button--table-views')}
text="Table Views" icon={ <Icon icon="table" /> }
rightIcon={'caret-down'} /> text="Table Views"
</Popover> rightIcon={'caret-down'} />
</Popover>
<Popover <NavbarDivider />
content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}>
<Button <Popover
className={classNames(Classes.MINIMAL, 'button--filter')} content={filterDropdown}
text="Filter" interactionKind={PopoverInteractionKind.CLICK}
icon={ <Icon icon="filter" /> } /> position={Position.BOTTOM_LEFT}>
</Popover>
<Button <Button
className={Classes.MINIMAL} className={classNames(Classes.MINIMAL, 'button--filter')}
icon={ <Icon icon="plus" /> } text="Filter"
text="New Item" icon={ <Icon icon="filter" /> } />
onClick={onClickNewItem} /> </Popover>
{hasBulkActionsSelected && (
<Button <Button
className={Classes.MINIMAL} className={Classes.MINIMAL}
icon={ <Icon icon="trash" />} icon={ <Icon icon="plus" /> }
text="Delete" />)} 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> </DashboardActionsBar>
); );
}; };

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

@@ -66,5 +66,13 @@ export default {
"receipt": { "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'], 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', 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; color: #666;
margin-right: 7px; margin-right: 7px;
} }
&.#{$ns}-minimal.#{$ns}-intent-danger{
color: #c23030;
&:hover,
&:focus{
background: rgba(219, 55, 55, 0.1);
}
}
} }
.button--table-views{ .button--table-views{
.#{$ns}-icon{ .#{$ns}-icon{
color: #1183DA; color: #1183DA;
} }
.#{$ns}-button-text{
margin-right: 3px;
}
.#{$ns}-icon-caret-down{
margin-right: 0;
}
} }
} }
} }