💄 UI: optimize style (ant-design#586)

* 💄 UI: optimize style * add hover * fix style
seaskydl · Jun 30, 2020 · 72b9400 · 72b9400
1 parent 9770173
commit 72b9400
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 7 deletions.
diff --git a/docs/demo/batchOption.tsx b/docs/demo/batchOption.tsx
@@ -140,7 +140,7 @@ export default () => (
     rowKey="id"
     rowSelection={{}}
     tableAlertRender={({ selectedRowKeys, selectedRows }) =>
-      `当前共选中${selectedRowKeys.length} 项，共有 ${selectedRows.reduce((pre, item) => {
+      `当前共选中 ${selectedRowKeys.length} 项，共有 ${selectedRows.reduce((pre, item) => {
         if (item.state === 'open') {
           return pre + 1;
         }

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -391,7 +391,7 @@ const genEllipsis = (dom: React.ReactNode, item: ProColumns<any>, text: string)
   }
   return (
     <Tooltip title={text}>
-      <div>{dom}</div>
+      <span>{dom}</span>
     </Tooltip>
   );
 };

diff --git a/src/component/alert/index.less b/src/component/alert/index.less
@@ -8,6 +8,8 @@
 
   &-info {
     display: flex;
+    align-items: center;
+    transition: 0.3 all;
     &-content {
       flex: 1;
     }

diff --git a/src/component/columnSetting/index.less b/src/component/columnSetting/index.less
@@ -10,19 +10,25 @@
     justify-content: space-between;
     height: 32px;
   }
+  &-overlay {
+    .ant-popover-inner-content {
+      padding: 12px 0;
+    }
+  }
 }
 .@{pro-column-setting-prefix-cls}-list {
   display: flex;
   flex-direction: column;
-  width: 168px;
+  width: 100%;
   &-title {
-    margin-bottom: 8px;
     color: #8c8c8c;
     font-size: 12px;
   }
   &-item {
-    display: block;
+    display: flex;
+    align-items: center;
     width: 100%;
+    padding: 4px 16px;
     &-option {
       display: none;
       float: right;
@@ -37,14 +43,15 @@
       }
     }
     &:hover {
+      background-color: @item-active-bg;
       .@{pro-column-setting-prefix-cls}-list-item-option {
         display: block;
       }
     }
   }
   .@{ant-prefix}-checkbox-wrapper {
-    margin-bottom: 8px;
-    margin-left: 0;
+    flex: 1;
+    margin: 0;
     :last-child {
       margin-bottom: 0;
     }

diff --git a/src/component/columnSetting/index.tsx b/src/component/columnSetting/index.tsx
@@ -279,6 +279,7 @@ const ColumnSetting = <T, U = {}>(props: ColumnSettingProps<T>) => {
                 </a>
               </div>
             }
+            overlayClassName={`${className}-overlay`}
             trigger="click"
             placement="bottomRight"
             content={<GroupCheckboxList className={className} localColumns={localColumns} />}