Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#6178] Unified configuration page style #6165

Merged
merged 3 commits into from
Jun 29, 2021
Merged

[#6178] Unified configuration page style #6165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a26d75
Unified configuration page style
ZZQ001010 Jun 25, 2021
bb52829
Unified all button style
ZZQ001010 Jun 25, 2021
95a2299
Merge branch 'develop' into issue#289
ZZQ001010 Jun 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 28 additions & 25 deletions console-ui/src/pages/ConfigurationManagement/ConfigDetail/ConfigDetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,39 +317,42 @@ class ConfigDetail extends React.Component {
) : (
''
)}
<Form inline={false} field={this.field}>
<FormItem label={'Data ID:'} required {...formItemLayout}>
<Form inline={false} field={this.field} {...formItemLayout}>
<FormItem label={'Data ID:'} required>
<Input htmlType={'text'} readOnly {...init('dataId')} />
</FormItem>
<FormItem label={'Group:'} required {...formItemLayout}>
<FormItem label={'Group:'} required>
<Input htmlType={'text'} readOnly {...init('group')} />
</FormItem>
<div style={{ marginTop: 10 }}>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
{this.state.showmore ? locale.collapse : locale.more}
</a>
</div>
{this.state.showmore ? (
<FormItem label=" ">
<div>
<FormItem label={locale.home} {...formItemLayout}>
<Input htmlType={'text'} readOnly {...init('appName')} />
</FormItem>

<FormItem label={locale.tags} {...formItemLayout}>
<Input htmlType={'text'} readOnly {...init('config_tags')} />
</FormItem>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
{this.state.showmore ? locale.collapse : locale.more}
</a>
</div>
) : (
''
)}
</FormItem>

<FormItem
label={locale.home}
className={`more-item${!this.state.showmore ? ' hide' : ''}`}
>
<Input htmlType={'text'} readOnly {...init('appName')} />
</FormItem>

<FormItem
label={locale.tags}
className={`more-item${!this.state.showmore ? ' hide' : ''}`}
>
<Input htmlType={'text'} readOnly {...init('config_tags')} />
</FormItem>

<FormItem label={locale.description} {...formItemLayout}>
<Input.TextArea htmlType={'text'} multiple rows={3} readOnly {...init('desc')} />
</FormItem>
{activeKey === 'normal' ? (
''
) : (
<FormItem label={locale.betaRelease} {...formItemLayout}>
<FormItem label={locale.betaRelease}>
<div style={{ width: '100%' }} id={'betaips'}>
<Input.TextArea
multiple
Expand All @@ -361,22 +364,22 @@ class ConfigDetail extends React.Component {
</div>
</FormItem>
)}
<FormItem label={'MD5:'} required {...formItemLayout}>
<FormItem label={'MD5:'} required>
<Input htmlType={'text'} readOnly {...init('md5')} />
</FormItem>
<FormItem label={locale.configuration} required {...formItemLayout}>
<FormItem label={locale.configuration} required>
<div className={editorClass} id="container" style={{ height: 500 }} />
</FormItem>
</Form>
<Row>
<Col span="24" className="button-list">
<Button size="large" type="primary" onClick={() => this.onClickConfigCompare()}>
<Button type="primary" onClick={() => this.onClickConfigCompare()}>
{locale.configComparison}
</Button>{' '}
<Button size="large" type="primary" onClick={this.openDiff.bind(this)}>
<Button type="primary" onClick={this.openDiff.bind(this)}>
{locale.versionComparison}
</Button>{' '}
<Button size="large" type="normal" onClick={this.goList.bind(this)}>
<Button type="normal" onClick={this.goList.bind(this)}>
{locale.back}
</Button>
</Col>
Expand Down
4 changes: 4 additions & 0 deletions console-ui/src/pages/ConfigurationManagement/ConfigDetail/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,8 @@
}
.editor-normal {
clear: both;
}

.more-item.hide {
display: none;
}
25 changes: 14 additions & 11 deletions console-ui/src/pages/ConfigurationManagement/ConfigEditor/NewConfigEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,6 +461,15 @@ class ConfigEditor extends React.Component {
} = this.state;
const { locale = {} } = this.props;

const formItemLayout = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 22,
},
};

return (
<div className="config-editor">
<Loading
Expand All @@ -470,9 +479,7 @@ class ConfigEditor extends React.Component {
tip="Loading..."
color="#333"
>
<h1 className="func-title">
<div>{locale.toedit}</div>
</h1>
<h1>{locale.toedit}</h1>
{betaPublishSuccess && (
<Tab shape="wrapped" activeKey={tabActiveKey} onChange={key => this.clickTab(key)}>
{TAB_LIST.map(key => (
Expand All @@ -482,7 +489,7 @@ class ConfigEditor extends React.Component {
))}
</Tab>
)}
<Form className="form">
<Form className="new-config-form" {...formItemLayout}>
<Form.Item label="Data ID:" required {...dataIdError}>
<Input
value={form.dataId}
Expand All @@ -502,12 +509,9 @@ class ConfigEditor extends React.Component {
/>
</Form.Item>
<Form.Item label=" ">
<div
className="switch"
onClick={() => this.setState({ openAdvancedSettings: !openAdvancedSettings })}
>
<a onClick={() => this.setState({ openAdvancedSettings: !openAdvancedSettings })}>
{openAdvancedSettings ? locale.collapse : locale.groupNotEmpty}
</div>
</a>
</Form.Item>
{openAdvancedSettings && (
<>
Expand Down Expand Up @@ -624,14 +628,13 @@ class ConfigEditor extends React.Component {
</Button>
)}
<Button
size="large"
type="primary"
disabled={tabActiveKey === 'production'}
onClick={() => this.openDiff('publish')}
>
{locale.publish}
</Button>
<Button size="large" type="normal" onClick={() => this.goBack()}>
<Button type="normal" onClick={() => this.goBack()}>
{locale.back}
</Button>
</Col>
Expand Down
15 changes: 7 additions & 8 deletions console-ui/src/pages/ConfigurationManagement/NewConfig/NewConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -516,7 +516,13 @@ class NewConfig extends React.Component {
{locale.annotation}
</Message>
</FormItem>

<FormItem label=" ">
<div>
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
{this.state.showmore ? locale.dataIdLength : locale.collapse}
</a>
</div>
</FormItem>
<FormItem
label={locale.tags}
className={`more-item${!this.state.showmore ? ' hide' : ''}`}
Expand Down Expand Up @@ -545,13 +551,6 @@ class NewConfig extends React.Component {
>
<Input {...init('appName')} readOnly={this.inApp} />
</FormItem>
<FormItem label=" ">
<div className="more-container">
<a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
{this.state.showmore ? locale.dataIdLength : locale.collapse}
</a>
</div>
</FormItem>

<FormItem label={locale.description}>
<Input.TextArea htmlType={'text'} multiple rows={3} {...init('desc')} />
Expand Down