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

Pull request #18: Ui updates

Browse Source 
Merge in RED/ui from ui-updates to master

* commit '521d77dd992d11cad5d715bdd2517e13d9058ff4':
  Navigate annotations with arrows
  Sort by added on & removed material icons font
  Project listing table col names
This commit is contained in:
Timo Bejan 2020-10-23 10:01:41 +02:00
commit f3ea7f2ad4
20 changed files with 206 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,8 +14,8 @@ export class IconsModule {
private sanitizer: DomSanitizer
) {
const icons = [
'add', 'analyse', 'arrow-down', 'arrow-up', 'assign', 'calendar', 'check',
'close', 'document', 'double-chevron-right', 'download',
'add', 'analyse', 'arrow-down', 'arrow-up', 'arrow-right', 'assign', 'calendar',
'check', 'close', 'document', 'double-chevron-right', 'download',
'edit', 'error', 'folder', 'info', 'lightning', 'logout', 'menu', 'pages',
'plus', 'preview', 'refresh', 'report', 'secret', 'sort-asc', 'sort-desc',
'status', 'trash', 'user', 'check-alt'

10
apps/red-ui/src/app/screens/base-screen/base-screen.component.html
View File

@ -16,18 +16,18 @@
mat-menu-item>{{appStateService.activeFile.filename}}</button>
</mat-menu>
</div>
<div class="menu flex-2 visible-lg">
<div class="menu flex-2 visible-lg breadcrumbs-container">
<a class="breadcrumb" routerLink="/ui/projects"
translate="top-bar.navigation-items.projects.label"></a>
<div *ngIf="appStateService.activeProject" class="breadcrumb">
<mat-icon>arrow_right</mat-icon>
<mat-icon svgIcon="red:arrow-right"></mat-icon>
</div>
<a *ngIf="appStateService.activeProject" class="breadcrumb"
[routerLink]="'/ui/projects/'+appStateService.activeProjectId">
{{appStateService.activeProject.project.projectName}}
</a>
<div *ngIf="appStateService.activeFile" class="breadcrumb">
<mat-icon>arrow_right</mat-icon>
<mat-icon svgIcon="red:arrow-right"></mat-icon>
</div>
<a *ngIf="appStateService.activeFile" class="breadcrumb"
[routerLink]="'/ui/projects/'+appStateService.activeProjectId+'/file/'+appStateService.activeFile.fileId">
@ -39,9 +39,9 @@
<div class="app-name" translate="app-name.label"></div>
</div>
<div class="menu right flex-2">
<button [matMenuTriggerFor]="menu" mat-button>
<button [matMenuTriggerFor]="menu" mat-button class="arrow-button">
<redaction-initials-avatar color="red-white" size="small" [username]="user?.name" [withName]="true"></redaction-initials-avatar>
<mat-icon>arrow_drop_down</mat-icon>
<mat-icon svgIcon="red:arrow-down"></mat-icon>
</button>
<mat-menu #menu="matMenu">

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

@ -31,10 +31,10 @@
</button>
</div>
<button color="primary" mat-flat-button
<button color="primary" mat-flat-button class="arrow-button"
[matMenuTriggerFor]="downloadMenu">
<span translate="file-preview.download.label"></span>
<mat-icon>arrow_drop_down</mat-icon>
<mat-icon svgIcon="red:arrow-down"></mat-icon>
</button>
<mat-menu #downloadMenu="matMenu" xPosition="before">
<div mat-menu-item
@ -58,11 +58,13 @@
<redaction-pdf-viewer [class.visible]="activeViewer === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
[fileStatus]="appStateService.activeFile"
(fileReady)="fileReady('ANNOTATED')"
(keyUp)="handleKeyEvent($event)"
(pageChanged)="viewerPageChanged($event)"
(manualAnnotationRequested)="openManualRedactionDialog($event)"
(annotationSelected)="handleAnnotationSelected($event)"
(annotationsAdded)="handleAnnotationsAdded($event)"></redaction-pdf-viewer>
<redaction-pdf-viewer [class.visible]="activeViewer === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
(keyUp)="handleKeyEvent($event)"
(pageChanged)="viewerPageChanged($event)"
(manualAnnotationRequested)="openManualRedactionDialog($event)"
(fileReady)="fileReady('REDACTED')"></redaction-pdf-viewer>
@ -72,10 +74,10 @@
<div class="right-title heading"
translate="file-preview.tabs.annotations.label">
<div>
<button color="accent" mat-button
<button color="accent" mat-button class="arrow-button"
[matMenuTriggerFor]="filterMenu" [ngClass]="{ overlay: hasActiveFilters }">
<span translate="file-preview.filter-menu.label"></span>
<mat-icon>arrow_drop_down</mat-icon>
<mat-icon svgIcon="red:arrow-down"></mat-icon>
</button>
<div class="dot" *ngIf="hasActiveFilters"></div>
<mat-menu #filterMenu="matMenu" xPosition="before">
@ -91,9 +93,15 @@
<div *ngFor="let key of filterKeys()">
<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 *ngIf="expandedFilters[key]"
svgIcon="red:arrow-down"
color="accent"
(click)="setExpanded(key, false, $event)">
</mat-icon>
<mat-icon *ngIf="!expandedFilters[key]" (click)="setExpanded(key, true, $event)">arrow_right
<mat-icon *ngIf="!expandedFilters[key]"
color="accent"
svgIcon="red:arrow-right"
(click)="setExpanded(key, true, $event)">
</mat-icon>
</div>
<mat-checkbox [checked]="isChecked(key)"

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

@ -1,4 +1,4 @@
import { ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ManualRedactionEntry, ReanalysisControllerService } from '@redaction/red-ui-http';
import { AppStateService } from '../../../state/app-state.service';
@ -272,4 +272,36 @@ export class FilePreviewScreenComponent implements OnInit {
public isManuallyAddedAnnotation(annotation: Annotations.Annotation) {
return annotation.Id.indexOf('request:') >= 0;
}
@HostListener('window:keyup', ['$event'])
handleKeyEvent($event: KeyboardEvent) {
$event.preventDefault();
if (!this.selectedAnnotation) {
this.selectAnnotation(this.displayedAnnotations[this.displayedPages[0]].annotations[0]);
} else {
const page = this.selectedAnnotation.getPageNumber();
const pageIdx = this.displayedPages.indexOf(page);
const annotationsOnPage = this.displayedAnnotations[page].annotations;
const idx = annotationsOnPage.indexOf(this.selectedAnnotation);
if ($event.key === 'ArrowDown') {
if (idx + 1 !== annotationsOnPage.length) { // If not last item in page
this.selectAnnotation(annotationsOnPage[idx + 1]);
} else if (pageIdx + 1 < this.displayedPages.length) { // If not last page
const nextPageAnnotations = this.displayedAnnotations[this.displayedPages[pageIdx + 1]].annotations;
this.selectAnnotation(nextPageAnnotations[0]);
}
}
if ($event.key === 'ArrowUp') {
if (idx !== 0) { // If not first item in page
this.selectAnnotation(annotationsOnPage[idx - 1]);
} else if (pageIdx) { // If not first page
const prevPageAnnotations = this.displayedAnnotations[this.displayedPages[pageIdx - 1]].annotations;
this.selectAnnotation(prevPageAnnotations[prevPageAnnotations.length - 1]);
}
}
}
}
}

14
apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
View File

@ -33,6 +33,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
@Output() annotationSelected = new EventEmitter<Annotations.Annotation>();
@Output() manualAnnotationRequested = new EventEmitter<ManualRedactionEntry>();
@Output() pageChanged = new EventEmitter<number>();
@Output() keyUp = new EventEmitter<KeyboardEvent>();
@ViewChild('viewer', { static: true }) viewer: ElementRef;
wvInstance: WebViewerInstance;
@ -93,6 +94,19 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
});
instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler);
instance.docViewer.on('keyDown', ($event) => {
if ($event.key.startsWith('Arrow')) {
$event.preventDefault();
}
})
instance.docViewer.on('keyUp', ($event) => {
if ($event.key.startsWith('Arrow')) {
this.keyUp.emit($event);
}
})
instance.loadDocument(pdfBlob, { filename: this.fileStatus ? this.fileStatus.filename : 'document.pdf' });
});
}

99
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -45,58 +45,63 @@
</div>
</div>
<div class="table-col-names">
<div class="flex-2 small-label min-width" translate="project-listing.table-col-names.name.label"></div>
<div class="flex-1 small-label min-width" translate="project-listing.table-col-names.owner.label"></div>
<div class="status small-label flex-end min-width"
translate="project-listing.table-col-names.status.label"></div>
</div>
<div *ngIf="appStateService.allProjects?.length === 0 " translate="project-listing.no-projects.label"></div>
<div class="table-content">
<div *ngFor="let pw of appStateService.allProjects | sortBy:sortingOption.order:sortingOption.column"
[routerLink]="'/ui/projects/'+pw.project.projectId"
class="table-item pointer"
>
<div class="flex-2">
<div class="table-item-title table-item-title--large">
{{pw.project.projectName}}
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:document"></mat-icon>
{{documentCount(pw)}}</div>
<div>
<mat-icon svgIcon="red:user"></mat-icon>
{{userCount(pw)}}</div>
<div>
<mat-icon svgIcon="red:calendar"></mat-icon>
{{pw.project.date | date:'mediumDate'}}</div>
</div>
<div *ngFor="let pw of appStateService.allProjects | sortBy:sortingOption.order:sortingOption.column"
[routerLink]="'/ui/projects/'+pw.project.projectId"
class="table-item pointer"
>
<div class="flex-2">
<div class="table-item-title table-item-title--large">
{{pw.project.projectName}}
</div>
<div class="flex-1">
<redaction-initials-avatar [username]="getOwnerName(pw)"
color="lightgray-red"
withName="true"
></redaction-initials-avatar>
</div>
<div class="stats-bar">
<redaction-status-bar
[config]="[{ color: 'under-review', length: 2}, { length: 1, color: 'finished'}]"
></redaction-status-bar>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:document"></mat-icon>
{{documentCount(pw)}}</div>
<div>
<mat-icon svgIcon="red:user"></mat-icon>
{{userCount(pw)}}</div>
<div>
<mat-icon svgIcon="red:calendar"></mat-icon>
{{pw.project.date | date:'mediumDate'}}</div>
</div>
</div>
<div class="flex-1">
<redaction-initials-avatar [username]="getOwnerName(pw)"
color="lightgray-red"
withName="true"
></redaction-initials-avatar>
</div>
<div class="status">
<redaction-status-bar
[config]="[{ color: 'under-review', length: 2}, { length: 1, color: 'finished'}]"
></redaction-status-bar>
</div>
<div class="action-buttons">
<button mat-icon-button color="accent" (click)="openDeleteProjectDialog($event,pw.project)"
[matTooltip]="'project-listing.delete.action.label'|translate">
<mat-icon svgIcon="red:trash"></mat-icon>
</button>
<button mat-icon-button color="accent" (click)="openProjectDetailsDialog($event,pw)"
[matTooltip]="'project-listing.report.action.label'|translate">
<mat-icon svgIcon="red:report"></mat-icon>
</button>
<!-- <button mat-icon-button (click)="editProject($event,pw.project)">-->
<!-- <mat-icon svgIcon="red:edit"></mat-icon>-->
<!-- </button>-->
<button color="accent" (click)="openAssignProjectOwnerDialog($event,pw.project)" mat-icon-button
[matTooltip]="'project-listing.assign.action.label'|translate">
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
</div>
<div class="action-buttons">
<button mat-icon-button color="accent" (click)="openDeleteProjectDialog($event,pw.project)"
[matTooltip]="'project-listing.delete.action.label'|translate">
<mat-icon svgIcon="red:trash"></mat-icon>
</button>
<button mat-icon-button color="accent" (click)="openProjectDetailsDialog($event,pw)"
[matTooltip]="'project-listing.report.action.label'|translate">
<mat-icon svgIcon="red:report"></mat-icon>
</button>
<!-- <button mat-icon-button (click)="editProject($event,pw.project)">-->
<!-- <mat-icon svgIcon="red:edit"></mat-icon>-->
<!-- </button>-->
<button color="accent" (click)="openAssignProjectOwnerDialog($event,pw.project)" mat-icon-button
[matTooltip]="'project-listing.assign.action.label'|translate">
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
</div>
</div>
</div>

8
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
View File

@ -13,7 +13,7 @@
.table-item {
&:hover {
.stats-bar {
.status {
display: none;
}
}
@ -21,10 +21,10 @@
.stats-subtitle {
margin-top: 6px;
}
}
.stats-bar, .action-buttons {
width: 160px;
}
.status, .action-buttons {
width: 160px;
}
}

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

@ -51,13 +51,20 @@
</div>
</div>
<div class="table-col-names">
<div class="select-oval placeholder"></div>
<div class="flex-6 small-label min-width" translate="project-overview.table-col-names.name.label"></div>
<div class="flex-4 small-label min-width" translate="project-overview.table-col-names.added-on.label"></div>
<div class="flex-4 min-width pointer" (click)="toggleSortByAddedOn()">
<span class="small-label" translate="project-overview.table-col-names.added-on.label"></span>
<div class="sort-arrows-container">
<mat-icon svgIcon="red:arrow-up" [color]="sortingOption === sortingOptions[0] ? 'primary' : 'currentColor'"></mat-icon>
<mat-icon svgIcon="red:arrow-down" [color]="sortingOption === sortingOptions[1] ? 'primary' : 'currentColor'"></mat-icon>
</div>
</div>
<div class="flex-2 small-label min-width" translate="project-overview.table-col-names.needs-work.label"></div>
<div class="flex-2 small-label min-width" translate="project-overview.table-col-names.assigned-to.label"></div>
<div class="flex-1 small-label header-flex-end min-width"
<div class="flex-1 small-label flex-end min-width"
translate="project-overview.table-col-names.status.label"></div>
</div>

5
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
View File

@ -8,11 +8,6 @@
min-width: 60px;
}
.header-flex-end {
display: flex;
justify-content: flex-end;
}
.select-all-container {
display: flex;
gap: 16px;

6
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
View File

@ -25,6 +25,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
public sortingOptions: SortingOption[] = [
{label: 'project-overview.sorting.recent.label', order: 'desc', column: 'lastUpdated'},
{label: 'project-overview.sorting.oldest.label', order: 'asc', column: 'lastUpdated'},
{label: 'project-overview.sorting.alphabetically.label', order: 'asc', column: 'filename'},
{label: 'project-overview.sorting.number-of-pages.label', order: 'asc', column: 'numberOfPages'},
{label: 'project-overview.sorting.number-of-analyses.label', order: 'desc', column: 'numberOfAnalyses'}
@ -195,4 +196,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
public getFileOwnerUsername(fileStatus: FileStatus) {
return this._userService.getNameForId(fileStatus.currentReviewer);
}
public toggleSortByAddedOn() {
const sortedByRecent: boolean = (this.sortingOption === this.sortingOptions[0]);
this.sortingOption = sortedByRecent ? this.sortingOptions[1] : this.sortingOptions[0];
}
}

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

@ -176,6 +176,17 @@
"label": "Recent"
}
},
"table-col-names": {
"name": {
"label": "Name"
},
"owner": {
"label": "Owner"
},
"status": {
"label": "Status"
}
},
"stats": {
"analyzed-pages": {
"label": "Analyzed pages"
@ -309,6 +320,9 @@
"recent": {
"label": "Recent"
},
"oldest": {
"label": "Oldest"
},
"alphabetically": {
"label": "Alphabetically"
},

13
apps/red-ui/src/assets/icons/general/arrow-down.svg Executable file → Normal file
View File

@ -1,10 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="4px" viewBox="0 0 6 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<defs></defs>
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-156.000000, -921.000000)">
<g id="sorting-score" transform="translate(122.000000, 909.000000)" fill="currentColor">
<path d="M37.0001108,13.1581116 L34.8604385,15.1931756 C34.6640542,15.3799587 34.3452254,15.3793961 34.1482495,15.1920504 C33.9500907,15.0037201 33.9512737,14.7014634 34.147658,14.5146803 L36.6443121,12.1400873 C36.7425042,12.0466958 36.8713075,12 37.0001108,12 C37.1295056,12 37.2577173,12.0466958 37.3559095,12.1400873 L39.8525635,14.5146803 C40.0495394,14.702026 40.0489479,15.0047047 39.851972,15.1920504 C39.6538131,15.3805213 39.3361674,15.3799587 39.1397831,15.1931756 L37.0001108,13.1581116 Z" id="arrow_down" transform="translate(37.000000, 13.666667) scale(1, -1) translate(-37.000000, -13.666667) "></path>
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 426.67" width="640" height="426.67"><defs><path d="M640 0L0 0L320 426.67L640 0Z" id="c419bDOtl"></path></defs><g><g><g><use xlink:href="#c419bDOtl" opacity="1" fill-opacity="1"></use><g><use xlink:href="#c419bDOtl" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 630 B

3
apps/red-ui/src/assets/icons/general/arrow-right.svg Normal file
View File

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 300 450" width="300" height="450"><defs><path d="M0 -0.76L0 449.24L300 224.24L0 -0.76Z" id="bbDgPANXr"></path></defs><g><g><g><use xlink:href="#bbDgPANXr" opacity="1" fill-opacity="1"></use><g><use xlink:href="#bbDgPANXr" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 633 B

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

@ -1,10 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="4px" viewBox="0 0 6 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<defs></defs>
<g id="Global-Error-Expanded" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-323.000000, -409.000000)">
<g id="Group" transform="translate(160.000000, 399.000000)" fill="currentColor">
<path d="M166.000111,11.1581116 L163.860438,13.1931756 C163.664054,13.3799587 163.345225,13.3793961 163.14825,13.1920504 C162.950091,13.0037201 162.951274,12.7014634 163.147658,12.5146803 L165.644312,10.1400873 C165.742504,10.0466958 165.871308,10 166.000111,10 C166.129506,10 166.257717,10.0466958 166.355909,10.1400873 L168.852564,12.5146803 C169.049539,12.702026 169.048948,13.0047047 168.851972,13.1920504 C168.653813,13.3805213 168.336167,13.3799587 168.139783,13.1931756 L166.000111,11.1581116 Z" id="arrow_up"></path>
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 426.67" width="640" height="426.67"><defs><path d="M0 427.67L640 427.67L320 1L0 427.67Z" id="bjTkd31yo"></path></defs><g><g><g><use xlink:href="#bjTkd31yo" opacity="1" fill-opacity="1"></use><g><use xlink:href="#bjTkd31yo" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 638 B

7
apps/red-ui/src/assets/icons/general/drop-down-arrow.svg
View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>down</title>
<g id="down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Fill-1" fill="#283241" points="7 9 10 5 4 5"></polygon>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 381 B

8
apps/red-ui/src/assets/styles/red-button.scss
View File

@ -19,6 +19,7 @@
.mat-button-wrapper {
display: flex;
align-items: center;
gap: 6px;
}
}
@ -28,8 +29,13 @@
.mat-button, .mat-flat-button, .mat-icon-button {
gap: 6px;
mat-icon {
width: 14px;
}
}
.arrow-button mat-icon {
width: 9px;
margin-left: 3px;
}

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

@ -12,9 +12,12 @@
.arrow-wrapper {
width: 24px;
text-align: center;
mat-icon {
width: 14px;
width: 9px;
height: 9px;
margin: 0;
}
}

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

@ -76,6 +76,11 @@ html, body {
display: flex !important;
}
.flex-end {
display: flex;
justify-content: flex-end;
}
.flex-1 {
flex: 1;
}
@ -167,19 +172,24 @@ html, body {
}
}
.breadcrumb {
text-decoration: none;
color: $accent;
font-weight: 600;
@include line-clamp(1);
min-width: 25px;
.breadcrumbs-container {
display: flex;
gap: 8px;
&:last-child {
color: $primary;
}
.breadcrumb {
text-decoration: none;
color: $accent;
font-weight: 600;
.mat-icon {
vertical-align: middle;
&:last-child {
color: $primary;
@include line-clamp(1);
}
.mat-icon {
vertical-align: middle;
width: 6px;
}
}
}

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

@ -20,10 +20,22 @@
display: flex;
text-transform: uppercase;
border-bottom: 1px solid rgba(226, 228, 233, 0.9);
align-items: center;
> div {
padding: 8px 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.sort-arrows-container {
mat-icon {
display: block;
width: 6px;
height: 11px;
}
}
}

1
apps/red-ui/src/assets/styles/red-theme.scss
View File

@ -1,6 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import '~ngx-toastr/toastr';
@import "red-material-theme";
@import "red-page-layout";