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

Extracted some components & styles to common

Browse Source
This commit is contained in:
Adina Țeudan 2021-10-02 17:16:06 +03:00
parent b73b9fb637
commit c3a9d4ac8b
54 changed files with 158 additions and 1000 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
import { AuthGuard } from './modules/auth/auth.guard';
import { CompositeRouteGuard } from '@guards/composite-route.guard';
import { CompositeRouteGuard } from '@iqser/common-ui';
import { RedRoleGuard } from './modules/auth/red-role.guard';
import { BaseScreenComponent } from '@components/base-screen/base-screen.component';
import { RouteReuseStrategy, RouterModule } from '@angular/router';

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

@ -14,7 +14,6 @@ import { ToastrModule } from 'ngx-toastr';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '@environments/environment';
import { AuthModule } from './modules/auth/auth.module';
import { LogoComponent } from '@components/logo/logo.component';
import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
import { ToastComponent } from '@components/toast/toast.component';
import { HttpCacheInterceptor } from '@redaction/red-cache';
@ -55,15 +54,7 @@ function cleanupBaseUrl(baseUrl: string) {
const screens = [BaseScreenComponent, DownloadsListScreenComponent, UserProfileScreenComponent];
const components = [
AppComponent,
LogoComponent,
AuthErrorComponent,
ToastComponent,
NotificationsComponent,
SpotlightSearchComponent,
...screens
];
const components = [AppComponent, AuthErrorComponent, ToastComponent, NotificationsComponent, SpotlightSearchComponent, ...screens];
@NgModule({
declarations: [...components],

193
apps/red-ui/src/app/components/base-screen/base-screen.component.html
View File

@ -1,112 +1,105 @@
<iqser-help-mode *ngIf="userPreferenceService.areDevFeaturesEnabled"></iqser-help-mode>
<div class="red-top-bar">
<div class="top-bar-row">
<div *ngIf="!currentUser.isUser" class="menu-placeholder"></div>
<div class="top-bar">
<div *ngIf="!currentUser.isUser" class="menu-placeholder"></div>
<div *ngIf="currentUser.isUser" class="menu visible-lt-lg">
<button [matMenuTriggerFor]="menuNav" mat-flat-button>
<mat-icon svgIcon="red:menu"></mat-icon>
<div *ngIf="currentUser.isUser" class="menu visible-lt-lg">
<button [matMenuTriggerFor]="menuNav" mat-flat-button>
<mat-icon svgIcon="red:menu"></mat-icon>
</button>
<mat-menu #menuNav="matMenu">
<button mat-menu-item routerLink="/main/dossiers" translate="top-bar.navigation-items.dossiers"></button>
<button *ngIf="appStateService.activeDossier" [routerLink]="'/main/dossiers/' + appStateService.activeDossierId" mat-menu-item>
{{ appStateService.activeDossier.dossierName }}
</button>
<mat-menu #menuNav="matMenu">
<button mat-menu-item routerLink="/main/dossiers" translate="top-bar.navigation-items.dossiers"></button>
<button
*ngIf="appStateService.activeDossier"
[routerLink]="'/main/dossiers/' + appStateService.activeDossierId"
mat-menu-item
>
{{ appStateService.activeDossier.dossierName }}
</button>
<button
*ngIf="appStateService.activeFile"
[routerLink]="'/main/dossiers/' + appStateService.activeDossierId + '/file/' + appStateService.activeFile.fileId"
mat-menu-item
>
{{ appStateService.activeFile.filename }}
</button>
</mat-menu>
</div>
<button
*ngIf="appStateService.activeFile"
[routerLink]="'/main/dossiers/' + appStateService.activeDossierId + '/file/' + appStateService.activeFile.fileId"
mat-menu-item
>
{{ appStateService.activeFile.filename }}
</button>
</mat-menu>
</div>
<div *ngIf="currentUser.isUser" class="menu flex-2 visible-lg breadcrumbs-container">
<a *ngIf="(isDossiersView$ | async) === false" class="breadcrumb back" redactionNavigateLastDossiersScreen>
<mat-icon svgIcon="red:expand"></mat-icon>
{{ 'top-bar.navigation-items.back' | translate }}
<div *ngIf="currentUser.isUser" class="menu flex-2 visible-lg breadcrumbs-container">
<a *ngIf="(isDossiersView$ | async) === false" class="breadcrumb back" redactionNavigateLastDossiersScreen>
<mat-icon svgIcon="red:expand"></mat-icon>
{{ 'top-bar.navigation-items.back' | translate }}
</a>
<ng-container *ngIf="isDossiersView$ | async">
<a
[routerLinkActiveOptions]="{ exact: true }"
class="breadcrumb"
routerLink="/main/dossiers"
routerLinkActive="active"
translate="top-bar.navigation-items.dossiers"
></a>
<mat-icon *ngIf="appStateService.activeDossier" svgIcon="red:arrow-right"></mat-icon>
<a
*ngIf="appStateService.activeDossier"
[routerLinkActiveOptions]="{ exact: true }"
[routerLink]="'/main/dossiers/' + appStateService.activeDossierId"
class="breadcrumb"
routerLinkActive="active"
>
{{ appStateService.activeDossier.dossierName }}
</a>
<ng-container *ngIf="isDossiersView$ | async">
<a
[routerLinkActiveOptions]="{ exact: true }"
class="breadcrumb"
routerLink="/main/dossiers"
routerLinkActive="active"
translate="top-bar.navigation-items.dossiers"
></a>
<mat-icon *ngIf="appStateService.activeFile" svgIcon="red:arrow-right"></mat-icon>
<mat-icon *ngIf="appStateService.activeDossier" svgIcon="red:arrow-right"></mat-icon>
<a
*ngIf="appStateService.activeDossier"
[routerLinkActiveOptions]="{ exact: true }"
[routerLink]="'/main/dossiers/' + appStateService.activeDossierId"
class="breadcrumb"
routerLinkActive="active"
>
{{ appStateService.activeDossier.dossierName }}
</a>
<mat-icon *ngIf="appStateService.activeFile" svgIcon="red:arrow-right"></mat-icon>
<a
*ngIf="appStateService.activeFile"
[routerLink]="'/main/dossiers/' + appStateService.activeDossierId + '/file/' + appStateService.activeFile.fileId"
class="breadcrumb"
routerLinkActive="active"
>
{{ appStateService.activeFile.filename }}
</a>
</ng-container>
</div>
<div class="center logo-wrapper">
<redaction-hidden-action (action)="userPreferenceService.toggleDevFeatures()">
<redaction-logo></redaction-logo>
</redaction-hidden-action>
<div class="app-name">{{ titleService.getTitle() }}</div>
</div>
<div class="menu right flex-2">
<div class="buttons">
<redaction-spotlight-search
*ngIf="(isSearchScreen$ | async) === false"
[placeholder]="'search.placeholder' | translate"
[actions]="searchActions"
iqserHelpMode="search"
></redaction-spotlight-search>
<redaction-notifications iqserHelpMode="notifications"></redaction-notifications>
</div>
<redaction-user-button
[matMenuTriggerFor]="userMenu"
[showDot]="fileDownloadService.hasPendingDownloads"
[userId]="currentUser.id"
iqserHelpMode="user-menu"
></redaction-user-button>
<mat-menu #userMenu="matMenu" xPosition="before">
<ng-container *ngFor="let item of userMenuItems; trackBy: trackByName">
<button (click)="(item.action)" *ngIf="item.show" [routerLink]="item.routerLink" mat-menu-item translate>
{{ item.name }}
</button>
</ng-container>
<button (click)="userService.logout()" mat-menu-item>
<mat-icon svgIcon="red:logout"></mat-icon>
<span translate="top-bar.navigation-items.my-account.children.logout"> </span>
</button>
</mat-menu>
</div>
<a
*ngIf="appStateService.activeFile"
[routerLink]="'/main/dossiers/' + appStateService.activeDossierId + '/file/' + appStateService.activeFile.fileId"
class="breadcrumb"
routerLinkActive="active"
>
{{ appStateService.activeFile.filename }}
</a>
</ng-container>
</div>
<div class="center">
<iqser-hidden-action (action)="userPreferenceService.toggleDevFeatures()">
<iqser-logo icon="red:logo"></iqser-logo>
</iqser-hidden-action>
<div class="app-name">{{ titleService.getTitle() }}</div>
</div>
<div class="menu right flex-2">
<div class="buttons">
<redaction-spotlight-search
*ngIf="(isSearchScreen$ | async) === false"
[actions]="searchActions"
[placeholder]="'search.placeholder' | translate"
iqserHelpMode="search"
></redaction-spotlight-search>
<redaction-notifications iqserHelpMode="notifications"></redaction-notifications>
</div>
<redaction-user-button
[matMenuTriggerFor]="userMenu"
[showDot]="fileDownloadService.hasPendingDownloads"
[userId]="currentUser.id"
iqserHelpMode="user-menu"
></redaction-user-button>
<mat-menu #userMenu="matMenu" xPosition="before">
<ng-container *ngFor="let item of userMenuItems; trackBy: trackByName">
<button (click)="(item.action)" *ngIf="item.show" [routerLink]="item.routerLink" mat-menu-item translate>
{{ item.name }}
</button>
</ng-container>
<button (click)="userService.logout()" mat-menu-item>
<mat-icon svgIcon="red:logout"></mat-icon>
<span translate="top-bar.navigation-items.my-account.children.logout"> </span>
</button>
</mat-menu>
</div>
<div class="divider"></div>
</div>
<div *ngIf="userPreferenceService.areDevFeaturesEnabled" class="dev-mode" translate="dev-mode"></div>

36
apps/red-ui/src/app/components/base-screen/base-screen.component.scss
View File

@ -1,39 +1,3 @@
@use 'variables';
.dev-mode {
background-color: variables.$primary;
color: variables.$white;
font-size: 22px;
line-height: 16px;
text-align: center;
position: fixed;
top: 0;
z-index: 100;
right: 0;
height: 61px;
word-break: break-all;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
width: 24px;
font-weight: bold;
}
.menu-placeholder {
display: flex;
flex: 2;
}
.buttons {
display: flex;
margin-right: 8px;
> *:not(:last-child) {
margin-right: 2px;
}
}
redaction-spotlight-search {
margin-right: 16px !important;
}

24
apps/red-ui/src/app/components/base-screen/base-screen.component.ts
View File

@ -26,15 +26,7 @@ const isSearchScreen = url => url.includes('/main/dossiers') && url.includes('/s
styleUrls: ['./base-screen.component.scss']
})
export class BaseScreenComponent {
private readonly _navigationStart$ = this._router.events.pipe(
filter(isNavigationStart),
map((event: NavigationStart) => event.url),
startWith(this._router.url),
distinctUntilChanged()
);
readonly currentUser = this.userService.currentUser;
readonly isDossiersView$ = this._navigationStart$.pipe(map(isDossiersView));
readonly isSearchScreen$ = this._navigationStart$.pipe(map(isSearchScreen));
readonly userMenuItems: readonly MenuItem[] = [
{
name: _('top-bar.navigation-items.my-account.children.my-profile'),
@ -71,6 +63,14 @@ export class BaseScreenComponent {
action: (query): void => this._search(query)
}
];
private readonly _navigationStart$ = this._router.events.pipe(
filter(isNavigationStart),
map((event: NavigationStart) => event.url),
startWith(this._router.url),
distinctUntilChanged()
);
readonly isDossiersView$ = this._navigationStart$.pipe(map(isDossiersView));
readonly isSearchScreen$ = this._navigationStart$.pipe(map(isSearchScreen));
constructor(
readonly appStateService: AppStateService,
@ -82,12 +82,12 @@ export class BaseScreenComponent {
private readonly _translateService: TranslateService
) {}
trackByName(index: number, item: MenuItem) {
return item.name;
}
private _search(query: string, dossierId?: string) {
const queryParams = { query, dossierId };
this._router.navigate(['main/dossiers/search'], { queryParams }).then();
}
trackByName(index: number, item: MenuItem) {
return item.name;
}
}

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

@ -4,7 +4,7 @@
[showCloseButton]="true"
></redaction-page-header>
<div class="red-content-inner">
<div class="content-inner">
<div class="content-container">
<iqser-table
[bulkActions]="bulkActions"

1
apps/red-ui/src/app/components/logo/logo.component.html
View File

@ -1 +0,0 @@
<mat-icon svgIcon="red:logo"></mat-icon>

10
apps/red-ui/src/app/components/logo/logo.component.scss
View File

@ -1,10 +0,0 @@
@use 'variables';
:host {
color: variables.$primary;
}
mat-icon {
width: 28px;
height: 28px;
}

8
apps/red-ui/src/app/components/logo/logo.component.ts
View File

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'redaction-logo',
templateUrl: './logo.component.html',
styleUrls: ['./logo.component.scss']
})
export class LogoComponent {}

2
apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
View File

@ -4,7 +4,7 @@
[placeholder]="placeholder"
></iqser-input-with-action>
<mat-menu #menu="matMenu" xPosition="after">
<mat-menu #menu="matMenu" class="search-menu" xPosition="after">
<ng-template matMenuContent>
<div class="wrapper">
<button

2
apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
View File

@ -22,7 +22,7 @@
width: 300px;
}
::ng-deep .mat-menu-content {
::ng-deep.search-menu .mat-menu-content {
padding: 8px !important;
}

2
apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html
View File

@ -1,4 +1,4 @@
<section class="red-content-inner">
<section class="content-inner">
<div class="content-container full-height">
<div class="overlay-shadow"></div>
<div class="dialog">

40
apps/red-ui/src/app/guards/composite-route.guard.ts
View File

@ -1,40 +0,0 @@
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Injectable, Injector } from '@angular/core';
import { from, of } from 'rxjs';
import { LoadingService } from '@iqser/common-ui';
@Injectable({
providedIn: 'root'
})
export class CompositeRouteGuard implements CanActivate {
constructor(protected readonly _injector: Injector, private readonly _loadingService: LoadingService) {}
async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
this._loadingService.start();
const routeGuards = route.data.routeGuards;
if (routeGuards) {
for (let i = 0; i < routeGuards.length; i++) {
const routeGuard = this._injector.get<CanActivate>(routeGuards[i]);
let canActivateResult = routeGuard.canActivate(route, state);
if (canActivateResult instanceof Promise) {
canActivateResult = from(canActivateResult);
}
if (typeof canActivateResult === 'boolean' || canActivateResult instanceof UrlTree) {
canActivateResult = of(canActivateResult);
}
const result = await canActivateResult.toPromise();
if (!result) {
this._loadingService.stop();
return false;
}
}
}
this._loadingService.stop();
return true;
}
}

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

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { AuthGuard } from '../auth/auth.guard';
import { CompositeRouteGuard } from '@guards/composite-route.guard';
import { CompositeRouteGuard } from '@iqser/common-ui';
import { RedRoleGuard } from '../auth/red-role.guard';
import { AppStateGuard } from '@state/app-state.guard';
import { DossierTemplatesListingScreenComponent } from './screens/dossier-template-listing/dossier-templates-listing-screen.component';

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

@ -18,7 +18,7 @@
></iqser-circle-button>
</div>
</div>
<div class="red-content-inner">
<div class="content-inner">
<div class="content-container">
<iqser-table
[headerTemplate]="headerTemplate"

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

@ -14,7 +14,7 @@
</div>
</div>
<div class="red-content-inner">
<div class="content-inner">
<div class="overlay-shadow"></div>
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

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

@ -14,7 +14,7 @@
</div>
</div>
<div class="red-content-inner">
<div class="content-inner">
<div class="overlay-shadow"></div>
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

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

@ -48,7 +48,7 @@
</div>
</div>
<div class="flex red-content-inner">
<div class="flex content-inner">
<div class="overlay-shadow"></div>
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

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

@ -10,7 +10,7 @@
[showCloseButton]="currentUser.isUser"
></redaction-page-header>
<div class="red-content-inner">
<div class="content-inner">
<div class="content-container">
<div class="content-container-content">
<form *ngIf="digitalSignatureForm" [formGroup]="digitalSignatureForm" autocomplete="off">
@ -78,16 +78,16 @@
(action)="saveDigitalSignature()"
[disabled]="digitalSignatureForm.invalid"
[label]="'digital-signature-screen.action.save' | translate"
icon="iqser:check"
[type]="iconButtonTypes.primary"
icon="iqser:check"
></iqser-icon-button>
<iqser-icon-button
(action)="removeDigitalSignature()"
*ngIf="digitalSignatureExists"
[label]="'digital-signature-screen.action.delete' | translate"
icon="red:trash"
[type]="iconButtonTypes.primary"
icon="red:trash"
></iqser-icon-button>
<div

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

@ -14,7 +14,7 @@
</div>
</div>
<div class="red-content-inner">
<div class="content-inner">
<div class="overlay-shadow"></div>
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

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

@ -10,7 +10,7 @@
[showCloseButton]="currentUser.isUser"
></redaction-page-header>
<div class="red-content-inner">
<div class="content-inner">
<div class="content-container">
<iqser-table
[bulkActions]="bulkActions"

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

@ -14,7 +14,7 @@
</div>
</div>
<div class="red-content-inner">
<div class="content-inner">
<div class="overlay-shadow"></div>
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

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

@ -19,7 +19,7 @@
</div>
</div>
<div class="red-content-inner">
<div class="content-inner">
<div class="content-container">
<div class="dialog mb-8">
<div class="dialog-header">
@ -40,17 +40,17 @@
</div>
<div class="inline-input-group flex-align-items-center">
<mat-slide-toggle formControlName="forgotPasswordFunctionEnabled" color="primary"></mat-slide-toggle>
<mat-slide-toggle color="primary" formControlName="forgotPasswordFunctionEnabled"></mat-slide-toggle>
<span class="ml-8" translate="general-config-screen.general.form.forgot-password"></span>
</div>
</div>
</div>
<div class="dialog-actions">
<button
type="submit"
[disabled]="configForm.invalid || !generalConfigurationChanged"
color="primary"
mat-flat-button
type="submit"
>
{{ 'general-config-screen.actions.save' | translate }}
</button>

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

@ -11,7 +11,7 @@
[showCloseButton]="currentUser.isUser"
></redaction-page-header>
<div class="red-content-inner">
<div class="content-inner">
<div class="content-container">
<div class="grid-container">
<div class="row">

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

@ -14,7 +14,7 @@
</div>
</div>
<div class="red-content-inner">
<div class="content-inner">
<div class="overlay-shadow"></div>
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

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

@ -14,7 +14,7 @@
</div>
</div>
<div class="red-content-inner">
<div class="content-inner">
<div class="overlay-shadow"></div>
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
@ -26,8 +26,8 @@
<iqser-icon-button
(action)="save()"
[label]="'rules-screen.save-changes' | translate"
icon="iqser:check"
[type]="iconButtonTypes.primary"
icon="iqser:check"
></iqser-icon-button>
<div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
</div>

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

@ -7,7 +7,7 @@
[showCloseButton]="true"
></redaction-page-header>
<div class="red-content-inner">
<div class="content-inner">
<div class="content-container">
<iqser-table
[bulkActions]="bulkActions"

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

@ -30,7 +30,7 @@
</div>
</div>
<div class="red-content-inner">
<div class="content-inner">
<div [class.extended]="collapsedDetails" class="content-container">
<iqser-table
[bulkActions]="bulkActions"

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

@ -14,7 +14,7 @@
</div>
</div>
<div class="red-content-inner">
<div class="content-inner">
<div class="overlay-shadow"></div>
<redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

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

@ -32,7 +32,7 @@
<mat-progress-bar [mode]="'indeterminate'" class="w-100"></mat-progress-bar>
</div>
<div class="flex-center">
<mat-icon class="red-white" svgIcon="red:read-only"></mat-icon>
<mat-icon class="primary-white" svgIcon="red:read-only"></mat-icon>
<span class="read-only-text" translate="readonly"></span>
</div>
</div>

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

@ -19,7 +19,7 @@
height: 14px;
width: 14px;
&.red-white {
&.primary-white {
padding-right: 8px;
}
}

13
apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss
View File

@ -1,3 +1,5 @@
@use 'variables';
.content-wrapper {
padding-top: 20px;
padding-bottom: 8px;
@ -8,3 +10,14 @@ ul {
padding-top: 4px;
}
}
.default-table {
border-collapse: collapse;
th,
td {
padding: 8px;
text-align: left;
border: 1px solid variables.$separator;
}
}

2
apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts
View File

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CompositeRouteGuard } from '@guards/composite-route.guard';
import { CompositeRouteGuard } from '@iqser/common-ui';
import { AuthGuard } from '../auth/auth.guard';
import { RedRoleGuard } from '../auth/red-role.guard';
import { AppStateGuard } from '@state/app-state.guard';

2
apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
View File

@ -1,5 +1,5 @@
@use 'variables';
@use 'red-components';
@use 'common-components';
@use 'common-texts';
:host {

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

@ -34,7 +34,7 @@
<div class="overlay-shadow"></div>
<div class="red-content-inner">
<div class="content-inner">
<div [class.extended]="collapsedDetails" class="content-container">
<iqser-table
(noDataAction)="fileInput.click()"

2
apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.html
View File

@ -3,7 +3,7 @@
<div class="overlay-shadow"></div>
<div class="red-content-inner">
<div class="content-inner">
<div class="content-container">
<iqser-table
(noDataAction)="openAddDossierDialog()"

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

@ -129,7 +129,7 @@
<div class="overlay-shadow"></div>
<div class="red-content-inner">
<div class="content-inner">
<div class="content-container">
<redaction-pdf-viewer
(annotationSelected)="handleAnnotationSelected($event)"

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

@ -9,7 +9,7 @@
<div class="overlay-shadow"></div>
<div class="red-content-inner">
<div class="content-inner">
<div class="content-container">
<iqser-table
[hasScrollButton]="true"

3
apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.html
View File

@ -1,3 +0,0 @@
<div (click)="countActions()">
<ng-content></ng-content>
</div>

0
apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.scss
View File

25
apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.ts
View File

@ -1,25 +0,0 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'redaction-hidden-action',
templateUrl: './hidden-action.component.html',
styleUrls: ['./hidden-action.component.scss']
})
export class HiddenActionComponent {
@Input() requiredClicks = 4;
@Output() action = new EventEmitter();
private _clickCount = 0;
private _clickCountTimeout: any;
countActions() {
this._clickCount += 1;
if (this._clickCount === this.requiredClicks) {
this._clickCount = 0;
this.action.emit();
}
clearTimeout(this._clickCountTimeout);
this._clickCountTimeout = setTimeout(() => {
this._clickCount = 0;
}, 1000);
}
}

4
apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
View File

@ -44,7 +44,7 @@ export class InitialsAvatarComponent extends AutoUnsubscribe implements OnChange
private get _colorClass() {
if (this._isCurrentUser) {
return 'red-white';
return 'primary-white';
}
if (this.disabled) {
return 'inactive';
@ -65,7 +65,7 @@ export class InitialsAvatarComponent extends AutoUnsubscribe implements OnChange
if (isSystemUser) {
this.displayName = 'System';
this.initials = 'SY';
this.colorClass = 'red-white red';
this.colorClass = 'primary-white primary';
return;
}

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

@ -11,7 +11,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component';
import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component';
import { DictionaryAnnotationIconComponent } from './components/dictionary-annotation-icon/dictionary-annotation-icon.component';
import { HiddenActionComponent } from './components/hidden-action/hidden-action.component';
import { ConfirmationDialogComponent } from './dialogs/confirmation-dialog/confirmation-dialog.component';
import { CommonUiModule } from '@iqser/common-ui';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
@ -37,7 +36,6 @@ const components = [
AnnotationIconComponent,
SimpleDoughnutChartComponent,
DictionaryAnnotationIconComponent,
HiddenActionComponent,
ConfirmationDialogComponent,
SelectComponent,
SideNavComponent,

9
apps/red-ui/src/assets/styles/red-autocomplete.scss
View File

@ -1,9 +0,0 @@
@use 'common-mixins';
.mat-autocomplete-panel {
@include common-mixins.scroll-bar;
.mat-option {
font-size: inherit;
}
}

42
apps/red-ui/src/assets/styles/red-breadcrumbs.scss
View File

@ -1,42 +0,0 @@
@use 'variables';
@use 'common-mixins';
.breadcrumbs-container {
display: flex;
align-items: center;
> *:not(:last-child) {
margin-right: 6px;
}
mat-icon {
width: 16px;
min-width: 16px;
}
}
.breadcrumb {
text-decoration: none;
color: variables.$accent;
font-weight: 600;
width: fit-content;
white-space: nowrap;
&.back {
display: flex !important;
justify-content: center;
align-items: center;
mat-icon {
margin-right: 8px;
}
}
&:last-child {
@include common-mixins.line-clamp(1);
}
&.active {
color: variables.$primary;
}
}

37
apps/red-ui/src/assets/styles/red-checkbox.scss
View File

@ -1,37 +0,0 @@
@use 'variables';
.mat-checkbox .mat-checkbox-frame {
border: 1px solid variables.$grey-5;
}
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
margin-top: 1px;
margin-left: 1px;
width: 18px;
height: 18px;
}
.mat-checkbox-layout {
align-items: center !important;
.mat-checkbox-inner-container {
margin-left: 0;
}
.mat-checkbox-label {
font-size: 13px;
color: variables.$accent;
display: flex;
align-items: center;
> *:not(:last-child) {
margin-right: 8px;
}
}
}
.mat-checkbox.error .mat-checkbox-label {
color: variables.$primary;
}

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

@ -1,97 +1,6 @@
@use 'variables';
@use 'common-mixins';
.oval,
.square {
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
height: 24px;
width: 24px;
min-width: 24px;
font-size: 10px;
line-height: 12px;
text-align: center;
text-transform: uppercase;
border: none;
box-sizing: border-box;
&.large {
height: 32px;
width: 32px;
font-size: 13px;
}
&.gray-dark {
background-color: variables.$grey-6;
}
&.gray-red {
background-color: variables.$grey-6;
color: variables.$primary;
}
&.lightgray-dark {
background-color: variables.$grey-4;
}
&.lightgray-red {
background-color: variables.$grey-4;
color: variables.$primary;
}
&.darkgray-white {
background-color: variables.$accent;
color: variables.$white;
}
&.lightgray-white {
background-color: variables.$grey-5;
color: variables.$white;
}
&.red-white {
background-color: variables.$primary;
color: variables.$white;
}
&.white-dark {
border: 1px solid variables.$grey-4;
}
&.inactive {
background-color: variables.$grey-6;
color: variables.$grey-7;
}
}
.oval {
border-radius: 50%;
}
.stats-subtitle {
display: flex;
> div {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
mat-icon {
width: 10px;
height: 10px;
line-height: 13px;
margin-right: 6px;
}
&:not(:last-child) {
margin-right: 12px;
}
}
}
.pill {
padding: 2px 5px;
border-radius: 9px;
@ -183,11 +92,3 @@
stroke: variables.$primary;
background-color: variables.$primary;
}
.overlay-shadow {
@include common-mixins.inset-shadow;
position: fixed;
width: 100%;
height: 4px;
z-index: 2;
}

49
apps/red-ui/src/assets/styles/red-controls.scss
View File

@ -1,49 +0,0 @@
@use 'variables';
.btn-group {
display: flex;
flex-direction: row;
.btn-group-btn {
cursor: pointer;
color: variables.$accent;
background: variables.$white;
font-family: Inter, sans-serif;
font-size: 13px;
line-height: 14px;
padding: 10px 14px;
transition: color 0.25s ease-in-out;
outline: none;
border: none;
&:hover {
color: variables.$black;
}
&.active {
color: variables.$light;
background: variables.$primary;
border-radius: 17px;
}
&.active:hover {
color: variables.$grey-3;
}
}
}
.icon-10 {
width: 10px;
height: 10px;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}

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

@ -1,63 +0,0 @@
@use 'variables';
@use 'common-mixins';
.mat-menu-panel {
border-radius: 8px !important;
box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
max-width: none !important;
min-width: 180px !important;
margin-top: 10px;
@include common-mixins.scroll-bar;
.mat-menu-content:not(:empty) {
padding-top: 8px;
padding-bottom: 24px;
}
&.padding-bottom-0 .mat-menu-content:not(:empty) {
padding-bottom: 0;
}
&.padding-bottom-8 .mat-menu-content:not(:empty) {
padding-bottom: 8px;
}
.mat-menu-item {
font-size: 13px;
color: variables.$accent;
padding: 0 8px;
margin: 0 8px 2px 8px;
border-radius: 4px;
width: -webkit-fill-available;
display: flex;
align-items: center;
> *:not(:last-child) {
margin-right: 8px;
}
.arrow-wrapper {
width: 16px;
text-align: center;
mat-icon {
width: 16px;
height: 16px;
margin: 0;
}
}
&.padding-left {
padding-left: 56px;
}
&:last-of-type {
margin-bottom: 0;
}
&:hover {
background-color: rgba(variables.$primary, 0.1);
}
}
}

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

@ -1,387 +0,0 @@
@use 'variables';
@use 'common-mixins';
html,
body {
margin: 0;
padding: 0;
height: 100vh;
font-family: 'Inter', sans-serif;
color: variables.$accent;
font-size: 13px;
line-height: 16px;
}
section.settings {
display: flex;
.page-header,
.red-content-inner {
width: calc(100vw - 200px);
}
redaction-admin-side-nav {
height: calc(100vh - 61px);
}
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 50px;
width: 100vw;
box-sizing: border-box;
background-color: variables.$white;
border-bottom: 1px solid variables.$separator;
.filters {
display: flex;
align-items: center;
> *:not(:last-child) {
margin-right: 2px;
}
> div:first-child {
margin-right: 8px;
}
form {
margin-left: 6px;
.iqser-input-group {
width: 250px;
}
}
.reset-filters {
margin-left: 12px;
color: variables.$primary;
cursor: pointer;
}
}
.actions {
display: flex;
align-items: center;
justify-content: flex-end;
> *:not(:last-child) {
margin-right: 2px;
}
}
}
.fullscreen {
.page-header {
position: absolute;
top: 0;
}
.red-content-inner {
height: calc(100% - 50px);
}
.overlay-shadow {
top: 50px;
}
}
.red-content-inner {
display: flex;
flex-direction: row;
position: absolute;
bottom: 0;
width: 100%;
height: calc(100% - 111px);
transition: height ease-in-out 0.2s;
}
.content-container {
overflow: hidden;
position: relative;
width: 100%;
.dialog {
border-radius: 8px;
margin-top: 40px;
margin-bottom: 70px;
background-color: variables.$white;
max-width: 650px;
height: fit-content;
box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19);
position: unset;
.heading-l {
margin-bottom: 16px;
}
.dialog-content {
display: flex;
.dialog-content-left {
min-width: 300px;
margin-right: 64px;
}
.link-action {
margin-top: 8px;
}
}
}
@media only screen and (max-width: 1600px) {
.user-column {
justify-content: center;
align-items: center;
redaction-initials-avatar .username {
display: none;
}
}
}
}
.right-container {
border-left: 1px solid variables.$grey-4;
box-sizing: border-box;
background: variables.$white;
overflow: hidden;
transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;
&:hover {
overflow-y: auto;
@include common-mixins.scroll-bar;
}
.collapsed-wrapper {
display: none;
}
&.collapsed {
padding-left: 0 !important;
padding-right: 0 !important;
width: 60px !important;
min-width: 60px !important;
display: flex;
div:not(.collapsed-wrapper) {
display: none;
}
.collapsed-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 60px;
div {
display: initial;
}
.all-caps-label {
transform: rotate(90deg) translateX(50%);
white-space: nowrap;
margin-top: 10px;
}
}
}
}
.flex {
display: flex !important;
}
.flex-end {
display: flex;
justify-content: flex-end;
}
.flex-center {
display: flex;
justify-content: center;
}
.flex-align-items-center {
display: flex;
align-items: center;
}
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.mt-5 {
margin-top: 5px;
}
.mt-8 {
margin-top: 8px;
}
.mt-16 {
margin-top: 16px !important;
}
.mt-20 {
margin-top: 20px;
}
.mt-24 {
margin-top: 24px;
}
.mt-32 {
margin-top: 32px;
}
.mb-6 {
margin-bottom: 6px;
}
.mb-8 {
margin-bottom: 8px !important;
}
.mb-12 {
margin-bottom: 12px !important;
}
.ml-8 {
margin-left: 8px;
}
.ml-14 {
margin-left: 14px;
}
.ml-16 {
margin-left: 16px;
}
.mr-24 {
margin-right: 24px;
}
.pb-24 {
padding-bottom: 24px;
}
.pb-32 {
padding-bottom: 32px;
}
.w-100 {
min-width: 100px !important;
width: 100px !important;
}
.break-20 {
height: 20px;
background: transparent;
display: block;
}
.detail-row {
opacity: 1;
font-family: Inter, sans-serif;
font-size: 14px;
letter-spacing: 0;
line-height: 14px;
padding: 4px;
}
.red-top-bar {
height: 61px;
width: 100vw;
max-height: 61px;
display: flex;
flex-direction: column;
.top-bar-row {
height: 60px;
display: flex;
justify-content: space-between;
padding: 0 24px;
.center {
display: flex;
align-items: center;
justify-content: center;
margin: 0 50px;
}
.app-name {
font-family: 'OpenSans Extrabold', sans-serif;
margin-left: 10px;
height: 20px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0;
line-height: 20px;
white-space: nowrap;
}
.menu {
display: flex;
align-items: center;
overflow: hidden;
&.right {
justify-content: flex-end;
}
}
}
.divider {
height: 1px;
opacity: 0.15;
background-color: variables.$accent;
}
}
.hidden {
display: none !important;
}
.not-visible {
visibility: hidden;
}
.pointer {
cursor: pointer;
}
.mr-4 {
margin-right: 4px !important;
}
.mr-8 {
margin-right: 8px !important;
}
.mr-16 {
margin-right: 16px;
}
.mr-34 {
margin-right: 34px;
}
.fit-content {
width: fit-content;
}
.d-flex {
display: flex;
}
.cdk-overlay-container {
z-index: 800;
}

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

@ -1,23 +0,0 @@
@use 'variables';
.default-table {
border-collapse: collapse;
th,
td {
padding: 8px;
text-align: left;
border: 1px solid variables.$separator;
}
}
.table-header-actions {
display: flex;
flex: 1;
align-items: center;
justify-content: flex-end;
> *:not(:last-child) {
margin-right: 10px;
}
}

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

@ -1,21 +1,14 @@
@use 'red-fonts';
@use '~ngx-toastr/toastr';
@use 'red-material-theme';
@use 'red-page-layout';
@use 'red-select';
@use 'red-autocomplete';
@use 'red-list';
@use 'red-checkbox';
@use 'red-toggle';
@use 'red-toggle-button';
@use 'red-menu';
@use 'red-media-queries';
@use 'red-tables';
@use 'red-components';
@use 'red-controls';
@use 'red-toasts';
@use 'red-tooltips';
@use 'red-breadcrumbs';
@use 'red-editor';
@use 'red-slider';
@use 'red-loading';

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

@ -16,6 +16,8 @@
$iqser-btn-bg: vars.$btn-bg,
$iqser-warn: vars.$warn,
$iqser-white: vars.$white,
$iqser-black: vars.$black,
$iqser-light: vars.$light,
$iqser-separator: vars.$separator,
$iqser-quick-filter-border: vars.$quick-filter-border,
$iqser-grey-2: vars.$grey-2,

2
libs/common-ui

@ -1 +1 @@
Subproject commit c0b445b06ed86a07c4b9aa1803b29b9384021d54
Subproject commit 52b8c90bbf283d2f78dbb0c2744ef1bca771b675