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 {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
],

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 {
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 { Color } from '../utils/types';
import { Color } from '../../utils/types';
export class DoughnutChartConfig {
value: number;

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

@ -24,7 +24,13 @@
</span>
<div class="actions">
<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>

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

@ -45,7 +45,7 @@
mat-icon {
height: 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 { 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,

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

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

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

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

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