From 8a85b1b07deaccc8dd27ed6e4aa4714390ede22f Mon Sep 17 00:00:00 2001
From: Timo <timo@devplant.ro>
Date: Wed, 2 Dec 2020 11:01:36 +0200
Subject: [PATCH] Dictionary Edit Progress

---
 apps/red-ui/src/app/icons/icons.module.ts     |  1 +
 .../dictionary-listing-screen.component.html  |  4 ++
 .../dictionary-overview-screen.component.html | 28 +++++++++++++-
 .../dictionary-overview-screen.component.scss | 37 ++++++++++++++++---
 apps/red-ui/src/assets/i18n/en.json           |  1 +
 .../assets/icons/general/case-sensitive.svg   | 10 +++++
 .../src/assets/styles/red-text-styles.scss    |  6 +++
 7 files changed, 81 insertions(+), 6 deletions(-)
 create mode 100644 apps/red-ui/src/assets/icons/general/case-sensitive.svg

diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts
index 27927f944..f8ef97199 100644
--- a/apps/red-ui/src/app/icons/icons.module.ts
+++ b/apps/red-ui/src/app/icons/icons.module.ts
@@ -24,6 +24,7 @@ export class IconsModule {
             'collapse',
             'color-picker',
             'comment',
+            'case-sensitive',
             'comment-fill',
             'document',
             'double-chevron-right',
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
index 5db4452ed..84730b610 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
@@ -86,6 +86,10 @@
                                     <mat-icon svgIcon="red:entries"></mat-icon>
                                     {{ dict.entries?.length }}
                                 </div>
+                                <div *ngIf="!dict.caseInsensitive">
+                                    <mat-icon svgIcon="red:case-sensitive"></mat-icon>
+                                    {{ 'dictionary-listing.case-sensitive' | translate }}
+                                </div>
                             </div>
                         </div>
                     </div>
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 dd59da5ac..62c22a0b4 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
@@ -69,6 +69,32 @@
             </div>
         </div>
 
-        <div class="right-container"></div>
+        <div class="right-container">
+            <div class="dictionary-header">
+                <div class="color-box" [style.backgroundColor]="dictionary.hexColor"></div>
+                <div class="heading-xl">
+                    {{ dictionary.type }}
+                </div>
+            </div>
+            <div class="small-label stats-subtitle">
+                <div>
+                    <mat-icon svgIcon="red:entries"></mat-icon>
+                    {{ initialDictionaryEntries?.length }}
+                </div>
+            </div>
+            <div class="small-label stats-subtitle">
+                <div *ngIf="!dictionary.caseInsensitive">
+                    <mat-icon svgIcon="red:case-sensitive"></mat-icon>
+                    {{ 'dictionary-listing.case-sensitive' | translate }}
+                </div>
+            </div>
+
+            <div class="indicator">
+                <redaction-dictionary-annotation-icon [dictionaryKey]="dictionary.hint ? 'hint' : 'redaction'"></redaction-dictionary-annotation-icon>
+                <div class="large-label">
+                    {{ (dictionary.hint ? 'hint' : 'redaction') | translate }}
+                </div>
+            </div>
+        </div>
     </div>
 </section>
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss
index 03d314122..666e26879 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss
@@ -19,11 +19,9 @@
 }
 
 .right-container {
-    display: flex;
     width: 353px;
     min-width: 353px;
-    justify-content: center;
-    padding: 50px 0;
+    padding: 24px;
 }
 
 .changes-box {
@@ -33,10 +31,39 @@
     align-items: center;
     justify-content: space-between;
     bottom: 40px;
-    right: 40px;
+    right: 403px;
     border-radius: 8px;
     padding: 16px;
-    background-color: #ffffff;
+    background-color: $white;
     box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
     z-index: 5000;
 }
+
+ace-editor {
+    box-sizing: border-box;
+    border: 1px solid $grey-5;
+    border-radius: 8px;
+    background-color: $white;
+}
+
+.dictionary-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .color-box {
+        width: 16px;
+        height: 16px;
+        margin-right: 16px;
+    }
+}
+
+.indicator {
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+
+    redaction-dictionary-annotation-icon {
+        margin-right: 8px;
+    }
+}
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 61e87f510..df74e2b63 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -507,6 +507,7 @@
             "delete": "Delete Dictionary",
             "edit": "Edit Dictionary"
         },
+        "case-sensitive": "Case Sensitive",
         "add-new": "New Dictionary",
         "stats": {
             "charts": {
diff --git a/apps/red-ui/src/assets/icons/general/case-sensitive.svg b/apps/red-ui/src/assets/icons/general/case-sensitive.svg
new file mode 100644
index 000000000..641e34f8c
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/case-sensitive.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Case Sensitive</title>
+    <g id="Case-Sensitive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-3" transform="translate(0.000000, 18.000000)" fill="currentColor">
+            <polygon id="Fill-1" points="100 8.36744942 79.9984 8.36744942 79.9984 64 69.4984 64 69.4984 8.36744942 55 8.36744942 55 0 100 0"></polygon>
+            <polygon id="Fill-2" points="45 8.36744942 29.9999996 8.36744942 29.9999996 64 19.4999993 64 19.4999993 8.36744942 0 8.36744942 0 0 45 0"></polygon>
+        </g>
+    </g>
+</svg>
diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss
index deaae2a09..d9f318bec 100644
--- a/apps/red-ui/src/assets/styles/red-text-styles.scss
+++ b/apps/red-ui/src/assets/styles/red-text-styles.scss
@@ -58,6 +58,12 @@ a {
     line-height: 14px;
 }
 
+.large-label {
+    color: $grey-1;
+    font-size: 13px;
+    line-height: 16px;
+}
+
 .clamp-1 {
     @include line-clamp(1);
 }