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

move round checkbox to common lib

Browse Source
This commit is contained in:
Dan Percic 2021-07-30 15:38:31 +03:00 committed by Timo Bejan
parent 498fe51e80
commit 3c5d7d681d
20 changed files with 40 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
View File

@ -22,7 +22,7 @@
<!-- Table lines -->
<div *cdkVirtualFor="let download of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
<div (click)="toggleEntitySelected($event, download)" class="selection-column">
<redaction-round-checkbox [active]="isSelected(download)"></redaction-round-checkbox>
<iqser-round-checkbox [active]="isSelected(download)"></iqser-round-checkbox>
</div>
<div>

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

@ -1,9 +1,9 @@
<div class="header-item">
<redaction-round-checkbox
<iqser-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
></iqser-round-checkbox>
<span class="all-caps-label">
{{ 'file-attributes-csv-import.table-header.title' | translate: { length: (screenStateService.allEntitiesLength$ | async) } }}
</span>
@ -93,7 +93,7 @@
class="table-item"
>
<div (click)="toggleEntitySelected($event, field)" class="selection-column">
<redaction-round-checkbox [active]="isSelected(field)"></redaction-round-checkbox>
<iqser-round-checkbox [active]="isSelected(field)"></iqser-round-checkbox>
</div>
<div [class.editing]="field.editingName" class="name">
<div *ngIf="!field.editingName">
@ -142,7 +142,7 @@
<mat-slide-toggle [(ngModel)]="field.readonly" color="primary"></mat-slide-toggle>
</div>
<div class="center">
<redaction-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></redaction-round-checkbox>
<iqser-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></iqser-round-checkbox>
</div>
<div class="actions-container">
<div class="action-buttons">

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

@ -21,11 +21,11 @@
<div class="content-container">
<div class="header-item">
<redaction-round-checkbox
<iqser-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
></iqser-round-checkbox>
<span class="all-caps-label">
{{ 'dictionary-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
@ -102,7 +102,7 @@
class="table-item pointer"
>
<div (click)="toggleEntitySelected($event, dict)" class="selection-column">
<redaction-round-checkbox [active]="isSelected(dict)"></redaction-round-checkbox>
<iqser-round-checkbox [active]="isSelected(dict)"></iqser-round-checkbox>
</div>
<div>

6
apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
View File

@ -21,11 +21,11 @@
<div class="content-container">
<div *ngIf="(screenStateService.noData$ | async) === false" class="header-item">
<redaction-round-checkbox
<iqser-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
></iqser-round-checkbox>
<span class="all-caps-label">
{{
@ -102,7 +102,7 @@
class="table-item pointer"
>
<div (click)="toggleEntitySelected($event, attribute)" class="selection-column">
<redaction-round-checkbox [active]="isSelected(attribute)"></redaction-round-checkbox>
<iqser-round-checkbox [active]="isSelected(attribute)"></iqser-round-checkbox>
</div>
<div>

6
apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
View File

@ -12,11 +12,11 @@
<div class="red-content-inner">
<div class="content-container">
<div class="header-item">
<redaction-round-checkbox
<iqser-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
></iqser-round-checkbox>
<span class="all-caps-label">
{{
@ -94,7 +94,7 @@
class="table-item pointer"
>
<div (click)="toggleEntitySelected($event, dossierTemplate)" class="selection-column">
<redaction-round-checkbox [active]="isSelected(dossierTemplate)"></redaction-round-checkbox>
<iqser-round-checkbox [active]="isSelected(dossierTemplate)"></iqser-round-checkbox>
</div>
<div>

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

@ -21,11 +21,11 @@
<div class="content-container">
<div class="header-item">
<redaction-round-checkbox
<iqser-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
></iqser-round-checkbox>
<span class="all-caps-label">
{{
@ -121,7 +121,7 @@
<!-- Table lines -->
<div *cdkVirtualFor="let attribute of sortedDisplayedEntities$ | async" class="table-item">
<div (click)="toggleEntitySelected($event, attribute)" class="selection-column">
<redaction-round-checkbox [active]="isSelected(attribute)"></redaction-round-checkbox>
<iqser-round-checkbox [active]="isSelected(attribute)"></iqser-round-checkbox>
</div>
<div class="label">
@ -142,7 +142,7 @@
{{ attribute.csvColumnHeader }}
</div>
<div class="center">
<redaction-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></redaction-round-checkbox>
<iqser-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></iqser-round-checkbox>
</div>
<div class="actions-container">
<div *ngIf="permissionsService.isAdmin()" class="action-buttons">

2
apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
View File

@ -67,6 +67,6 @@ redaction-table-col-name::ng-deep {
visibility: hidden;
}
.table-item > div:not(.selection-column) redaction-round-checkbox {
.table-item > div:not(.selection-column) iqser-round-checkbox {
cursor: default;
}

6
apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
View File

@ -6,11 +6,11 @@
<div class="red-content-inner">
<div class="content-container">
<div class="header-item">
<redaction-round-checkbox
<iqser-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
></iqser-round-checkbox>
<span class="all-caps-label">
{{ 'trash.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
@ -69,7 +69,7 @@
<cdk-virtual-scroll-viewport [itemSize]="itemSize" redactionHasScrollbar>
<div *cdkVirtualFor="let entity of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
<div (click)="toggleEntitySelected($event, entity)" class="selection-column">
<redaction-round-checkbox [active]="isSelected(entity)"></redaction-round-checkbox>
<iqser-round-checkbox [active]="isSelected(entity)"></iqser-round-checkbox>
</div>
<div class="filename">

6
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
View File

@ -34,11 +34,11 @@
<div class="red-content-inner">
<div [class.extended]="collapsedDetails" class="content-container">
<div class="header-item">
<redaction-round-checkbox
<iqser-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
></iqser-round-checkbox>
<span class="all-caps-label">
{{ 'user-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
@ -83,7 +83,7 @@
<!-- Table lines -->
<div *cdkVirtualFor="let user of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
<div (click)="toggleEntitySelected($event, user)" class="selection-column">
<redaction-round-checkbox [active]="isSelected(user)"></redaction-round-checkbox>
<iqser-round-checkbox [active]="isSelected(user)"></iqser-round-checkbox>
</div>
<div>

10
apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
View File

@ -38,11 +38,11 @@
</div>
<div *ngIf="multiSelectActive" class="multi-select">
<div class="selected-wrapper">
<redaction-round-checkbox
<iqser-round-checkbox
(click)="!!selectedAnnotations?.length && selectAnnotations.emit()"
[indeterminate]="!!selectedAnnotations?.length"
type="red-bg"
></redaction-round-checkbox>
type="with-bg"
></iqser-round-checkbox>
<span class="all-caps-label">{{ selectedAnnotations?.length || 0 }} selected </span>
<redaction-annotation-actions
(annotationsChanged)="annotationsChanged.emit($event)"
@ -195,10 +195,10 @@
</div>
<div class="active-icon-marker-container">
<redaction-round-checkbox
<iqser-round-checkbox
*ngIf="multiSelectActive && isSelected(annotation)"
[active]="true"
></redaction-round-checkbox>
></iqser-round-checkbox>
</div>
</div>

2
apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss
View File

@ -59,7 +59,7 @@
display: flex;
align-items: center;
redaction-round-checkbox.inactive {
iqser-round-checkbox .wrapper.inactive {
cursor: default;
}

2
apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
View File

@ -52,7 +52,7 @@
<redaction-initials-avatar [userId]="userId" [withName]="true" size="large"></redaction-initials-avatar>
<div class="actions">
<div (click)="toggleApprover(userId, $event)" *ngIf="!isOwner(userId)" class="make-approver">
<redaction-round-checkbox [active]="isApprover(userId)" class="mr-8"></redaction-round-checkbox>
<iqser-round-checkbox [active]="isApprover(userId)" class="mr-8"></iqser-round-checkbox>
<span translate="assign-dossier-owner.dialog.make-approver"></span>
</div>
<mat-icon *ngIf="!isOwner(userId)" svgIcon="red:check"></mat-icon>

6
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
View File

@ -37,11 +37,11 @@
<div class="red-content-inner">
<div [class.extended]="collapsedDetails" class="content-container">
<div class="header-item">
<redaction-round-checkbox
<iqser-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
></iqser-round-checkbox>
<span class="all-caps-label">
{{ 'dossier-overview.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) || 0 } }}
@ -113,7 +113,7 @@
class="table-item"
>
<div (click)="toggleEntitySelected($event, fileStatus)" class="selection-column">
<redaction-round-checkbox [active]="isSelected(fileStatus)"></redaction-round-checkbox>
<iqser-round-checkbox [active]="isSelected(fileStatus)"></iqser-round-checkbox>
</div>
<div>

4
apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html
View File

@ -1,4 +0,0 @@
<div #wrapper [class.inactive]="!active && !indeterminate" [class.red-bg]="type === 'red-bg'" class="wrapper">
<mat-icon *ngIf="active && !indeterminate" svgIcon="red:radio-selected"></mat-icon>
<mat-icon *ngIf="indeterminate" svgIcon="red:radio-indeterminate"></mat-icon>
</div>

34
apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.scss
View File

@ -1,34 +0,0 @@
@import '../../../../../assets/styles/variables';
:host {
cursor: pointer;
}
.wrapper {
width: var(--size);
height: var(--size);
box-sizing: border-box;
border-radius: 50%;
&.inactive {
border: 1px solid $grey-5;
background-color: $white;
}
.mat-icon {
color: $primary;
width: var(--size);
height: var(--size);
}
&.red-bg {
.mat-icon {
color: $white;
}
&.inactive {
border: 1px solid $grey-2;
background-color: transparent;
}
}
}

29
apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts
View File

@ -1,29 +0,0 @@
import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'redaction-round-checkbox',
templateUrl: './round-checkbox.component.html',
styleUrls: ['./round-checkbox.component.scss']
})
export class RoundCheckboxComponent implements OnInit, OnChanges {
@Input() size = 20;
@Input() active: boolean;
@Input() indeterminate: boolean;
@Input() type: 'default' | 'red-bg';
@ViewChild('wrapper', { static: true }) private readonly _wrapper: ElementRef;
@HostBinding('class.active') private _activeClass: boolean;
@HostBinding('class.inactive') private _inactiveClass: boolean;
@HostBinding('class.indeterminate') private _indeterminateClass: boolean;
ngOnInit(): void {
this._wrapper.nativeElement.style.setProperty('--size', this.size + 'px');
}
ngOnChanges(): void {
this._activeClass = this.active && !this.indeterminate;
this._inactiveClass = !this.active && !this.indeterminate;
this._indeterminateClass = this.indeterminate;
}
}

4
apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
View File

@ -1,10 +1,10 @@
<div [class.selection-enabled]="selectionEnabled" class="header-item">
<redaction-round-checkbox
<iqser-round-checkbox
(click)="screenStateService.selectEntities()"
*ngIf="selectionEnabled"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></redaction-round-checkbox>
></iqser-round-checkbox>
<span class="all-caps-label">
{{ tableHeaderLabel | translate: { length: (screenStateService.displayedLength$ | async) } }}

2
apps/red-ui/src/app/modules/shared/shared.module.ts
View File

@ -22,7 +22,6 @@ import { HiddenActionComponent } from './components/hidden-action/hidden-action.
import { ConfirmationDialogComponent } from './dialogs/confirmation-dialog/confirmation-dialog.component';
import { EmptyStateComponent } from './components/empty-state/empty-state.component';
import { SortByPipe } from './pipes/sort-by.pipe';
import { RoundCheckboxComponent } from './components/checkbox/round-checkbox.component';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { SelectComponent } from './components/select/select.component';
@ -56,7 +55,6 @@ const components = [
ConfirmationDialogComponent,
EmptyStateComponent,
SortByPipe,
RoundCheckboxComponent,
SelectComponent,
SideNavComponent,
DictionaryManagerComponent,

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

@ -58,7 +58,7 @@ cdk-virtual-scroll-viewport {
&.selection-column {
padding-right: 0 !important;
redaction-round-checkbox {
iqser-round-checkbox .wrapper {
opacity: 0;
transition: opacity 0.2s;
@ -112,7 +112,7 @@ cdk-virtual-scroll-viewport {
> div {
background-color: $grey-8;
&.selection-column redaction-round-checkbox {
&.selection-column iqser-round-checkbox .wrapper {
opacity: 1;
}
}

2
libs/common-ui

@ -1 +1 @@
Subproject commit 1b81fa7153792f40d9810707884f889c449972d5
Subproject commit 1633911e1339b39f96f243885defec4a92b6e6eb