fix: add space between buttons on floating actions bar

2026-02-18 22:00:31 +00:00 · 2024-06-14 08:27:30 +02:00
parent 265ea9ca48
commit 74b74a2722
15 changed files with 86 additions and 50 deletions
--- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx
+++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.tsx
@@ -13,7 +13,7 @@ import {
 import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 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 { useMakeJournalFormContext } from './MakeJournalProvider';

@@ -76,7 +76,10 @@ export default function MakeJournalFloatingAction() {
  };

  return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
      {/* ----------- Save And Publish ----------- */}
      <If condition={!manualJournal || !manualJournal?.is_published}>
        <ButtonGroup>
@@ -188,6 +191,6 @@ export default function MakeJournalFloatingAction() {
        onClick={handleCancelBtnClick}
        text={<T id={'cancel'} />}
      />
-    </div>
+    </Group>
  );
 }
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx
@@ -13,12 +13,11 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 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 { useCustomerFormContext } from './CustomerFormProvider';
 import { safeInvoke } from '@/utils';

-
 /**
 * Customer floating actions bar.
 */
@@ -51,7 +50,10 @@ export default function CustomerFloatingActions({ onCancel }) {
  };

  return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
      <ButtonGroup>
        {/* ----------- Save and New ----------- */}
        <SaveButton
@@ -96,7 +98,7 @@ export default function CustomerFloatingActions({ onCancel }) {
        onClick={handleCancelBtnClick}
        text={<T id={'cancel'} />}
      />
-    </div>
+    </Group>
  );
 }

--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx
@@ -11,7 +11,7 @@ import {
  MenuItem,
 } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from '@/components';
+import { Group, FormattedMessage as T } from '@/components';
 import { useHistory } from 'react-router-dom';

 import { CLASSES } from '@/constants/classes';
@@ -78,7 +78,10 @@ export default function ExpenseFloatingFooter() {
  };

  return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
      {/* ----------- Save And Publish ----------- */}
      <If condition={isNewMode}>
        <ButtonGroup>
@@ -190,6 +193,6 @@ export default function ExpenseFloatingFooter() {
        onClick={handleCancelBtnClick}
        text={<T id={'cancel'} />}
      />
-    </div>
+    </Group>
  );
 }
--- a/packages/webapp/src/containers/Items/ItemFormFloatingActions.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormFloatingActions.tsx
@@ -5,9 +5,8 @@ import classNames from 'classnames';
 import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core';
 import { FastField, useFormikContext } from 'formik';
 import { CLASSES } from '@/constants/classes';
-
 import { useItemFormContext } from './ItemFormProvider';
-import { FormattedMessage as T } from '@/components';
+import { Group, FormattedMessage as T } from '@/components';
 import { saveInvoke } from '@/utils';

 /**
@@ -37,7 +36,10 @@ export default function ItemFormFloatingActions({ onCancel }) {
  };

  return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
      <SaveButton
        intent={Intent.PRIMARY}
        disabled={isSubmitting}
@@ -78,7 +80,7 @@ export default function ItemFormFloatingActions({ onCancel }) {
          </FormGroup>
        )}
      </FastField>
-    </div>
+    </Group>
  );
 }

--- a/packages/webapp/src/containers/Items/ItemFormPage.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormPage.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import ItemForm from './ItemForm';

-
 /**
 * Item form page.
 */
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFloatingActions.tsx
@@ -10,7 +10,7 @@ import {
  Menu,
  MenuItem,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from '@/components';
+import { Group, FormattedMessage as T } from '@/components';
 import { useHistory } from 'react-router-dom';
 import { CLASSES } from '@/constants/classes';
 import classNames from 'classnames';
@@ -76,7 +76,10 @@ export default function BillFloatingActions() {
  };

  return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
      {/* ----------- Save And Open ----------- */}
      <If condition={!bill || !bill?.is_open}>
        <ButtonGroup>
@@ -189,6 +192,6 @@ export default function BillFloatingActions() {
        onClick={handleCancelBtnClick}
        text={<T id={'cancel'} />}
      />
-    </div>
+    </Group>
  );
 }
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.tsx
@@ -13,7 +13,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 { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';

@@ -69,11 +69,15 @@ export default function VendorCreditNoteFloatingActions() {
    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 Open  ----------- */}
      <If condition={!vendorCredit || !vendorCredit?.is_open}>
        <ButtonGroup>
@@ -185,6 +189,6 @@ export default function VendorCreditNoteFloatingActions() {
        onClick={handleCancelBtnClick}
        text={<T id={'cancel'} />}
      />
-    </div>
+    </Group>
  );
 }
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFloatingActions.tsx
@@ -11,14 +11,12 @@ import {
  Menu,
  MenuItem,
 } 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 { useFormikContext } from 'formik';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import { CLASSES } from '@/constants/classes';

-
-
 /**
 * Payment made floating actions bar.
 */
@@ -56,11 +54,14 @@ export default function PaymentMadeFloatingActions() {
  // Handle submit & continue editing button click.
  const handleSubmitContinueEditingBtnClick = (event) => {
    setSubmitPayload({ redirect: false, publish: true });
-    submitForm()
+    submitForm();
  };

  return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
      {/* ----------- Save and New ----------- */}
      <ButtonGroup>
        <Button
@@ -109,6 +110,6 @@ export default function PaymentMadeFloatingActions() {
        onClick={handleCancelBtnClick}
        text={<T id={'cancel'} />}
      />
-    </div>
+    </Group>
  );
 }
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx
@@ -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>
  );
 }
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx
@@ -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>
  );
 }
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
@@ -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>
  );
 }
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx
@@ -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>
  );
 }
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx
@@ -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>
  );
 }
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFloatingActions.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFloatingActions.tsx
@@ -14,7 +14,7 @@ import styled from 'styled-components';
 import classNames from 'classnames';
 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 { useVendorFormContext } from './VendorFormProvider';
 import { safeInvoke } from '@/utils';
@@ -51,7 +51,10 @@ export default function VendorFloatingActions({ onCancel }) {
  };

  return (
-    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+    <Group
+      spacing={10}
+      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
+    >
      <ButtonGroup>
        {/* ----------- Save and New ----------- */}
        <SaveButton
@@ -96,7 +99,7 @@ export default function VendorFloatingActions({ onCancel }) {
        onClick={handleCancelBtnClick}
        text={<T id={'cancel'} />}
      />
-    </div>
+    </Group>
  );
 }

--- a/packages/webapp/src/style/pages/Items/Form.scss
+++ b/packages/webapp/src/style/pages/Items/Form.scss
@@ -73,13 +73,11 @@
  }

  #{$self}__floating-actions {
-    // margin-left: -40px;
-    // margin-right: -40px;

    .form-group--active {
      display: inline-block;
      margin: 0;
-      margin-left: 40px;
+      margin-left: 20px;
    }
  }