数据源详情页样式调整

src/components/admin/admin.less

@@ -11,16 +11,15 @@
         &> .ant-tabs-nav-container {
             .ant-tabs-nav-wrap {
                 .ant-tabs-tab {
-                    color: @tab-background-active;
+                    color: @tab-color;
                     background: @tab-background;
                     border-color: @tab-background-active;
                     border-radius: 0;
                     border-right-width: 0;
                     margin: 0;
-                    width: 100px;
                     text-align: center;
                     &.ant-tabs-tab-active {
-                        color: #fff;
+                        color: @tab-color-active;
                         background: @tab-background-active;
                     }
                     &:last-child {

src/components/dataSource/list.less

@@ -76,7 +76,7 @@
                         }
                     }
                     .ant-table-body {
-                        margin-top: 17px;
+                        margin-top: 10px;
                         overflow-y: auto !important;
                         table {
                             padding: 0;

src/components/dataSourceDetail/content.jsx

@@ -73,7 +73,7 @@ class DataSourceDetailContent extends React.Component {
             content: <AccessConfig mode={mode} />,
         }];
         return (
-            <Layout className='layout-datasource-detail'>
+            <Layout className='content-datasourcedetail'>
                 <Content className='content'>
                     {mode === 'create' ? (<div className='datasource-steps-container'>
                         <Steps className='steps-body' current={current}>

src/components/dataSourceDetail/content.less

@@ -1,4 +1,4 @@
-.layout-datasource-detail {
+.content-datasourcedetail {
     height: 100%;
     .content {
         height: 100%;
@@ -15,8 +15,29 @@
         &>.ant-tabs {
             height: 100%;
             padding-top: 40px;
-            &>.ant-tabs-bar {
-                margin: -40px 0 0 0;
+            &> .ant-tabs-bar {
+                border: none;
+                margin: -40px 0 12px 0;
+                &> .ant-tabs-nav-container {
+                    .ant-tabs-nav-wrap {
+                        .ant-tabs-tab {
+                            color: @tab-color;
+                            background: @tab-background;
+                            border-color: @tab-background-active;
+                            border-radius: 0;
+                            border-right-width: 0;
+                            margin: 0;
+                            text-align: center;
+                            &.ant-tabs-tab-active {
+                                color: @tab-color-active;
+                                background: @tab-background-active;
+                            }
+                            &:last-child {
+                                border-right-width: 1px;
+                            }
+                        }
+                    }
+                }
             }
             &>.ant-tabs-content {
                 height: 100%;
@@ -26,19 +47,16 @@
             height: 40px;
             display: flex;
             align-items: center;
-            border: 1px solid #CCCCCC;
+            border: 1px solid @border-color-base;
             padding: 0 20%;
         }
         .steps-content,.tab-datasource {
             height: 100%;
             overflow: auto;
             padding: 10px 30px;
-            border: 1px solid #CCCCCC;
+            border: 1px solid @border-color-base;
             .ant-divider {
                 margin: 10px 0;
-                .ant-divider-inner-text {
-                    font-weight: bold;
-                }
             }
             .ant-form {
                 .buttons {
@@ -143,7 +161,7 @@
                 }
                 .react-resizable {
                     position: relative;
-                  }
+                }
                   
                 .react-resizable-handle {
                     position: absolute;
@@ -154,7 +172,10 @@
                     right: -5px;
                     opacity: 0;
                     cursor: col-resize;
-                  }
+                }
+                .ant-table-bordered .ant-table-thead > tr > th:first-child, .ant-table-bordered .ant-table-tbody > tr > td:first-child {
+                    border-left: 2px solid #e8e8e8;
+                }
             }
         }
         .steps-action {

src/components/dataSourceDetail/header.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon, Button } from 'antd'
+import { Button } from 'antd'
 import { connect } from 'dva'
 import './header.less'
 
@@ -14,18 +14,18 @@ class DataSourceDetailHeader extends React.Component {
                 <div>
                     <span className='title-label'>{name}</span>
                 </div>
-                <div className='header-item toolbar-back'>
+                <div className='header-item buttons'>
                     <Button onClick={(e) => {
                         dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                     }}>
-                        <Icon type='left' />返回
+                        返回
                     </Button>
                     {code && code !== 'create' && <Button disabled={ ( ( type === 'database' && (!name || targetDirty) ) || ( type === 'file' && +1 === 2) ) ||
                         (!columns || columns.length === 0)
                     } onClick={() => {
                         dispatch({ type: 'dataSource/remoteModify' });
                     }}>
-                        <Icon type='save' />保存
+                        保存
                     </Button>}
                 </div>
             </div>

src/components/dataSourceDetail/header.less

@@ -1,4 +1,7 @@
 .dataSourcedetail-header {
     display: flex;
     justify-content: space-between;
+    .title-label {
+        font-size: 16px;
+    }
 }

src/components/dataSourceDetail/layout.jsx

@@ -25,7 +25,7 @@ class DataSourceDetail extends React.Component {
     }
 
     render() {
-        return <Layout className='datasourcedetail-layout'>
+        return <Layout className='layout-datasourcedetail'>
             <Header>
                 <DataSourceDetailHeader updateThumbnail={this.updateThumbnail} />
             </Header>

src/components/dataSourceDetail/layout.less

@@ -1,4 +1,4 @@
-.datasourcedetail-layout {
+.layout-datasourcedetail {
     height: 100%;
     overflow: hidden;
     &>.ant-layout-header {

src/theme.js

@@ -1,6 +1,9 @@
 // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
 module.exports = {
-    /** override */
+    /** 
+     * override
+     * directly effective
+     */
     // Base Scaffolding Variables
     'border-radius-base': '2px',
 
@@ -10,9 +13,15 @@ module.exports = {
     // Border
     'border-color-base': '#ccc',
 
+    // Checkbox
+    'checkbox-color': '#2C82BE',
+
 
     
-    /** custom */
+    /** 
+     * custom variavles
+     * need to be used manually 
+     */
     'item-active-bg-color': '#2C82BE',
     'item-active-color': '#fff',
     // Layout
@@ -21,5 +30,10 @@ module.exports = {
 
     // Tabs
     'tab-background': '#F5FBFE',
+    'tab-color': '@item-active-bg-color',
     'tab-background-active': '@item-active-bg-color',
+    'tab-color-active': '#fff',
+
+    // Checkbox
+    'checkbox-border-radius': '0',
 };

src/themes/default/base.less

@@ -20,15 +20,29 @@
     color: rgba(0, 0, 0, 0.5);
 }
 
+// Button
+.ant-btn {
+    background: #F5FBFE;
+    border: 1px solid #408DC6;
+}
+.ant-btn-disabled, .ant-btn.disabled, .ant-btn[disabled], .ant-btn-disabled:hover, .ant-btn.disabled:hover, .ant-btn[disabled]:hover, .ant-btn-disabled:focus, .ant-btn.disabled:focus, .ant-btn[disabled]:focus, .ant-btn-disabled:active, .ant-btn.disabled:active, .ant-btn[disabled]:active, .ant-btn-disabled.active, .ant-btn.disabled.active, .ant-btn[disabled].active {
+    background-color: #f5f5f5;
+    border-color: #ccc;
+}
+
 // Table
-.ant-table-thead > tr,.ant-table-thead > tr:hover {
-    background: #D6EEFE;
+.ant-table-small > .ant-table-content > .ant-table-body {
+    margin: 0;
 }
-.ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td, .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td, .ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td, .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
-    background: #F2F7FF;
+.ant-table-row {
+    background: #fff;
 }
-.layout-datasource .ant-card-body .datasource-table .ant-table .ant-table-scroll .ant-table-body {
-    margin-top: 10px;
+.ant-table-thead > tr > th {
+    background: transparent;
+}
+.ant-table-thead > tr,.ant-table-thead > tr:hover {
+    height: 40px;
+    background: #D6EEFE;
 }
 
 // ListFilter
@@ -50,6 +64,11 @@
     }
 }
 
+// Checkbox
+.ant-checkbox-inner {
+    border-radius: @checkbox-border-radius;
+}
+
 
 // 滚动条
 *::-webkit-scrollbar {

src/themes/default/chart.less

@@ -1,14 +1,6 @@
 .layout-chart {
     &> .ant-layout-content {
         &> .ant-card {
-            &> .ant-card-head {
-                .search {
-                    button {
-                        background: #F5FBFE;
-                        border: 1px solid #408DC6;
-                    }
-                }
-            }
             &> .ant-card-body {
                 background: @content-background-color;
                 .chart-card {

src/themes/default/dashboard.less

@@ -41,18 +41,6 @@
         .dashboard-view {
             &> .ant-layout-content {
                 &> .dashboard-body {
-                    &> .ant-card-head {
-                        .search {
-                            button {
-                                background: #F5FBFE;
-                                border: 1px solid #408DC6;
-                            }
-                            .ant-btn-disabled, .ant-btn.disabled, .ant-btn[disabled], .ant-btn-disabled:hover, .ant-btn.disabled:hover, .ant-btn[disabled]:hover, .ant-btn-disabled:focus, .ant-btn.disabled:focus, .ant-btn[disabled]:focus, .ant-btn-disabled:active, .ant-btn.disabled:active, .ant-btn[disabled]:active, .ant-btn-disabled.active, .ant-btn.disabled.active, .ant-btn[disabled].active {
-                                background-color: #f5f5f5;
-                                border-color: #ccc;
-                            }
-                        }
-                    }
                     &> .ant-card-body {
                         background: #F6F6F7;
                         padding: 12px;

src/themes/default/dataconnect.less

@@ -1,14 +1,6 @@
 .layout-dataconnect {
     &> .ant-layout-content {
         &> .ant-card {
-            &> .ant-card-head {
-                .search {
-                    button {
-                        background: #F5FBFE;
-                        border: 1px solid #408DC6;
-                    }
-                }
-            }
             &> .ant-card-body {
                 background: @content-background-color;
                 .dataconnect-card {

src/themes/default/datasource.less

@@ -1,14 +1,6 @@
 .layout-datasource {
     &> .ant-layout-content {
         &> .datasource-body {
-            &> .ant-card-head {
-                .search {
-                    button {
-                        background: #F5FBFE;
-                        border: 1px solid #408DC6;
-                    }
-                }
-            }
             &> .ant-card-body {
                 background: @content-background-color;
                 padding: 12px;

src/themes/default/datasourcedetail.less

@@ -0,0 +1,40 @@
+.layout-datasourcedetail {
+    &> .ant-layout-header {
+        height: 70px;
+        line-height: 70px;
+        &> .dataSourcedetail-header {
+            display: flex;
+            justify-content: space-between;
+            .buttons {
+                button {
+                    margin-left: 12px;
+                }
+            }
+        }
+    }
+    &> .ant-layout-content {
+        padding: 12px;
+        background: @content-background-color;
+        &> .content-datasourcedetail {
+            &> .content {
+                box-shadow: 0 0 10px 0 rgba(41,54,72,0.10);
+                &> .ant-tabs {
+                    &> .ant-tabs-bar {
+
+                    }
+                    &> .ant-tabs-content {
+                        height: calc(~"100% - 12px");
+                        &> .tab-datasource {
+                            background: @content-background-color;
+                            .table-columnconfig {
+                                .ant-select-selection--single, input {
+                                    background: #fafafa;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/themes/default/workshop.less

@@ -39,6 +39,7 @@
         background: @content-background-color;
         @import "./dataconnect.less";
         @import "./datasource.less";
+        @import "./datasourcedetail.less";
         @import "./chart.less";
         @import "./dashboard.less";
     }