From e0c26c14bad67d8d4f666835914faf7334b38323 Mon Sep 17 00:00:00 2001
From: Timo <timo@devplant.ro>
Date: Wed, 2 Dec 2020 16:26:19 +0200
Subject: [PATCH] reworked editor - new color for to short row

---
 .../dictionary-overview-screen.component.html |  5 +++--
 .../dictionary-overview-screen.component.ts   | 22 +++++++++++++++----
 .../upload-status-overlay.component.html      |  4 ++--
 .../upload-status-overlay.component.scss      |  5 +++++
 apps/red-ui/src/assets/styles/red-editor.scss | 10 +++++++--
 5 files changed, 36 insertions(+), 10 deletions(-)

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 997b8debc..2f0f2840d 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
@@ -43,7 +43,8 @@
                 <input
                     [class.with-matches]="searchText.length > 0"
                     type="text"
-                    (keyup)="searchChanged(inputElement.value)"
+                    [(ngModel)]="searchText"
+                    (keyup)="searchChanged(searchText)"
                     #inputElement
                     placeholder="{{ 'dictionary-overview.search' | translate }}"
                 />
@@ -58,7 +59,7 @@
                         </div>
                         <mat-icon svgIcon="red:arrow-down" class="transform-180 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.value = ''; inputElement.focus()" class="pointer"></mat-icon>
+                        <mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.focus()" class="pointer"></mat-icon>
                     </div>
                 </div>
             </div>
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
index d6f3ad809..b13bc4952 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
@@ -107,11 +107,12 @@ export class DictionaryOverviewScreenComponent {
     }
 
     private _getSearchPositions() {
+        const lowerCaseSearchText = this.searchText.toLowerCase();
         return this.currentDictionaryEntries
             .map((val, index) => {
-                const columnIndex = val.toLowerCase().indexOf(this.searchText);
+                const columnIndex = val.toLowerCase().indexOf(lowerCaseSearchText);
                 if (columnIndex >= 0) {
-                    return { row: index, column: columnIndex, length: this.searchText.length };
+                    return { row: index, column: columnIndex, length: lowerCaseSearchText.length };
                 }
             })
             .filter((entry) => !!entry);
@@ -135,7 +136,15 @@ export class DictionaryOverviewScreenComponent {
 
         const Range = ace.acequire('ace/range').Range;
         for (const i of this.changedLines) {
-            this.activeEditMarkers.push(this.editorComponent.getEditor().getSession().addMarker(new Range(i, 0, i, 1), 'changed-row-marker', 'fullLine'));
+            let entry = this.currentDictionaryEntries[i];
+            if (entry?.trim().length > 0) {
+                // only mark non-empty lines
+                this.activeEditMarkers.push(this.editorComponent.getEditor().getSession().addMarker(new Range(i, 0, i, 1), 'changed-row-marker', 'fullLine'));
+            }
+            if (entry?.trim().length > 0 && entry.trim().length < 3) {
+                // show lines that are to short
+                this.activeEditMarkers.push(this.editorComponent.getEditor().getSession().addMarker(new Range(i, 0, i, 1), 'to-short-marker', 'fullLine'));
+            }
         }
     }
 
@@ -144,7 +153,7 @@ export class DictionaryOverviewScreenComponent {
     }
 
     async saveEntries() {
-        const entriesToAdd = [];
+        let entriesToAdd = [];
         const entriesToDelete = [];
         this.currentDictionaryEntries.forEach((currentEntry) => {
             if (this.initialDictionaryEntries.indexOf(currentEntry) < 0) {
@@ -156,6 +165,10 @@ export class DictionaryOverviewScreenComponent {
                 entriesToDelete.push(initialEntry);
             }
         });
+
+        // remove empty lines
+        entriesToAdd = entriesToAdd.filter((e) => e && e.trim().length > 0);
+
         if (entriesToAdd.length > 0) {
             await this._dictionaryControllerService.addEntry(entriesToAdd, this.dictionary.type).toPromise();
         }
@@ -171,6 +184,7 @@ export class DictionaryOverviewScreenComponent {
         this.dictionaryEntriesAsText = this.initialDictionaryEntries.join('\n');
         this.editorComponent.getEditor().setValue(this.dictionaryEntriesAsText);
         this.editorComponent.getEditor().clearSelection();
+        this.searchChanged('');
     }
 
     nextSearchMatch() {
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 3ad1e5cb8..22ece32ff 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">
-            <mat-icon svgIcon="red:arrow-down"></mat-icon>
+        <div *ngIf="!collapsed" class="collapse-icon transform-180">
+            <mat-icon svgIcon="red:arrow-up"></mat-icon>
         </div>
         <div *ngIf="collapsed" class="collapse-icon">
             <mat-icon svgIcon="red:arrow-up"></mat-icon>
diff --git a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.scss b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.scss
index a9979ae3d..164c076b9 100644
--- a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.scss
+++ b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.scss
@@ -32,6 +32,11 @@ section {
 
 .collapse-icon {
     padding-left: 8px;
+    padding-right: 8px;
+
+    &.transform-180 {
+        transform: rotate(180deg);
+    }
 
     mat-icon {
         width: 10px;
diff --git a/apps/red-ui/src/assets/styles/red-editor.scss b/apps/red-ui/src/assets/styles/red-editor.scss
index 6045a4d1f..78370be7c 100644
--- a/apps/red-ui/src/assets/styles/red-editor.scss
+++ b/apps/red-ui/src/assets/styles/red-editor.scss
@@ -3,12 +3,18 @@
 
 .changed-row-marker {
     position: absolute;
-    background: rgba($primary, 0.2);
+    background: rgba($orange-1, 0.4);
     z-index: 20;
 }
 
+.to-short-marker {
+    position: absolute;
+    background: rgba($primary, 0.5);
+    z-index: 30;
+}
+
 .search-marker {
     position: absolute;
     background: rgba($yellow-1, 0.3);
-    z-index: 20;
+    z-index: 40;
 }