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

cosmetic changes

Browse Source
This commit is contained in:
Timo 2021-02-18 21:34:32 +02:00
parent 6fcdab4a20
commit bc3c0971fb
6 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/red-ui/src/app/common/filter/filter.component.html
View File

@ -18,10 +18,13 @@
</div>
<div *ngFor="let filter of filters">
<div class="mat-menu-item flex" (click)="toggleFilterExpanded($event, filter)">
<div class="arrow-wrapper" *ngIf="filter.filters && filter.filters.length">
<div class="arrow-wrapper" *ngIf="isExpandable(filter)">
<mat-icon *ngIf="filter.expanded" svgIcon="red:arrow-down" color="accent"> </mat-icon>
<mat-icon *ngIf="!filter.expanded" color="accent" svgIcon="red:arrow-right"> </mat-icon>
</div>
<div class="arrow-wrapper spacer" *ngIf="atLeastOnFilterIsExpandable && !isExpandable(filter)">
&nbsp;
</div>
<mat-checkbox
[checked]="filter.checked"
[indeterminate]="filter.indeterminate"

19
apps/red-ui/src/app/common/filter/filter.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectorRef, Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
import { AppStateService } from '../../state/app-state.service';
import { FilterModel } from './model/filter.model';
import { handleCheckedValue } from './utils/filter-utils';
@ -19,7 +19,7 @@ import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
}
]
})
export class FilterComponent {
export class FilterComponent implements OnChanges {
@Output() filtersChanged = new EventEmitter<FilterModel[]>();
@Input() filterTemplate: TemplateRef<any>;
@Input() actionsTemplate: TemplateRef<any>;
@ -33,8 +33,19 @@ export class FilterComponent {
mouseOver = true;
mouseOverTimeout: number;
atLeastOnFilterIsExpandable: boolean = false;
constructor(public readonly appStateService: AppStateService, private readonly _changeDetectorRef: ChangeDetectorRef) {}
ngOnChanges(changes: SimpleChanges): void {
this.atLeastOnFilterIsExpandable = false;
if (this.filters) {
this.filters.forEach((f) => {
this.atLeastOnFilterIsExpandable = this.atLeastOnFilterIsExpandable || this.isExpandable(f);
});
}
}
filterCheckboxClicked($event: any, filter: FilterModel, parent?: FilterModel) {
filter.checked = !filter.checked;
if (parent) {
@ -99,4 +110,8 @@ export class FilterComponent {
// this.trigger.closeMenu();
}, 1000);
}
isExpandable(filter: FilterModel) {
return filter.filters && filter.filters.length > 0;
}
}

4
apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.html
View File

@ -1,8 +1,8 @@
<div class="needs-work">
<redaction-annotation-icon *ngIf="reanalysisRequired()" type="square" label="A" [color]="analysisColor"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="hasUpdates" type="square" label="U" [color]="updatedColor"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="needsWorkInput.hasRedactions" type="square" label="R" color="#283241"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="needsWorkInput.hasRedactions" type="square" label="R" [color]="redactionColor"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="hasImages" type="square" label="I" [color]="imageColor"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="needsWorkInput.hintsOnly" type="circle" label="H" color="#9398a0"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="needsWorkInput.hintsOnly" type="circle" label="H" [color]="hintColor"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="needsWorkInput.hasRequests" type="rhombus" label="S" [color]="suggestionColor"></redaction-annotation-icon>
</div>

8
apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.ts
View File

@ -40,6 +40,14 @@ export class NeedsWorkBadgeComponent implements OnInit {
return this._getDictionaryColor('analysis');
}
get hintColor() {
return this._getDictionaryColor('hint');
}
get redactionColor() {
return this._getDictionaryColor('redaction');
}
get hasImages() {
return this.needsWorkInput instanceof FileStatusWrapper && this.needsWorkInput.hasImages;
}

8
apps/red-ui/src/app/components/type-filter/type-filter.component.html
View File

@ -1,7 +1,7 @@
<redaction-annotation-icon *ngIf="filter.key === 'redaction'" type="square" label="R" color="#283241"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="filter.key === 'recommendation'" type="square" label="R" color="#c5d3eb"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="filter.key === 'redaction'" type="square" label="R" [color]="dictionaryColor"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="filter.key === 'recommendation'" type="square" label="R" [color]="dictionaryColor"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="filter.key === 'analysis'" type="square" label="A" [color]="dictionaryColor"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="filter.key === 'hint'" type="circle" label="H" color="#9398a0"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="filter.key === 'hint'" type="circle" label="H" [color]="dictionaryColor"></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="filter.key === 'manual-redaction'" type="square" label="M" [color]="dictionaryColor"></redaction-annotation-icon>
@ -25,7 +25,7 @@
*ngIf="filter.key === 'add-dictionary' || filter.key === 'remove-dictionary'"
type="square"
label="A"
color="#dd4d50"
[color]="dictionaryColor"
></redaction-annotation-icon>
<redaction-annotation-icon *ngIf="filter.key === 'declined-suggestion'" type="rhombus" label="S" [color]="dictionaryColor"></redaction-annotation-icon>

4
apps/red-ui/src/app/state/app-state.service.ts
View File

@ -477,8 +477,6 @@ export class AppStateService {
virtual: true
};
console.log(colors.manualRedactionColor);
// dictionary actions
dictionaryData['recommendation'] = {
hexColor: '#c5d3eb',
@ -556,7 +554,7 @@ export class AppStateService {
virtual: true
};
dictionaryData['hint'] = {
hexColor: '#9398a0',
hexColor: '#fa98f7',
type: 'hint',
virtual: true,
hint: true