[#6178] Unified configuration page style (#6165)

* Unified configuration page style * Unified all button style
alibaba · Jun 29, 2021 · 842c212 · 842c212
1 parent ad3b62e
commit 842c212
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 44 deletions.
diff --git a/console-ui/src/pages/ConfigurationManagement/ConfigDetail/ConfigDetail.js b/console-ui/src/pages/ConfigurationManagement/ConfigDetail/ConfigDetail.js
@@ -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
@@ -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>

diff --git a/console-ui/src/pages/ConfigurationManagement/ConfigDetail/index.scss b/console-ui/src/pages/ConfigurationManagement/ConfigDetail/index.scss
@@ -31,4 +31,8 @@
 }
 .editor-normal {
   clear: both;
+}
+
+.more-item.hide {
+  display: none;
 }
diff --git a/console-ui/src/pages/ConfigurationManagement/ConfigEditor/NewConfigEditor.js b/console-ui/src/pages/ConfigurationManagement/ConfigEditor/NewConfigEditor.js
@@ -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
@@ -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 => (
@@ -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}
@@ -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 && (
               <>
@@ -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>

diff --git a/console-ui/src/pages/ConfigurationManagement/NewConfig/NewConfig.js b/console-ui/src/pages/ConfigurationManagement/NewConfig/NewConfig.js
@@ -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' : ''}`}
@@ -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')} />