Sorting
This commit is contained in:
Adina Țeudan
parent
c4ba84432a
commit
3cd383d167
@ -46,7 +46,7 @@
|
||||
*ngIf="permissionsService.canAssignReviewer(fileStatus)"
|
||||
[tooltipPosition]="tooltipPosition"
|
||||
[tooltip]="permissionsService.isManagerAndOwner() ? 'project-overview.assign' : 'project-overview.assign-me'"
|
||||
[icon]="permissionsService.isManagerAndOwner() ? 'red:assign' : 'red-assign-me'"
|
||||
[icon]="permissionsService.isManagerAndOwner() ? 'red:assign' : 'red:assign-me'"
|
||||
[type]="buttonType"
|
||||
>
|
||||
</redaction-circle-button>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div (click)="withSort && toggleSort.emit(column)" [class.pointer]="withSort" [ngClass]="class">
|
||||
<span [translate]="label" class="small-label"></span>
|
||||
<div class="sort-arrows-container" *ngIf="withSort">
|
||||
<mat-icon [color]="arrowColor.up" svgIcon="red:arrow-up"></mat-icon>
|
||||
<mat-icon [color]="arrowColor.down" svgIcon="red:arrow-down"></mat-icon>
|
||||
<span [translate]="label" class="all-caps-label"></span>
|
||||
<div class="sort-arrows-container" *ngIf="withSort" [class.force-display]="activeSortingOption.column === column">
|
||||
<mat-icon *ngIf="activeSortingOption?.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
|
||||
<mat-icon *ngIf="activeSortingOption?.order === 'desc'" svgIcon="red:sort-desc"></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,21 +3,37 @@
|
||||
:host {
|
||||
display: flex;
|
||||
border-bottom: 1px solid $separator;
|
||||
height: 30px;
|
||||
|
||||
> div {
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
line-height: 11px;
|
||||
gap: 8px;
|
||||
padding: 8px 24px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.flex-end {
|
||||
min-width: 58px;
|
||||
}
|
||||
|
||||
.sort-arrows-container {
|
||||
display: none;
|
||||
color: $primary;
|
||||
mat-icon {
|
||||
display: block;
|
||||
height: 14px;
|
||||
width: 6px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.sort-arrows-container {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-arrows-container.force-display {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,10 +17,4 @@ export class TableColNameComponent implements OnInit {
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
public get arrowColor(): { up: string; down: string } {
|
||||
const up = this.activeSortingOption.order === 'desc' && this.activeSortingOption.column === this.column ? 'primary' : 'accent';
|
||||
const down = this.activeSortingOption.order === 'asc' && this.activeSortingOption.column === this.column ? 'primary' : 'accent';
|
||||
return { up, down };
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,10 @@
|
||||
<svg height="612px" id="Capa_1" style="enable-background:new 0 0 612 612;" version="1.1"
|
||||
viewBox="0 0 612 612"
|
||||
width="612px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
|
||||
<g>
|
||||
<g id="_x39__27_">
|
||||
<g>
|
||||
<path d="M590.905,559.173H295.58c-11.644,0-21.095,9.408-21.095,21.073c0,11.666,9.451,21.116,21.095,21.116h295.326
|
||||
c11.645,0,21.095-9.45,21.095-21.116C612,568.581,602.57,559.173,590.905,559.173z M331.166,215.266
|
||||
c8.27-8.312,8.27-21.77,0-30.061L184.727,16.68c-4.409-4.43-10.273-6.308-16.032-6.012c-5.78-0.296-11.623,1.582-16.032,6.012
|
||||
L6.202,185.185c-8.269,8.312-8.269,21.77,0,30.06c8.27,8.29,21.686,8.312,29.955,0L147.938,86.63v514.712h42.189V87.41
|
||||
l111.105,127.855C309.48,223.556,322.896,223.556,331.166,215.266z M337.769,95.089h253.137c11.645,0,21.095-10.02,21.095-21.686
|
||||
c0-11.665-9.45-21.115-21.095-21.115H337.769c-11.645,0-21.095,9.45-21.095,21.115C316.674,85.069,326.124,95.089,337.769,95.089
|
||||
z M590.905,432.415H295.58c-11.644,0-21.095,9.45-21.095,21.115c0,11.666,9.451,21.116,21.095,21.116h295.326
|
||||
c11.645,0,21.095-9.45,21.095-21.116C612,441.865,602.57,432.415,590.905,432.415z M590.905,305.698H295.58
|
||||
c-11.644,0-21.095,9.451-21.095,21.116c0,11.666,9.451,21.116,21.095,21.116h295.326c11.645,0,21.095-9.45,21.095-21.116
|
||||
C612,315.149,602.57,305.698,590.905,305.698z M590.905,178.982l-168.758,0.464c-11.645,0-21.095,8.986-21.095,20.652
|
||||
c0,11.665,9.45,21.537,21.095,21.537l168.758-0.422c11.645,0,21.095-9.45,21.095-21.115
|
||||
C612,188.433,602.57,178.982,590.905,178.982z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="6px" height="14px" viewBox="0 0 6 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>sort-asc</title>
|
||||
<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Artboard" transform="translate(-1212.000000, -325.000000)" >
|
||||
<polygon id="Fill-1" fill="currentColor" points="1215 338 1218 334 1212 334"></polygon>
|
||||
<polygon id="Fill-1" fill="#28324180" transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) " points="1215 330 1218 326 1212 326"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 699 B |
@ -1,25 +1,10 @@
|
||||
<svg height="612.021px" id="Capa_1" style="enable-background:new 0 0 612.021 612.021;" version="1.1"
|
||||
viewBox="0 0 612.021 612.021"
|
||||
width="612.021px" x="0px" xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
y="0px">
|
||||
<g>
|
||||
<g id="_x38__37_">
|
||||
<g>
|
||||
<path d="M590.927,517.491H337.79c-11.645,0-21.095,9.45-21.095,21.116c0,11.665,9.45,21.115,21.095,21.115l253.137-0.611
|
||||
c11.645,0,21.095-8.839,21.095-20.504C612.021,526.941,602.592,517.491,590.927,517.491z M295.601,52.88l295.326-0.042
|
||||
c11.645,0,21.095-9.408,21.095-21.074s-9.45-21.116-21.095-21.116H295.601c-11.645,0-21.095,9.45-21.095,21.116
|
||||
S283.956,52.88,295.601,52.88z M331.188,396.745c-8.27-8.312-21.686-8.312-29.955,0L190.127,524.6V10.648h-42.189v514.711
|
||||
L36.156,396.745c-8.269-8.312-21.686-8.312-29.954,0c-8.27,8.312-8.27,21.77,0,30.06l146.439,168.526
|
||||
c4.409,4.43,10.273,6.307,16.032,6.012c5.779,0.295,11.623-1.582,16.031-6.012l146.44-168.526
|
||||
C339.457,418.515,339.457,405.057,331.188,396.745z M590.927,137.364H295.601c-11.645,0-21.095,9.451-21.095,21.116
|
||||
c0,11.666,9.45,20.926,21.095,20.926h295.326c11.645,0,21.095-9.261,21.095-20.926
|
||||
C612.021,146.815,602.592,137.364,590.927,137.364z M590.927,264.059H295.601c-11.645,0-21.095,9.451-21.095,21.116
|
||||
c0,11.666,9.45,20.778,21.095,20.778l295.326,0.338c11.645,0,21.095-9.451,21.095-21.116
|
||||
C612.021,273.531,602.592,264.059,590.927,264.059z M590.927,390.775H422.169c-11.645,0-21.095,9.45-21.095,21.115
|
||||
c0,11.666,9.45,20.652,21.095,20.652h168.758c11.645,0,21.095-8.986,21.095-20.652
|
||||
C612.021,400.226,602.592,390.775,590.927,390.775z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="6px" height="14px" viewBox="0 0 6 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>sort-desc</title>
|
||||
<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Artboard" transform="translate(-1212.000000, -325.000000)" >
|
||||
<polygon id="Fill-1" fill="#28324180" points="1215 338 1218 334 1212 334"></polygon>
|
||||
<polygon id="Fill-1" fill="currentColor" transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) " points="1215 330 1218 326 1212 326"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 700 B |
Loading…
x
Reference in New Issue
Block a user