|
2 | 2 | import DatasourceUtils from '@/utils/DatasourceUtils' |
3 | 3 | import Pagination from './Pagination' |
4 | 4 | import {EventBus} from '@/utils/EventBus' |
5 | | -import IconAsc from '@/assets/icon-asc.png' |
6 | | -import IconDesc from '@/assets/icon-desc.png' |
| 5 | +import IconAsc from '@/assets/icon-sort-asc.svg' |
| 6 | +import IconDesc from '@/assets/icon-sort-desc.svg' |
7 | 7 | export default { |
8 | 8 | name: 'ServerDatasource', |
9 | 9 | components: {Pagination}, |
@@ -141,13 +141,17 @@ export default { |
141 | 141 | }, |
142 | 142 | columnItems () { |
143 | 143 | let showArrows = (key) => { |
144 | | - return (this.shouldShowUpArrow(key)) ? <img src={IconDesc} width="15"/> |
145 | | - : <img src={IconAsc} width="15"/> |
| 144 | + if (this.columnSortSelected.key) { |
| 145 | + return (this.shouldShowUpArrow(key)) ? <img class="arrow-active" src={IconAsc} width="15"/> |
| 146 | + : <img class="arrow-active" src={IconDesc} width="15"/> |
| 147 | + } else { |
| 148 | + return <img src={IconDesc} width="15"/> |
| 149 | + } |
146 | 150 | } |
147 | 151 | |
148 | 152 | return this.columns.map((column, index) => { |
149 | 153 | if (column.order) { |
150 | | - return <th on-click={(e) => this.sortColumn(e, column.key)}> |
| 154 | + return <th class="vue-server-ordering"on-click={(e) => this.sortColumn(e, column.key)}> |
151 | 155 | {column.name} |
152 | 156 | <span class="vue-server-arrows">{showArrows(column.key)}</span> |
153 | 157 | </th> |
@@ -231,13 +235,26 @@ export default { |
231 | 235 | } |
232 | 236 | .vue-server-arrows { |
233 | 237 | position: absolute; |
234 | | - right: 0; |
| 238 | + right: 5px; |
235 | 239 | top: 6px; |
236 | 240 | } |
237 | 241 | table { |
238 | 242 | margin-bottom: 0; |
239 | 243 | th { |
240 | 244 | position: relative; |
| 245 | + |
| 246 | + &.vue-server-ordering { |
| 247 | + cursor: pointer; |
| 248 | + |
| 249 | + .vue-server-arrows { |
| 250 | + img { |
| 251 | + opacity: .3; |
| 252 | + &.arrow-active { |
| 253 | + opacity: 1; |
| 254 | + } |
| 255 | + } |
| 256 | + } |
| 257 | + } |
241 | 258 | } |
242 | 259 | } |
243 | 260 | .panel-footer { |
|
0 commit comments