-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1983 from asfadmin/andy/displacement/DS-5552-UI-P…
…olish DS-5552 UI polish
- Loading branch information
Showing
17 changed files
with
227 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 8 additions & 5 deletions
13
src/app/components/shared/chart-modal/chart-modal.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,15 @@ | ||
| <div class="toggle-group-wrapper--layout"> | ||
| <mat-button-toggle [matMenuTriggerFor]="menu" type="button" | ||
| class="control-mat-button-toggle ts-criteria-button-toggle"> | ||
| chart config<mat-icon class="more-horiz">shape_line</mat-icon> | ||
| </mat-button-toggle> | ||
| <button mat-mini-fab [matMenuTriggerFor]="menu" type="button" | ||
| class="control-mat-button-toggle ts-criteria-button-toggle" | ||
| aria-label="Icon with a menu for configuring Displacement chart"> | ||
| <mat-icon class="settings-icon"> | ||
| settings | ||
| </mat-icon> | ||
| </button> | ||
| </div> | ||
| <mat-menu #menu="matMenu"> | ||
| <div class="chart-config-menu-panel" [ngSwitch]="searchType" (click)="$event.stopPropagation()"> | ||
| <app-timeseries-chart-config *ngSwitchCase="SearchTypes.DISPLACEMENT"></app-timeseries-chart-config> | ||
| <app-timeseries-chart-config *ngSwitchDefault></app-timeseries-chart-config> | ||
| </div> | ||
| </mat-menu> | ||
| </mat-menu> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
...es-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <p>timeseries-chart-temporal-slider works!</p> |
Empty file.
12 changes: 12 additions & 0 deletions
12
...ries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-timeseries-chart-temporal-slider', | ||
| standalone: true, | ||
| imports: [], | ||
| templateUrl: './timeseries-chart-temporal-slider.component.html', | ||
| styleUrl: './timeseries-chart-temporal-slider.component.scss' | ||
| }) | ||
| export class TimeseriesChartTemporalSliderComponent { | ||
|
|
||
| } |
22 changes: 22 additions & 0 deletions
22
...pp/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <div class="ts-button-group"> | ||
| <div class="fx-row"> | ||
| <div> | ||
| <mat-button-toggle-group class="ts-toggle-group" name="layerType"> | ||
| <mat-button-toggle class="control-mat-button-toggle" (click)="zoomIn()" | ||
| matTooltip="{{ 'ZOOM_IN' | translate }}"> | ||
| <mat-icon class="control-icon">add</mat-icon> | ||
| </mat-button-toggle> | ||
|
|
||
| <mat-button-toggle class="control-mat-button-toggle" (click)="zoomToFit()" | ||
| matTooltip="{{ 'ZOOM_TO_FIT' | translate }}"> | ||
| <mat-icon class="control-icon">aspect_ratio</mat-icon> | ||
| </mat-button-toggle> | ||
|
|
||
| <mat-button-toggle class="control-mat-button-toggle" (click)="zoomOut()" | ||
| matTooltip="{{ 'ZOOM_OUT' | translate }}"> | ||
| <mat-icon class="control-icon">remove</mat-icon> | ||
| </mat-button-toggle> | ||
| </mat-button-toggle-group> | ||
| </div> | ||
| </div> | ||
| </div> |
17 changes: 17 additions & 0 deletions
17
...pp/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| @use "@angular/material" as mat; | ||
| @import "asf-theme"; | ||
|
|
||
| .ts-toggle-group { | ||
| height: 20px !important; | ||
| box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, | ||
| rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, | ||
| rgba(0, 0, 0, 0.12) 0px 1px 18px 0px; | ||
| } | ||
|
|
||
| .control-icon { | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { | ||
| padding: 0 5px !important; | ||
| } |
45 changes: 45 additions & 0 deletions
45
src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import {Component, EventEmitter, Output} from '@angular/core'; | ||
| import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle'; | ||
| import {MatIcon} from '@angular/material/icon'; | ||
| import {MatTooltip} from '@angular/material/tooltip'; | ||
| import {TranslateModule} from '@ngx-translate/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-timeseries-chart-zoom', | ||
| standalone: true, | ||
| imports: [ | ||
| MatButtonToggle, | ||
| MatButtonToggleGroup, | ||
| MatIcon, | ||
| MatTooltip, | ||
| TranslateModule | ||
| ], | ||
| templateUrl: './timeseries-chart-zoom.component.html', | ||
| styleUrl: './timeseries-chart-zoom.component.scss' | ||
| }) | ||
| export class TimeseriesChartZoomComponent { | ||
| // @Output('zoomIn$') zoomIn$: Subject<void> = new Subject<void>(); | ||
| // @Output('zoomInChart$') zoomInChart$: EventEmitter<any> = new EventEmitter(); | ||
| @Output() zoomInEvent = new EventEmitter<void>(); | ||
| @Output() zoomOutEvent = new EventEmitter<void>(); | ||
| @Output() zoomToFitEvent = new EventEmitter<void>(); | ||
|
|
||
| // public zoomInChart$ = new Subject<void>(); | ||
| // public zoomOutChart$ = new Subject<void>(); | ||
| // public zoomToFitChart$ = new Subject<void>(); | ||
|
|
||
| public zoomIn(): void { | ||
| console.log('zoomIn'); | ||
| this.zoomInEvent.emit(); | ||
| } | ||
|
|
||
| public zoomOut(): void { | ||
| this.zoomOutEvent.emit(); | ||
| } | ||
|
|
||
| public zoomToFit(): void { | ||
| this.zoomToFitEvent.emit(); | ||
| } | ||
|
|
||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.