From eda358c58f1d65f394723dd81e378a66f03380d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 20 Jan 2021 17:28:30 +0200
Subject: [PATCH] Scrollbar fixes for right containers

---
 .../simple-doughnut-chart.component.html           |  3 +--
 .../simple-doughnut-chart.component.scss           |  1 +
 .../status-bar/status-bar.component.html           |  4 ++--
 .../status-bar/status-bar.component.scss           |  1 +
 .../components/status-bar/status-bar.component.ts  |  3 ---
 .../dictionary-listing-screen.component.html       |  2 +-
 .../dictionary-listing-screen.component.scss       | 10 +++-------
 .../watermark-screen.component.html                |  2 +-
 .../watermark-screen.component.scss                |  4 ++++
 .../project-listing-screen.component.html          |  2 +-
 .../project-listing-screen.component.scss          |  5 +++++
 .../project-overview-screen.component.html         |  2 +-
 .../project-overview-screen.component.scss         | 14 +++-----------
 13 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
index 3be8e3cd5..45e9e83fc 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
@@ -1,5 +1,5 @@
 <div [class]="'container flex ' + direction">
-    <svg attr.height="{{ size }}" attr.width="{{ size }}" attr.viewBox="0 0 {{ size }} {{ size }}" class="donut-chart">
+    <svg attr.height="{{ size }}" attr.width="{{ size }}" attr.viewBox="0 0 {{ size }} {{ size }}" [style.min-width]="size" class="donut-chart">
         <g *ngFor="let value of parsedConfig; let i = index">
             <circle
                 *ngIf="exists(i)"
@@ -27,7 +27,6 @@
             <div *ngFor="let val of parsedConfig" [class.active]="val.checked" [class.filter-disabled]="!filter" (click)="selectValue(val)">
                 <redaction-status-bar
                     [small]="true"
-                    [labelClass]="'no-wrap'"
                     [config]="[
                         {
                             length: val.value,
diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
index c87f58a0a..86ddd6256 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
@@ -17,6 +17,7 @@
 
     &.column {
         flex-direction: column;
+        padding: 0 20px;
 
         > *:not(:last-child) {
             margin-bottom: 20px;
diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.html b/apps/red-ui/src/app/components/status-bar/status-bar.component.html
index df1a62d31..1672ac375 100644
--- a/apps/red-ui/src/app/components/status-bar/status-bar.component.html
+++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.html
@@ -1,11 +1,11 @@
 <div class="rectangle-container" [ngClass]="{ small: small }">
-    <div *ngFor="let rect of config" class="section-wrapper" [style]="'flex: ' + rect.length + ';'">
+    <div *ngFor="let rect of config" class="section-wrapper" [style]="'flex: ' + (rect.length || 1) + ';'">
         <div
             [className]="'rectangle ' + rect.color"
             [ngStyle]="{
                 'background-color': rect.color.includes('#') ? rect.color : ''
             }"
         ></div>
-        <div *ngIf="rect.label" [ngClass]="labelClass">{{ rect.label }}</div>
+        <div *ngIf="rect.label">{{ rect.label }}</div>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss
index 92523436c..267368096 100644
--- a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss
+++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss
@@ -9,6 +9,7 @@
     &.small {
         .rectangle {
             width: 12px;
+            min-width: 12px;
         }
 
         .section-wrapper {
diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.ts b/apps/red-ui/src/app/components/status-bar/status-bar.component.ts
index 187b78517..0ef84ee55 100644
--- a/apps/red-ui/src/app/components/status-bar/status-bar.component.ts
+++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.ts
@@ -18,9 +18,6 @@ export class StatusBarComponent implements OnInit {
     @Input()
     public small = false;
 
-    @Input()
-    public labelClass = '';
-
     constructor() {}
 
     ngOnInit(): void {}
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 2b7a4a244..4ccb548bb 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
@@ -159,7 +159,7 @@
             </ng-container>
         </div>
 
-        <div class="right-container">
+        <div class="right-container" redactionHasScrollbar>
             <redaction-simple-doughnut-chart
                 [config]="chartData"
                 [strokeWidth]="15"
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss
index db6ec87df..f2b85ec9e 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss
@@ -69,14 +69,10 @@ redaction-table-col-name::ng-deep {
     width: 353px;
     min-width: 353px;
     justify-content: center;
-    padding: 50px 0;
+    padding: 50px 20px 30px 20px;
 
-    redaction-simple-doughnut-chart::ng-deep {
-        overflow-x: hidden;
-
-        > div {
-            min-width: 353px;
-        }
+    &.has-scrollbar:hover {
+        padding-right: 9px;
     }
 }
 
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
index f87f43b31..04740a669 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
@@ -32,7 +32,7 @@
             </div>
         </div>
 
-        <div class="right-container">
+        <div class="right-container" redactionHasScrollbar>
             <div class="heading-xl" [translate]="'watermark-screen.title'"></div>
             <form [formGroup]="configForm" (keyup)="configChanged()">
                 <div class="red-input-group w-300">
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
index 83a0dfc62..11ec399f5 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
@@ -26,6 +26,10 @@
     border-left: none;
     border-right: 1px solid $separator;
 
+    &.has-scrollbar:hover {
+        padding-right: 13px;
+    }
+
     .heading-xl {
         margin-bottom: 24px;
     }
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index bc9d453c2..0e65ec6b1 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -116,7 +116,7 @@
             </div>
         </div>
 
-        <div class="right-container">
+        <div class="right-container" redactionHasScrollbar>
             <redaction-project-listing-details
                 (filtersChanged)="filtersChanged($event)"
                 [documentsChartData]="documentsChartData"
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
index 74b8548b3..f63652943 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
@@ -32,6 +32,11 @@
     display: flex;
     width: 466px;
     min-width: 466px;
+    padding-right: 11px;
+
+    &.has-scrollbar:hover {
+        padding-right: 0;
+    }
 
     redaction-project-listing-details {
         min-width: 466px;
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 01623d5e7..75b68fbfd 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -249,7 +249,7 @@
             </ng-container>
         </div>
 
-        <div class="right-container" [class.collapsed]="collapsedDetails">
+        <div class="right-container" redactionHasScrollbar [class.collapsed]="collapsedDetails">
             <redaction-project-details
                 #projectDetailsComponent
                 (openAssignProjectMembersDialog)="openAssignProjectMembersDialog()"
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
index c3017d0fe..7733c866a 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
@@ -76,18 +76,10 @@ redaction-table-col-name::ng-deep {
     display: flex;
     width: 375px;
     min-width: 375px;
-    padding: 16px 16px 16px 24px;
+    padding: 16px 24px 16px 24px;
 
-    redaction-project-details {
-        width: 100%;
-        box-sizing: border-box;
-        padding-right: 11px;
-    }
-
-    &:hover {
-        redaction-project-details {
-            padding-right: 0;
-        }
+    &.has-scrollbar:hover {
+        padding-right: 13px;
     }
 }