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

Scrollbar

Browse Source
This commit is contained in:
Adina Țeudan 2020-12-02 01:23:20 +02:00
parent d040961e25
commit 9e0f25bc70
11 changed files with 134 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@
<div class="red-content-inner">
<div class="left-container">
<div class="header-item span-4">
<div class="header-item">
<div class="select-all-container">
<div
(click)="toggleSelectAll()"
@ -38,7 +38,8 @@
[withSort]="true"
></redaction-table-col-name>
<redaction-table-col-name label="dictionary-listing.table-col-names.hint-redaction" class="flex-center"></redaction-table-col-name>
<div class="placeholder-bottom-border"></div>
<div></div>
<div class="scrollbar-placeholder"></div>
</div>
<div class="grid-container">
@ -50,7 +51,7 @@
<div>
<div class="color-square" [ngStyle]="{ 'background-color': dict.hexColor }"></div>
<div>
<div class="dict-name">
<div class="table-item-title heading">
{{ dict.label }}
</div>
@ -66,6 +67,7 @@
<redaction-annotation-icon [dictType]="dict"></redaction-annotation-icon>
</div>
<div></div>
<div class="scrollbar-placeholder"></div>
</div>
</div>
</div>

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

@ -12,34 +12,44 @@ redaction-table-col-name::ng-deep {
}
.left-container {
width: calc(100vw - 353px);
.grid-container {
grid-template-columns: auto 1fr 1fr 2fr;
grid-template-columns: auto 1fr 1fr 2fr 11px;
&:hover {
grid-template-columns: auto 1fr 1fr 2fr;
}
.table-item {
> div {
> div:not(.scrollbar-placeholder) {
display: flex;
flex-direction: row;
padding-left: 10px;
align-items: center;
justify-content: flex-start;
}
.color-square {
width: 16px;
height: 16px;
margin-right: 16px;
}
&.analyzed {
justify-content: center;
}
.analyzed {
justify-content: center;
}
}
.color-square {
width: 16px;
height: 16px;
min-width: 16px;
margin-right: 16px;
}
.stats-subtitle {
margin-top: 4px;
.dict-name {
max-width: 100%;
}
.stats-subtitle {
margin-top: 4px;
}
}
}
}
width: calc(100vw - 353px);
}
.right-container {

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

@ -45,7 +45,7 @@
</span>
</div>
<div class="table-header" redactionSyncWidth="table-item">
<div class="table-header" redactionSyncWidth="table-item" [class.no-data]="noData">
<redaction-table-col-name
label="project-listing.table-col-names.name"
column="project.projectName"
@ -59,9 +59,10 @@
<redaction-table-col-name label="project-listing.table-col-names.owner"></redaction-table-col-name>
<redaction-table-col-name label="project-listing.table-col-names.status" class="flex-end"></redaction-table-col-name>
<div class="scrollbar-placeholder"></div>
</div>
<div *ngIf="displayedProjects?.length === 0" class="no-data heading-l" translate="project-listing.no-projects-match"></div>
<div *ngIf="noData" class="no-data heading-l" translate="project-listing.no-projects-match"></div>
<div class="grid-container">
<div
@ -153,9 +154,10 @@
</redaction-circle-button>
</div>
</div>
<div class="scrollbar-placeholder"></div>
</div>
<redaction-virtual-scroll></redaction-virtual-scroll>
<!-- <redaction-virtual-scroll></redaction-virtual-scroll>-->
</div>
</div>

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

@ -3,15 +3,26 @@
.left-container {
.grid-container {
grid-template-columns: 2fr 1fr 1fr auto;
}
grid-template-columns: 2fr 1fr 1fr auto 11px;
.stats-subtitle {
margin-top: 6px;
}
&:hover {
grid-template-columns: 2fr 1fr 1fr auto;
}
.status-container {
width: 160px;
.table-item {
> div {
padding: 0 24px;
}
.status-container {
width: 160px;
padding-right: 13px;
}
}
.stats-subtitle {
margin-top: 6px;
}
}
width: calc(100vw - 466px);

4
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
View File

@ -88,6 +88,10 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
this.projectAutoUpdateTimer.unsubscribe();
}
public get noData() {
return this.displayedProjects?.length === 0;
}
private _calculateData() {
this._computeAllFilters();
this._filterProjects();

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

@ -114,7 +114,7 @@
<redaction-bulk-actions [selectedFileIds]="selectedFileIds" (reload)="bulkActionPerformed()"></redaction-bulk-actions>
</div>
<div class="table-header" redactionSyncWidth="table-item">
<div class="table-header" redactionSyncWidth="table-item" [class.no-data]="noData">
<!-- Table column names-->
<div class="select-oval-placeholder placeholder-bottom-border"></div>
@ -160,9 +160,10 @@
column="statusSort"
label="project-overview.table-col-names.status"
></redaction-table-col-name>
<div class="scrollbar-placeholder"></div>
</div>
<div *ngIf="displayedFiles?.length === 0" class="no-data heading-l" translate="project-overview.no-files-match"></div>
<div *ngIf="noData" class="no-data heading-l" translate="project-overview.no-files-match"></div>
<div class="grid-container">
<div
@ -198,9 +199,11 @@
<redaction-initials-avatar [userId]="fileStatus.currentReviewer" [withName]="true"></redaction-initials-avatar>
</div>
<div *ngIf="!fileStatus.isError" class="pages">
<mat-icon svgIcon="red:pages"></mat-icon>
{{ fileStatus.numberOfPages }}
<div *ngIf="!fileStatus.isError">
<div class="pages">
<mat-icon svgIcon="red:pages"></mat-icon>
{{ fileStatus.numberOfPages }}
</div>
</div>
<div [class.extend-cols]="fileStatus.isError" class="status-container">
@ -235,6 +238,7 @@
></redaction-status-bar>
</div>
</div>
<div class="scrollbar-placeholder"></div>
</div>
</div>
</div>

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

@ -16,7 +16,11 @@ redaction-table-col-name::ng-deep {
}
.grid-container {
grid-template-columns: auto 3fr 2fr 1fr 1fr 2fr auto;
grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto 11px;
&:hover {
grid-template-columns: auto 3fr 2fr 1fr 2fr 1fr auto;
}
.table-item {
> div {

4
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
View File

@ -121,6 +121,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
return [FileStatus.StatusEnum.REPROCESS, FileStatus.StatusEnum.PROCESSING].includes(fileStatusWrapper.status);
}
public get noData() {
return this.displayedFiles?.length === 0;
}
public get sortingOption(): SortingOption {
return this._sortingService.getSortingOption('project-overview');
}

2
apps/red-ui/src/app/utils/sync-width.directive.ts
View File

@ -25,7 +25,7 @@ export class SyncWidthDirective implements AfterViewChecked {
const tableRow = tableRows[0];
if (tableRow.children.length !== headerItems.length) return;
for (let idx = 0; idx < headerItems.length; ++idx) {
for (let idx = 0; idx < headerItems.length - 1; ++idx) {
headerItems[idx].style.width = `${tableRow.children[idx].getBoundingClientRect().width}px`;
headerItems[idx].style.minWidth = `${tableRow.children[idx].getBoundingClientRect().width}px`;
}

12
apps/red-ui/src/assets/styles/red-grid.scss
View File

@ -19,18 +19,6 @@
gap: 25px;
}
&.span-3 {
grid-column-end: span 3;
}
&.span-4 {
grid-column-end: span 4;
}
&.span-7 {
grid-column-end: span 7;
}
&.justify-end {
justify-content: flex-end;
}

71
apps/red-ui/src/assets/styles/red-tables.scss
View File

@ -7,15 +7,55 @@
.table-header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid $separator;
&.no-data {
justify-content: space-between;
padding: initial;
}
redaction-table-col-name:last-of-type {
> div {
padding-right: 13px;
}
}
}
.grid-container {
display: grid;
max-height: calc(100vh - 50px - 30px - 111px);
overflow-y: scroll;
@include no-scroll-bar();
overflow-y: hidden;
&:hover {
overflow-y: scroll;
scrollbar-color: $grey-5 $grey-2;
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 11px;
}
/* Track */
&::-webkit-scrollbar-track {
background: $grey-2;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: $grey-5;
}
.table-item {
.action-buttons {
right: 0;
}
}
.table-item > .scrollbar-placeholder {
display: none;
}
}
.table-item {
display: contents;
@ -24,10 +64,15 @@
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
position: relative;
box-sizing: border-box;
height: 80px;
border-bottom: 1px solid $separator;
padding: 0 13px;
&:not(.scrollbar-placeholder):not(.pr-0) {
min-width: 110px;
}
}
.table-item-title {
@ -35,23 +80,18 @@
@include line-clamp(1);
}
> div {
height: 80px;
border-bottom: 1px solid $separator;
padding: 0 24px;
}
.action-buttons {
position: absolute;
display: none;
right: 0;
right: -11px;
top: 0;
height: 100%;
width: fit-content;
flex-direction: row;
align-items: center;
padding-left: 100px;
padding-right: 24px;
padding-right: 13px;
z-index: 1;
background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, #f4f5f7 35%);
mat-icon {
@ -74,3 +114,8 @@
}
}
}
.scrollbar-placeholder {
width: 11px;
padding: 0 !important;
}