This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch STREAMPIPES-395 in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit f9dd77fa36aa6e7ead34bc015c9a5fdf42c0bb7f Author: Dominik Riemer <[email protected]> AuthorDate: Sun Jul 4 15:44:40 2021 +0200 [STREAMPIPES-395] Avoid duplicate definition of frequently used CSS classes --- ui/src/app/add/add.component.html | 10 +-- ui/src/app/add/add.component.scss | 4 +- .../endpoint-item/endpoint-item.component.html | 2 +- .../app/configuration/configuration.component.html | 4 +- .../adapter-description.component.ts | 4 +- .../data-marketplace/data-marketplace.component.ts | 2 +- .../overview/dashboard-overview.component.html | 4 +- .../panel/dashboard-panel.component.html | 8 +-- .../widget/dashboard-widget.component.html | 6 +- .../widgets/area/area-widget.component.html | 2 +- .../widgets/image/image-widget.component.html | 4 +- .../widgets/line/line-widget.component.html | 2 +- ui/src/app/dashboard/dashboard.component.html | 4 +- .../add-visualization-dialog.component.html | 4 +- .../edit-dashboard-dialog.component.html | 2 +- .../datadownloadDialog/dataDownload.dialog.css | 22 ++++++- .../datadownloadDialog/dataDownload.dialog.html | 8 +-- ...data-explorer-dashboard-overview.component.html | 4 +- .../time-selector/timeRangeSelector.component.html | 4 +- .../time-selector/timeRangeSelector.component.scss | 4 ++ .../data-explorer-dashboard-widget.component.html | 9 ++- .../widgets/image/image-widget.component.html | 4 +- .../point-selection-info.component.html | 4 +- .../line-chart/line-chart-widget.component.css | 4 ++ .../line-chart/line-chart-widget.component.html | 10 +-- .../aggregate-configuration.component.html | 4 +- .../app/data-explorer/data-explorer.component.html | 4 +- ui/src/scss/main.scss | 1 + ui/src/scss/sp/colors.scss | 6 +- .../add/add.component.scss => scss/sp/layout.scss} | 75 ++++++++++++++++++---- ui/src/scss/sp/main.scss | 4 ++ 31 files changed, 157 insertions(+), 72 deletions(-) diff --git a/ui/src/app/add/add.component.html b/ui/src/app/add/add.component.html index 15114d2..04f769a 100644 --- a/ui/src/app/add/add.component.html +++ b/ui/src/app/add/add.component.html @@ -17,8 +17,8 @@ --> <div fxLayout="column" class="page-container"> - <div fxLayout="row" class="border" style="padding:0px;background-color:#f6f6f6;"> - <div fxFlex="100" style="line-height:24px;border-bottom:1px solid #ccc"> + <div fxLayout="row" class="border sp-bg-lightgray p-0"> + <div fxFlex="100" class="page-container-nav"> <div fxFlex="100" fxLayout="row"> <button mat-button mat-flat-button color="primary" (click)="showManageRdfEndpointsDialog()">Manage Endpoints @@ -37,7 +37,7 @@ </div> </div> <div fxLayout="row" class="fixed-height add-options"> - <div class="add-options-item" fxLayoutAlign="start center" fxLayout="row" style="padding-left:5px;"> + <div class="add-options-item pl-5" fxLayoutAlign="start center" fxLayout="row"> <div fxFlex="100" fxLayout="row"> <button mat-button mat-raised-button color="primary" [disabled]="selectedEndpointItems.length === 0" @@ -62,7 +62,7 @@ </div> </div> <span fxFlex></span> - <div class="add-options-item" fxLayoutAlign="start center" fxLayout="row" style="padding-left:5px;"> + <div class="add-options-item pl-5" fxLayoutAlign="start center" fxLayout="row"> <mat-icon>search</mat-icon> <mat-form-field class="form-style"> @@ -98,7 +98,7 @@ <div fxLayoutAlign="start start" fxLayout="column"> </div> - <div fxLayout="row wrap" style="width: 100%;"> + <div fxLayout="row wrap" class="w-100"> <endpoint-item fxFlex="33" [itemSelected]="endpointItem.selected" [item]="endpointItem" diff --git a/ui/src/app/add/add.component.scss b/ui/src/app/add/add.component.scss index 327fd07..03a1272 100644 --- a/ui/src/app/add/add.component.scss +++ b/ui/src/app/add/add.component.scss @@ -16,6 +16,8 @@ * */ +@import '../../scss/variables'; + .page-container-padding-inner { margin: 20px; } @@ -37,4 +39,4 @@ .add-options-item { display: inline; margin-right: 10px; -} \ No newline at end of file +} diff --git a/ui/src/app/add/components/endpoint-item/endpoint-item.component.html b/ui/src/app/add/components/endpoint-item/endpoint-item.component.html index 727b58f..b6d55f4 100644 --- a/ui/src/app/add/components/endpoint-item/endpoint-item.component.html +++ b/ui/src/app/add/components/endpoint-item/endpoint-item.component.html @@ -18,7 +18,7 @@ <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" class="pipeline-element-box" style="padding:5px;margin-bottom:10px;background:{{getSelectedBackground()}}" [ngStyle]="item.editable ? {opacity: 1} : {opacity: 0.5}"> - <div fxLayout="row" style="width: 100%;"> + <div fxLayout="row" class="w-100"> <i class="material-icons" [ngClass]="item.available ? 'endpoint-icon-available' : 'endpoint-icon-critical'">lens</i> <span fxFlex></span> <span class="{{itemTypeStyle}}" matTooltip="Endpoint {{item.available ? 'available' : 'not available'}}">{{itemTypeTitle}}</span> diff --git a/ui/src/app/configuration/configuration.component.html b/ui/src/app/configuration/configuration.component.html index 1fdc19c..7019d05 100644 --- a/ui/src/app/configuration/configuration.component.html +++ b/ui/src/app/configuration/configuration.component.html @@ -17,8 +17,8 @@ --> <div fxLayout="column" fxFlex="100" class="page-container"> - <div fxLayout="row" style="padding:0px;background-color:#f6f6f6;"> - <div fxLayout="fill" style="line-height:24px;border-bottom:1px solid #ccc"> + <div fxLayout="row" class="p-0 sp-bg-lightgray"> + <div fxLayout="fill" class="page-container-nav"> <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndexChange($event)"> <mat-tab label="Pipeline Element Configuration"></mat-tab> <mat-tab label="Messaging"></mat-tab> diff --git a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts index 23701ee..e61986f 100644 --- a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts +++ b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts @@ -58,7 +58,7 @@ export class AdapterDescriptionComponent { if (this.adapter.name == null) this.adapter.name = ""; this.isDataSetDescription = this.connectService.isDataSetDescription(this.adapter); this.isDataStreamDescription = this.connectService.isDataStreamDescription(this.adapter); - this.isRunningAdapter = (this.adapter.couchDBId != undefined && !(this.adapter as any).isTemplate); + this.isRunningAdapter = (this.adapter.id != undefined && !(this.adapter as any).isTemplate); this.adapterLabel = this.adapter.name.split(' ').join('_'); this.className = this.getClassName(); } @@ -83,7 +83,7 @@ export class AdapterDescriptionComponent { } deleteAdapterTemplate(adapter: AdapterDescription): void { - this.adapterToDelete = adapter.couchDBId; + this.adapterToDelete = adapter.id; this.dataMarketplaceService.deleteAdapterTemplate(adapter).subscribe(res => { this.adapterToDelete = undefined; this.updateAdapterEmitter.emit(); diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts index a9af635..69e7564 100644 --- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts +++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts @@ -169,7 +169,7 @@ export class DataMarketplaceComponent implements OnInit { } templateFromRunningAdapter(adapter: AdapterDescriptionUnion) { - adapter.couchDBId = undefined; + adapter.id = undefined; adapter._rev = undefined; this.selectedIndexChange(0); this.selectAdapter(adapter); diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html index a3bbe12..3c57ecc 100644 --- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html +++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html @@ -19,7 +19,7 @@ <div fxFlex="100" fxLayout="column"> <div fxFlex="100" fxLayout="column"> <div fxLayout="row" class="fixed-height options-bar"> - <div class="options-bar-item" fxLayoutAlign="start center" fxLayout="row" style="padding-left:10px;"> + <div class="options-bar-item pl-10" fxLayoutAlign="start center" fxLayout="row"> <button mat-button mat-raised-button color="primary" (click)="openNewDashboardDialog()"> <i class="material-icons">add</i> <span> New dashboard</span> @@ -28,7 +28,7 @@ </div> </div> <div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start stretch" class="m-20"> - <div fxFlex="100" class="assemblyOptions sp-blue-bg" style="padding:5px;"> + <div fxFlex="100" class="assemblyOptions sp-blue-bg p-5"> <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100"> <h4>My dashboards</h4> <span flex></span> diff --git a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html index 7244dc0..04b8746 100644 --- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.html +++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.html @@ -17,14 +17,12 @@ --> <div fxFlex="100" fxLayout="column"> <div fxLayout="row" class="fixed-height options-bar" *ngIf="editMode"> - <div class="options-bar-item" fxLayoutAlign="start center" fxLayout="row" style="padding-left:10px;"> - <button mat-button mat-raised-button color="primary" (click)="updateDashboardAndCloseEditMode()" - style="margin-right:10px;"> + <div class="options-bar-item pl-10" fxLayoutAlign="start center" fxLayout="row"> + <button mat-button mat-raised-button color="primary" (click)="updateDashboardAndCloseEditMode()" class="mr-10"> <i class="material-icons">save</i> <span> Save</span> </button> - <button mat-button mat-raised-button class="mat-basic" (click)="discardChanges()" - style="margin-right:10px;"> + <button mat-button mat-raised-button class="mat-basic mr-10" (click)="discardChanges()"> <i class="material-icons">clear</i> <span> Discard</span> </button> diff --git a/ui/src/app/dashboard/components/widget/dashboard-widget.component.html b/ui/src/app/dashboard/components/widget/dashboard-widget.component.html index 7dc7184..dab9881 100644 --- a/ui/src/app/dashboard/components/widget/dashboard-widget.component.html +++ b/ui/src/app/dashboard/components/widget/dashboard-widget.component.html @@ -16,7 +16,7 @@ ~ --> -<div style="height:100%;"> +<div class="h-100"> <div class="box"> <div class="assemblyOptions sp-blue-bg m-0 row header h-40" *ngIf="editMode && headerVisible"> <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center"> @@ -33,7 +33,7 @@ fxLayout="column" fxLayoutAlign="center center"> <i class="material-icons disconnect-icon">block</i> - <h5 style="text-align:center;">Widget not found, did you modify the pipeline?</h5> + <h5 class="text-center">Widget not found, did you modify the pipeline?</h5> <button mat-button mat-raised-button color="primary" (click)="modifyWidget()"> <span>Modify widget</span> </button> @@ -42,7 +42,7 @@ fxLayout="column" fxLayoutAlign="center center"> <i class="material-icons disconnect-icon">link_off</i> - <h5 style="text-align:center;">Pipeline <i>{{pipeline.name}}</i> is not running, did you start the pipeline?</h5> + <h5 class="text-center">Pipeline <i>{{pipeline.name}}</i> is not running, did you start the pipeline?</h5> <button mat-button mat-raised-button color="primary" (click)="startPipeline()"> <span>Start pipeline</span> </button> diff --git a/ui/src/app/dashboard/components/widgets/area/area-widget.component.html b/ui/src/app/dashboard/components/widgets/area/area-widget.component.html index 9f9bbeb..398a307 100644 --- a/ui/src/app/dashboard/components/widgets/area/area-widget.component.html +++ b/ui/src/app/dashboard/components/widgets/area/area-widget.component.html @@ -34,7 +34,7 @@ [tooltipDisabled]="true" [animations]="false" [xAxisTickFormatting]="timestampTickFormatting" - [results]="multi" style="margin-top:10px;margin-bottom:10px;" + [results]="multi" class="mt-10 mb-10" [ngStyle]="{'fill': selectedPrimaryTextColor}"> </ngx-charts-area-chart> </div> diff --git a/ui/src/app/dashboard/components/widgets/image/image-widget.component.html b/ui/src/app/dashboard/components/widgets/image/image-widget.component.html index ea6be46..aab9dc6 100644 --- a/ui/src/app/dashboard/components/widgets/image/image-widget.component.html +++ b/ui/src/app/dashboard/components/widgets/image/image-widget.component.html @@ -21,6 +21,6 @@ {{title}} </div> <div class="imageContent"> - <img style="width: 100%;" src="data:image/jpg;base64,{{item}}" *ngIf="item" /> + <img class="w-100" src="data:image/jpg;base64,{{item}}" *ngIf="item" /> </div> -</div> \ No newline at end of file +</div> diff --git a/ui/src/app/dashboard/components/widgets/line/line-widget.component.html b/ui/src/app/dashboard/components/widgets/line/line-widget.component.html index e3eea5f..bf9edc3 100644 --- a/ui/src/app/dashboard/components/widgets/line/line-widget.component.html +++ b/ui/src/app/dashboard/components/widgets/line/line-widget.component.html @@ -34,7 +34,7 @@ [tooltipDisabled]="true" [animations]="false" [xAxisTickFormatting]="timestampTickFormatting" - [results]="multi" style="margin-top:10px;margin-bottom:10px;" + [results]="multi" class="mt-10 mb-10" [ngStyle]="{'fill': selectedPrimaryTextColor}"> </ngx-charts-line-chart> </div> diff --git a/ui/src/app/dashboard/dashboard.component.html b/ui/src/app/dashboard/dashboard.component.html index 11cc2a0..54c13db 100644 --- a/ui/src/app/dashboard/dashboard.component.html +++ b/ui/src/app/dashboard/dashboard.component.html @@ -17,8 +17,8 @@ --> <div fxLayout="column" class="page-container"> - <div fxLayout="row" style="padding:0px;background-color:#f6f6f6;"> - <div fxFlex="100" style="line-height:24px;border-bottom:1px solid #ccc"> + <div fxLayout="row" class="p-0 sp-bg-lightgray"> + <div fxFlex="100" class="page-container-nav"> <div fxFlex="100" fxLayout="row"> <div fxFlex fxLayoutAlign="start center"> <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectDashboard($event)"> diff --git a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html index 9e026d4..2f25cac 100644 --- a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html +++ b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.html @@ -70,10 +70,10 @@ </div> <mat-divider></mat-divider> <div class="sp-dialog-actions"> - <button mat-button mat-raised-button class="mat-basic" (click)="onCancel()" style="margin-right:10px;"> + <button mat-button mat-raised-button class="mat-basic mr-10" (click)="onCancel()"> Cancel </button> - <button mat-button mat-raised-button class="mat-basic" (click)="back()" *ngIf="(!('select-pipeline'===page))" style="margin-right:10px;"> + <button mat-button mat-raised-button class="mat-basic mr-10" (click)="back()" *ngIf="(!('select-pipeline'===page))"> Back </button> <button mat-button mat-raised-button color="primary" (click)="next()" [disabled]="'configure-widget' === page diff --git a/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html b/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html index 8a46e67..f3a51c6 100644 --- a/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html +++ b/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.html @@ -28,7 +28,7 @@ <mat-divider></mat-divider> <div mat-dialog-content class="md-dialog-content"> <div fxFlex="100"> - <div fxFlex="100" fxLayout="column" style="margin:5px;width:100%"> + <div fxFlex="100" fxLayout="column" class="w-100 m-5"> <mat-form-field class="full-width"> <mat-label>Dashboard Name</mat-label> <input matInput required [(ngModel)]="dashboard.name"> diff --git a/ui/src/app/data-explorer/components/datadownloadDialog/dataDownload.dialog.css b/ui/src/app/data-explorer/components/datadownloadDialog/dataDownload.dialog.css index c503893..0ff348e 100644 --- a/ui/src/app/data-explorer/components/datadownloadDialog/dataDownload.dialog.css +++ b/ui/src/app/data-explorer/components/datadownloadDialog/dataDownload.dialog.css @@ -47,10 +47,30 @@ mat-dialog-content { .mat-dialog-content { width:100%; height:74%; - margin: 0px; + margin: 0; } .mat-dialog-actions { margin-bottom:0px; padding-right:10px; } + +.ml-35 { + margin-left: 35px; +} + +.form-field-date { + top: -10px; + width: 270px; +} + +.event-color { + color: #e0e0e0; +} + +.icon-check { + font-size: 100px; + height: 100px; + width: 100px; + color:#b3b3b3; +} diff --git a/ui/src/app/data-explorer/components/datadownloadDialog/dataDownload.dialog.html b/ui/src/app/data-explorer/components/datadownloadDialog/dataDownload.dialog.html index b9d424e..8334031 100644 --- a/ui/src/app/data-explorer/components/datadownloadDialog/dataDownload.dialog.html +++ b/ui/src/app/data-explorer/components/datadownloadDialog/dataDownload.dialog.html @@ -44,12 +44,12 @@ All data in custom time interval </mat-radio-button> </mat-radio-group> - <div fxLayout="row" fxLayoutAlign="start center" style="margin-left: 35px"> - <mat-form-field style="top: -10px; width: 270px"> + <div fxLayout="row" fxLayoutAlign="start center" class="ml-35"> + <mat-form-field class="form-field-date"> <input matInput [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" [(ngModel)]="dateRange" [selectMode]="'range'" [disabled]="selectedData !== 'customInterval'"> <mat-icon matSuffix [owlDateTimeTrigger]="dt1" *ngIf="selectedData === 'customInterval'">event</mat-icon> - <mat-icon matSuffix style="color: #e0e0e0" *ngIf="selectedData !== 'customInterval'">event</mat-icon> + <mat-icon matSuffix class="event-color" *ngIf="selectedData !== 'customInterval'">event</mat-icon> <owl-date-time #dt1></owl-date-time> </mat-form-field> </div> @@ -84,7 +84,7 @@ <button mat-button warn color="warn" (click)="cancelDownload()">Cancel</button> </div> <div div fxLayout="column" fxLayoutAlign="space-around center" *ngIf="downloadFinish"> - <mat-icon style="font-size: 100px;height: 100px; width: 100px; color:#b3b3b3;">check</mat-icon> + <mat-icon class="icon-check">check</mat-icon> </div> </mat-step> </mat-horizontal-stepper> diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html index d4251a4..2a9b451 100644 --- a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html +++ b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html @@ -27,7 +27,7 @@ </button> </div> <div *ngIf="!editLabels" fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start stretch"> - <div fxFlex="100" class="assemblyOptions sp-blue-bg" style="padding:5px;"> + <div fxFlex="100" class="assemblyOptions sp-blue-bg p-5"> <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100"> <h4>My Data Views</h4> <span flex></span> @@ -78,4 +78,4 @@ </div> <sp-configure-labels *ngIf="editLabels"></sp-configure-labels> -</div> \ No newline at end of file +</div> diff --git a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html index b106f37..666a4fb 100644 --- a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html +++ b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html @@ -25,7 +25,7 @@ (click)="this.setCurrentDateRange(item)">{{item.value}}</button> </div> <div class="time-wrapper" fxFlex fxLayoutAlign="center center"> - <button mat-button style="margin-right: -15px" class="button-icon icon-button-font-size"> + <button mat-button class="button-icon icon-button-font-size mr--15"> <mat-icon (click)="decreaseTime()">navigate_before</mat-icon> </button> <mat-form-field appearance="standard" class="start-date form-field-margin form-field-size-smaller"> @@ -46,7 +46,7 @@ (dateTimeChange)="changeCustomDateRange()"> <owl-date-time #dt2></owl-date-time> </mat-form-field> - <button mat-button style="margin-left: -15px" class="button-icon icon-button-font-size" color="primary"> + <button mat-button class="button-icon icon-button-font-size mr--15" color="primary"> <mat-icon (click)="increaseTime()">navigate_next</mat-icon> </button> </div> diff --git a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss index fb54049..a29dbd6 100644 --- a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss +++ b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss @@ -50,3 +50,7 @@ border: 1px solid $sp-color-accent; background: white; } + +.mr--15 { + margin-right: -15px +} diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html index 7ed4c8a..38d23ec 100644 --- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html +++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html @@ -16,13 +16,13 @@ ~ --> -<div style="height:100%;"> +<div class="h-100"> <div class="box"> <div class="assemblyOptions sp-blue-bg m-0 row header h-40" *ngIf="editMode"> - <div fxFlex="100" layout="row" fxLayoutAlign="start center"> + <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center"> {{ title }} </div> - <div fxFlex="100" layout="row" fxLayoutAlign="end center"> + <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center"> <button mat-icon-button matTooltip="Download data" class="icon" (click)="downloadDataAsFile()" color="white"> <i class="material-icons">get_app</i> </button> @@ -32,7 +32,7 @@ </div> </div> - <div class="h-100 p-0 row content gridster-item-content" style="margin-left: 0px;margin-right: 0px;"> + <div class="h-100 p-0 row content gridster-item-content ml-0 mr-0"> <div *ngIf="widgetLoaded" class="h-100"> <div *ngIf="configuredWidget.widgetType === 'table'" class="h-100 p-0"> <sp-data-explorer-table-widget @@ -64,7 +64,6 @@ [dataViewDashboardItem]="widget" [dataExplorerWidget]="configuredWidget" class="h-100"></sp-data-explorer-image-widget> </div> - </div> </div> </div> diff --git a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html index 059ad95..f168e4d 100644 --- a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html +++ b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html @@ -18,9 +18,9 @@ <div class="widget-content"> - <div class="widget-inner-options" style="margin-left: 0;margin-right: 0;margin-top: 0;"> + <div class="widget-inner-options ml-0 mr-0 mt-0"> <div fxFlex="100" fxLayout="row"> - <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" style="margin-left: 0px;margin-right: 0px;"> + <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" class="ml-0 mr-0"> <sp-select-properties [availableProperties]="availableColumns" [selectedProperties]="selectedColumn"></sp-select-properties> </div> </div> diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/components/point-selection-info/point-selection-info.component.html b/ui/src/app/data-explorer/components/widgets/line-chart/components/point-selection-info/point-selection-info.component.html index 30738ed..d85a94c 100644 --- a/ui/src/app/data-explorer/components/widgets/line-chart/components/point-selection-info/point-selection-info.component.html +++ b/ui/src/app/data-explorer/components/widgets/line-chart/components/point-selection-info/point-selection-info.component.html @@ -16,11 +16,11 @@ ~ --> <p></p> -<mat-form-field style="width: 100%; margin-top: 1px" appearance="none"> +<mat-form-field class="w-100" style="margin-top: 1px" appearance="none"> <mat-label>selected time interval</mat-label> <input matInput value="{{_startX}} - {{_endX}}" readonly="True"> </mat-form-field> -<mat-form-field style="width: 100%; margin-top: 3px" appearance="none"> +<mat-form-field class="w-100" style="margin-top: 3px" appearance="none"> <mat-label>selected data points</mat-label> <input matInput value="{{_n_selected_points}}" readonly="True"> </mat-form-field> diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.css b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.css index 7e46b8a..396e87a 100644 --- a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.css +++ b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.css @@ -35,3 +35,7 @@ .labeling-active { width: 85%; } + +.overflow-y-hidden { + overflow-y:hidden; +} diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html index 88fdb35..a00c386 100644 --- a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html +++ b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html @@ -17,13 +17,13 @@ --> <div class="widget-content"> - <div class="widget-inner-options" style="margin-left: 0;margin-right: 0;margin-top: 0;"> + <div class="widget-inner-options ml-0 mr-0 mt-0"> <div fxFlex="100" fxLayout="row"> - <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" style="margin-left: 0px;margin-right: 0px;"> + <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" class="ml-0 mr-0"> <sp-select-properties label="Select Properties" multiple = true - style="margin-right: 10px;" + class="mr-10" (changeSelectedProperties)="setSelectedProperties($event)" [availableProperties]="availableProperties" [selectedProperties]="selectedLineChartProperties"> @@ -32,7 +32,7 @@ <sp-select-properties label="Select Background Color" multiple = false - style="margin-right: 10px;" + class="mr-10" *ngIf="showBackgroundColorProperty" (changeSelectedProperties)="setSelectedBackgroundColorProperty($event)" [availableProperties]="availableNoneNumericColumns" @@ -65,7 +65,7 @@ </div> </div> </div> - <div class="widget-inner-content" style="height: 100%;overflow-y:hidden;"> + <div class="widget-inner-content h-100 overflow-y-hidden"> <sp-load-data-spinner *ngIf="showIsLoadingData"></sp-load-data-spinner> <sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="viewDateRange"></sp-no-data-in-date-range> diff --git a/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.html b/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.html index 94e8adc..2844996 100644 --- a/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.html +++ b/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.html @@ -18,7 +18,7 @@ <div fxLayout="column" fxLayoutAlign="stretch"> - <div fxFlex="100" layout="row" fxLayoutAlign="start center" style="margin-left: 0px;margin-right: 0px;"> + <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" class="ml-0 mr-0"> <div class="option" style="margin-left: 5px"> <mat-form-field class="form-field-margin form-field-size-smaller"> @@ -40,4 +40,4 @@ </mat-form-field> </div> </div> -</div> \ No newline at end of file +</div> diff --git a/ui/src/app/data-explorer/data-explorer.component.html b/ui/src/app/data-explorer/data-explorer.component.html index cc4bc54..19ea6f2 100644 --- a/ui/src/app/data-explorer/data-explorer.component.html +++ b/ui/src/app/data-explorer/data-explorer.component.html @@ -17,8 +17,8 @@ --> <div fxLayout="column" class="page-container"> - <div fxLayout="row" style="padding:0px;background-color:#f6f6f6;"> - <div fxFlex="100" style="line-height:24px;border-bottom:1px solid #ccc"> + <div fxLayout="row" class="p-0 sp-bg-lightgray"> + <div fxFlex="100" class="page-container-nav"> <div fxFlex="100" fxLayout="row"> <div fxFlex fxLayoutAlign="start center"> <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectDashboard($event)"> diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss index 0ff0bdd..1ce7ae8 100644 --- a/ui/src/scss/main.scss +++ b/ui/src/scss/main.scss @@ -43,6 +43,7 @@ @import './sp/sp-theme'; @import './sp/main'; +@import './sp/layout'; @import './sp/loading-bar'; @import './sp/buttons'; @import './sp/buttons.ng1'; diff --git a/ui/src/scss/sp/colors.scss b/ui/src/scss/sp/colors.scss index 97f99b7..1f24134 100644 --- a/ui/src/scss/sp/colors.scss +++ b/ui/src/scss/sp/colors.scss @@ -96,4 +96,8 @@ .sp-primary-border-1px { border:1px solid $sp-color-primary; -} \ No newline at end of file +} + +.sp-bg-lightgray { + background-color: #f6f6f6; +} diff --git a/ui/src/app/add/add.component.scss b/ui/src/scss/sp/layout.scss similarity index 62% copy from ui/src/app/add/add.component.scss copy to ui/src/scss/sp/layout.scss index 327fd07..d8ffe1c 100644 --- a/ui/src/app/add/add.component.scss +++ b/ui/src/scss/sp/layout.scss @@ -1,4 +1,4 @@ -/* +/*! * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with * this work for additional information regarding copyright ownership. @@ -16,25 +16,74 @@ * */ -.page-container-padding-inner { - margin: 20px; + + + +.p-0 { + padding: 0; +} + +.p-5 { + padding: 5px; +} + +.pl-5 { + padding-left: 5px; +} + +.pl-10 { + padding-left: 10px; +} + + +.ml-0 { + margin-left: 0; +} + +.mr-0 { + margin-right: 0; +} + +.m-5 { + margin: 5px; } -.p-15 { - padding: 15px; +.mt-0 { + margin-top: 0; +} + +.mt-10 { + margin-top: 10px; +} + +.mb-10 { + margin-bottom: 10px; } .mr-10 { margin-right: 10px; } -.add-options { - padding:0px; - background-color:#f6f6f6; - border-bottom: 1px solid #cccccc; + + + +.w-100 { + width: 100%; } -.add-options-item { - display: inline; - margin-right: 10px; -} \ No newline at end of file +.h-100 { + height: 100%; +} + +.page-container-nav { + line-height:24px; + border-bottom:1px solid #ccc; +} + +.text-center { + text-align: center; +} + +.text-left { + text-align: left; +} diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss index 3d1044e..3164bf9 100644 --- a/ui/src/scss/sp/main.scss +++ b/ui/src/scss/sp/main.scss @@ -365,6 +365,10 @@ md-content { //height: 100%; } +.page-container-subheader { + +} + .page-container-no-border { margin: 10px; min-height: calc(100% - 20px);
