From 914e1de79fe2d86ca6b2310d15ffa2a81941c9bc Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Sun, 20 Feb 2022 22:31:52 +0200 Subject: [PATCH] feat(Sales & Purchases ): add FormTopBar. --- src/components/FormTopbar.js | 45 +++++++++++++++++++ src/components/index.js | 1 + .../Bills/BillForm/BillFormTopBar.js | 24 +++++----- .../VendorCreditNoteFormTopBar.js | 23 +++++----- .../PaymentForm/PaymentMadeFormTopBar.js | 21 ++++----- .../CreditNoteForm/CreditNoteFormTopBar.js | 24 +++++----- .../EstimateForm/EstimtaeFormTopBar.js | 23 +++++----- .../Invoices/InvoiceForm/InvoiceFormTopBar.js | 12 +++-- .../PaymentReceiveFormTopBar.js | 30 +++++-------- .../Sales/Receipts/ReceiptForm/ReceiptForm.js | 4 +- .../Receipts/ReceiptForm/ReceiptFormTopbar.js | 25 +++++------ src/style/pages/Dashboard/Dashboard.scss | 25 ----------- 12 files changed, 127 insertions(+), 130 deletions(-) create mode 100644 src/components/FormTopbar.js diff --git a/src/components/FormTopbar.js b/src/components/FormTopbar.js new file mode 100644 index 000000000..c6312b795 --- /dev/null +++ b/src/components/FormTopbar.js @@ -0,0 +1,45 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Navbar } from '@blueprintjs/core'; + +/** + * @param {*} children + * @returns + */ +export function FormTopbar({ className, children }) { + return {children}; +} + +const FormTopBarRoot = styled(Navbar)` + box-shadow: 0 0 0; + border-bottom: 2px solid #dce5ea; + height: 35px; + padding: 0 20px; + + .bp3-navbar-group { + height: 35px; + } + .bp3-navbar-divider { + border-left-color: #d2dce2; + } + + .bp3-skeleton { + max-height: 10px; + } + + .bp3-button { + &:hover { + background: rgba(167, 182, 194, 0.12); + color: #32304a; + } + } +`; + +export const DetailsBarSkeletonBase = styled.div` + letter-spacing: 10px; + margin-right: 10px; + margin-left: 10px; + font-size: 8px; + width: 140px; + height: 10px; +`; diff --git a/src/components/index.js b/src/components/index.js index 0fa29af93..1bcac86f2 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -102,6 +102,7 @@ export * from './ExchangeRate'; export * from './Branches'; export * from './Warehouses'; export * from './Currencies'; +export * from './FormTopbar' const Hint = FieldHint; diff --git a/src/containers/Purchases/Bills/BillForm/BillFormTopBar.js b/src/containers/Purchases/Bills/BillForm/BillFormTopBar.js index 3604f9b35..f248c7ecf 100644 --- a/src/containers/Purchases/Bills/BillForm/BillFormTopBar.js +++ b/src/containers/Purchases/Bills/BillForm/BillFormTopBar.js @@ -2,19 +2,24 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Alignment, - Navbar, NavbarGroup, NavbarDivider, Button, Classes, } from '@blueprintjs/core'; -import styled from 'styled-components'; import { useSetPrimaryBranchToForm, useSetPrimaryWarehouseToForm, } from './utils'; import { useFeatureCan } from 'hooks/state'; -import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components'; +import { + Icon, + BranchSelect, + FeatureCan, + WarehouseSelect, + FormTopbar, + DetailsBarSkeletonBase, +} from 'components'; import { useBillFormContext } from './BillFormProvider'; import { Features } from 'common'; @@ -38,7 +43,7 @@ export default function BillFormTopBar() { } return ( - + @@ -50,7 +55,7 @@ export default function BillFormTopBar() { - + ); } @@ -107,12 +112,3 @@ function BillBranchSelectButton({ label }) { /> ); } - -const DetailsBarSkeletonBase = styled.div` - letter-spacing: 10px; - margin-right: 10px; - margin-left: 10px; - font-size: 8px; - width: 140px; - height: 10px; -`; diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.js index c135acb19..970601856 100644 --- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.js +++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.js @@ -3,7 +3,6 @@ import intl from 'react-intl-universal'; import styled from 'styled-components'; import { Alignment, - Navbar, NavbarGroup, NavbarDivider, Button, @@ -14,7 +13,14 @@ import { useSetPrimaryWarehouseToForm, } from './utils'; import { useFeatureCan } from 'hooks/state'; -import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components'; +import { + Icon, + BranchSelect, + FeatureCan, + WarehouseSelect, + FormTopbar, + DetailsBarSkeletonBase, +} from 'components'; import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider'; import { Features } from 'common'; @@ -38,7 +44,7 @@ export default function VendorCreditNoteFormTopBar() { } return ( - + @@ -50,7 +56,7 @@ export default function VendorCreditNoteFormTopBar() { - + ); } @@ -107,12 +113,3 @@ function VendorCreditNoteBranchSelectButton({ label }) { /> ); } - -const DetailsBarSkeletonBase = styled.div` - letter-spacing: 10px; - margin-right: 10px; - margin-left: 10px; - font-size: 8px; - width: 140px; - height: 10px; -`; diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.js index d70a651dc..cfdda9616 100644 --- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.js +++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.js @@ -10,7 +10,13 @@ import { import styled from 'styled-components'; import { useSetPrimaryBranchToForm } from './utils'; import { useFeatureCan } from 'hooks/state'; -import { Icon, BranchSelect, FeatureCan } from 'components'; +import { + Icon, + BranchSelect, + FeatureCan, + FormTopbar, + DetailsBarSkeletonBase, +} from 'components'; import { usePaymentMadeFormContext } from './PaymentMadeFormProvider'; import { Features } from 'common'; @@ -30,13 +36,13 @@ export default function PaymentMadeFormTopBar() { return null; } return ( - + - + ); } @@ -66,12 +72,3 @@ function PaymentMadeBranchSelectButton({ label }) { /> ); } - -const DetailsBarSkeletonBase = styled.div` - letter-spacing: 10px; - margin-right: 10px; - margin-left: 10px; - font-size: 8px; - width: 140px; - height: 10px; -`; diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.js index 7bc9b27a7..c73213f20 100644 --- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.js +++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.js @@ -2,19 +2,24 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Alignment, - Navbar, NavbarGroup, NavbarDivider, Button, Classes, } from '@blueprintjs/core'; -import styled from 'styled-components'; import { useSetPrimaryBranchToForm, useSetPrimaryWarehouseToForm, } from './utils'; import { useFeatureCan } from 'hooks/state'; -import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components'; +import { + Icon, + BranchSelect, + FeatureCan, + WarehouseSelect, + FormTopbar, + DetailsBarSkeletonBase, +} from 'components'; import { useCreditNoteFormContext } from './CreditNoteFormProvider'; import { Features } from 'common'; @@ -38,7 +43,7 @@ export default function CreditNoteFormTopbar() { } return ( - + @@ -50,7 +55,7 @@ export default function CreditNoteFormTopbar() { - + ); } @@ -107,12 +112,3 @@ function CreditNoteBranchSelectButton({ label }) { /> ); } - -const DetailsBarSkeletonBase = styled.div` - letter-spacing: 10px; - margin-right: 10px; - margin-left: 10px; - font-size: 8px; - width: 140px; - height: 10px; -`; diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.js b/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.js index aaa2d12ec..84f709979 100644 --- a/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.js +++ b/src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.js @@ -2,7 +2,6 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Alignment, - Navbar, NavbarGroup, NavbarDivider, Button, @@ -14,7 +13,14 @@ import { useSetPrimaryWarehouseToForm, } from './utils'; import { useFeatureCan } from 'hooks/state'; -import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components'; +import { + Icon, + BranchSelect, + FeatureCan, + WarehouseSelect, + FormTopbar, + DetailsBarSkeletonBase, +} from 'components'; import { useEstimateFormContext } from './EstimateFormProvider'; import { Features } from 'common'; @@ -38,7 +44,7 @@ export default function EstimtaeFormTopBar() { } return ( - + @@ -50,7 +56,7 @@ export default function EstimtaeFormTopBar() { - + ); } @@ -107,12 +113,3 @@ function EstimateBranchSelectButton({ label }) { /> ); } - -const DetailsBarSkeletonBase = styled.div` - letter-spacing: 10px; - margin-right: 10px; - margin-left: 10px; - font-size: 8px; - width: 140px; - height: 10px; -`; diff --git a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js index b63aa5786..0588c9449 100644 --- a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js +++ b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js @@ -15,7 +15,13 @@ import { } from './utils'; import { useFeatureCan } from 'hooks/state'; -import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components'; +import { + Icon, + BranchSelect, + FeatureCan, + WarehouseSelect, + FormTopbar, +} from 'components'; import { useInvoiceFormContext } from './InvoiceFormProvider'; import { Features } from 'common'; @@ -38,7 +44,7 @@ export default function InvoiceFormTopBar() { return null; } return ( - + @@ -50,7 +56,7 @@ export default function InvoiceFormTopBar() { - + ); } diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.js index 3c94b6739..a66d48b1c 100644 --- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.js +++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.js @@ -1,16 +1,15 @@ import React from 'react'; import intl from 'react-intl-universal'; -import { - Alignment, - Navbar, - NavbarGroup, - Button, - Classes, -} from '@blueprintjs/core'; -import styled from 'styled-components'; +import { Alignment, NavbarGroup, Button, Classes } from '@blueprintjs/core'; import { useSetPrimaryBranchToForm } from './utils'; import { useFeatureCan } from 'hooks/state'; -import { Icon, BranchSelect, FeatureCan } from 'components'; +import { + Icon, + BranchSelect, + FeatureCan, + FormTopbar, + DetailsBarSkeletonBase, +} from 'components'; import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider'; import { Features } from 'common'; @@ -31,13 +30,13 @@ export default function PaymentReceiveFormTopBar() { } return ( - + - + ); } @@ -67,12 +66,3 @@ function PaymentReceiveBranchSelectButton({ label }) { /> ); } - -const DetailsBarSkeletonBase = styled.div` - letter-spacing: 10px; - margin-right: 10px; - margin-left: 10px; - font-size: 8px; - width: 140px; - height: 10px; -`; diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js index 4fc2453d2..79310e87f 100644 --- a/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js +++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js @@ -19,7 +19,7 @@ import ReceiptItemsEntriesEditor from './ReceiptItemsEntriesEditor'; import ReceiptFormFloatingActions from './ReceiptFormFloatingActions'; import ReceiptFormFooter from './ReceiptFormFooter'; import ReceiptFormDialogs from './ReceiptFormDialogs'; -import ReceiptFormTopbar from './ReceiptFormTopbar'; +import ReceiptFormTopBar from './ReceiptFormTopBar'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withSettings from 'containers/Settings/withSettings'; @@ -158,7 +158,7 @@ function ReceiptForm({ onSubmit={handleFormSubmit} >
- + diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.js index 357c7ab51..2f83d0323 100644 --- a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.js +++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.js @@ -3,7 +3,6 @@ import intl from 'react-intl-universal'; import styled from 'styled-components'; import { Alignment, - Navbar, NavbarGroup, NavbarDivider, Button, @@ -15,7 +14,14 @@ import { } from './utils'; import { useFeatureCan } from 'hooks/state'; -import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components'; +import { + Icon, + BranchSelect, + FeatureCan, + WarehouseSelect, + FormTopbar, + DetailsBarSkeletonBase, +} from 'components'; import { useReceiptFormContext } from './ReceiptFormProvider'; import { Features } from 'common'; @@ -23,7 +29,7 @@ import { Features } from 'common'; * Receipt form topbar . * @returns {JSX.Element} */ -export default function ReceiptFormTopbar() { +export default function ReceiptFormTopBar() { // Features guard. const { featureCan } = useFeatureCan(); @@ -39,7 +45,7 @@ export default function ReceiptFormTopbar() { } return ( - + @@ -51,7 +57,7 @@ export default function ReceiptFormTopbar() { - + ); } @@ -116,12 +122,3 @@ function ReceiptWarehouseSelectButton({ label }) { /> ); } - -const DetailsBarSkeletonBase = styled.div` - letter-spacing: 10px; - margin-right: 10px; - margin-left: 10px; - font-size: 8px; - width: 140px; - height: 10px; -`; diff --git a/src/style/pages/Dashboard/Dashboard.scss b/src/style/pages/Dashboard/Dashboard.scss index a4cd846cf..931d18f60 100644 --- a/src/style/pages/Dashboard/Dashboard.scss +++ b/src/style/pages/Dashboard/Dashboard.scss @@ -591,28 +591,3 @@ $dashboard-views-bar-height: 44px; } } } - -.navbar--dashboard-topbar { - box-shadow: 0 0 0; - border-bottom: 2px solid #dce5ea; - height: 35px; - padding: 0 20px; - - .bp3-navbar-group { - height: 35px; - } - .bp3-navbar-divider { - border-left-color: #d2dce2; - } - - .bp3-skeleton { - max-height: 10px; - } - - .bp3-button { - &:hover { - background: rgba(167, 182, 194, 0.12); - color: #32304a; - } - } -} \ No newline at end of file