From a50a4faa1fa0fc6f14e6f338224b149a0733bdde Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Oct 2017 22:35:43 +0800 Subject: [PATCH] update form styles --- src/components/Result/index.less | 8 ++--- src/routes/Forms/AdvancedForm.js | 2 +- src/routes/Forms/StepForm/Step1.js | 2 +- src/routes/Forms/StepForm/style.less | 27 ++++++++++----- src/routes/Forms/TableForm.js | 49 +++++++++++++++++++++------- src/routes/Forms/style.less | 29 ++++++++-------- 6 files changed, 78 insertions(+), 39 deletions(-) diff --git a/src/components/Result/index.less b/src/components/Result/index.less index 661b4af1..a3904e89 100644 --- a/src/components/Result/index.less +++ b/src/components/Result/index.less @@ -24,19 +24,19 @@ color: @heading-color; font-weight: 500; line-height: 32px; - margin-bottom: 16px; + margin-bottom: 8px; } .description { font-size: 14px; color: @text-color-secondary; - margin-bottom: 24px; + margin-bottom: 16px; } .extra { background: #fafafa; - padding: 24px 40px; - margin-top: 24px; + padding: 16px 40px; + margin-top: 16px; border-radius: @border-radius-sm; text-align: left; } diff --git a/src/routes/Forms/AdvancedForm.js b/src/routes/Forms/AdvancedForm.js index eae686c0..e551e183 100644 --- a/src/routes/Forms/AdvancedForm.js +++ b/src/routes/Forms/AdvancedForm.js @@ -97,7 +97,7 @@ function AdvancedForm({ form, dispatch, submitting }) {
diff --git a/src/routes/Forms/StepForm/Step1.js b/src/routes/Forms/StepForm/Step1.js index 5e800307..d5703341 100644 --- a/src/routes/Forms/StepForm/Step1.js +++ b/src/routes/Forms/StepForm/Step1.js @@ -91,7 +91,7 @@ export default ({ formItemLayout, form, dispatch }) => {
- +

说明

转账到支付宝账户

diff --git a/src/routes/Forms/StepForm/style.less b/src/routes/Forms/StepForm/style.less index 36330941..9d98d456 100644 --- a/src/routes/Forms/StepForm/style.less +++ b/src/routes/Forms/StepForm/style.less @@ -6,6 +6,7 @@ } .stepFormText { + margin-bottom: 24px; :global { .ant-form-item-label, .ant-form-item-control { @@ -16,26 +17,36 @@ .result { margin: 0 auto; - max-width: 520px; - padding: 32px 0; + max-width: 560px; + padding: 24px 0; } .desc { h3 { - font-size: 14px; - margin: 8px 0; + font-size: 16px; + margin: 0 0 12px 0; color: @text-color-secondary; + line-height: 32px; } h4 { - margin: 2px 0; + margin: 0 0 4px 0; color: @text-color-secondary; + font-size: 14px; + line-height: 22px; } p { - margin-bottom: 16px; + margin-top: 0; + margin-bottom: 12px; + line-height: 22px; } - padding: 0 34px; + padding: 0 80px; color: @text-color-secondary; - font-size: 12px; +} + +@media screen and (max-width: @screen-md) { + .desc { + padding: 0; + } } .information { diff --git a/src/routes/Forms/TableForm.js b/src/routes/Forms/TableForm.js index 390bd9b0..93a535a5 100644 --- a/src/routes/Forms/TableForm.js +++ b/src/routes/Forms/TableForm.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Table, Button, Input, message } from 'antd'; +import { Table, Button, Input, message, Popconfirm } from 'antd'; import styles from './style.less'; export default class TableForm extends PureComponent { @@ -45,8 +45,7 @@ export default class TableForm extends PureComponent { this.setState({ data: [...this.state.data] }); } } - remove(e, key) { - e.preventDefault(); + remove(key) { const newData = this.state.data.filter(item => item.key !== key); this.setState({ data: newData }); this.props.onChange(newData); @@ -64,6 +63,11 @@ export default class TableForm extends PureComponent { this.index += 1; this.setState({ data: newData }); } + handleKeyPress(e, key) { + if (e.key === 'Enter') { + this.saveRow(e, key); + } + } handleFieldChange(e, fieldName, key) { const newData = [...this.state.data]; const target = this.getRowByKey(key); @@ -73,16 +77,29 @@ export default class TableForm extends PureComponent { } } saveRow(e, key) { - const target = this.getRowByKey(key); - delete target.isNew; - if (!target.workId || !target.name || !target.department) { - message.error('请填写完整成员信息。'); - return; - } - this.toggleEditable(e, key); - this.props.onChange(this.state.data); + e.persist(); + // save field when blur input + setTimeout(() => { + if (document.activeElement.tagName === 'INPUT' && + document.activeElement !== e.target) { + return; + } + if (this.clickedCancel) { + this.clickedCancel = false; + return; + } + const target = this.getRowByKey(key); + delete target.isNew; + if (!target.workId || !target.name || !target.department) { + message.error('请填写完整成员信息。'); + return; + } + this.toggleEditable(e, key); + this.props.onChange(this.state.data); + }, 10); } cancel(e, key) { + this.clickedCancel = true; e.preventDefault(); const target = this.getRowByKey(key); if (this.cacheOriginData[key]) { @@ -105,6 +122,8 @@ export default class TableForm extends PureComponent { value={text} autoFocus onChange={e => this.handleFieldChange(e, 'name', record.key)} + onBlur={e => this.saveRow(e, record.key)} + onKeyPress={e => this.handleKeyPress(e, record.key)} placeholder="成员姓名" /> ); @@ -122,6 +141,8 @@ export default class TableForm extends PureComponent { this.handleFieldChange(e, 'workId', record.key)} + onBlur={e => this.saveRow(e, record.key)} + onKeyPress={e => this.handleKeyPress(e, record.key)} placeholder="工号" /> ); @@ -139,6 +160,8 @@ export default class TableForm extends PureComponent { this.handleFieldChange(e, 'department', record.key)} + onBlur={e => this.saveRow(e, record.key)} + onKeyPress={e => this.handleKeyPress(e, record.key)} placeholder="所属部门" /> ); @@ -171,7 +194,9 @@ export default class TableForm extends PureComponent { this.toggleEditable(e, record.key)}>编辑 - this.remove(e, record.key)}>删除 + this.remove(record.key)}> + 删除 + ); }, diff --git a/src/routes/Forms/style.less b/src/routes/Forms/style.less index eaa62f07..722aca80 100644 --- a/src/routes/Forms/style.less +++ b/src/routes/Forms/style.less @@ -15,13 +15,6 @@ margin: 16px auto; } -.divider { - border: 0; - border-top: 1px solid @border-color-split; - height: 1px; - margin: 0 0 24px 0; -} - .errorIcon { cursor: pointer; color: @error-color; @@ -37,7 +30,7 @@ padding: 0; max-height: 290px; overflow: auto; - min-width: 240px; + min-width: 256px; } } } @@ -45,7 +38,7 @@ .errorListItem { list-style: none; border-bottom: 1px solid @border-color-split; - padding: 8px 24px; + padding: 8px 16px; cursor: pointer; transition: all .3s; &:hover { @@ -58,13 +51,13 @@ color: @error-color; float: left; margin-top: 4px; - margin-right: 8px; + margin-right: 12px; padding-bottom: 22px; } .errorField { font-size: 12px; color: @text-color-secondary; - margin-top: 4px; + margin-top: 2px; } } @@ -72,15 +65,25 @@ td { padding-top: 13px !important; padding-bottom: 12.5px !important; - transition: none !important; } } // custom footer for fixed footer toolbar -.withFooterToolbar + div { +.advancedForm + div { padding-bottom: 64px; } +.advancedForm { + :global { + .ant-form .ant-row:last-child .ant-form-item { + margin-bottom: 24px; + } + .ant-table td { + transition: none !important; + } + } +} + .optional { color: @text-color-secondary; font-style: normal; -- GitLab