|
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-sort-asc.svg' |
6 | | -import IconDesc from '@/assets/icon-sort-desc.svg' |
| 5 | +import SvgIcon from '@/components/SvgIcon' |
7 | 6 | export default { |
8 | 7 | name: 'ServerDatasource', |
9 | | - components: {Pagination}, |
| 8 | + components: {Pagination, SvgIcon}, |
10 | 9 | render (h) { |
11 | 10 | return ( |
12 | 11 | <div class="vue-server-datasource"> |
@@ -142,10 +141,16 @@ export default { |
142 | 141 | columnItems () { |
143 | 142 | let showArrows = (key) => { |
144 | 143 | 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"/> |
| 144 | + return (this.shouldShowUpArrow(key)) ? <span class="icon-asc"> |
| 145 | + <SvgIcon/> |
| 146 | + </span> |
| 147 | + : <span class="icon-desc"> |
| 148 | + <SvgIcon/> |
| 149 | + </span> |
147 | 150 | } else { |
148 | | - return <img src={IconDesc} width="15"/> |
| 151 | + return <span class="icon-desc"> |
| 152 | + <SvgIcon/> |
| 153 | + </span> |
149 | 154 | } |
150 | 155 | } |
151 | 156 | |
@@ -268,15 +273,27 @@ export default { |
268 | 273 | width: 100%; |
269 | 274 | height: 100%; |
270 | 275 | background: rgba(229, 229, 229, 0.5); |
271 | | - |
| 276 | + |
272 | 277 | .v-spinner { |
273 | | - position: absolute; |
| 278 | + position: absolute; |
274 | 279 | top: 50%; |
275 | 280 | left: 50%; |
276 | 281 | margin-left: -25px; |
277 | 282 | margin-top: -50px; |
278 | 283 | } |
279 | 284 | } |
| 285 | + .icon-asc, |
| 286 | + .icon-desc { |
| 287 | + svg { |
| 288 | + fill: #a3a3a3; |
| 289 | + width: 1em; |
| 290 | + } |
| 291 | + } |
| 292 | + .icon-asc { |
| 293 | + svg { |
| 294 | + transform: rotate(180deg); |
| 295 | + } |
| 296 | + } |
280 | 297 | } |
281 | 298 | |
282 | 299 | .pr1 { |
|
0 commit comments