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

Merge pull request #508 from bigcapitalhq/BIG-142

Browse Source 
fix: add space between buttons on floating actions bar
This commit is contained in:
Ahmed Bouhuolia
2024-06-14 08:29:45 +02:00
committed by GitHub
parent 265ea9ca48 74b74a2722
commit 0d7aad5448
15 changed files with 86 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx
View File

@@ -13,7 +13,7 @@ import {
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import classNames from 'classnames'; import classNames from 'classnames';
import { Icon, If, FormattedMessage as T } from '@/components'; import { Group, Icon, If, FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { useMakeJournalFormContext } from './MakeJournalProvider'; import { useMakeJournalFormContext } from './MakeJournalProvider';
@@ -76,7 +76,10 @@ export default function MakeJournalFloatingAction() {
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save And Publish ----------- */} {/* ----------- Save And Publish ----------- */}
<If condition={!manualJournal || !manualJournal?.is_published}> <If condition={!manualJournal || !manualJournal?.is_published}>
<ButtonGroup> <ButtonGroup>
@@ -188,6 +191,6 @@ export default function MakeJournalFloatingAction() {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

10
packages/webapp/src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx
View File

@@ -13,12 +13,11 @@ import {
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import classNames from 'classnames'; import classNames from 'classnames';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { Icon, FormattedMessage as T } from '@/components'; import { Group, Icon, FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { useCustomerFormContext } from './CustomerFormProvider'; import { useCustomerFormContext } from './CustomerFormProvider';
import { safeInvoke } from '@/utils'; import { safeInvoke } from '@/utils';
/** /**
* Customer floating actions bar. * Customer floating actions bar.
*/ */
@@ -51,7 +50,10 @@ export default function CustomerFloatingActions({ onCancel }) {
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
<ButtonGroup> <ButtonGroup>
{/* ----------- Save and New ----------- */} {/* ----------- Save and New ----------- */}
<SaveButton <SaveButton
@@ -96,7 +98,7 @@ export default function CustomerFloatingActions({ onCancel }) {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

9
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx
View File

@@ -11,7 +11,7 @@ import {
MenuItem, MenuItem,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { FormattedMessage as T } from '@/components'; import { Group, FormattedMessage as T } from '@/components';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
@@ -78,7 +78,10 @@ export default function ExpenseFloatingFooter() {
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save And Publish ----------- */} {/* ----------- Save And Publish ----------- */}
<If condition={isNewMode}> <If condition={isNewMode}>
<ButtonGroup> <ButtonGroup>
@@ -190,6 +193,6 @@ export default function ExpenseFloatingFooter() {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

10
packages/webapp/src/containers/Items/ItemFormFloatingActions.tsx
View File

@@ -5,9 +5,8 @@ import classNames from 'classnames';
import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core'; import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core';
import { FastField, useFormikContext } from 'formik'; import { FastField, useFormikContext } from 'formik';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { useItemFormContext } from './ItemFormProvider'; import { useItemFormContext } from './ItemFormProvider';
import { FormattedMessage as T } from '@/components'; import { Group, FormattedMessage as T } from '@/components';
import { saveInvoke } from '@/utils'; import { saveInvoke } from '@/utils';
/** /**
@@ -37,7 +36,10 @@ export default function ItemFormFloatingActions({ onCancel }) {
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
<SaveButton <SaveButton
intent={Intent.PRIMARY} intent={Intent.PRIMARY}
disabled={isSubmitting} disabled={isSubmitting}
@@ -78,7 +80,7 @@ export default function ItemFormFloatingActions({ onCancel }) {
</FormGroup> </FormGroup>
)} )}
</FastField> </FastField>
</div> </Group>
); );
} }

1
packages/webapp/src/containers/Items/ItemFormPage.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import ItemForm from './ItemForm'; import ItemForm from './ItemForm';
/** /**
* Item form page. * Item form page.
*/ */

9
packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx
View File

@@ -10,7 +10,7 @@ import {
Menu, Menu,
MenuItem, MenuItem,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { FormattedMessage as T } from '@/components'; import { Group, FormattedMessage as T } from '@/components';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import classNames from 'classnames'; import classNames from 'classnames';
@@ -76,7 +76,10 @@ export default function BillFloatingActions() {
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save And Open ----------- */} {/* ----------- Save And Open ----------- */}
<If condition={!bill || !bill?.is_open}> <If condition={!bill || !bill?.is_open}>
<ButtonGroup> <ButtonGroup>
@@ -189,6 +192,6 @@ export default function BillFloatingActions() {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

10
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx
View File

@@ -13,7 +13,7 @@ import {
Menu, Menu,
MenuItem, MenuItem,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { If, Icon, FormattedMessage as T } from '@/components'; import { If, Icon, FormattedMessage as T, Group } from '@/components';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider'; import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
@@ -69,11 +69,15 @@ export default function VendorCreditNoteFloatingActions() {
history.goBack(); history.goBack();
}; };
// Handle the clear button click.
const handleClearBtnClick = (event) => { const handleClearBtnClick = (event) => {
resetForm(); resetForm();
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save And Open ----------- */} {/* ----------- Save And Open ----------- */}
<If condition={!vendorCredit || !vendorCredit?.is_open}> <If condition={!vendorCredit || !vendorCredit?.is_open}>
<ButtonGroup> <ButtonGroup>
@@ -185,6 +189,6 @@ export default function VendorCreditNoteFloatingActions() {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

13
packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.tsx
View File

@@ -11,14 +11,12 @@ import {
Menu, Menu,
MenuItem, MenuItem,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { Icon, FormattedMessage as T } from '@/components'; import { Group, Icon, FormattedMessage as T } from '@/components';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { usePaymentMadeFormContext } from './PaymentMadeFormProvider'; import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
/** /**
* Payment made floating actions bar. * Payment made floating actions bar.
*/ */
@@ -56,11 +54,14 @@ export default function PaymentMadeFloatingActions() {
// Handle submit & continue editing button click. // Handle submit & continue editing button click.
const handleSubmitContinueEditingBtnClick = (event) => { const handleSubmitContinueEditingBtnClick = (event) => {
setSubmitPayload({ redirect: false, publish: true }); setSubmitPayload({ redirect: false, publish: true });
submitForm() submitForm();
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save and New ----------- */} {/* ----------- Save and New ----------- */}
<ButtonGroup> <ButtonGroup>
<Button <Button
@@ -109,6 +110,6 @@ export default function PaymentMadeFloatingActions() {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

10
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx
View File

@@ -12,7 +12,7 @@ import {
Menu, Menu,
MenuItem, MenuItem,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { If, Icon, FormattedMessage as T } from '@/components'; import { If, Icon, FormattedMessage as T, Group } from '@/components';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import classNames from 'classnames'; import classNames from 'classnames';
import { useCreditNoteFormContext } from './CreditNoteFormProvider'; import { useCreditNoteFormContext } from './CreditNoteFormProvider';
@@ -69,12 +69,16 @@ export default function CreditNoteFloatingActions() {
history.goBack(); history.goBack();
}; };
// Handle clear button click.
const handleClearBtnClick = (event) => { const handleClearBtnClick = (event) => {
resetForm(); resetForm();
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save And Open ----------- */} {/* ----------- Save And Open ----------- */}
<If condition={!creditNote || !creditNote?.is_open}> <If condition={!creditNote || !creditNote?.is_open}>
<ButtonGroup> <ButtonGroup>
@@ -186,6 +190,6 @@ export default function CreditNoteFloatingActions() {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

11
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx
View File

@@ -11,7 +11,7 @@ import {
Menu, Menu,
MenuItem, MenuItem,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { If, Icon, FormattedMessage as T } from '@/components'; import { If, Icon, FormattedMessage as T, Group } from '@/components';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
@@ -63,16 +63,21 @@ export default function EstimateFloatingActions() {
submitForm(); submitForm();
}; };
// Handle the cancel button click.
const handleCancelBtnClick = (event) => { const handleCancelBtnClick = (event) => {
history.goBack(); history.goBack();
}; };
// Handle the clear button click.
const handleClearBtnClick = (event) => { const handleClearBtnClick = (event) => {
resetForm(); resetForm();
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save And Deliver ----------- */} {/* ----------- Save And Deliver ----------- */}
<If condition={!estimate || !estimate?.is_delivered}> <If condition={!estimate || !estimate?.is_delivered}>
<ButtonGroup> <ButtonGroup>
@@ -188,6 +193,6 @@ export default function EstimateFloatingActions() {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

9
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
View File

@@ -13,7 +13,7 @@ import {
import classNames from 'classnames'; import classNames from 'classnames';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { If, Icon, FormattedMessage as T } from '@/components'; import { If, Icon, FormattedMessage as T, Group } from '@/components';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { useInvoiceFormContext } from './InvoiceFormProvider'; import { useInvoiceFormContext } from './InvoiceFormProvider';
@@ -76,7 +76,10 @@ export default function InvoiceFloatingActions() {
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save And Deliver ----------- */} {/* ----------- Save And Deliver ----------- */}
<If condition={!invoice || !invoice?.is_delivered}> <If condition={!invoice || !invoice?.is_delivered}>
<ButtonGroup> <ButtonGroup>
@@ -189,6 +192,6 @@ export default function InvoiceFloatingActions() {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

12
packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx
View File

@@ -11,12 +11,11 @@ import {
Menu, Menu,
MenuItem, MenuItem,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { Icon, FormattedMessage as T } from '@/components';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { Group, Icon, FormattedMessage as T } from '@/components';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { CLASSES } from '@/constants/classes';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider'; import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
import { CLASSES } from '@/constants/classes';
/** /**
* Payment receive floating actions bar. * Payment receive floating actions bar.
@@ -55,7 +54,10 @@ export default function PaymentReceiveFormFloatingActions() {
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save and New ----------- */} {/* ----------- Save and New ----------- */}
<ButtonGroup> <ButtonGroup>
<Button <Button
@@ -107,6 +109,6 @@ export default function PaymentReceiveFormFloatingActions() {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

10
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx
View File

@@ -11,7 +11,7 @@ import {
Menu, Menu,
MenuItem, MenuItem,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { FormattedMessage as T } from '@/components'; import { Group, FormattedMessage as T } from '@/components';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
@@ -71,12 +71,16 @@ export default function ReceiptFormFloatingActions() {
history.goBack(); history.goBack();
}; };
// Handle the clear button click.
const handleClearBtnClick = (event) => { const handleClearBtnClick = (event) => {
resetForm(); resetForm();
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
{/* ----------- Save And Close ----------- */} {/* ----------- Save And Close ----------- */}
<If condition={!receipt || !receipt?.is_closed}> <If condition={!receipt || !receipt?.is_closed}>
<ButtonGroup> <ButtonGroup>
@@ -187,6 +191,6 @@ export default function ReceiptFormFloatingActions() {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

9
packages/webapp/src/containers/Vendors/VendorForm/VendorFloatingActions.tsx
View File

@@ -14,7 +14,7 @@ import styled from 'styled-components';
import classNames from 'classnames'; import classNames from 'classnames';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { Icon, FormattedMessage as T } from '@/components'; import { Group, Icon, FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { useVendorFormContext } from './VendorFormProvider'; import { useVendorFormContext } from './VendorFormProvider';
import { safeInvoke } from '@/utils'; import { safeInvoke } from '@/utils';
@@ -51,7 +51,10 @@ export default function VendorFloatingActions({ onCancel }) {
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}> <Group
spacing={10}
className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
>
<ButtonGroup> <ButtonGroup>
{/* ----------- Save and New ----------- */} {/* ----------- Save and New ----------- */}
<SaveButton <SaveButton
@@ -96,7 +99,7 @@ export default function VendorFloatingActions({ onCancel }) {
onClick={handleCancelBtnClick} onClick={handleCancelBtnClick}
text={<T id={'cancel'} />} text={<T id={'cancel'} />}
/> />
</div> </Group>
); );
} }

4
packages/webapp/src/style/pages/Items/Form.scss
View File

@@ -73,13 +73,11 @@
} }
#{$self}__floating-actions { #{$self}__floating-actions {
// margin-left: -40px;
// margin-right: -40px;
.form-group--active { .form-group--active {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
margin-left: 40px; margin-left: 20px;
} }
} }