Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Pull request #104: Scrollbar fixes for right containers

Browse Source 
Merge in RED/ui from fixes to master

* commit 'eda358c58f1d65f394723dd81e378a66f03380d7':
  Scrollbar fixes for right containers
This commit is contained in:
Timo Bejan 2021-01-20 17:13:04 +01:00
commit b4e7c5e385
13 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
View File

@ -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,

1
apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
View File

@ -17,6 +17,7 @@
&.column {
flex-direction: column;
padding: 0 20px;
> *:not(:last-child) {
margin-bottom: 20px;

4
apps/red-ui/src/app/components/status-bar/status-bar.component.html
View File

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

1
apps/red-ui/src/app/components/status-bar/status-bar.component.scss
View File

@ -9,6 +9,7 @@
&.small {
.rectangle {
width: 12px;
min-width: 12px;
}
.section-wrapper {

3
apps/red-ui/src/app/components/status-bar/status-bar.component.ts
View File

@ -18,9 +18,6 @@ export class StatusBarComponent implements OnInit {
@Input()
public small = false;
@Input()
public labelClass = '';
constructor() {}
ngOnInit(): void {}

2
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
View File

@ -159,7 +159,7 @@
</ng-container>
</div>
<div class="right-container">
<div class="right-container" redactionHasScrollbar>
<redaction-simple-doughnut-chart
[config]="chartData"
[strokeWidth]="15"

10
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss
View File

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

2
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
View File

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

4
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
View File

@ -26,6 +26,10 @@
border-left: none;
border-right: 1px solid $separator;
&.has-scrollbar:hover {
padding-right: 13px;
}
.heading-xl {
margin-bottom: 24px;
}

2
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -116,7 +116,7 @@
</div>
</div>
<div class="right-container">
<div class="right-container" redactionHasScrollbar>
<redaction-project-listing-details
(filtersChanged)="filtersChanged($event)"
[documentsChartData]="documentsChartData"

5
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
View File

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

2
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

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

14
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
View File

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