github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Table: sort arrow nostalgia

pull/8194/head
Leopoldthecoder 2017-11-12 20:14:26 +08:00 committed by 杨奕
parent 8fa549894b
commit 9611079d4d
2 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/table/src/table-header.js
View File

@ -119,12 +119,10 @@ export default {
{ {
column.sortable column.sortable
? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }> ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
<span class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }> <i class="sort-caret ascending el-icon-caret-top" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
<i class="el-icon-sort-up"></i> </i>
</span> <i class="sort-caret descending el-icon-caret-bottom" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
<span class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }> </i>
<i class="el-icon-sort-down"></i>
</span>
</span> </span>
: '' : ''
} }

23
packages/theme-chalk/src/table.scss
View File

@ -426,20 +426,29 @@
} }
.caret-wrapper { .caret-wrapper {
position: relative; position: absolute;
display: inline-flex; display: inline-block;
align-items: center; height: 100%;
height: 13px; vertical-align: middle;
width: 24px;
cursor: pointer; cursor: pointer;
overflow: initial; overflow: initial;
} }
.sort-caret { .sort-caret {
color: $--icon-color-base; color: $--color-text-placeholder;
width: 14px; width: 14px;
overflow: hidden; overflow: hidden;
font-size: 13px; font-size: 15px;
position: absolute;
left: 4px;
&.ascending {
top: 1px;
}
&.descending {
bottom: 1px;
}
} }
.ascending .sort-caret.ascending { .ascending .sort-caret.ascending {