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

Round checkbox component

Browse Source
This commit is contained in:
Adina Țeudan 2021-04-23 16:52:15 +03:00
parent 241b22f40a
commit 077284e521
36 changed files with 219 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,10 @@
<div class="header-item">
<div class="select-all-container">
<div
<redaction-round-checkbox
(click)="toggleSelectAll()"
[class.active]="areAllEntitiesSelected"
class="select-oval always-visible"
*ngIf="!areAllEntitiesSelected && !areSomeEntitiesSelected"
></div>
<mat-icon *ngIf="areAllEntitiesSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
<mat-icon
*ngIf="areSomeEntitiesSelected && !areAllEntitiesSelected"
(click)="toggleSelectAll()"
class="selection-icon"
svgIcon="red:radio-indeterminate"
></mat-icon>
[active]="areAllEntitiesSelected"
[indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected"
></redaction-round-checkbox>
</div>
<span class="all-caps-label">
{{ 'file-attributes-csv-import.table-header.title' | translate: { length: allEntities.length } }}
@ -86,9 +78,17 @@
<redaction-table-col-name label="file-attributes-csv-import.table-col-names.type"></redaction-table-col-name>
<redaction-table-col-name label="file-attributes-csv-import.table-col-names.read-only" class="flex-center" icon="red:read-only"></redaction-table-col-name>
<redaction-table-col-name
label="file-attributes-csv-import.table-col-names.read-only"
class="flex-center"
leftIcon="red:read-only"
></redaction-table-col-name>
<redaction-table-col-name label="file-attributes-csv-import.table-col-names.display" class="flex-center" icon="red:visibility"></redaction-table-col-name>
<redaction-table-col-name
label="file-attributes-csv-import.table-col-names.display"
class="flex-center"
leftIcon="red:visibility"
></redaction-table-col-name>
<div></div>
<div class="scrollbar-placeholder"></div>
@ -104,9 +104,8 @@
(mouseenter)="setHoveredColumn.emit(field.csvColumn)"
(mouseleave)="setHoveredColumn.emit()"
>
<div class="pr-0" (click)="toggleEntitySelected($event, field)">
<div *ngIf="!isEntitySelected(field)" class="select-oval"></div>
<mat-icon class="selection-icon active" *ngIf="isEntitySelected(field)" svgIcon="red:radio-selected"></mat-icon>
<div class="selection-column" (click)="toggleEntitySelected($event, field)">
<redaction-round-checkbox [active]="isEntitySelected(field)"></redaction-round-checkbox>
</div>
<div class="name" [class.editing]="field.editingName">
<div *ngIf="!field.editingName">
@ -131,7 +130,7 @@
(action)="field.editingName = false; field.name = field.temporaryName"
tooltip="file-attributes-csv-import.action.save-name"
type="dark-bg"
icon="red:check-alt"
icon="red:check"
>
</redaction-circle-button>
<redaction-circle-button

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

@ -51,7 +51,7 @@
<redaction-circle-button
*ngIf="changedParseConfig"
(action)="readFile()"
icon="red:check-alt"
icon="red:check"
tooltip="file-attributes-csv-import.parse-csv"
></redaction-circle-button>
</form>

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

@ -15,19 +15,11 @@
<div class="content-container">
<div class="header-item">
<div class="select-all-container">
<div
<redaction-round-checkbox
(click)="toggleSelectAll()"
[class.active]="areAllEntitiesSelected"
class="select-oval always-visible"
*ngIf="!areAllEntitiesSelected && !areSomeEntitiesSelected"
></div>
<mat-icon *ngIf="areAllEntitiesSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
<mat-icon
*ngIf="areSomeEntitiesSelected && !areAllEntitiesSelected"
(click)="toggleSelectAll()"
class="selection-icon"
svgIcon="red:radio-indeterminate"
></mat-icon>
[active]="areAllEntitiesSelected"
[indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected"
></redaction-round-checkbox>
</div>
<span class="all-caps-label">
@ -89,9 +81,8 @@
*cdkVirtualFor="let dict of displayedEntities | sortBy: sortingOption.order:sortingOption.column"
[routerLink]="[dict.type]"
>
<div class="pr-0" (click)="toggleEntitySelected($event, dict)">
<div *ngIf="!isEntitySelected(dict)" class="select-oval"></div>
<mat-icon class="selection-icon active" *ngIf="isEntitySelected(dict)" svgIcon="red:radio-selected"></mat-icon>
<div class="selection-column" (click)="toggleEntitySelected($event, dict)">
<redaction-round-checkbox [active]="isEntitySelected(dict)"></redaction-round-checkbox>
</div>
<div>

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

@ -127,12 +127,7 @@
</div>
<div class="changes-box" *ngIf="hasChanges && permissionsService.isAdmin()" [class.offset]="compareForm.get('active').value">
<redaction-icon-button
icon="red:check-alt"
(action)="saveEntries()"
text="dictionary-overview.save-changes"
type="primary"
></redaction-icon-button>
<redaction-icon-button icon="red:check" (action)="saveEntries()" text="dictionary-overview.save-changes" type="primary"></redaction-icon-button>
<div class="all-caps-label cancel" (click)="revert()" translate="dictionary-overview.revert-changes"></div>
</div>
</div>

2
apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
View File

@ -62,7 +62,7 @@
<div class="changes-box" [class.hidden]="!hasDigitalSignatureSet">
<redaction-icon-button
[disabled]="digitalSignatureForm.invalid"
icon="red:check-alt"
icon="red:check"
(action)="saveDigitalSignature()"
text="digital-signature-screen.action.save"
type="primary"

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

@ -13,19 +13,11 @@
<div class="content-container">
<div class="header-item">
<div class="select-all-container">
<div
<redaction-round-checkbox
(click)="toggleSelectAll()"
[class.active]="areAllEntitiesSelected"
class="select-oval always-visible"
*ngIf="!areAllEntitiesSelected && !areSomeEntitiesSelected"
></div>
<mat-icon *ngIf="areAllEntitiesSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
<mat-icon
*ngIf="areSomeEntitiesSelected && !areAllEntitiesSelected"
(click)="toggleSelectAll()"
class="selection-icon"
svgIcon="red:radio-indeterminate"
></mat-icon>
[active]="areAllEntitiesSelected"
[indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected"
></redaction-round-checkbox>
</div>
<span class="all-caps-label">
@ -75,10 +67,32 @@
column="label"
></redaction-table-col-name>
<redaction-table-col-name label="file-attributes-listing.table-col-names.read-only" class="flex-center"></redaction-table-col-name>
<redaction-table-col-name
label="file-attributes-listing.table-col-names.type"
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
column="type"
></redaction-table-col-name>
<redaction-table-col-name
label="file-attributes-listing.table-col-names.read-only"
class="flex-center"
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
column="editable"
></redaction-table-col-name>
<redaction-table-col-name label="file-attributes-listing.table-col-names.csv-column"></redaction-table-col-name>
<redaction-table-col-name
label="file-attributes-listing.table-col-names.primary"
rightIcon="red:status-info"
rightIconTooltip="file-attributes-listing.table-col-names.primary-info-tooltip"
class="flex-center"
></redaction-table-col-name>
<div></div>
<div class="scrollbar-placeholder"></div>
@ -95,14 +109,18 @@
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
<!-- Table lines -->
<div class="table-item" *cdkVirtualFor="let attribute of displayedEntities | sortBy: sortingOption.order:sortingOption.column">
<div class="pr-0" (click)="toggleEntitySelected($event, attribute)">
<div *ngIf="!isEntitySelected(attribute)" class="select-oval"></div>
<mat-icon class="selection-icon active" *ngIf="isEntitySelected(attribute)" svgIcon="red:radio-selected"></mat-icon>
<div class="selection-column" (click)="toggleEntitySelected($event, attribute)">
<redaction-round-checkbox [active]="isEntitySelected(attribute)"></redaction-round-checkbox>
</div>
<div class="label">
<span>{{ attribute.label }}</span>
</div>
<div class="small-label">
Free text
</div>
<div class="center read-only">
<mat-icon
svgIcon="red:read-only"
@ -111,9 +129,12 @@
matTooltipPosition="above"
></mat-icon>
</div>
<div>
<div class="small-label">
{{ attribute.csvColumnHeader }}
</div>
<div class="center">
<redaction-round-checkbox *ngIf="attribute.visible" [size]="18" [active]="true"></redaction-round-checkbox>
</div>
<div class="actions-container">
<div class="action-buttons">
<redaction-circle-button

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

@ -32,7 +32,7 @@ redaction-table-col-name::ng-deep {
cdk-virtual-scroll-viewport {
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 2fr 1fr 2fr 3fr 11px;
grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 11px;
.table-item {
> div:not(.scrollbar-placeholder) {
@ -58,7 +58,7 @@ redaction-table-col-name::ng-deep {
&.has-scrollbar:hover {
::ng-deep.cdk-virtual-scroll-content-wrapper {
grid-template-columns: auto 2fr 1fr 2fr 3fr;
grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr;
}
}
}

21
apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
View File

@ -28,19 +28,11 @@
<div class="content-container">
<div class="header-item">
<div class="select-all-container">
<div
<redaction-round-checkbox
(click)="toggleSelectAll()"
[class.active]="areAllEntitiesSelected"
class="select-oval always-visible"
*ngIf="!areAllEntitiesSelected && !areSomeEntitiesSelected"
></div>
<mat-icon *ngIf="areAllEntitiesSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
<mat-icon
*ngIf="areSomeEntitiesSelected && !areAllEntitiesSelected"
(click)="toggleSelectAll()"
class="selection-icon"
svgIcon="red:radio-indeterminate"
></mat-icon>
[active]="areAllEntitiesSelected"
[indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected"
></redaction-round-checkbox>
</div>
<span class="all-caps-label">
@ -90,9 +82,8 @@
*cdkVirtualFor="let ruleSet of displayedEntities | sortBy: sortingOption.order:sortingOption.column"
[routerLink]="[ruleSet.ruleSetId, 'dictionaries']"
>
<div class="pr-0" (click)="toggleEntitySelected($event, ruleSet)">
<div *ngIf="!isEntitySelected(ruleSet)" class="select-oval"></div>
<mat-icon class="selection-icon active" *ngIf="isEntitySelected(ruleSet)" svgIcon="red:radio-selected"></mat-icon>
<div class="selection-column" (click)="toggleEntitySelected($event, ruleSet)">
<redaction-round-checkbox [active]="isEntitySelected(ruleSet)"></redaction-round-checkbox>
</div>
<div>

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

@ -27,7 +27,7 @@
</ace-editor>
</div>
<div class="changes-box" *ngIf="hasChanges && permissionsService.isAdmin()">
<redaction-icon-button icon="red:check-alt" (action)="save()" text="rules-screen.save-changes" type="primary"></redaction-icon-button>
<redaction-icon-button icon="red:check" (action)="save()" text="rules-screen.save-changes" type="primary"></redaction-icon-button>
<div (click)="revert()" translate="rules-screen.revert-changes" class="all-caps-label cancel"></div>
</div>
</div>

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

@ -26,20 +26,13 @@
<div class="content-container" [class.extended]="collapsedDetails">
<div class="header-item">
<div class="select-all-container">
<div
<redaction-round-checkbox
(click)="toggleSelectAll()"
[class.active]="areAllEntitiesSelected"
class="select-oval always-visible"
*ngIf="!areAllEntitiesSelected && !areSomeEntitiesSelected"
></div>
<mat-icon *ngIf="areAllEntitiesSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
<mat-icon
*ngIf="areSomeEntitiesSelected && !areAllEntitiesSelected"
(click)="toggleSelectAll()"
class="selection-icon"
svgIcon="red:radio-indeterminate"
></mat-icon>
[active]="areAllEntitiesSelected"
[indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected"
></redaction-round-checkbox>
</div>
<span class="all-caps-label">
{{ 'user-listing.table-header.title' | translate: { length: displayedEntities.length } }}
</span>
@ -78,10 +71,10 @@
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
<!-- Table lines -->
<div class="table-item" *cdkVirtualFor="let user of displayedEntities">
<div class="pr-0" (click)="toggleEntitySelected($event, user)">
<div *ngIf="!isEntitySelected(user)" class="select-oval"></div>
<mat-icon class="selection-icon active" *ngIf="isEntitySelected(user)" svgIcon="red:radio-selected"></mat-icon>
<div class="selection-column" (click)="toggleEntitySelected($event, user)">
<redaction-round-checkbox [active]="isEntitySelected(user)"></redaction-round-checkbox>
</div>
<div>
<redaction-initials-avatar [user]="user" [withName]="true" [showYou]="true"></redaction-initials-avatar>
</div>

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

@ -16,7 +16,7 @@
<div class="changes-box" *ngIf="changed && permissionsService.isAdmin()">
<redaction-icon-button
[disabled]="configForm.invalid"
icon="red:check-alt"
icon="red:check"
(action)="save()"
text="watermark-screen.action.save"
type="primary"

1
apps/red-ui/src/app/modules/icons/icons.module.ts
View File

@ -23,7 +23,6 @@ export class IconsModule {
'calendar',
'case-sensitive',
'check',
'check-alt',
'close',
'collapse',
'color-picker',

4
apps/red-ui/src/app/modules/projects/components/annotation-actions/annotation-actions.component.html
View File

@ -15,7 +15,7 @@
*ngIf="annotationPermissions.canAcceptRecommendation"
tooltipPosition="before"
tooltip="annotation-actions.accept-recommendation.label"
icon="red:check-alt"
icon="red:check"
>
</redaction-circle-button>
@ -35,7 +35,7 @@
*ngIf="annotationPermissions.canAcceptSuggestion"
tooltipPosition="before"
tooltip="annotation-actions.accept-suggestion.label"
icon="red:check-alt"
icon="red:check"
>
</redaction-circle-button>

2
apps/red-ui/src/app/modules/projects/components/comments/comments.component.html
View File

@ -35,7 +35,7 @@
</form>
<div *ngIf="addingComment" class="comment-actions-container">
<redaction-circle-button (action)="addComment()" [disabled]="!commentForm.value.comment" icon="red:check-alt" type="primary"></redaction-circle-button>
<redaction-circle-button (action)="addComment()" [disabled]="!commentForm.value.comment" icon="red:check" type="primary"></redaction-circle-button>
<div (click)="toggleAddingComment($event)" class="all-caps-label cancel" translate="comments.cancel"></div>
</div>
</div>

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

@ -18,13 +18,11 @@
<div class="right-content">
<div *ngIf="multiSelectActive" class="multi-select">
<div class="selected-wrapper">
<div *ngIf="!selectedAnnotations?.length" class="select-oval always-visible primary-bg"></div>
<mat-icon
*ngIf="selectedAnnotations?.length"
(click)="selectAnnotations.emit()"
class="selection-icon"
svgIcon="red:radio-indeterminate"
></mat-icon>
<redaction-round-checkbox
type="red-bg"
[indeterminate]="!!selectedAnnotations?.length"
(click)="!!selectedAnnotations?.length && selectAnnotations.emit()"
></redaction-round-checkbox>
<span class="all-caps-label">{{ selectedAnnotations?.length || 0 }} selected </span>
<redaction-annotation-remove-actions
*ngIf="selectedAnnotations?.length > 0"
@ -138,11 +136,10 @@
>
</ng-container>
<div class="active-icon-marker-container">
<mat-icon
class="active-icon-marker"
<redaction-round-checkbox
*ngIf="multiSelectActive && annotationIsSelected(annotation)"
svgIcon="red:check"
></mat-icon>
[active]="true"
></redaction-round-checkbox>
</div>
</div>
</redaction-hidden-action>

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

@ -22,19 +22,14 @@
display: flex;
align-items: center;
.select-oval,
.selection-icon {
margin-right: 8px;
color: inherit;
redaction-round-checkbox.inactive {
cursor: default;
}
.all-caps-label {
margin: 0 16px 0 8px;
opacity: 1;
}
redaction-annotation-remove-actions {
margin-left: 16px;
}
}
}
@ -132,12 +127,6 @@
.active-icon-marker-container {
min-width: 20px;
.active-icon-marker {
color: $primary;
width: 20px;
height: 20px;
}
}
&.active {

1
apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts
View File

@ -6,7 +6,6 @@ import { MatDialogRef, MatDialogState } from '@angular/material/dialog';
import scrollIntoView from 'scroll-into-view-if-needed';
import { debounce } from '../../../../utils/debounce';
import { FileDataModel } from '../../../../models/file/file-data.model';
import { AnnotationPermissions } from '../../../../models/file/annotation.permissions';
import { PermissionsService } from '../../../../services/permissions.service';
const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];

2
apps/red-ui/src/app/modules/projects/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
View File

@ -36,7 +36,7 @@
<div class="members-list">
<div *ngFor="let userId of multiUsersSelectOptions" [class.selected]="isMemberSelected(userId)" (click)="toggleSelected(userId)">
<redaction-initials-avatar [userId]="userId" [withName]="true" size="large"></redaction-initials-avatar>
<mat-icon svgIcon="red:check-alt" class="add"></mat-icon>
<mat-icon svgIcon="red:check" class="add"></mat-icon>
<mat-icon svgIcon="red:close" class="remove"></mat-icon>
</div>
</div>

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

@ -102,7 +102,7 @@
<redaction-circle-button
(action)="assignReviewer()"
*ngIf="editingReviewer"
icon="red:check-alt"
icon="red:check"
tooltip="file-preview.save-assign-reviewer"
tooltipPosition="below"
>

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

@ -85,19 +85,11 @@
<div class="content-container" [class.extended]="collapsedDetails">
<div class="header-item">
<div class="select-all-container">
<div
<redaction-round-checkbox
(click)="toggleSelectAll()"
[class.active]="areAllEntitiesSelected"
class="select-oval always-visible"
*ngIf="!areAllEntitiesSelected && !areSomeEntitiesSelected"
></div>
<mat-icon *ngIf="areAllEntitiesSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
<mat-icon
*ngIf="areSomeEntitiesSelected && !areAllEntitiesSelected"
(click)="toggleSelectAll()"
class="selection-icon"
svgIcon="red:radio-indeterminate"
></mat-icon>
[active]="areAllEntitiesSelected"
[indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected"
></redaction-round-checkbox>
</div>
<span class="all-caps-label">
@ -178,9 +170,8 @@
class="table-item"
[class.disabled]="fileStatus.isExcluded"
>
<div class="pr-0" (click)="toggleEntitySelected($event, fileStatus)">
<div *ngIf="!isEntitySelected(fileStatus)" class="select-oval"></div>
<mat-icon class="selection-icon active" *ngIf="isEntitySelected(fileStatus)" svgIcon="red:radio-selected"></mat-icon>
<div class="selection-column" (click)="toggleEntitySelected($event, fileStatus)">
<redaction-round-checkbox [active]="isEntitySelected(fileStatus)"></redaction-round-checkbox>
</div>
<div [title]="'[' + fileStatus.status + '] ' + fileStatus.filename">

4
apps/red-ui/src/app/modules/projects/services/annotation-actions.service.ts
View File

@ -127,7 +127,7 @@ export class AnnotationActionsService {
if (canAcceptRecommendation) {
availableActions.push({
type: 'actionButton',
img: '/assets/icons/general/check-alt.svg',
img: '/assets/icons/general/check.svg',
title: this._translateService.instant('annotation-actions.accept-recommendation.label'),
onClick: () => {
this._ngZone.run(() => {
@ -141,7 +141,7 @@ export class AnnotationActionsService {
if (canAcceptSuggestion) {
availableActions.push({
type: 'actionButton',
img: '/assets/icons/general/check-alt.svg',
img: '/assets/icons/general/check.svg',
title: this._translateService.instant('annotation-actions.accept-suggestion.label'),
onClick: () => {
this._ngZone.run(() => {

2
apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts
View File

@ -17,7 +17,7 @@ export class AnnotationIconComponent implements OnInit {
constructor() {}
ngOnInit() {
this.icon.nativeElement.style.setProperty('--color', this.backgroundColor, '');
this.icon.nativeElement.style.setProperty('--color', this.backgroundColor);
}
public get isHint() {

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

@ -0,0 +1,4 @@
<div class="wrapper" #wrapper [class.inactive]="!active && !indeterminate" [class.red-bg]="type === 'red-bg'">
<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 Normal file
View File

@ -0,0 +1,34 @@
@import '../../../../../assets/styles/red-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;
}
}
}

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

@ -0,0 +1,31 @@
import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, SimpleChanges, 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 }) _wrapper: ElementRef;
@HostBinding('class.active') _activeClass: boolean;
@HostBinding('class.inactive') _inactiveClass: boolean;
@HostBinding('class.indeterminate') _indeterminateClass: boolean;
constructor() {}
ngOnInit(): void {
this._wrapper.nativeElement.style.setProperty('--size', this.size + 'px');
}
ngOnChanges(changes: SimpleChanges): void {
this._activeClass = this.active && !this.indeterminate;
this._inactiveClass = !this.active && !this.indeterminate;
this._indeterminateClass = this.indeterminate;
}
}

3
apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
View File

@ -1,6 +1,7 @@
<div (click)="withSort && toggleSort.emit(column)" [class.pointer]="withSort" [ngClass]="class">
<mat-icon *ngIf="!!icon" [svgIcon]="icon"></mat-icon>
<mat-icon *ngIf="!!leftIcon" [svgIcon]="leftIcon"></mat-icon>
<span [translate]="label" class="all-caps-label"></span>
<mat-icon *ngIf="!!rightIcon" [svgIcon]="rightIcon" [matTooltip]="rightIconTooltip | translate" matTooltipPosition="above"></mat-icon>
<div class="sort-arrows-container" *ngIf="withSort" [class.force-display]="activeSortingOption.column === column">
<mat-icon *ngIf="activeSortingOption?.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
<mat-icon *ngIf="activeSortingOption?.order === 'desc'" svgIcon="red:sort-desc"></mat-icon>

4
apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss
View File

@ -17,6 +17,10 @@
height: 10px;
margin-right: 6px;
opacity: 0.7;
&:not(:first-child) {
margin-left: 6px;
}
}
}

5
apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.ts
View File

@ -12,7 +12,10 @@ export class TableColNameComponent implements OnInit {
@Input() public label: string;
@Input() public withSort = false;
@Input() public class: string;
@Input() public icon: string;
@Input() public leftIcon: string;
@Input() public rightIcon: string;
@Input() public rightIconTooltip: string;
@Output() public toggleSort = new EventEmitter<string>();
constructor() {}

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

@ -28,6 +28,7 @@ import { FilterComponent } from './components/filter/filter.component';
import { EmptyStateComponent } from './components/empty-state/empty-state.component';
import { BaseListingComponent } from './base/base-listing.component';
import { SortByPipe } from './components/sort-pipe/sort-by.pipe';
import { RoundCheckboxComponent } from './components/checkbox/round-checkbox.component';
const buttons = [ChevronButtonComponent, CircleButtonComponent, FileDownloadBtnComponent, IconButtonComponent, UserButtonComponent];
@ -47,6 +48,7 @@ const components = [
EmptyStateComponent,
BaseListingComponent,
SortByPipe,
RoundCheckboxComponent,
...buttons
];
@ -58,6 +60,6 @@ const modules = [MatConfigModule, TranslateModule, ScrollingModule, IconsModule,
@NgModule({
declarations: [...components, ...utils],
imports: [CommonModule, ...modules],
exports: [...modules, ...components, ...utils]
exports: [...modules, ...components, ...utils, RoundCheckboxComponent]
})
export class SharedModule {}

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

@ -780,9 +780,11 @@
},
"table-col-names": {
"name": "Name",
"created-by": "Created by",
"type": "Input Type",
"read-only": "Read-Only",
"csv-column": "CSV Column"
"csv-column": "CSV Column",
"primary": "Primary",
"primary-info-tooltip": "The value of the attribute set as primary shows up under the file name in the documents list."
},
"no-data": {
"title": "There are no file attributes yet."

2
apps/red-ui/src/assets/icons/general/arrow-up.svg
View File

@ -9,8 +9,6 @@
id="svg101">
<defs
id="defs105" />
<title
id="title92">arrow-up</title>
<g
id="Styleguide"
stroke="none"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 962 B

After

Width:  |  Height:  |  Size: 918 B

10
apps/red-ui/src/assets/icons/general/check-alt.svg
View File

@ -1,10 +0,0 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<g>
<g>
<path d="M421.876,56.307c-6.548-6.78-17.352-6.968-24.132-0.42c-0.142,0.137-0.282,0.277-0.42,0.42L119.257,334.375
l-90.334-90.334c-6.78-6.548-17.584-6.36-24.132,0.42c-6.388,6.614-6.388,17.099,0,23.713l102.4,102.4
c6.665,6.663,17.468,6.663,24.132,0L421.456,80.44C428.236,73.891,428.424,63.087,421.876,56.307z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 535 B

18
apps/red-ui/src/assets/icons/general/check.svg Executable file → Normal file
View File

@ -1,10 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
<defs></defs>
<g id="Upload" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Upload-05" transform="translate(-1388.000000, -675.000000)" fill="currentColor">
<path d="M1398.0001,675 C1393.95533,675 1390.3095,677.43651 1388.76152,681.172741 C1387.2138,684.910305 1388.06899,689.211331 1390.92923,692.07077 C1393.78867,694.93101 1398.08969,695.786201 1401.82726,694.238483 C1405.56349,692.690498 1408,689.044666 1408,684.999904 C1408,679.477024 1403.52298,675 1398.0001,675 Z M1402.8587,682.154871 L1396.49861,688.743106 C1396.30995,688.937483 1396.00579,688.937483 1395.81687,688.743106 L1392.58535,685.39701 C1392.39748,685.201551 1392.39748,684.886433 1392.58535,684.690703 L1392.768,684.50147 C1392.95692,684.306822 1393.26108,684.306822 1393.44974,684.50147 L1396.16388,687.305855 L1401.99405,681.256894 C1402.18297,681.062517 1402.48713,681.062517 1402.67605,681.256894 L1402.8587,681.446397 C1403.04762,681.641857 1403.04658,681.959141 1402.8587,682.154871 Z" id="check_icon"></path>
</g>
</g>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<g>
<g>
<path d="M421.876,56.307c-6.548-6.78-17.352-6.968-24.132-0.42c-0.142,0.137-0.282,0.277-0.42,0.42L119.257,334.375
l-90.334-90.334c-6.78-6.548-17.584-6.36-24.132,0.42c-6.388,6.614-6.388,17.099,0,23.713l102.4,102.4
c6.665,6.663,17.468,6.663,24.132,0L421.456,80.44C428.236,73.891,428.424,63.087,421.876,56.307z"/>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 535 B

26
apps/red-ui/src/assets/styles/red-components.scss
View File

@ -179,29 +179,3 @@
stroke: $red-1;
background-color: $red-1;
}
.select-oval {
width: 20px;
height: 20px;
box-sizing: border-box;
border-radius: 50%;
border: 1px solid $grey-5;
background-color: $white;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
&.always-visible {
opacity: 1;
}
&.primary-bg {
background-color: transparent;
}
}
.selection-icon {
width: 20px !important;
color: $primary;
cursor: pointer;
}

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

@ -311,10 +311,6 @@ body {
align-items: center;
}
.pr-0 {
padding-right: 0 !important;
}
.mr-8 {
margin-right: 8px !important;
}

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

@ -47,9 +47,22 @@ cdk-virtual-scroll-viewport {
border-bottom: 1px solid $separator;
padding: 0 13px;
&:not(.scrollbar-placeholder):not(.pr-0) {
&:not(.scrollbar-placeholder):not(.selection-column) {
min-width: 110px;
}
&.selection-column {
padding-right: 0 !important;
redaction-round-checkbox {
opacity: 0;
transition: opacity 0.2s;
&.active {
opacity: 1;
}
}
}
}
.table-item-title {
@ -94,10 +107,10 @@ cdk-virtual-scroll-viewport {
&:hover {
> div {
background-color: #f9fafb;
}
.select-oval {
opacity: 1;
&.selection-column redaction-round-checkbox {
opacity: 1;
}
}
.action-buttons {