From 6474b5e3c6bf81f3b22b1bdbde93b04d96c782cd Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Wed, 8 Mar 2023 19:09:30 +0100 Subject: [PATCH] replace legacy component --- pdb-js/src/app/app.module.ts | 22 ++++---- .../dashboard/dashboard.component.ts | 2 +- .../gallery-view/gallery-view.component.ts | 2 +- .../src/app/limit-by/limit-by.component.html | 6 ++ .../src/app/plot-view/plot-view.component.ts | 2 +- .../query-autocomplete.component.scss | 1 + .../query-autocomplete.component.ts | 2 +- .../visualization-page.component.html | 10 ++-- .../visualization-page.component.scss | 7 ++- .../visualization-page.component.ts | 2 +- .../y-axis-definition.component.html | 52 ++++++++++-------- pdb-js/src/styles.scss | 55 ++++++++----------- 12 files changed, 85 insertions(+), 78 deletions(-) diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index c440096..48d8c27 100644 --- a/pdb-js/src/app/app.module.ts +++ b/pdb-js/src/app/app.module.ts @@ -11,17 +11,17 @@ import { HelpPageComponent } from './help-page/help-page.component'; import { UploadPageComponent } from './upload-page/upload-page.component'; import { VisualizationPageComponent } from './visualization-page/visualization-page.component'; -import {MatLegacyAutocompleteModule as MatAutocompleteModule} from '@angular/material/legacy-autocomplete'; -import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; -import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox'; -import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select'; -import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'; -import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input'; -import {MatLegacyProgressBarModule as MatProgressBarModule} from '@angular/material/legacy-progress-bar'; -import {MatLegacyProgressSpinnerModule as MatProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; -import {MatLegacyRadioModule as MatRadioModule} from '@angular/material/legacy-radio'; -import {MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar'; -import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip'; +import {MatAutocompleteModule} from '@angular/material/autocomplete'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatSelectModule} from '@angular/material/select'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import {MatProgressBarModule} from '@angular/material/progress-bar'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; +import {MatRadioModule} from '@angular/material/radio'; +import {MatSnackBarModule} from '@angular/material/snack-bar'; +import {MatTooltipModule} from '@angular/material/tooltip'; import { YAxisDefinitionComponent } from './y-axis-definition/y-axis-definition.component'; import { QueryAutocompleteComponent } from './query-autocomplete/query-autocomplete.component'; import { LimitByComponent } from './limit-by/limit-by.component'; diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts index d55558b..e3f37f3 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts @@ -2,7 +2,7 @@ import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/dr import { HttpErrorResponse } from '@angular/common/http'; import { Component, ElementRef, OnInit } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; -import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; +import { MatSnackBar } from '@angular/material/snack-bar'; import { ActivatedRoute } from '@angular/router'; import { BaseWidget, Dashboard, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service'; import { PlotConfig, PlotRequest, PlotResponse, PlotService, RenderOptions } from 'src/app/plot.service'; diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.ts b/pdb-js/src/app/gallery-view/gallery-view.component.ts index 311fb75..74d20fb 100644 --- a/pdb-js/src/app/gallery-view/gallery-view.component.ts +++ b/pdb-js/src/app/gallery-view/gallery-view.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core'; -import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; +import { MatSnackBar } from '@angular/material/snack-bar'; import { PlotService, PlotRequest, PlotResponse, PlotResponseStats, DashTypeAndColor, RenderedImages } from '../plot.service'; import { UtilService } from '../utils.service'; diff --git a/pdb-js/src/app/limit-by/limit-by.component.html b/pdb-js/src/app/limit-by/limit-by.component.html index 7cc5cc6..5ba3622 100644 --- a/pdb-js/src/app/limit-by/limit-by.component.html +++ b/pdb-js/src/app/limit-by/limit-by.component.html @@ -1,3 +1,9 @@ + + Limit By: diff --git a/pdb-js/src/app/plot-view/plot-view.component.ts b/pdb-js/src/app/plot-view/plot-view.component.ts index 230a906..3998fe2 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.ts +++ b/pdb-js/src/app/plot-view/plot-view.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core'; import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions } from '../plot.service'; -import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; +import { MatSnackBar } from '@angular/material/snack-bar'; import * as moment from 'moment'; import { WidgetDimensions } from '../dashboard.service'; diff --git a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.scss b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.scss index 379d31f..49db944 100644 --- a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.scss +++ b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.scss @@ -4,5 +4,6 @@ border-radius: 5px; box-sizing: border-box; padding: 5px; + width: 100%; } diff --git a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts index 240e478..69a8e4a 100644 --- a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts +++ b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, Input, ViewChild } from '@angular/core'; import {UntypedFormControl} from '@angular/forms'; import {Observable} from 'rxjs'; import {startWith, map} from 'rxjs/operators'; -import {MatLegacyAutocompleteTrigger as MatAutocompleteTrigger } from '@angular/material/legacy-autocomplete'; +import {MatAutocompleteTrigger } from '@angular/material/autocomplete'; import { PlotService, PlotType, AutocompleteResult, Suggestion, ResultMode } from '../plot.service'; @Component({ diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html index 1e99ce4..91c9c30 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.html +++ b/pdb-js/src/app/visualization-page/visualization-page.component.html @@ -4,7 +4,7 @@
- + Date Range: @@ -14,16 +14,16 @@
- + Type: - + {{plotType.name}} - + Group By: {{tagField.name}} @@ -54,7 +54,7 @@ Gallery - + Split By: {{tagField.name}} diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss index 6a1192a..7bda29b 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.scss +++ b/pdb-js/src/app/visualization-page/visualization-page.component.scss @@ -15,7 +15,7 @@ grid: "query-box query-box date-box" auto "filters results results" 1fr - / 17.7em 3fr 21em; + / 25.5em 3fr 24em; } } @@ -43,9 +43,12 @@ #date-box{ grid-area: date-box; - margin-right: 1em; } + + + + #filters { grid-area: filters; overflow: auto; diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts index c5d259d..b47b543 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults, DataType, YAxisDefinition, AxesTypes, PlotConfig, RenderOptions, RenderOptionsMap } from '../plot.service'; import { UntypedFormControl, Validators } from '@angular/forms'; -import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; +import { MatSnackBar } from '@angular/material/snack-bar'; import { LimitByComponent } from '../limit-by/limit-by.component'; import { YAxisDefinitionComponent } from '../y-axis-definition/y-axis-definition.component'; import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomplete.component'; diff --git a/pdb-js/src/app/y-axis-definition/y-axis-definition.component.html b/pdb-js/src/app/y-axis-definition/y-axis-definition.component.html index 4dad18b..406b51c 100644 --- a/pdb-js/src/app/y-axis-definition/y-axis-definition.component.html +++ b/pdb-js/src/app/y-axis-definition/y-axis-definition.component.html @@ -1,5 +1,5 @@
- + Y{{yIndex}}-Axis Scale: Logarithm @@ -7,27 +7,31 @@ - - Y{{yIndex}}-Axis Unit: - - - auto (number) - no unit - - - auto (time) - millis - seconds - minutes - hours - days - - - - - - - - - +
+ + Y{{yIndex}}-Axis Unit: + + + auto (number) + no unit + + + auto (time) + millis + seconds + minutes + hours + days + + + + + Min: + + + + Max: + + +
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss index ddda4ea..e29cb08 100644 --- a/pdb-js/src/styles.scss +++ b/pdb-js/src/styles.scss @@ -13,9 +13,13 @@ // If you specify typography styles for the components you use elsewhere, you should delete this line. // If you don't need the default component typographies but still want the hierarchy styles, // you can delete this line and instead use: -// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` +// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());` +/* TODO(mdc-migration): Remove all-legacy-component-typographies once all legacy components are migrated*/ @include mat.all-legacy-component-typographies(); +@include mat.all-component-typographies(); +/* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/ @include mat.legacy-core(); +@include mat.core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker @@ -33,13 +37,17 @@ $candy-app-theme: mat.define-light-theme(( primary: $candy-app-primary, accent: $candy-app-accent, warn: $candy-app-warn, - ) + ), + //typography: mat.define-typography-config(), + density: -1, )); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. +/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/ @include mat.all-legacy-component-themes($candy-app-theme); +@include mat.all-component-themes($candy-app-theme); @@ -63,6 +71,14 @@ grey */ $background-color: #CBD7F4; +.mat-mdc-option span.mdc-list-item__primary-text, +.mdc-list-item__primary-text { + font-size: 1rem; +} +mat-form-field .mat-mdc-option span.mdc-list-item__primary-text{ + --mdc-typography-subtitle1-font-size: 14px; +} + *, body { font-family: Arial; font-size: 14px; @@ -86,9 +102,6 @@ h2 { height: 1em; vertical-align: text-bottom; } -.mat-button .mat-button-wrapper .icon-inline { - vertical-align: text-top; -} button[disabled] .icon-inline { opacity: 0.5; @@ -128,18 +141,8 @@ button[disabled] .icon-inline { height: 1.5em; vertical-align: text-bottom; } -.mat-option-disabled .icon-select { - opacity: 0.25; -} -mat-option.mat-option { - height: 2em; - line-height: 2em; -} -mat-option.mat-option.mat-active { - background-color: #ccc; -} a ,a:visited { color: blue; @@ -169,34 +172,24 @@ a.external-link:after { right: 0; } -body .mat-select-panel, body .mat-autocomplete-panel { - max-height: 300px; -} - -mat-form-field { +mat-form-field.pdb-form-full-width { width: 100%; - margin-right: 1ex; -} -mat-form-field:last-child { - margin-right: 0ex; } mat-form-field.pdb-form-number { - width: 3.5em; + width: 5.5em; } mat-form-field.pdb-form-number-long { width: 7em; } -.pdb-form-icon-small { - display: inline-block; - width: 2em; - vertical-align: middle; -} mat-form-field.pdb-form-mid { - width: 7.5em; + width: 9.5em; } mat-form-field.pdb-form-wide { width: 10em; } +.mat-mdc-form-field-subscript-wrapper { + display: none; +} .errorPanel { padding: 1ex;