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

Collapse column preview

Browse Source
This commit is contained in:
Adina Țeudan 2021-04-13 18:22:47 +03:00
parent 05bde93f49
commit fcdea16497
4 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
View File

@ -99,13 +99,17 @@
</div>
</div>
</div>
<div class="center">
<div class="center" [class.collapsed]="!previewExpanded">
<div class="csv-part-header">
<div class="all-caps-label">
{{ 'file-attributes-csv-import.csv-column' | translate }}
{{ 'file-attributes-csv-import.csv-column' + (previewExpanded ? '' : '-preview') | translate }}
</div>
<redaction-circle-button
[icon]="previewExpanded ? 'red:expand' : 'red:collapse'"
(click)="previewExpanded = !previewExpanded"
></redaction-circle-button>
</div>
<div class="csv-part-content">
<div class="csv-part-content" [class.hidden]="!previewExpanded">
<div class="no-hovered-column" *ngIf="!hoveredColumn" translate="file-attributes-csv-import.no-hovered-column"></div>
<ng-container *ngFor="let row of parseResult?.data || []">
<div *ngIf="row[hoveredColumn]">

30
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
View File

@ -170,10 +170,34 @@
min-width: 150px;
background: $grey-2;
border-right: 1px solid $separator;
&:not(.collapsed) redaction-circle-button {
margin-right: -8px;
}
&.collapsed {
width: 50px;
min-width: 50px;
> .csv-part-header {
height: 100%;
border-bottom: none;
align-items: center;
flex-direction: column-reverse;
justify-content: flex-end;
padding-top: 8px;
> .all-caps-label {
transform: rotate(90deg) translateX(50%);
white-space: nowrap;
margin-top: 10px;
}
}
}
}
> .content-container {
width: calc(100% - 527px);
width: 100%;
redaction-table-col-name::ng-deep {
> div {
@ -211,7 +235,7 @@
height: calc(100% - 80px);
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 2fr 150px auto auto auto 11px;
grid-template-columns: 30px minmax(0, 20vw) 150px auto auto auto 11px;
.table-item {
> div {
@ -253,7 +277,7 @@
&.has-scrollbar:hover {
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 2fr 150px auto auto auto;
grid-template-columns: 30px minmax(0, 20vw) 150px auto auto auto;
}
}
}

1
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
View File

@ -39,6 +39,7 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
public isSearchOpen = false;
public searchForm: FormGroup;
public filteredFields: Field[];
public previewExpanded = true;
@ViewChild(CdkVirtualScrollViewport, { static: false }) cdkVirtualScrollViewport: CdkVirtualScrollViewport;

1
apps/red-ui/src/assets/i18n/en.json
View File

@ -1159,6 +1159,7 @@
"available": "{{value}} available",
"selected": "{{value}} selected",
"csv-column": "CSV Column",
"csv-column-preview": "CSV Column Preview",
"no-hovered-column": "Preview CSV column by hovering the entry.",
"search": {
"placeholder": "Search by column name..."