From c3a9d4ac8b513926a8480dff885f01fdc97cd649 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Sat, 2 Oct 2021 17:16:06 +0300 Subject: [PATCH] Extracted some components & styles to common --- apps/red-ui/src/app/app-routing.module.ts | 2 +- apps/red-ui/src/app/app.module.ts | 11 +- .../base-screen/base-screen.component.html | 193 +++++---- .../base-screen/base-screen.component.scss | 36 -- .../base-screen/base-screen.component.ts | 24 +- .../downloads-list-screen.component.html | 2 +- .../app/components/logo/logo.component.html | 1 - .../app/components/logo/logo.component.scss | 10 - .../src/app/components/logo/logo.component.ts | 8 - .../spotlight-search.component.html | 2 +- .../spotlight-search.component.scss | 2 +- .../user-profile-screen.component.html | 2 +- .../src/app/guards/composite-route.guard.ts | 40 -- .../app/modules/admin/admin-routing.module.ts | 2 +- .../screens/audit/audit-screen.component.html | 2 +- .../default-colors-screen.component.html | 2 +- .../dictionary-listing-screen.component.html | 2 +- .../dictionary-overview-screen.component.html | 2 +- .../digital-signature-screen.component.html | 6 +- ...r-attributes-listing-screen.component.html | 2 +- ...er-templates-listing-screen.component.html | 2 +- ...e-attributes-listing-screen.component.html | 2 +- .../general-config-screen.component.html | 6 +- .../license-information-screen.component.html | 2 +- .../reports/reports-screen.component.html | 2 +- .../screens/rules/rules-screen.component.html | 4 +- .../screens/trash/trash-screen.component.html | 2 +- .../user-listing-screen.component.html | 2 +- .../watermark/watermark-screen.component.html | 2 +- .../file-workload.component.html | 2 +- .../file-workload.component.scss | 2 +- .../remove-annotations-dialog.component.scss | 13 + .../dossier/dossiers-routing.module.ts | 2 +- .../dossier-details-stats.component.scss | 2 +- .../dossier-overview-screen.component.html | 2 +- .../dossiers-listing-screen.component.html | 2 +- .../file-preview-screen.component.html | 2 +- .../search-screen.component.html | 2 +- .../hidden-action.component.html | 3 - .../hidden-action.component.scss | 0 .../hidden-action/hidden-action.component.ts | 25 -- .../initials-avatar.component.ts | 4 +- .../src/app/modules/shared/shared.module.ts | 2 - .../src/assets/styles/red-autocomplete.scss | 9 - .../src/assets/styles/red-breadcrumbs.scss | 42 -- .../src/assets/styles/red-checkbox.scss | 37 -- .../src/assets/styles/red-components.scss | 99 ----- .../src/assets/styles/red-controls.scss | 49 --- apps/red-ui/src/assets/styles/red-menu.scss | 63 --- .../src/assets/styles/red-page-layout.scss | 387 ------------------ apps/red-ui/src/assets/styles/red-tables.scss | 23 -- apps/red-ui/src/assets/styles/red-theme.scss | 7 - apps/red-ui/src/styles.scss | 2 + libs/common-ui | 2 +- 54 files changed, 158 insertions(+), 1000 deletions(-) delete mode 100644 apps/red-ui/src/app/components/logo/logo.component.html delete mode 100644 apps/red-ui/src/app/components/logo/logo.component.scss delete mode 100644 apps/red-ui/src/app/components/logo/logo.component.ts delete mode 100644 apps/red-ui/src/app/guards/composite-route.guard.ts delete mode 100644 apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.html delete mode 100644 apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.scss delete mode 100644 apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.ts delete mode 100644 apps/red-ui/src/assets/styles/red-autocomplete.scss delete mode 100644 apps/red-ui/src/assets/styles/red-breadcrumbs.scss delete mode 100644 apps/red-ui/src/assets/styles/red-checkbox.scss delete mode 100644 apps/red-ui/src/assets/styles/red-controls.scss delete mode 100644 apps/red-ui/src/assets/styles/red-menu.scss delete mode 100644 apps/red-ui/src/assets/styles/red-page-layout.scss delete mode 100644 apps/red-ui/src/assets/styles/red-tables.scss diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts index 016bece60..f87f0f569 100644 --- a/apps/red-ui/src/app/app-routing.module.ts +++ b/apps/red-ui/src/app/app-routing.module.ts @@ -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'; diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index c55cb1263..853650195 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -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], diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html index ab473f6c6..19deb56e5 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html @@ -1,112 +1,105 @@ -
-
-
+
+
-
- + + + - - - - - -
+ + +
-
- - - {{ 'top-bar.navigation-items.back' | translate }} +
+ + + {{ 'top-bar.navigation-items.back' | translate }} + + + + + + + + + {{ appStateService.activeDossier.dossierName }} - - + - - - - {{ appStateService.activeDossier.dossierName }} - - - - - - {{ appStateService.activeFile.filename }} - - -
- -
- - - -
{{ titleService.getTitle() }}
-
- -
-
- - - -
- - - - - - - - - -
+ + {{ appStateService.activeFile.filename }} + + +
+ +
+ + + +
{{ titleService.getTitle() }}
+
+ +
+
+ + + +
+ + + + + + + + +
-
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.scss b/apps/red-ui/src/app/components/base-screen/base-screen.component.scss index 784045e90..e16ff23d4 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.scss +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.scss @@ -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; } diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts index 2fe3024e5..4f06ac46a 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts @@ -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; - } } diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html index 6f8dc3f51..53ae7fc1c 100644 --- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html +++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html @@ -4,7 +4,7 @@ [showCloseButton]="true" > -
+
diff --git a/apps/red-ui/src/app/components/logo/logo.component.scss b/apps/red-ui/src/app/components/logo/logo.component.scss deleted file mode 100644 index fa91fa7e1..000000000 --- a/apps/red-ui/src/app/components/logo/logo.component.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'variables'; - -:host { - color: variables.$primary; -} - -mat-icon { - width: 28px; - height: 28px; -} diff --git a/apps/red-ui/src/app/components/logo/logo.component.ts b/apps/red-ui/src/app/components/logo/logo.component.ts deleted file mode 100644 index fa4f478b7..000000000 --- a/apps/red-ui/src/app/components/logo/logo.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'redaction-logo', - templateUrl: './logo.component.html', - styleUrls: ['./logo.component.scss'] -}) -export class LogoComponent {} diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html index 4031594a4..d0c1caa37 100644 --- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html @@ -4,7 +4,7 @@ [placeholder]="placeholder" > - +
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html index 8d7b308b4..307beaeb1 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html @@ -11,7 +11,7 @@ [showCloseButton]="currentUser.isUser" > -
+
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html index f0650b3c3..0b430d297 100644 --- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html @@ -14,7 +14,7 @@
-
+
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html index 8a048ec50..faea56034 100644 --- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html @@ -14,7 +14,7 @@
-
+
@@ -26,8 +26,8 @@
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html index 772400920..9a03e1661 100644 --- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html @@ -7,7 +7,7 @@ [showCloseButton]="true" > -
+
-
+
-
+
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html index 806818f86..8b6714ac2 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html @@ -32,7 +32,7 @@
- +
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss index f96c2b1fd..7636f6bec 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss @@ -19,7 +19,7 @@ height: 14px; width: 14px; - &.red-white { + &.primary-white { padding-right: 8px; } } diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss index 9e8bcdbe3..f54f398c1 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss +++ b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss @@ -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; + } +} diff --git a/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts b/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts index 33a456ffe..b582d05c2 100644 --- a/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts +++ b/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts @@ -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'; diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss index a4e86e553..7f225ce33 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss @@ -1,5 +1,5 @@ @use 'variables'; -@use 'red-components'; +@use 'common-components'; @use 'common-texts'; :host { diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html index d85606bcb..bf2a83074 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html @@ -34,7 +34,7 @@
-
+
-
+
-
+
-
+
- -
diff --git a/apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.scss b/apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.ts b/apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.ts deleted file mode 100644 index c524ee4b1..000000000 --- a/apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.ts +++ /dev/null @@ -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); - } -} diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts index 288f70a62..181e306ef 100644 --- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts @@ -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; } diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index 6545ecbbb..dff7c4c5a 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -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, diff --git a/apps/red-ui/src/assets/styles/red-autocomplete.scss b/apps/red-ui/src/assets/styles/red-autocomplete.scss deleted file mode 100644 index ac9e3a872..000000000 --- a/apps/red-ui/src/assets/styles/red-autocomplete.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'common-mixins'; - -.mat-autocomplete-panel { - @include common-mixins.scroll-bar; - - .mat-option { - font-size: inherit; - } -} diff --git a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss deleted file mode 100644 index 6e5ff85ab..000000000 --- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss +++ /dev/null @@ -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; - } -} diff --git a/apps/red-ui/src/assets/styles/red-checkbox.scss b/apps/red-ui/src/assets/styles/red-checkbox.scss deleted file mode 100644 index effac2e87..000000000 --- a/apps/red-ui/src/assets/styles/red-checkbox.scss +++ /dev/null @@ -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; -} diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index df392fb85..5e43e1b88 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -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; -} diff --git a/apps/red-ui/src/assets/styles/red-controls.scss b/apps/red-ui/src/assets/styles/red-controls.scss deleted file mode 100644 index a25881cc2..000000000 --- a/apps/red-ui/src/assets/styles/red-controls.scss +++ /dev/null @@ -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 */ -} diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss deleted file mode 100644 index 9ceace30e..000000000 --- a/apps/red-ui/src/assets/styles/red-menu.scss +++ /dev/null @@ -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); - } - } -} diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss deleted file mode 100644 index 98c0b3c7f..000000000 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ /dev/null @@ -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; -} diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss deleted file mode 100644 index d6165357b..000000000 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ /dev/null @@ -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; - } -} diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 7f20d3abf..f51be06f4 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -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'; diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss index 17cb7360b..842408eba 100644 --- a/apps/red-ui/src/styles.scss +++ b/apps/red-ui/src/styles.scss @@ -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, diff --git a/libs/common-ui b/libs/common-ui index c0b445b06..52b8c90bb 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit c0b445b06ed86a07c4b9aa1803b29b9384021d54 +Subproject commit 52b8c90bbf283d2f78dbb0c2744ef1bca771b675