Restyle sort icons of table headers
This commit is contained in:
parent
547c37cb79
commit
bc2e4b0ca7
5 changed files with 21 additions and 22 deletions
|
|
@ -209,13 +209,6 @@ body {
|
|||
&[type='button'] {
|
||||
@apply cursor-pointer select-none;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
bottom: 0.1em;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
app/components/icons/arrow-down-thin.js
Normal file
1
app/components/icons/arrow-down-thin.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { ArrowDownThin as default } from 'ember-mdi';
|
||||
1
app/components/icons/arrow-up-thin.js
Normal file
1
app/components/icons/arrow-up-thin.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { ArrowUpThin as default } from 'ember-mdi';
|
||||
1
app/components/icons/sort.js
Normal file
1
app/components/icons/sort.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { Sort as default } from 'ember-mdi';
|
||||
|
|
@ -8,22 +8,25 @@
|
|||
{{on 'click' this.handleSort}}
|
||||
{{! DOTO: align is depricated, use styles align instead }}
|
||||
>
|
||||
{{#if @sortable}}
|
||||
{{#if this.isAscSorted}}
|
||||
<Icons::ArrowDown />
|
||||
{{else if this.isDescSorted}}
|
||||
<Icons::ArrowUp />
|
||||
{{else}}
|
||||
<Icons::ArrowUpDown />
|
||||
<span class='inline-flex items-center'>
|
||||
{{#if (has-block 'name')}}
|
||||
{{yield to='name'}}
|
||||
{{else if @name}}
|
||||
{{@name}}
|
||||
{{else if @prop}}
|
||||
{{capitalize @prop}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{#if (has-block 'name')}}
|
||||
{{yield to='name'}}
|
||||
{{else if @name}}
|
||||
{{@name}}
|
||||
{{else if @prop}}
|
||||
{{capitalize @prop}}
|
||||
{{/if}}
|
||||
|
||||
{{#if @sortable}}
|
||||
{{#if this.isAscSorted}}
|
||||
<Icons::ArrowDownThin class="fill-base-3 ml-0.5" @size={{14}} />
|
||||
{{else if this.isDescSorted}}
|
||||
<Icons::ArrowUpThin class="fill-base-3 ml-0.5" @size={{14}} />
|
||||
{{else}}
|
||||
<Icons::ArrowUpDown class="fill-base-3 ml-0.5" @size={{14}} />
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</span>
|
||||
</th>
|
||||
{{else if this.isBody}}
|
||||
<td align={{@align}} ...attributes>
|
||||
|
|
|
|||
Loading…
Reference in a new issue