mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

Table style update. Move sort button after title (#15758)

Browse Source 
* update style of sort icon

* update snapshot

* micro adjust

* little offset of arrow
This commit is contained in:
zombieJ 2019-03-31 14:01:24 +08:00 committed by GitHub
parent c91d7d1a1e
commit aebb781000
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 2802 additions and 847 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -11419,10 +11419,17 @@ exports[`ConfigProvider components Table configProvider 1`] = `
>
<div
class="config-table-column-sorters"
>
<span
class="config-table-column-title"
>
Name
<div
</span>
<span
class="config-table-column-sorter"
>
<div
class="config-table-column-sorter-inner config-table-column-sorter-inner-full"
title="Sort"
>
<i
@ -11462,6 +11469,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
</svg>
</i>
</div>
</span>
</div>
<i
aria-label="icon: filter"
@ -11622,10 +11630,17 @@ exports[`ConfigProvider components Table normal 1`] = `
>
<div
class="ant-table-column-sorters"
>
<span
class="ant-table-column-title"
>
Name
<div
</span>
<span
class="ant-table-column-sorter"
>
<div
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
title="Sort"
>
<i
@ -11665,6 +11680,7 @@ exports[`ConfigProvider components Table normal 1`] = `
</svg>
</i>
</div>
</span>
</div>
<i
aria-label="icon: filter"
@ -11825,10 +11841,17 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
>
<div
class="prefix-Table-column-sorters"
>
<span
class="prefix-Table-column-title"
>
Name
<div
</span>
<span
class="prefix-Table-column-sorter"
>
<div
class="prefix-Table-column-sorter-inner prefix-Table-column-sorter-inner-full"
title="Sort"
>
<i
@ -11868,6 +11891,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
</svg>
</i>
</div>
</span>
</div>
<i
aria-label="icon: filter"

14
components/empty/__tests__/__snapshots__/demo.test.js.snap
View File

@ -381,14 +381,28 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
class=""
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>

14
components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1757,7 +1757,14 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
class="ant-table-column-has-actions ant-table-column-has-filters"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<i
aria-label="icon: filter"
@ -1784,7 +1791,14 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
class=""
>
<div>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>

616
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

13
components/table/Table.tsx
View File

@ -884,7 +884,14 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
);
sortButton = (
<div title={locale.sortTitle} className={`${prefixCls}-column-sorter`} key="sorter">
<div
title={locale.sortTitle}
className={classNames(
`${prefixCls}-column-sorter-inner`,
ascend && descend && `${prefixCls}-column-sorter-inner-full`,
)}
key="sorter"
>
{ascend}
{descend}
</div>
@ -919,8 +926,10 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
}),
title: [
<div key="title" className={sortButton ? `${prefixCls}-column-sorters` : undefined}>
<span className={`${prefixCls}-column-title`}>
{this.renderColumnTitle(column.title)}
{sortButton}
</span>
<span className={`${prefixCls}-column-sorter`}>{sortButton}</span>
</div>,
filterDropdown,
],

7
components/table/__tests__/__snapshots__/Table.filter.test.js.snap
View File

@ -97,7 +97,14 @@ exports[`Table.filter renders filter correctly 1`] = `
class="ant-table-column-has-actions ant-table-column-has-filters"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
<i
aria-label="icon: filter"

14
components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
View File

@ -33,7 +33,14 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
class=""
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>
@ -210,7 +217,14 @@ exports[`Table.pagination renders pagination correctly 1`] = `
class=""
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>

21
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -39,6 +39,9 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
class="ant-table-fixed-columns-in-body ant-table-selection-column"
>
<div>
<span
class="ant-table-column-title"
>
<div
class="ant-table-selection"
>
@ -58,13 +61,24 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
</span>
</label>
</div>
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>
@ -242,6 +256,9 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
class="ant-table-selection-column"
>
<div>
<span
class="ant-table-column-title"
>
<div
class="ant-table-selection"
>
@ -261,6 +278,10 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
</span>
</label>
</div>
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>

10
components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
View File

@ -10,10 +10,17 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
>
<div
class="ant-table-column-sorters"
>
<span
class="ant-table-column-title"
>
Name
<div
</span>
<span
class="ant-table-column-sorter"
>
<div
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
title="Sort"
>
<i
@ -53,6 +60,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
</svg>
</i>
</div>
</span>
</div>
</th>
</tr>

28
components/table/__tests__/__snapshots__/Table.test.js.snap
View File

@ -36,7 +36,14 @@ exports[`Table renders JSX correctly 1`] = `
colspan="2"
>
<div>
<span
class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
@ -44,7 +51,14 @@ exports[`Table renders JSX correctly 1`] = `
rowspan="2"
>
<div>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>
@ -53,14 +67,28 @@ exports[`Table renders JSX correctly 1`] = `
class=""
>
<div>
<span
class="ant-table-column-title"
>
First Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Last Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>

934
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

266
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

@ -40,56 +40,112 @@ exports[`Table renders empty table 1`] = `
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 1
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 2
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 3
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 4
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 5
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 6
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 7
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 8
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>
@ -167,56 +223,112 @@ exports[`Table renders empty table with custom emptyText 1`] = `
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 1
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 2
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 3
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 4
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 5
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 6
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 7
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 8
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>
@ -290,77 +402,154 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-fixed-columns-in-body"
>
<div>
<span
class="ant-table-column-title"
>
Full Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class="ant-table-fixed-columns-in-body"
>
<div>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 1
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 2
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 3
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 4
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 5
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 6
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 7
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 8
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class="ant-table-fixed-columns-in-body"
>
<div>
<span
class="ant-table-column-title"
>
Action
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>
@ -421,14 +610,28 @@ exports[`Table renders empty table with fixed columns 1`] = `
class=""
>
<div>
<span
class="ant-table-column-title"
>
Full Name
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>
@ -466,7 +669,14 @@ exports[`Table renders empty table with fixed columns 1`] = `
class=""
>
<div>
<span
class="ant-table-column-title"
>
Action
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>
@ -547,56 +757,112 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 1
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 2
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 3
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 4
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 5
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 6
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 7
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
<th
class=""
>
<div>
<span
class="ant-table-column-title"
>
Column 8
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</th>
</tr>

50
components/table/style/index.less
View File

@ -69,30 +69,43 @@
}
.@{table-prefix-cls}-column-sorter {
position: absolute;
top: 50%;
right: 6px;
width: 14px;
height: @font-size-lg + 1px;
margin-top: -(@font-size-lg + 1px) / 2;
display: table-cell;
vertical-align: middle;
.@{table-prefix-cls}-column-sorter-inner {
height: 1em;
margin-top: 0.35em;
margin-left: 0.57142857em;
color: @table-header-icon-color;
line-height: 1em;
text-align: center;
transition: all 0.3s;
&-up,
&-down {
.@{table-prefix-cls}-column-sorter-up,
.@{table-prefix-cls}-column-sorter-down {
.iconfont-size-under-12px(11px);
display: block;
height: 4px;
line-height: 4px;
height: 1em;
line-height: 1em;
transition: all 0.3s;
&.on {
color: @primary-color;
}
}
&-down {
margin-top: 4px;
&-full {
margin-top: -0.15em;
.@{table-prefix-cls}-column-sorter-up,
.@{table-prefix-cls}-column-sorter-down {
height: 0.5em;
line-height: 0.5em;
}
.@{table-prefix-cls}-column-sorter-down {
margin-top: 0.125em;
}
}
}
}
@ -110,7 +123,7 @@
background: @table-header-filter-active-bg;
}
}
// Very complicated styles logic but neccessary
// Very complicated styles logic but necessary
&:hover {
.@{iconfont-css-prefix}-filter,
.@{table-prefix-cls}-filter-icon {
@ -154,6 +167,13 @@
}
.@{table-prefix-cls}-column-sorters {
display: table;
> .@{table-prefix-cls}-column-title {
display: table-cell;
vertical-align: middle;
}
> *:not(.@{table-prefix-cls}-column-sorter) {
position: relative;
}
@ -172,10 +192,6 @@
}
}
&.@{table-prefix-cls}-column-has-filters .@{table-prefix-cls}-column-sorter {
right: 28px + 6px;
}
&.@{table-prefix-cls}-column-has-sorters {
user-select: none;
}