Pull request #104: Scrollbar fixes for right containers

Merge in RED/ui from fixes to master

* commit 'eda358c58f1d65f394723dd81e378a66f03380d7':
  Scrollbar fixes for right containers

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,

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;

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>

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 {

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 {}

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"

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 {
+    &.has-scrollbar:hover {
-        overflow-x: hidden;
+        padding-right: 9px;
-
-        > div {
-            min-width: 353px;
-        }
     }
 }
 

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">

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;
     }

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"

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;

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()"

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 {
+    &.has-scrollbar:hover {
-        width: 100%;
+        padding-right: 13px;
-        box-sizing: border-box;
-        padding-right: 11px;
-    }
-
-    &:hover {
-        redaction-project-details {
-            padding-right: 0;
-        }
     }
 }