QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 13:50:31 +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,
MenuItem,
Classes,
ControlGroup,
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'react-intl';
@@ -168,27 +169,29 @@ function EstimateFormHeader({
<ErrorMessage name="estimate_number" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.estimate_number && touched.estimate_number && Intent.DANGER
}
minimal={true}
rightElement={
<InputPrependButton
buttonProps={{
onClick: handleEstimateNumberChange,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: 'Setting your auto-generated estimate number',
position: Position.BOTTOM_LEFT,
}}
/>
}
{...getFieldProps('estimate_number')}
onBlur={handleEstimateNumberChanged}
/>
<ControlGroup fill={true}>
<InputGroup
intent={
errors.estimate_number &&
touched.estimate_number &&
Intent.DANGER
}
minimal={true}
{...getFieldProps('estimate_number')}
onBlur={handleEstimateNumberChanged}
/>
<InputPrependButton
buttonProps={{
onClick: handleEstimateNumberChange,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: 'Setting your auto-generated estimate number',
position: Position.BOTTOM_LEFT,
}}
/>
</ControlGroup>
</FormGroup>
{/* ----------- Reference ----------- */}

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

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

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

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

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

@@ -9,7 +9,7 @@ import React, {
import * as Yup from 'yup';
import { useFormik } from 'formik';
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 { pick, sumBy } from 'lodash';
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 { FormGroup, InputGroup, Intent, Position } from '@blueprintjs/core';
import {
FormGroup,
InputGroup,
Intent,
Position,
ControlGroup,
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'react-intl';
@@ -153,27 +159,27 @@ function ReceiptFormHeader({
<ErrorMessage name="receipt_number" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.receipt_number && touched.receipt_number && Intent.DANGER
}
minimal={true}
rightElement={
<InputPrependButton
buttonProps={{
onClick: handleReceiptNumberChange,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: 'Setting your auto-generated receipt number',
position: Position.BOTTOM_LEFT,
}}
/>
}
{...getFieldProps('receipt_number')}
onBlur={handleReceiptNumberChanged}
/>
<ControlGroup fill={true}>
<InputGroup
intent={
errors.receipt_number && touched.receipt_number && Intent.DANGER
}
minimal={true}
{...getFieldProps('receipt_number')}
onBlur={handleReceiptNumberChanged}
/>
<InputPrependButton
buttonProps={{
onClick: handleReceiptNumberChange,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: 'Setting your auto-generated receipt number',
position: Position.BOTTOM_LEFT,
}}
/>
</ControlGroup>
</FormGroup>
{/* ----------- 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;
}
.bp3-input-group{
display: flex;
.bp3-input:not(:last-child) {
border-radius: 3px 0 0 3px;
border-right-width: 0;
}
.bp3-input-action{
position: relative;
}
.bp3-control-group{
.input-prepend{
&:not(.bp3-fixed){
flex: 0;
}
&__text,
&__button{
display: flex;

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

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