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

fix: input prepend button.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-11-11 18:47:21 +02:00
parent 2fb6723e9f
commit cac0a368f2
7 changed files with 108 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
client/src/containers/Sales/Estimate/EstimateFormHeader.js
View File

@@ -6,6 +6,7 @@ import {
Position, Position,
MenuItem, MenuItem,
Classes, Classes,
ControlGroup,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'react-intl'; import { FormattedMessage as T } from 'react-intl';
@@ -168,27 +169,29 @@ function EstimateFormHeader({
<ErrorMessage name="estimate_number" {...{ errors, touched }} /> <ErrorMessage name="estimate_number" {...{ errors, touched }} />
} }
> >
<InputGroup <ControlGroup fill={true}>
intent={ <InputGroup
errors.estimate_number && touched.estimate_number && Intent.DANGER intent={
} errors.estimate_number &&
minimal={true} touched.estimate_number &&
rightElement={ Intent.DANGER
<InputPrependButton }
buttonProps={{ minimal={true}
onClick: handleEstimateNumberChange, {...getFieldProps('estimate_number')}
icon: <Icon icon={'settings-18'} />, onBlur={handleEstimateNumberChanged}
}} />
tooltip={true} <InputPrependButton
tooltipProps={{ buttonProps={{
content: 'Setting your auto-generated estimate number', onClick: handleEstimateNumberChange,
position: Position.BOTTOM_LEFT, icon: <Icon icon={'settings-18'} />,
}} }}
/> tooltip={true}
} tooltipProps={{
{...getFieldProps('estimate_number')} content: 'Setting your auto-generated estimate number',
onBlur={handleEstimateNumberChanged} position: Position.BOTTOM_LEFT,
/> }}
/>
</ControlGroup>
</FormGroup> </FormGroup>
{/* ----------- Reference ----------- */} {/* ----------- Reference ----------- */}

42
client/src/containers/Sales/Invoice/InvoiceFormHeader.js
View File

@@ -4,7 +4,7 @@ import {
InputGroup, InputGroup,
Intent, Intent,
Position, Position,
MenuItem, ControlGroup,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'react-intl'; import { FormattedMessage as T } from 'react-intl';
@@ -140,7 +140,7 @@ function InvoiceFormHeader({
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
{/* ----------- Invoice number ----------- */} {/* ----------- Invoice number ----------- */}
<FormGroup <FormGroup
label={<T id={'invoice_no'} />} label={<T id={'invoice_no'} />}
@@ -151,25 +151,25 @@ function InvoiceFormHeader({
<ErrorMessage name="invoice_no" {...{ errors, touched }} /> <ErrorMessage name="invoice_no" {...{ errors, touched }} />
} }
> >
<InputGroup <ControlGroup fill={true}>
intent={errors.invoice_no && touched.invoice_no && Intent.DANGER} <InputGroup
minimal={true} intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
rightElement={ minimal={true}
<InputPrependButton {...getFieldProps('invoice_no')}
buttonProps={{ onBlur={handleInvoiceNumberChanged}
onClick: handleInvoiceNumberChange, />
icon: <Icon icon={'settings-18'} />, <InputPrependButton
}} buttonProps={{
tooltip={true} onClick: handleInvoiceNumberChange,
tooltipProps={{ icon: <Icon icon={'settings-18'} />,
content: 'Setting your auto-generated invoice number', }}
position: Position.BOTTOM_LEFT, tooltip={true}
}} tooltipProps={{
/> content: 'Setting your auto-generated invoice number',
} position: Position.BOTTOM_LEFT,
{...getFieldProps('invoice_no')} }}
onBlur={handleInvoiceNumberChanged} />
/> </ControlGroup>
</FormGroup> </FormGroup>
{/* ----------- Reference ----------- */} {/* ----------- Reference ----------- */}

49
client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js
View File

@@ -4,7 +4,7 @@ import {
InputGroup, InputGroup,
Intent, Intent,
Position, Position,
MenuItem, ControlGroup,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
@@ -186,30 +186,29 @@ function PaymentReceiveFormHeader({
/> />
} }
> >
<InputGroup <ControlGroup fill={true}>
intent={ <InputGroup
errors.payment_receive_no && intent={
touched.payment_receive_no && errors.payment_receive_no &&
Intent.DANGER touched.payment_receive_no &&
} Intent.DANGER
minimal={true} }
rightElement={ minimal={true}
<InputPrependButton {...getFieldProps('payment_receive_no')}
buttonProps={{ onBlur={handlePaymentReceiveNumberChanged}
onClick: handlePaymentReceiveNumberChange, />
icon: <Icon icon={'settings-18'} />, <InputPrependButton
}} buttonProps={{
tooltip={true} onClick: handlePaymentReceiveNumberChange,
tooltipProps={{ icon: <Icon icon={'settings-18'} />,
content: }}
'Setting your auto-generated Payment Receive number', tooltip={true}
position: Position.BOTTOM_LEFT, tooltipProps={{
}} content: 'Setting your auto-generated Payment Receive number',
/> position: Position.BOTTOM_LEFT,
} }}
{...getFieldProps('payment_receive_no')} />
onBlur={handlePaymentReceiveNumberChanged} </ControlGroup>
/>
</FormGroup> </FormGroup>
{/* ------------ Deposit account ------------ */} {/* ------------ Deposit account ------------ */}

2
client/src/containers/Sales/Receipt/ReceiptForm.js
View File

@@ -9,7 +9,7 @@ import React, {
import * as Yup from 'yup'; import * as Yup from 'yup';
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import moment from 'moment'; import moment from 'moment';
import { Intent, FormGroup, TextArea } from '@blueprintjs/core'; import { Intent, FormGroup, TextArea, ControlGroup } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl'; import { FormattedMessage as T, useIntl } from 'react-intl';
import { pick, sumBy } from 'lodash'; import { pick, sumBy } from 'lodash';
import classNames from 'classnames'; import classNames from 'classnames';

50
client/src/containers/Sales/Receipt/ReceiptFormHeader.js
View File

@@ -1,5 +1,11 @@
import React, { useMemo, useCallback, useState } from 'react'; import React, { useMemo, useCallback, useState } from 'react';
import { FormGroup, InputGroup, Intent, Position } from '@blueprintjs/core'; import {
FormGroup,
InputGroup,
Intent,
Position,
ControlGroup,
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'react-intl'; import { FormattedMessage as T } from 'react-intl';
@@ -153,27 +159,27 @@ function ReceiptFormHeader({
<ErrorMessage name="receipt_number" {...{ errors, touched }} /> <ErrorMessage name="receipt_number" {...{ errors, touched }} />
} }
> >
<InputGroup <ControlGroup fill={true}>
intent={ <InputGroup
errors.receipt_number && touched.receipt_number && Intent.DANGER intent={
} errors.receipt_number && touched.receipt_number && Intent.DANGER
minimal={true} }
rightElement={ minimal={true}
<InputPrependButton {...getFieldProps('receipt_number')}
buttonProps={{ onBlur={handleReceiptNumberChanged}
onClick: handleReceiptNumberChange, />
icon: <Icon icon={'settings-18'} />, <InputPrependButton
}} buttonProps={{
tooltip={true} onClick: handleReceiptNumberChange,
tooltipProps={{ icon: <Icon icon={'settings-18'} />,
content: 'Setting your auto-generated receipt number', }}
position: Position.BOTTOM_LEFT, tooltip={true}
}} tooltipProps={{
/> content: 'Setting your auto-generated receipt number',
} position: Position.BOTTOM_LEFT,
{...getFieldProps('receipt_number')} }}
onBlur={handleReceiptNumberChanged} />
/> </ControlGroup>
</FormGroup> </FormGroup>
{/* ----------- Reference ----------- */} {/* ----------- Reference ----------- */}

16
client/src/style/objects/form.scss
View File

@@ -344,20 +344,14 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
color: #4b5d6b; color: #4b5d6b;
} }
.bp3-input-group{ .bp3-control-group{
display: flex;
.bp3-input:not(:last-child) {
border-radius: 3px 0 0 3px;
border-right-width: 0;
}
.bp3-input-action{
position: relative;
}
.input-prepend{ .input-prepend{
&:not(.bp3-fixed){
flex: 0;
}
&__text, &__text,
&__button{ &__button{
display: flex; display: flex;

5
client/src/style/pages/customer.scss
View File

@@ -16,6 +16,11 @@
.bp3-form-group{ .bp3-form-group{
max-width: 500px; max-width: 500px;
.bp3-control{
margin-top: 8px;
margin-bottom: 8px;
}
&.bp3-inline{ &.bp3-inline{
.bp3-label{ .bp3-label{