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

Expandable filters

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-19 00:17:34 +03:00 committed by Timo Bejan
parent 89ba7efc36
commit de19b9a287
5 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -51,7 +51,7 @@
<mat-icon>arrow_drop_down</mat-icon>
</button>
<div class="dot" *ngIf="hasActiveFilters"></div>
<mat-menu class="filter-menu" #filterMenu="matMenu" xPosition="before">
<mat-menu #filterMenu="matMenu" xPosition="before">
<div class="filter-menu-header">
<div class="all-caps-label" translate="file-preview.filter-menu.filter-types.label"></div>
<div class="actions">
@ -62,7 +62,11 @@
</div>
</div>
<div *ngFor="let key of filterKeys()">
<div class="mat-menu-item" (click)="$event.stopPropagation()">
<div class="mat-menu-item flex" (click)="$event.stopPropagation()">
<div class="arrow-wrapper" *ngIf="hasSubsections(filters[key])">
<mat-icon *ngIf="expandedFilters[key]" (click)="setExpanded(key, false, $event)">arrow_drop_down</mat-icon>
<mat-icon *ngIf="!expandedFilters[key]" (click)="setExpanded(key, true, $event)">arrow_right</mat-icon>
</div>
<mat-checkbox [checked]="isChecked(key)"
[indeterminate]="isIndeterminate(key)"
(change)="setAllFilters(filters[key], $event.checked, hasSubsections(filters[key]) ? null : key)"
@ -71,7 +75,7 @@
{{"file-preview.filter-menu." + key + ".label" | translate }}
</mat-checkbox>
</div>
<div *ngIf="hasSubsections(filters[key])">
<div *ngIf="hasSubsections(filters[key]) && expandedFilters[key]">
<div *ngFor="let subkey of filterKeys(key)"
class="padding-left mat-menu-item"
(click)="$event.stopPropagation()"
@ -111,7 +115,8 @@
(click)="selectAnnotation(annotation)"
>
<redaction-annotation-icon [type]="getType(annotation) + ' ' + getDictionary(annotation)"></redaction-annotation-icon>
<redaction-annotation-icon
[type]="getType(annotation) + ' ' + getDictionary(annotation)"></redaction-annotation-icon>
<div class="flex-1">
<div><strong>{{getType(annotation) | translate}}</strong></div>
<div><strong><span translate="dictionary"></span>: </strong>{{getDictionary(annotation)}}</div>

2
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

@ -143,8 +143,8 @@ redaction-pdf-viewer {
.filter-menu-header {
display: flex;
justify-content: space-between;
width: 250px;
padding: 7px 15px 15px;
width: 350px;
.actions {
display: flex;

6
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -48,6 +48,7 @@ export class FilePreviewScreenComponent implements OnInit {
public displayedAnnotations: { [key: number]: { annotations: Annotations.Annotation[] } } = {};
public selectedAnnotation: Annotations.Annotation;
public filters: AnnotationFilters;
public expandedFilters: AnnotationFilters = { hint: false };
public activeViewerPage: number;
private _manualRedactionEntry: AddRedactionRequest;
@ -308,4 +309,9 @@ export class FilePreviewScreenComponent implements OnInit {
public hasSubsections(filter: AnnotationFilters | boolean) {
return AnnotationUtils.hasSubsections(filter);
}
public setExpanded(key: string, value: boolean, $event: MouseEvent) {
$event.stopPropagation();
this.expandedFilters[key] = value;
}
}

13
apps/red-ui/src/assets/styles/red-menu.scss
View File

@ -3,18 +3,27 @@
.mat-menu-panel {
border-radius: 8px !important;
box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
max-width: none !important;
.mat-menu-item {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: $accent;
.arrow-wrapper {
width: 24px;
mat-icon {
width: 14px;
}
}
&.padding-left {
padding-left: 40px;
padding-left: 64px;
}
.mat-checkbox-layout {
width: 100%;
margin-left: 4px;
.mat-checkbox-inner-container {
margin-left: 0;

2
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -73,7 +73,7 @@ html, body {
}
.flex {
display: flex;
display: flex !important;
}
.flex-1 {