From 57586eac9fac4b1fdf0212e9390d4e6751961aab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 9 Apr 2021 00:29:54 +0300
Subject: [PATCH] Small UI fixes

---
 .../base-screen/base-screen.component.html    | 123 +++++++++---------
 .../notifications.component.html              |   2 +-
 .../notifications.component.scss              |   1 +
 .../file-workload.component.html              |   6 +-
 .../file-preview-screen.component.scss        |   7 -
 .../circle-button.component.scss              |   1 +
 .../components/filter/filter.component.html   |   2 +-
 7 files changed, 63 insertions(+), 79 deletions(-)

diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
index f0b6e76c2..80627f016 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
@@ -1,18 +1,17 @@
-<div class='red-top-bar'>
-    <div class='top-bar-row'>
-        <div class='menu-placeholder' *ngIf='!permissionsService.isUser()'></div>
-        <div class='menu visible-lt-lg' *ngIf='permissionsService.isUser()'>
-            <button [matMenuTriggerFor]='menuNav' mat-flat-button>
-                <mat-icon svgIcon='red:menu'></mat-icon>
+<div class="red-top-bar">
+    <div class="top-bar-row">
+        <div class="menu-placeholder" *ngIf="!permissionsService.isUser()"></div>
+        <div class="menu visible-lt-lg" *ngIf="permissionsService.isUser()">
+            <button [matMenuTriggerFor]="menuNav" mat-flat-button>
+                <mat-icon svgIcon="red:menu"></mat-icon>
             </button>
-            <mat-menu #menuNav='matMenu'>
-                <button mat-menu-item routerLink='/ui/projects' translate='top-bar.navigation-items.projects'></button>
-                <button *ngIf='appStateService.activeProject'
-                        [routerLink]="'/ui/projects/' + appStateService.activeProjectId" mat-menu-item>
+            <mat-menu #menuNav="matMenu">
+                <button mat-menu-item routerLink="/ui/projects" translate="top-bar.navigation-items.projects"></button>
+                <button *ngIf="appStateService.activeProject" [routerLink]="'/ui/projects/' + appStateService.activeProjectId" mat-menu-item>
                     {{ appStateService.activeProject.project.projectName }}
                 </button>
                 <button
-                    *ngIf='appStateService.activeFile'
+                    *ngIf="appStateService.activeFile"
                     [routerLink]="'/ui/projects/' + appStateService.activeProjectId + '/file/' + appStateService.activeFile.fileId"
                     mat-menu-item
                 >
@@ -20,97 +19,91 @@
                 </button>
             </mat-menu>
         </div>
-        <div class='menu flex-2 visible-lg breadcrumbs-container' *ngIf='permissionsService.isUser()'>
+        <div class="menu flex-2 visible-lg breadcrumbs-container" *ngIf="permissionsService.isUser()">
             <a
-                class='breadcrumb'
-                routerLink='/ui/projects'
-                translate='top-bar.navigation-items.projects'
-                routerLinkActive='active'
-                *ngIf='projectsView'
-                [routerLinkActiveOptions]='{ exact: true }'
+                class="breadcrumb"
+                routerLink="/ui/projects"
+                translate="top-bar.navigation-items.projects"
+                routerLinkActive="active"
+                *ngIf="projectsView"
+                [routerLinkActiveOptions]="{ exact: true }"
             ></a>
             <a
-                class='breadcrumb back-to-projects'
-                routerLink='/ui/projects'
-                routerLinkActive='active'
-                *ngIf='settingsView'
-                [routerLinkActiveOptions]='{ exact: true }'
+                class="breadcrumb back-to-projects"
+                routerLink="/ui/projects"
+                routerLinkActive="active"
+                *ngIf="settingsView"
+                [routerLinkActiveOptions]="{ exact: true }"
             >
-                <mat-icon svgIcon='red:expand'></mat-icon>
+                <mat-icon svgIcon="red:expand"></mat-icon>
                 {{ 'top-bar.navigation-items.back-to-projects' | translate }}
             </a>
-            <ng-container *ngIf='projectsView'>
-                <mat-icon class='primary' *ngIf='!appStateService.activeProject' svgIcon='red:arrow-down'></mat-icon>
-                <mat-icon *ngIf='appStateService.activeProject' svgIcon='red:arrow-right'></mat-icon>
+            <ng-container *ngIf="projectsView">
+                <mat-icon class="primary" *ngIf="!appStateService.activeProject" svgIcon="red:arrow-down"></mat-icon>
+                <mat-icon *ngIf="appStateService.activeProject" svgIcon="red:arrow-right"></mat-icon>
                 <a
-                    *ngIf='appStateService.activeProject'
-                    class='breadcrumb'
+                    *ngIf="appStateService.activeProject"
+                    class="breadcrumb"
                     [routerLink]="'/ui/projects/' + appStateService.activeProjectId"
-                    routerLinkActive='active'
-                    [routerLinkActiveOptions]='{ exact: true }'
+                    routerLinkActive="active"
+                    [routerLinkActiveOptions]="{ exact: true }"
                 >
                     {{ appStateService.activeProject.project.projectName }}
                 </a>
-                <mat-icon svgIcon='red:arrow-right' *ngIf='appStateService.activeFile'></mat-icon>
+                <mat-icon svgIcon="red:arrow-right" *ngIf="appStateService.activeFile"></mat-icon>
                 <a
-                    *ngIf='appStateService.activeFile'
-                    class='breadcrumb'
+                    *ngIf="appStateService.activeFile"
+                    class="breadcrumb"
                     [routerLink]="'/ui/projects/' + appStateService.activeProjectId + '/file/' + appStateService.activeFile.fileId"
-                    routerLinkActive='active'
+                    routerLinkActive="active"
                 >
                     {{ appStateService.activeFile.filename }}
                 </a>
             </ng-container>
         </div>
-        <div class='center flex-1'>
-            <redaction-hidden-action (action)='userPreferenceService.toggleDevFeatures()'>
+        <div class="center flex-1">
+            <redaction-hidden-action (action)="userPreferenceService.toggleDevFeatures()">
                 <redaction-logo></redaction-logo>
             </redaction-hidden-action>
-            <div class='app-name'>{{ titleService.getTitle() }}</div>
-            <span class='dev-mode' *ngIf='userPreferenceService.areDevFeaturesEnabled' translate='dev-mode'></span>
+            <div class="app-name">{{ titleService.getTitle() }}</div>
+            <span class="dev-mode" *ngIf="userPreferenceService.areDevFeaturesEnabled" translate="dev-mode"></span>
         </div>
-        <div class='menu right flex-2'>
-            <redaction-notifications class='mr-8'
-                                     *ngIf='userPreferenceService.areDevFeaturesEnabled'></redaction-notifications>
-            <redaction-user-button [user]='user' [matMenuTriggerFor]='userMenu'
-                                   [showDot]='showPendingDownloadsDot'></redaction-user-button>
-            <mat-menu #userMenu='matMenu'>
+        <div class="menu right flex-2">
+            <redaction-notifications class="mr-8" *ngIf="userPreferenceService.areDevFeaturesEnabled"></redaction-notifications>
+            <redaction-user-button [user]="user" [matMenuTriggerFor]="userMenu" [showDot]="showPendingDownloadsDot"></redaction-user-button>
+            <mat-menu #userMenu="matMenu" class="user-menu" xPosition="before">
                 <button
-                    *ngIf='permissionsService.isUser()'
+                    *ngIf="permissionsService.isUser()"
                     [routerLink]="'/ui/my-profile'"
                     mat-menu-item
-                    translate='top-bar.navigation-items.my-account.children.my-profile'
+                    translate="top-bar.navigation-items.my-account.children.my-profile"
                 ></button>
                 <button
-                    *ngIf='permissionsService.isManager()'
-                    (click)='appStateService.reset()'
+                    *ngIf="permissionsService.isManager()"
+                    (click)="appStateService.reset()"
                     [routerLink]="'/ui/admin'"
                     mat-menu-item
-                    translate='top-bar.navigation-items.my-account.children.admin'
+                    translate="top-bar.navigation-items.my-account.children.admin"
                 ></button>
                 <button
-                    *ngIf='permissionsService.isUser()'
+                    *ngIf="permissionsService.isUser()"
                     [routerLink]="'/ui/downloads'"
                     mat-menu-item
-                    translate='top-bar.navigation-items.my-account.children.downloads'
+                    translate="top-bar.navigation-items.my-account.children.downloads"
                 ></button>
-                <button [matMenuTriggerFor]='language' mat-menu-item
-                        translate='top-bar.navigation-items.my-account.children.language.label'></button>
-                <mat-menu #language='matMenu'>
-                    <button
-                        *ngFor='let lang of languages'
-                        (click)='changeLanguage(lang)'
-                        mat-menu-item
-                        translate
-                    >top-bar.navigation-items.my-account.children.language.{{lang}}</button>
+                <button [matMenuTriggerFor]="language" mat-menu-item translate="top-bar.navigation-items.my-account.children.language.label"></button>
+                <mat-menu #language="matMenu">
+                    <button *ngFor="let lang of languages" (click)="changeLanguage(lang)" mat-menu-item translate>
+                        top-bar.navigation-items.my-account.children.language.{{ lang }}
+                    </button>
                 </mat-menu>
-                <button (click)='logout()' mat-menu-item>
-                    <mat-icon svgIcon='red:logout'></mat-icon>
-                    <span translate='top-bar.navigation-items.my-account.children.logout'> </span>
+                <button (click)="logout()" mat-menu-item>
+                    <mat-icon svgIcon="red:logout"></mat-icon>
+                    <span translate="top-bar.navigation-items.my-account.children.logout"> </span>
                 </button>
             </mat-menu>
         </div>
     </div>
-    <div class='divider'></div>
+    <div class="divider"></div>
 </div>
 <router-outlet></router-outlet>
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html
index 844de2f90..f7766cc1e 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -1,5 +1,5 @@
 <redaction-circle-button [matMenuTriggerFor]="overlay" icon="red:notification" [showDot]="hasUnread"></redaction-circle-button>
-<mat-menu #overlay="matMenu" class="notifications-menu" backdropClass="notifications-backdrop">
+<mat-menu #overlay="matMenu" class="notifications-menu" backdropClass="notifications-backdrop" xPosition="before">
     <div *ngFor="let group of groupedNotifications | sortBy: 'desc':'dateString'">
         <div class="all-caps-label">{{ day(group) }}</div>
         <div
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.scss b/apps/red-ui/src/app/components/notifications/notifications.component.scss
index b34fb71a1..95075e917 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.scss
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.scss
@@ -10,6 +10,7 @@
     .notifications-menu {
         min-width: 400px !important;
         padding: 0 8px 16px;
+        margin-right: 8px;
         max-height: calc(100vh - 200px);
 
         .all-caps-label {
diff --git a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
index 54f1c8512..bafbba232 100644
--- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
@@ -123,11 +123,7 @@
 
 <ng-template #annotationFilterActionTemplate let-filter="filter">
     <ng-container *ngIf="filter.key === 'skipped'">
-        <redaction-circle-button
-            [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'"
-            (action)="toggleSkipped.emit($event)"
-            class="skipped-toggle-button"
-        >
+        <redaction-circle-button [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'" (action)="toggleSkipped.emit($event)" type="dark-bg">
         </redaction-circle-button>
     </ng-container>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.scss
index e500c3517..5afb32e6e 100644
--- a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.scss
@@ -203,13 +203,6 @@ redaction-dictionary-annotation-icon {
     margin-left: 2px;
 }
 
-.skipped-toggle-button {
-    position: absolute;
-    right: 0;
-    justify-content: center;
-    align-items: center;
-}
-
 .analysis-progress {
     padding: 12px 20px;
     max-width: 400px;
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.scss b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.scss
index d261cdf2b..d240cb264 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.scss
@@ -3,6 +3,7 @@
 :host {
     height: 34px;
     width: 34px;
+    align-items: center;
 }
 
 button {
diff --git a/apps/red-ui/src/app/modules/shared/components/filter/filter.component.html b/apps/red-ui/src/app/modules/shared/components/filter/filter.component.html
index 5f04b1e7b..032f6e59d 100644
--- a/apps/red-ui/src/app/modules/shared/components/filter/filter.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/filter/filter.component.html
@@ -36,7 +36,7 @@
                     </mat-checkbox>
                     <ng-template *ngTemplateOutlet="actionsTemplate ? actionsTemplate : null; context: { filter: filter }"> </ng-template>
                 </div>
-                <div *ngIf="filter.filters && filter.expanded">
+                <div *ngIf="filter.filters?.length && filter.expanded">
                     <div *ngFor="let subFilter of filter.filters" class="padding-left mat-menu-item" (click)="$event.stopPropagation()">
                         <mat-checkbox
                             [checked]="subFilter.checked"