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

Style mat-select

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-13 21:57:30 +03:00 committed by Timo Bejan
parent 24082a4f40
commit cbd1a2a9e3
11 changed files with 139 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,57 +1,57 @@
import {BrowserModule} from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import {APP_INITIALIZER, NgModule} from '@angular/core'; import { APP_INITIALIZER, NgModule } from '@angular/core';
import {AppComponent} from './app.component'; import { AppComponent } from './app.component';
import {RouterModule} from '@angular/router'; import { RouterModule } from '@angular/router';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {ReactiveFormsModule} from '@angular/forms'; import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http'; import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
import {BaseScreenComponent} from './screens/base-screen/base-screen.component'; import { BaseScreenComponent } from './screens/base-screen/base-screen.component';
import {ProjectListingScreenComponent} from './screens/project-listing-screen/project-listing-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 { ProjectOverviewScreenComponent } from './screens/project-overview-screen/project-overview-screen.component';
import {MatToolbarModule} from '@angular/material/toolbar'; import { MatToolbarModule } from '@angular/material/toolbar';
import {ApiModule} from '@redaction/red-ui-http'; import { ApiModule } from '@redaction/red-ui-http';
import {ApiPathInterceptorService} from './interceptor/api-path-interceptor.service'; import { ApiPathInterceptorService } from './interceptor/api-path-interceptor.service';
import {MatButtonModule} from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader'; import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import {MatMenuModule} from '@angular/material/menu'; import { MatMenuModule } from '@angular/material/menu';
import {languageInitializer} from './i18n/language.initializer'; import { languageInitializer } from './i18n/language.initializer';
import {LanguageService} from './i18n/language.service'; import { LanguageService } from './i18n/language.service';
import {MatIconModule} from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import {IconsModule} from './icons/icons.module'; import { IconsModule } from './icons/icons.module';
import {AddEditProjectDialogComponent} from './screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component'; import { AddEditProjectDialogComponent } from './screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component';
import {MatDialogModule} from '@angular/material/dialog'; import { MatDialogModule } from '@angular/material/dialog';
import {MatSnackBarModule} from '@angular/material/snack-bar'; import { MatSnackBarModule } from '@angular/material/snack-bar';
import {MatTooltipModule} from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import {ConfirmationDialogComponent} from './common/confirmation-dialog/confirmation-dialog.component'; import { ConfirmationDialogComponent } from './common/confirmation-dialog/confirmation-dialog.component';
import {FilePreviewScreenComponent} from './screens/file/file-preview-screen/file-preview-screen.component'; import { FilePreviewScreenComponent } from './screens/file/file-preview-screen/file-preview-screen.component';
import {PdfViewerComponent} from './screens/file/pdf-viewer/pdf-viewer.component'; import { PdfViewerComponent } from './screens/file/pdf-viewer/pdf-viewer.component';
import {MatTabsModule} from '@angular/material/tabs'; import { MatTabsModule } from '@angular/material/tabs';
import {MatButtonToggleModule} from '@angular/material/button-toggle'; import { MatButtonToggleModule } from '@angular/material/button-toggle';
import {NgpSortModule} from 'ngp-sort-pipe'; import { NgpSortModule } from 'ngp-sort-pipe';
import {MatFormFieldModule} from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import {MatSidenavModule} from '@angular/material/sidenav'; import { MatSidenavModule } from '@angular/material/sidenav';
import {FileDetailsDialogComponent} from './screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component'; import { FileDetailsDialogComponent } from './screens/file/file-preview-screen/file-details-dialog/file-details-dialog.component';
import {ToastrModule} from 'ngx-toastr'; import { ToastrModule } from 'ngx-toastr';
import {ServiceWorkerModule} from '@angular/service-worker'; import { ServiceWorkerModule } from '@angular/service-worker';
import {environment} from '../environments/environment'; import { environment } from '../environments/environment';
import {ProjectDetailsDialogComponent} from './screens/project-overview-screen/project-details-dialog/project-details-dialog.component'; import { ProjectDetailsDialogComponent } from './screens/project-overview-screen/project-details-dialog/project-details-dialog.component';
import {AuthModule} from './auth/auth.module'; import { AuthModule } from './auth/auth.module';
import {AuthGuard} from './auth/auth.guard'; import { AuthGuard } from './auth/auth.guard';
import {FileUploadModule} from './upload/file-upload.module'; import { FileUploadModule } from './upload/file-upload.module';
import {FullPageLoadingIndicatorComponent} from './utils/full-page-loading-indicator/full-page-loading-indicator.component'; import { FullPageLoadingIndicatorComponent } from './utils/full-page-loading-indicator/full-page-loading-indicator.component';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import {InitialsAvatarComponent} from './common/initials-avatar/initials-avatar.component'; import { InitialsAvatarComponent } from './common/initials-avatar/initials-avatar.component';
import {StatusBarComponent} from './components/status-bar/status-bar.component'; import { StatusBarComponent } from './components/status-bar/status-bar.component';
import {LogoComponent} from './logo/logo.component'; import { LogoComponent } from './logo/logo.component';
import {AuthInterceptorService} from "./interceptor/auth-interceptor.service"; import { AuthInterceptorService } from './interceptor/auth-interceptor.service';
import {CompositeRouteGuard} from "./utils/composite-route.guard"; import { CompositeRouteGuard } from './utils/composite-route.guard';
import {AppStateGuard} from "./state/app-state.guard"; import { AppStateGuard } from './state/app-state.guard';
import {SimpleDoughnutChartComponent} from './simple-doughnut-chart/simple-doughnut-chart.component'; import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component';
import {ManualRedactionDialogComponent} from './screens/file/manual-redaction-dialog/manual-redaction-dialog.component'; import { ManualRedactionDialogComponent } from './screens/file/manual-redaction-dialog/manual-redaction-dialog.component';
import {MatCheckboxModule} from "@angular/material/checkbox"; import { MatCheckboxModule } from '@angular/material/checkbox';
export function HttpLoaderFactory(httpClient: HttpClient) { export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@ -74,11 +74,12 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
StatusBarComponent, StatusBarComponent,
LogoComponent, LogoComponent,
SimpleDoughnutChartComponent, SimpleDoughnutChartComponent,
ManualRedactionDialogComponent ManualRedactionDialogComponent,
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
BrowserAnimationsModule, BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
HttpClientModule, HttpClientModule,
AuthModule, AuthModule,
@ -107,7 +108,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
component: ProjectListingScreenComponent, component: ProjectListingScreenComponent,
canActivate: [CompositeRouteGuard], canActivate: [CompositeRouteGuard],
data: { data: {
routeGuards: [AuthGuard, AppStateGuard], routeGuards: [AuthGuard, AppStateGuard]
} }
}, },
{ {
@ -115,7 +116,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
component: ProjectOverviewScreenComponent, component: ProjectOverviewScreenComponent,
canActivate: [CompositeRouteGuard], canActivate: [CompositeRouteGuard],
data: { data: {
routeGuards: [AuthGuard, AppStateGuard], routeGuards: [AuthGuard, AppStateGuard]
} }
}, },
{ {
@ -123,7 +124,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
component: FilePreviewScreenComponent, component: FilePreviewScreenComponent,
canActivate: [CompositeRouteGuard], canActivate: [CompositeRouteGuard],
data: { data: {
routeGuards: [AuthGuard, AppStateGuard], routeGuards: [AuthGuard, AppStateGuard]
} }
} }
] ]
@ -144,7 +145,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
MatSelectModule, MatSelectModule,
MatSidenavModule, MatSidenavModule,
FileUploadModule, FileUploadModule,
ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}), ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
MatProgressSpinnerModule, MatProgressSpinnerModule,
MatCheckboxModule MatCheckboxModule
], ],

0
apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html → apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
View File

2
apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss → apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
View File

@ -1,4 +1,4 @@
@import "../../assets/styles/red-variables"; @import "../../../assets/styles/red-variables";
.container { .container {
position: relative; position: relative;

2
apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts → apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
View File

@ -1,5 +1,5 @@
import {Component, Input, OnInit} from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import { Color } from '../utils/types'; import { Color } from '../../utils/types';
export class DoughnutChartConfig { export class DoughnutChartConfig {
value: number; value: number;

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

@ -24,7 +24,13 @@
</span> </span>
<div class="actions"> <div class="actions">
<div translate="projects.table-header.bulk-select.label"></div> <div translate="projects.table-header.bulk-select.label"></div>
<div translate="projects.table-header.recent.label"></div> <mat-form-field appearance="none" class="red-select">
<mat-select [(ngModel)]="sortingOption" panelClass="red-select-panel">
<mat-option *ngFor="let option of sortingOptions" [value]="option">
{{option.label}}
</mat-option>
</mat-select>
</mat-form-field>
</div> </div>
</div> </div>

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

@ -45,7 +45,7 @@
mat-icon { mat-icon {
height: 16px; height: 16px;
width: 16px; width: 16px;
margin-top: 3px; margin-top: 2px;
} }
} }
} }

16
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
View File

@ -8,7 +8,12 @@ import { NotificationService } from '../../notification/notification.service';
import { AppStateService, ProjectWrapper } from '../../state/app-state.service'; import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
import { UserService } from '../../user/user.service'; import { UserService } from '../../user/user.service';
import { ProjectDetailsDialogComponent } from '../project-overview-screen/project-details-dialog/project-details-dialog.component'; 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({ @Component({
selector: 'redaction-project-listing-screen', selector: 'redaction-project-listing-screen',
@ -16,8 +21,13 @@ import { DoughnutChartConfig } from '../../simple-doughnut-chart/simple-doughnut
styleUrls: ['./project-listing-screen.component.scss'] styleUrls: ['./project-listing-screen.component.scss']
}) })
export class ProjectListingScreenComponent implements OnInit { export class ProjectListingScreenComponent implements OnInit {
projectsChartData: DoughnutChartConfig [] = []; public projectsChartData: DoughnutChartConfig [] = [];
documentsChartData: DoughnutChartConfig [] = []; public documentsChartData: DoughnutChartConfig [] = [];
public sortingOptions: SortingOption[] = [
{ label: 'Recent', value: '\'asc\':\'projectDate\'' },
{ label: 'Alphabetically', value: 'alphabetically' }
];
public sortingOption: SortingOption = this.sortingOptions[0];
constructor( constructor(
public readonly appStateService: AppStateService, public readonly appStateService: AppStateService,

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

@ -11,7 +11,6 @@
background: $white; background: $white;
font-family: Inter, sans-serif; font-family: Inter, sans-serif;
font-size: 13px; font-size: 13px;
letter-spacing: 0;
line-height: 14px; line-height: 14px;
padding: 10px 14px; padding: 10px 14px;
transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out;

52
apps/red-ui/src/assets/styles/red-select.scss Normal file
View File

@ -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;
}
}
}

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

@ -3,17 +3,16 @@
.table-header { .table-header {
background-color: rgba(226, 228, 233, 0.9); background-color: rgba(226, 228, 233, 0.9);
padding: 7px 24px 9px; height: 50px;
padding: 0 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.actions { .actions {
display: flex; display: flex;
align-items: center;
div { gap: 25px;
padding: 10px 14px;
}
} }
} }

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

@ -6,6 +6,7 @@
@import "red-text-styles"; @import "red-text-styles";
@import "red-dialog"; @import "red-dialog";
@import "red-input"; @import "red-input";
@import "red-select";
@import "red-media-queries"; @import "red-media-queries";
@import "red-tables"; @import "red-tables";
@import "red-components"; @import "red-components";