From 98dc8b6ec9ada93b81b9ae22219e3cddfc244c9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rem=C3=A9nyi=20Gergely?= <remeger@sch.bme.hu>
Date: Sat, 3 Jul 2021 18:35:50 +0200
Subject: [PATCH] KST-23: add nicer history order toggle button

---
 .../core/service-detail/service-detail.component.css   |  4 ++++
 .../core/service-detail/service-detail.component.html  | 10 +++++-----
 .../core/service-detail/service-detail.component.ts    | 10 +++++++++-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/app/core/service-detail/service-detail.component.css b/src/app/core/service-detail/service-detail.component.css
index bf35caa..f294588 100644
--- a/src/app/core/service-detail/service-detail.component.css
+++ b/src/app/core/service-detail/service-detail.component.css
@@ -12,4 +12,8 @@
 
 .trash-icon:hover {
     color: hsl(0, 100%, 40%);
+}
+
+.ordering-arrow {
+    color: gray;
 }
\ No newline at end of file
diff --git a/src/app/core/service-detail/service-detail.component.html b/src/app/core/service-detail/service-detail.component.html
index 72c4b0a..74a7a59 100644
--- a/src/app/core/service-detail/service-detail.component.html
+++ b/src/app/core/service-detail/service-detail.component.html
@@ -82,13 +82,13 @@
         Története
       </h5>
       <div>
-        <button class='btn mt-auto' *ngIf='currentHistoryOrderState === historyOrderState.Descending && service.history.length >=2'
-          (click)='toggleHistoryOrder(historyOrderState.Ascending)'>
-          ↑
+        <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Descending && service.history.length >=2'
+                (click)='toggleHistoryOrder(historyOrderState.Ascending)'>
+          <fa-icon [icon]='faArrowUp' class="ordering-arrow"></fa-icon>
         </button>
         <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Ascending && service.history.length >= 2'
-          (click)='toggleHistoryOrder(historyOrderState.Descending)'>
-          ↓
+                (click)='toggleHistoryOrder(historyOrderState.Descending)'>
+          <fa-icon [icon]='faArrowDown' class="ordering-arrow"></fa-icon>
         </button>
         <button class='btn btn-link' *ngIf='isLoggedIn'
                 (click)='updateState(serviceDetailComponentState.CREATE_HISTORY)'>
diff --git a/src/app/core/service-detail/service-detail.component.ts b/src/app/core/service-detail/service-detail.component.ts
index 14c9ad6..1ad84bb 100644
--- a/src/app/core/service-detail/service-detail.component.ts
+++ b/src/app/core/service-detail/service-detail.component.ts
@@ -5,7 +5,7 @@ import { faCheckCircle,
          faTrashAlt,
          faPlusSquare
         } from '@fortawesome/free-regular-svg-icons';
-import { faCaretLeft } from '@fortawesome/free-solid-svg-icons';
+import { faCaretLeft, faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Service } from '../../models/service.model';
 import { ServicesService } from '../../services/services.service';
@@ -68,6 +68,14 @@ export class ServiceDetailComponent implements OnInit {
    * ADD icon
    */
   faPlusSquare = faPlusSquare;
+  /**
+   * ARROW UP icon
+   */
+  faArrowUp = faArrowUp;
+  /**
+   * ARROW DOWN icon
+   */
+  faArrowDown = faArrowDown;
   /**
    * Current service that is displayed
    */
-- 
GitLab