fix: add space between buttons on floating actions bar

This commit is contained in:
Ahmed Bouhuolia
2024-06-14 08:27:30 +02:00
parent 265ea9ca48
commit 74b74a2722
15 changed files with 86 additions and 50 deletions

View File

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

View File

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

View File

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

View File

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

View File

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