From 470c89e0fd3f3525d296f83bf320e16a2e4630b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 15 Dec 2020 18:46:15 +0200
Subject: [PATCH] UI updates

---
 .../add-edit-dictionary-dialog.component.html | 32 +++++++-----
 .../add-edit-dictionary-dialog.component.scss |  6 ++-
 .../dictionary-overview-screen.component.html |  2 +-
 .../file-preview-screen.component.html        | 10 ++--
 .../file-preview-screen.component.scss        |  2 +-
 .../upload-status-overlay.component.html      |  4 +-
 apps/red-ui/src/assets/i18n/en.json           |  1 +
 .../src/assets/icons/general/arrow-down.svg   |  2 +-
 .../src/assets/icons/general/arrow-up.svg     | 49 +++++++++++++++++--
 apps/red-ui/src/assets/styles/red-input.scss  |  8 +++
 10 files changed, 88 insertions(+), 28 deletions(-)

diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
index e46f46e53..72b0407d3 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
@@ -5,15 +5,28 @@
         </div>
 
         <div class="dialog-content">
-            <div class="first-row">
-                <div class="red-input-group required">
+            <ng-container *ngIf="!!dictionary">
+                <div class="red-input-group mb-14">
                     <label translate="add-edit-dictionary.form.name"></label>
+                    {{ dictionary.label }}
+                </div>
+            </ng-container>
+
+            <div class="first-row">
+                <div class="red-input-group required" *ngIf="!dictionary">
+                    <label translate="add-edit-dictionary.form.name"></label>
+                    <input formControlName="type" name="type" type="text" placeholder="{{ 'add-edit-dictionary.form.name-placeholder' | translate }}" />
+                    <span class="hint" translate="add-edit-dictionary.form.name-hint"></span>
+                </div>
+
+                <div class="red-input-group required">
+                    <label translate="add-edit-dictionary.form.rank"></label>
                     <input
-                        formControlName="type"
-                        name="type"
-                        type="text"
-                        [attr.disabled]="!!dictionary || null"
-                        placeholder="{{ 'add-edit-dictionary.form.name-placeholder' | translate }}"
+                        formControlName="rank"
+                        class="w-75"
+                        name="rank"
+                        type="number"
+                        placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}"
                     />
                 </div>
 
@@ -41,11 +54,6 @@
                 </div>
             </div>
 
-            <div class="red-input-group required">
-                <label translate="add-edit-dictionary.form.rank"></label>
-                <input formControlName="rank" name="rank" type="number" placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}" />
-            </div>
-
             <div class="red-input-group slider-row">
                 <mat-button-toggle-group name="hint" formControlName="hint" appearance="legacy">
                     <mat-button-toggle [value]="false"> {{ 'add-edit-dictionary.form.redaction' | translate }}</mat-button-toggle>
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
index 9bec5b50c..176922a86 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
@@ -4,7 +4,7 @@
     display: flex;
 
     > *:not(last-child) {
-        margin-right: 24px;
+        margin-right: 16px;
     }
 
     .red-input-group {
@@ -23,3 +23,7 @@
     transition: background-color 0.25s ease;
     color: $white;
 }
+
+.mb-14 {
+    margin-bottom: 14px;
+}
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
index a97861454..7f9b4b906 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
@@ -70,7 +70,7 @@
                         <div class="search-match-text">
                             {{ currentMatch + '/' + searchPositions.length }}
                         </div>
-                        <mat-icon svgIcon="red:arrow-down" class="transform-180 pointer" (click)="previousSearchMatch()"></mat-icon>
+                        <mat-icon svgIcon="red:arrow-up" class="pointer" (click)="previousSearchMatch()"></mat-icon>
                         <mat-icon svgIcon="red:arrow-down" class="pointer" (click)="nextSearchMatch()"></mat-icon>
                         <mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.focus()" class="pointer"></mat-icon>
                     </div>
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index dde378d16..5a7884bcd 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -199,13 +199,13 @@
                                         <strong><span translate="content"></span>: </strong>{{ annotation.content }}
                                     </div>
                                 </div>
+                                <redaction-annotation-actions
+                                    (annotationsChanged)="annotationsChangedByReviewAction(true, annotation)"
+                                    [annotation]="annotation"
+                                    [canPerformAnnotationActions]="canPerformAnnotationActions"
+                                ></redaction-annotation-actions>
                             </div>
                             <redaction-comments [annotation]="annotation"></redaction-comments>
-                            <redaction-annotation-actions
-                                (annotationsChanged)="annotationsChangedByReviewAction(true, annotation)"
-                                [annotation]="annotation"
-                                [canPerformAnnotationActions]="canPerformAnnotationActions"
-                            ></redaction-annotation-actions>
                         </div>
                     </div>
                 </div>
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index 56cc1bf3e..ed43c7d7a 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@@ -94,13 +94,13 @@
                 font-size: 11px;
                 line-height: 14px;
                 cursor: pointer;
-                position: relative;
                 display: flex;
                 flex-direction: column;
                 border-left: 4px solid transparent;
 
                 .details {
                     display: flex;
+                    position: relative;
                 }
 
                 redaction-type-annotation-icon {
diff --git a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
index 22ece32ff..3ad1e5cb8 100644
--- a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
+++ b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
@@ -3,8 +3,8 @@
         <div class="title">
             {{ 'upload-status.dialog.title' | translate: { p1: uploadService.files.length } }}
         </div>
-        <div *ngIf="!collapsed" class="collapse-icon transform-180">
-            <mat-icon svgIcon="red:arrow-up"></mat-icon>
+        <div *ngIf="!collapsed" class="collapse-icon">
+            <mat-icon svgIcon="red:arrow-down"></mat-icon>
         </div>
         <div *ngIf="collapsed" class="collapse-icon">
             <mat-icon svgIcon="red:arrow-up"></mat-icon>
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 818b514c6..b280f3efa 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -528,6 +528,7 @@
         "form": {
             "name": "Dictionary Name",
             "name-placeholder": "Enter Name",
+            "name-hint": "Cannot be edited after saving.",
             "rank": "Rank",
             "rank-placeholder": "1000",
             "color": "Hex Color",
diff --git a/apps/red-ui/src/assets/icons/general/arrow-down.svg b/apps/red-ui/src/assets/icons/general/arrow-down.svg
index a5dcfcbd0..c18754710 100644
--- a/apps/red-ui/src/assets/icons/general/arrow-down.svg
+++ b/apps/red-ui/src/assets/icons/general/arrow-down.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>9A0E7FCD-AD02-40D9-BEF9-48F61351C288</title>
+    <title>arrow-down</title>
     <g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Styleguide-Buttons" transform="translate(-469.000000, -757.000000)">
             <rect x="0" y="0" width="904" height="906"></rect>
diff --git a/apps/red-ui/src/assets/icons/general/arrow-up.svg b/apps/red-ui/src/assets/icons/general/arrow-up.svg
index 11a03f1f9..8d47a4299 100644
--- a/apps/red-ui/src/assets/icons/general/arrow-up.svg
+++ b/apps/red-ui/src/assets/icons/general/arrow-up.svg
@@ -1,7 +1,46 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>sort-up</title>
-    <g id="sort-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <polygon id="Fill-1" fill="currentColor" transform="translate(3.000000, 3.000000) rotate(-180.000000) translate(-3.000000, -3.000000) " points="3 5 6 1 -1.33216355e-14 1"></polygon>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="14px"
+   height="14px"
+   viewBox="0 0 14 14"
+   version="1.1"
+   id="svg101">
+  <defs
+     id="defs105" />
+  <title
+     id="title92">arrow-up</title>
+  <g
+     id="Styleguide"
+     stroke="none"
+     stroke-width="1"
+     fill="none"
+     fill-rule="evenodd">
+    <g
+       id="Styleguide-Buttons"
+       transform="translate(-469.000000, -757.000000)">
+      <rect
+         x="0"
+         y="0"
+         width="904"
+         height="906"
+         id="rect94" />
+      <rect
+         id="Rectangle"
+         x="359"
+         y="747"
+         width="134"
+         height="34"
+         rx="17" />
+      <g
+         id="right"
+         transform="rotate(180,241.5,385.5)"
+         fill="currentColor">
+        <polygon
+           id="Fill-1"
+           points="4,5 7,9 10,5 " />
+      </g>
     </g>
+  </g>
 </svg>
diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss
index 46873f1a7..0d14cf579 100644
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ b/apps/red-ui/src/assets/styles/red-input.scss
@@ -6,6 +6,14 @@
     flex-direction: column;
     margin-top: 24px;
     position: relative;
+    height: fit-content;
+
+    .hint {
+        margin-top: 5px;
+        font-size: 11px;
+        line-height: 14px;
+        opacity: 0.7;
+    }
 
     .input-icon {
         position: absolute;