From 3cd383d167943356da99668dba69bc743e56df45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 25 Nov 2020 16:49:04 +0200
Subject: [PATCH] Sorting

---
 .../file-actions/file-actions.component.html  |  2 +-
 .../table-col-name.component.html             |  8 ++---
 .../table-col-name.component.scss             | 26 ++++++++++++---
 .../table-col-name.component.ts               |  6 ----
 .../src/assets/icons/general/sort-asc.svg     | 30 +++++------------
 .../src/assets/icons/general/sort-desc.svg    | 33 +++++--------------
 6 files changed, 44 insertions(+), 61 deletions(-)

diff --git a/apps/red-ui/src/app/common/file-actions/file-actions.component.html b/apps/red-ui/src/app/common/file-actions/file-actions.component.html
index 2e7c7a797..1cca30fb9 100644
--- a/apps/red-ui/src/app/common/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.html
@@ -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>
diff --git a/apps/red-ui/src/app/components/table-col-name/table-col-name.component.html b/apps/red-ui/src/app/components/table-col-name/table-col-name.component.html
index b4807f83a..4c9ece356 100644
--- a/apps/red-ui/src/app/components/table-col-name/table-col-name.component.html
+++ b/apps/red-ui/src/app/components/table-col-name/table-col-name.component.html
@@ -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>
diff --git a/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss b/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss
index 24380c470..9d530967d 100644
--- a/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss
+++ b/apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss
@@ -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;
+    }
 }
diff --git a/apps/red-ui/src/app/components/table-col-name/table-col-name.component.ts b/apps/red-ui/src/app/components/table-col-name/table-col-name.component.ts
index 915491e58..52e8a9b52 100644
--- a/apps/red-ui/src/app/components/table-col-name/table-col-name.component.ts
+++ b/apps/red-ui/src/app/components/table-col-name/table-col-name.component.ts
@@ -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 };
-    }
 }
diff --git a/apps/red-ui/src/assets/icons/general/sort-asc.svg b/apps/red-ui/src/assets/icons/general/sort-asc.svg
index 9f6c1017a..e4f16d061 100644
--- a/apps/red-ui/src/assets/icons/general/sort-asc.svg
+++ b/apps/red-ui/src/assets/icons/general/sort-asc.svg
@@ -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>
diff --git a/apps/red-ui/src/assets/icons/general/sort-desc.svg b/apps/red-ui/src/assets/icons/general/sort-desc.svg
index c85082534..979017696 100644
--- a/apps/red-ui/src/assets/icons/general/sort-desc.svg
+++ b/apps/red-ui/src/assets/icons/general/sort-desc.svg
@@ -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>