diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 7d8b5faab..3aa1a0ef4 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -1,57 +1,57 @@ -import {BrowserModule} from '@angular/platform-browser'; -import {APP_INITIALIZER, NgModule} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { APP_INITIALIZER, NgModule } from '@angular/core'; -import {AppComponent} from './app.component'; -import {RouterModule} from '@angular/router'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {ReactiveFormsModule} from '@angular/forms'; -import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http'; -import {BaseScreenComponent} from './screens/base-screen/base-screen.component'; -import {ProjectListingScreenComponent} from './screens/project-listing-screen/project-listing-screen.component'; -import {ProjectOverviewScreenComponent} from './screens/project-overview-screen/project-overview-screen.component'; -import {MatToolbarModule} from '@angular/material/toolbar'; -import {ApiModule} from '@redaction/red-ui-http'; -import {ApiPathInterceptorService} from './interceptor/api-path-interceptor.service'; -import {MatButtonModule} from '@angular/material/button'; -import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; -import {TranslateHttpLoader} from '@ngx-translate/http-loader'; -import {MatMenuModule} from '@angular/material/menu'; -import {languageInitializer} from './i18n/language.initializer'; -import {LanguageService} from './i18n/language.service'; -import {MatIconModule} from '@angular/material/icon'; -import {IconsModule} from './icons/icons.module'; -import {AddEditProjectDialogComponent} from './screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component'; -import {MatDialogModule} from '@angular/material/dialog'; -import {MatSnackBarModule} from '@angular/material/snack-bar'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {ConfirmationDialogComponent} from './common/confirmation-dialog/confirmation-dialog.component'; -import {FilePreviewScreenComponent} from './screens/file/file-preview-screen/file-preview-screen.component'; -import {PdfViewerComponent} from './screens/file/pdf-viewer/pdf-viewer.component'; -import {MatTabsModule} from '@angular/material/tabs'; -import {MatButtonToggleModule} from '@angular/material/button-toggle'; -import {NgpSortModule} from 'ngp-sort-pipe'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {MatSelectModule} from '@angular/material/select'; -import {MatSidenavModule} from '@angular/material/sidenav'; -import {FileDetailsDialogComponent} from './screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component'; -import {ToastrModule} from 'ngx-toastr'; -import {ServiceWorkerModule} from '@angular/service-worker'; -import {environment} from '../environments/environment'; -import {ProjectDetailsDialogComponent} from './screens/project-overview-screen/project-details-dialog/project-details-dialog.component'; -import {AuthModule} from './auth/auth.module'; -import {AuthGuard} from './auth/auth.guard'; -import {FileUploadModule} from './upload/file-upload.module'; -import {FullPageLoadingIndicatorComponent} from './utils/full-page-loading-indicator/full-page-loading-indicator.component'; -import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; -import {InitialsAvatarComponent} from './common/initials-avatar/initials-avatar.component'; -import {StatusBarComponent} from './components/status-bar/status-bar.component'; -import {LogoComponent} from './logo/logo.component'; -import {AuthInterceptorService} from "./interceptor/auth-interceptor.service"; -import {CompositeRouteGuard} from "./utils/composite-route.guard"; -import {AppStateGuard} from "./state/app-state.guard"; -import {SimpleDoughnutChartComponent} from './simple-doughnut-chart/simple-doughnut-chart.component'; -import {ManualRedactionDialogComponent} from './screens/file/manual-redaction-dialog/manual-redaction-dialog.component'; -import {MatCheckboxModule} from "@angular/material/checkbox"; +import { AppComponent } from './app.component'; +import { RouterModule } from '@angular/router'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; +import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http'; +import { BaseScreenComponent } from './screens/base-screen/base-screen.component'; +import { ProjectListingScreenComponent } from './screens/project-listing-screen/project-listing-screen.component'; +import { ProjectOverviewScreenComponent } from './screens/project-overview-screen/project-overview-screen.component'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { ApiModule } from '@redaction/red-ui-http'; +import { ApiPathInterceptorService } from './interceptor/api-path-interceptor.service'; +import { MatButtonModule } from '@angular/material/button'; +import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; +import { TranslateHttpLoader } from '@ngx-translate/http-loader'; +import { MatMenuModule } from '@angular/material/menu'; +import { languageInitializer } from './i18n/language.initializer'; +import { LanguageService } from './i18n/language.service'; +import { MatIconModule } from '@angular/material/icon'; +import { IconsModule } from './icons/icons.module'; +import { AddEditProjectDialogComponent } from './screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { ConfirmationDialogComponent } from './common/confirmation-dialog/confirmation-dialog.component'; +import { FilePreviewScreenComponent } from './screens/file/file-preview-screen/file-preview-screen.component'; +import { PdfViewerComponent } from './screens/file/pdf-viewer/pdf-viewer.component'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { NgpSortModule } from 'ngp-sort-pipe'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { FileDetailsDialogComponent } from './screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component'; +import { ToastrModule } from 'ngx-toastr'; +import { ServiceWorkerModule } from '@angular/service-worker'; +import { environment } from '../environments/environment'; +import { ProjectDetailsDialogComponent } from './screens/project-overview-screen/project-details-dialog/project-details-dialog.component'; +import { AuthModule } from './auth/auth.module'; +import { AuthGuard } from './auth/auth.guard'; +import { FileUploadModule } from './upload/file-upload.module'; +import { FullPageLoadingIndicatorComponent } from './utils/full-page-loading-indicator/full-page-loading-indicator.component'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { InitialsAvatarComponent } from './common/initials-avatar/initials-avatar.component'; +import { StatusBarComponent } from './components/status-bar/status-bar.component'; +import { LogoComponent } from './logo/logo.component'; +import { AuthInterceptorService } from './interceptor/auth-interceptor.service'; +import { CompositeRouteGuard } from './utils/composite-route.guard'; +import { AppStateGuard } from './state/app-state.guard'; +import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component'; +import { ManualRedactionDialogComponent } from './screens/file/manual-redaction-dialog/manual-redaction-dialog.component'; +import { MatCheckboxModule } from '@angular/material/checkbox'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -74,11 +74,12 @@ export function HttpLoaderFactory(httpClient: HttpClient) { StatusBarComponent, LogoComponent, SimpleDoughnutChartComponent, - ManualRedactionDialogComponent + ManualRedactionDialogComponent, ], imports: [ BrowserModule, BrowserAnimationsModule, + FormsModule, ReactiveFormsModule, HttpClientModule, AuthModule, @@ -107,7 +108,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) { component: ProjectListingScreenComponent, canActivate: [CompositeRouteGuard], data: { - routeGuards: [AuthGuard, AppStateGuard], + routeGuards: [AuthGuard, AppStateGuard] } }, { @@ -115,7 +116,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) { component: ProjectOverviewScreenComponent, canActivate: [CompositeRouteGuard], data: { - routeGuards: [AuthGuard, AppStateGuard], + routeGuards: [AuthGuard, AppStateGuard] } }, { @@ -123,7 +124,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) { component: FilePreviewScreenComponent, canActivate: [CompositeRouteGuard], data: { - routeGuards: [AuthGuard, AppStateGuard], + routeGuards: [AuthGuard, AppStateGuard] } } ] @@ -144,7 +145,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) { MatSelectModule, MatSidenavModule, FileUploadModule, - ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}), + ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), MatProgressSpinnerModule, MatCheckboxModule ], diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html similarity index 100% rename from apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html rename to apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss similarity index 94% rename from apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss rename to apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss index 1c934d546..a1bcc530b 100644 --- a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss @@ -1,4 +1,4 @@ -@import "../../assets/styles/red-variables"; +@import "../../../assets/styles/red-variables"; .container { position: relative; diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts similarity index 97% rename from apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts rename to apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts index f5da6aa3d..848557486 100644 --- a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts @@ -1,5 +1,5 @@ import {Component, Input, OnInit} from '@angular/core'; -import { Color } from '../utils/types'; +import { Color } from '../../utils/types'; export class DoughnutChartConfig { value: number; diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html index 6e665fe8a..bf96b1424 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html @@ -24,7 +24,13 @@
-
+ + + + {{option.label}} + + +
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss index bdfae4da8..eb738bf55 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss @@ -45,7 +45,7 @@ mat-icon { height: 16px; width: 16px; - margin-top: 3px; + margin-top: 2px; } } } diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts index c2fab6292..a8a412f9e 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts @@ -8,7 +8,12 @@ import { NotificationService } from '../../notification/notification.service'; import { AppStateService, ProjectWrapper } from '../../state/app-state.service'; import { UserService } from '../../user/user.service'; import { ProjectDetailsDialogComponent } from '../project-overview-screen/project-details-dialog/project-details-dialog.component'; -import { DoughnutChartConfig } from '../../simple-doughnut-chart/simple-doughnut-chart.component'; +import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component'; + +class SortingOption { + label: string; + value: string; +} @Component({ selector: 'redaction-project-listing-screen', @@ -16,8 +21,13 @@ import { DoughnutChartConfig } from '../../simple-doughnut-chart/simple-doughnut styleUrls: ['./project-listing-screen.component.scss'] }) export class ProjectListingScreenComponent implements OnInit { - projectsChartData: DoughnutChartConfig [] = []; - documentsChartData: DoughnutChartConfig [] = []; + public projectsChartData: DoughnutChartConfig [] = []; + public documentsChartData: DoughnutChartConfig [] = []; + public sortingOptions: SortingOption[] = [ + { label: 'Recent', value: '\'asc\':\'projectDate\'' }, + { label: 'Alphabetically', value: 'alphabetically' } + ]; + public sortingOption: SortingOption = this.sortingOptions[0]; constructor( public readonly appStateService: AppStateService, diff --git a/apps/red-ui/src/assets/styles/red-controls.scss b/apps/red-ui/src/assets/styles/red-controls.scss index d3bfc0d3f..04cd25f12 100644 --- a/apps/red-ui/src/assets/styles/red-controls.scss +++ b/apps/red-ui/src/assets/styles/red-controls.scss @@ -11,7 +11,6 @@ background: $white; font-family: Inter, sans-serif; font-size: 13px; - letter-spacing: 0; line-height: 14px; padding: 10px 14px; transition: color 0.25s ease-in-out; diff --git a/apps/red-ui/src/assets/styles/red-select.scss b/apps/red-ui/src/assets/styles/red-select.scss new file mode 100644 index 000000000..af5f5049f --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-select.scss @@ -0,0 +1,52 @@ +@import "red-variables"; + +.red-select { + .mat-select-value-text { + font-family: Inter, sans-serif; + color: $grey-1; + font-size: 13px; + line-height: 14px; + } + + .mat-form-field-wrapper { + padding-bottom: 0; + } + + .mat-form-field-infix { + padding: 0; + border: none; + width: fit-content; + } + + .mat-select-value { + max-width: none; + } + + .mat-select-arrow-wrapper { + padding-left: 5px; + + .mat-select-arrow { + color: $grey-1 !important; + } + } +} + +.red-select-panel { + border-radius: 0 !important; + + .mat-option { + background: $white !important; + font-family: Inter, sans-serif; + color: $grey-1; + font-size: 13px; + line-height: 14px; + + &.mat-selected.mat-active { + color: $red-1; + } + + &:hover { + background: #F4F5F7 !important; + } + } +} diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index 06ca44067..192f26a48 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -3,17 +3,16 @@ .table-header { background-color: rgba(226, 228, 233, 0.9); - padding: 7px 24px 9px; + height: 50px; + padding: 0 16px; display: flex; justify-content: space-between; align-items: center; .actions { display: flex; - - div { - padding: 10px 14px; - } + align-items: center; + gap: 25px; } } diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index af02f0d7b..194cc9768 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -6,6 +6,7 @@ @import "red-text-styles"; @import "red-dialog"; @import "red-input"; +@import "red-select"; @import "red-media-queries"; @import "red-tables"; @import "red-components";