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
The following commit(s) were added to refs/heads/STREAMPIPES-395 by this push:
new 8ca270e [STREAMPIPES-395] Harmonize colors in UI components
8ca270e is described below
commit 8ca270e37c585cdebf51b4e8a7422c6bf6044bc4
Author: Dominik Riemer <[email protected]>
AuthorDate: Wed Jul 7 14:30:25 2021 +0200
[STREAMPIPES-395] Harmonize colors in UI components
---
.../core-ui/dialog/panel-dialog/panel-dialog.component.scss | 2 +-
.../core/components/streampipes/streampipes.component.scss | 2 +-
.../dashboard/components/panel/dashboard-panel.component.css | 4 ++++
.../components/widget/dashboard-widget.component.css | 6 +++---
.../components/widget/dashboard-widget.component.html | 4 ++--
ui/src/app/dashboard/dashboard.component.html | 2 +-
.../add-widget/add-visualization-dialog.component.html | 2 +-
.../add-widget/add-visualization-dialog.component.scss | 8 ++++++--
.../overview/data-explorer-dashboard-overview.component.html | 6 +++---
ui/src/app/data-explorer/data-explorer.component.html | 2 +-
.../pipeline-assembly/pipeline-assembly.component.scss | 2 +-
.../compatible-elements/compatible-elements.component.ts | 4 ++--
ui/src/app/notifications/notifications.component.scss | 2 +-
.../components/actions/pipeline-actions.component.html | 8 ++++----
.../pipeline-details/components/edit/quickedit.component.html | 2 +-
.../components/monitoring/pipeline-monitoring.component.html | 4 ++--
.../components/monitoring/pipeline-monitoring.component.scss | 4 ++--
ui/src/app/pipeline-details/pipeline-details.component.html | 6 +++---
.../pipeline-categories-dialog.component.html | 4 ++--
ui/src/scss/sp/buttons.scss | 2 +-
ui/src/scss/sp/dialog.scss | 4 ++--
ui/src/scss/sp/main.scss | 11 +++++------
ui/src/scss/sp/sp-theme.scss | 2 +-
23 files changed, 50 insertions(+), 43 deletions(-)
diff --git a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
index 17e0e92..2f4115a 100644
--- a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
+++ b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
@@ -37,7 +37,7 @@ app-dialog-container {
height: 50px;
min-height: 50px;
width: 100%;
- background: $sp-color-primary;
+ background: var(--color-primary);
align-items: center;
}
diff --git a/ui/src/app/core/components/streampipes/streampipes.component.scss
b/ui/src/app/core/components/streampipes/streampipes.component.scss
index 0af1f82..0b42b19 100644
--- a/ui/src/app/core/components/streampipes/streampipes.component.scss
+++ b/ui/src/app/core/components/streampipes/streampipes.component.scss
@@ -19,7 +19,7 @@
@import "../../../../scss/variables";
.iconbar {
- background: $sp-color-primary;
+ background: var(--color-primary);
}
.base {
diff --git
a/ui/src/app/dashboard/components/panel/dashboard-panel.component.css
b/ui/src/app/dashboard/components/panel/dashboard-panel.component.css
index 0bde2c6..b26f598 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.css
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.css
@@ -16,6 +16,10 @@
*
*/
+.mr-10 {
+ margin-right: 10px;
+}
+
.m-20 {
margin: 20px;
}
diff --git
a/ui/src/app/dashboard/components/widget/dashboard-widget.component.css
b/ui/src/app/dashboard/components/widget/dashboard-widget.component.css
index 1e55025..0dac458 100644
--- a/ui/src/app/dashboard/components/widget/dashboard-widget.component.css
+++ b/ui/src/app/dashboard/components/widget/dashboard-widget.component.css
@@ -52,8 +52,8 @@
}
.pipeline-not-running {
- background: #e2e2e2;
- border: 1px solid #f44336;
+ background: var(--color-bg-dialog);
+ border: 1px solid var(--color-warn);
padding: 20px;
display:flex;
align-items: center;
@@ -63,6 +63,6 @@
.disconnect-icon {
font-size:36pt;
- color:#f44336;
+ color: var(--color-warn);
}
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 dab9881..eef3ceb 100644
--- a/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
+++ b/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
@@ -34,7 +34,7 @@
fxLayoutAlign="center center">
<i class="material-icons disconnect-icon">block</i>
<h5 class="text-center">Widget not found, did you modify the
pipeline?</h5>
- <button mat-button mat-raised-button color="primary"
(click)="modifyWidget()">
+ <button mat-button mat-raised-button color="accent"
(click)="modifyWidget()">
<span>Modify widget</span>
</button>
</div>
@@ -43,7 +43,7 @@
fxLayoutAlign="center center">
<i class="material-icons disconnect-icon">link_off</i>
<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()">
+ <button mat-button mat-raised-button color="accent"
(click)="startPipeline()">
<span>Start pipeline</span>
</button>
</div>
diff --git a/ui/src/app/dashboard/dashboard.component.html
b/ui/src/app/dashboard/dashboard.component.html
index 3f2750d..d259e40 100644
--- a/ui/src/app/dashboard/dashboard.component.html
+++ b/ui/src/app/dashboard/dashboard.component.html
@@ -27,7 +27,7 @@
</mat-tab-group>
</div>
<div fxFlex fxLayoutAlign="end center" class="mr-20">
- <button mat-button mat-icon-button color="primary"
+ <button mat-button mat-icon-button color="accent"
*ngIf="selectedIndex > 0" (click)="toggleEditMode()"
[disabled]="editMode">
<i class="material-icons">edit</i>
</button>
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 2f25cac..a83595d 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
@@ -76,7 +76,7 @@
<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
+ <button mat-button mat-raised-button color="accent" (click)="next()"
[disabled]="'configure-widget' === page
&& !formValid">
<span *ngIf="!editMode && 'configure-widget' ===
page">Create</span>
<span *ngIf="editMode && 'configure-widget' === page">Save</span>
diff --git
a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.scss
b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.scss
index bcf4ce5..1b69ba0 100644
---
a/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.scss
+++
b/ui/src/app/dashboard/dialogs/add-widget/add-visualization-dialog.component.scss
@@ -35,10 +35,14 @@
}
.list-item:hover {
- background: #E0E0E0;
+ background: var(--color-bg-1);
cursor: pointer;
}
.list-item {
border-bottom: 1px solid #BDBDBD;
-}
\ No newline at end of file
+}
+
+.mr-10 {
+ margin-right: 10px;
+}
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 2a9b451..3ed2eba 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
@@ -19,10 +19,10 @@
<div fxFlex="100" fxLayout="column" class="m-20">
<div fxLayout="row wrap">
- <button mat-button mat-raised-button color="primary"
(click)="openNewDataViewDialog()">
+ <button mat-button mat-raised-button color="accent"
(click)="openNewDataViewDialog()">
New Data View
</button>
- <button mat-button mat-raised-button color="primary"
(click)="openEditLabelView()">
+ <button mat-button mat-raised-button color="accent"
(click)="openEditLabelView()">
Edit Labels
</button>
</div>
@@ -30,7 +30,7 @@
<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>
+ <span fxFlex></span>
</div>
</div>
<div fxFlex="100" fxLayout="column" fxLayoutAlign="start start"
class="sp-blue-border">
diff --git a/ui/src/app/data-explorer/data-explorer.component.html
b/ui/src/app/data-explorer/data-explorer.component.html
index 19ea6f2..c730241 100644
--- a/ui/src/app/data-explorer/data-explorer.component.html
+++ b/ui/src/app/data-explorer/data-explorer.component.html
@@ -21,7 +21,7 @@
<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)">
+ <mat-tab-group [selectedIndex]="selectedIndex"
(selectedIndexChange)="selectDashboard($event)" color="accent">
<mat-tab label="Start"></mat-tab>
<mat-tab *ngFor="let dataViewDashboard of
dataViewDashboards" label="{{dataViewDashboard.name}}"></mat-tab>
</mat-tab-group>
diff --git
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
index 074ae2a..aeb5838 100644
---
a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
+++
b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
@@ -59,7 +59,7 @@
z-index: 0;
margin: -1px;
- background-color: var(--color-bg-0);
+ background-color: var(--color-bg-1);
background-image: var(--canvas-color);
background-size: 15px 15px;
}
diff --git
a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
index bad9f95..44af6e6 100644
---
a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
+++
b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
@@ -73,14 +73,14 @@ export class CompatibleElementsComponent {
makeStandardStyle() {
return {
- background: "white",
+ background: "var(--color-bg-dialog)",
cursor: "auto"
}
}
makeHoverStyle() {
return {
- background: "lightgrey",
+ background: "var(--color-bg-1)",
cursor: "pointer"
}
}
diff --git a/ui/src/app/notifications/notifications.component.scss
b/ui/src/app/notifications/notifications.component.scss
index 49c15af..0799367 100644
--- a/ui/src/app/notifications/notifications.component.scss
+++ b/ui/src/app/notifications/notifications.component.scss
@@ -115,7 +115,7 @@
}
.new-notification-info {
- background: $sp-color-primary;
+ background: var(--color-primary);
width: 10px;
height: 10px;
border-radius: 50%;
diff --git
a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html
b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html
index ac4b685..dc98415 100644
---
a/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html
+++
b/ui/src/app/pipeline-details/components/actions/pipeline-actions.component.html
@@ -25,14 +25,14 @@
<div class="sp-blue-border">
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="row"
style="padding:10px">
<div fxFlex="30">
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
matTooltip="Start Pipeline" matTooltipPosition="above"
(click)="startPipeline()"
[disabled]="starting" *ngIf="!pipeline.running">
<mat-icon>play_arrow</mat-icon>
<span> Start</span>
</button>
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
matTooltip="Stop Pipeline" matTooltipPosition="above"
(click)="stopPipeline()"
[disabled]="stopping" *ngIf="pipeline.running">
@@ -41,7 +41,7 @@
</button>
</div>
<div fxFlex="30">
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
matTooltip="Modify Pipeline" matTooltipPosition="above"
[disabled]="pipeline.running"
(click)="pipelineOperationsService.modifyPipeline(pipeline._id)">
@@ -50,7 +50,7 @@
</button>
</div>
<div fxFlex="30">
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
matTooltip="Delete Pipeline" matTooltipPosition="above"
(click)="pipelineOperationsService.showDeleteDialog(pipeline,
reloadPipelineEmitter, this.switchToPipelineView)">
<mat-icon>delete</mat-icon>
diff --git
a/ui/src/app/pipeline-details/components/edit/quickedit.component.html
b/ui/src/app/pipeline-details/components/edit/quickedit.component.html
index 01d1677..ba52554 100644
--- a/ui/src/app/pipeline-details/components/edit/quickedit.component.html
+++ b/ui/src/app/pipeline-details/components/edit/quickedit.component.html
@@ -21,7 +21,7 @@
<div fxLayout="row" fxLayoutAlign="start center">
<h4>Edit configuration</h4>
<span fxFlex></span>
- <button color="primary" mat-button mat-raised-button
matTooltip="Save Pipeline" matTooltipPosition="above"
+ <button color="accent" mat-button mat-raised-button
matTooltip="Save Pipeline" matTooltipPosition="above"
style="display:flex;align-items:center;"
class="settings-bar-icon-button"
[disabled]="(!formValid || pipelineUpdating)"
(click)="updatePipeline()">
diff --git
a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.html
b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.html
index 6262744..e3926d4 100644
---
a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.html
+++
b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.html
@@ -21,7 +21,7 @@
<div fxLayout="column" class="fixed-height add-options">
<div class="add-options-item" fxLayoutAlign="start center"
fxLayout="row" style="padding-right:10px;">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
- <mat-slide-toggle [(ngModel)]="autoRefresh"
color="primary">Auto refresh</mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="autoRefresh"
color="accent">Auto refresh</mat-slide-toggle>
</div>
</div>
</div>
@@ -32,7 +32,7 @@
<div fxFlex="100" *ngIf="!pipeline.running" fxLayout="column"
fxLayoutAlign="center center">
<div class="error-message">(monitoring info is only available for
running pipelines)</div>
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
matTooltip="Start Pipeline" matTooltipPosition="above"
(click)="startPipeline()">
<mat-icon>play_arrow</mat-icon>
diff --git
a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.scss
b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.scss
index 7bb2d2f..3faa74b 100644
---
a/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.scss
+++
b/ui/src/app/pipeline-details/components/monitoring/pipeline-monitoring.component.scss
@@ -17,8 +17,8 @@
*/
.add-options {
- background-color:#f6f6f6;
- border-bottom: 1px solid #cccccc;
+ background-color: var(--color-bg-1);
+ border-bottom: 1px solid var(--color-bg-3);
padding-top:10px;
padding-bottom:10px;
}
diff --git a/ui/src/app/pipeline-details/pipeline-details.component.html
b/ui/src/app/pipeline-details/pipeline-details.component.html
index 799f9ae..7228476 100644
--- a/ui/src/app/pipeline-details/pipeline-details.component.html
+++ b/ui/src/app/pipeline-details/pipeline-details.component.html
@@ -17,10 +17,10 @@
-->
<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-tab-bg" style="padding:0px">
+ <div fxFlex="100" class="page-container-nav">
<div fxFlex="100" fxLayout="row">
- <mat-tab-group [selectedIndex]="selectedIndex"
(selectedIndexChange)="setSelectedIndex($event)">
+ <mat-tab-group [selectedIndex]="selectedIndex"
(selectedIndexChange)="setSelectedIndex($event)" color="accent">
<mat-tab label="Overview"></mat-tab>
<mat-tab label="Monitoring"></mat-tab>
<mat-tab label="Errors"></mat-tab>
diff --git
a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html
b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html
index a1fce33..dab840c 100644
---
a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html
+++
b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.html
@@ -115,13 +115,13 @@
</div>
<div *ngIf="addSelected">
<div class="md-list-item-text" fxFlex="20" fxLayout="column">
- <mat-form-field>
+ <mat-form-field color="accent">
<mat-label>Name</mat-label>
<input matInput type="text" [(ngModel)]="newCategoryName">
</mat-form-field>
</div>
<div class="md-list-item-text" fxFlex="60" fxLayout="column">
- <mat-form-field>
+ <mat-form-field color="accent">
<mat-label>Description</mat-label>
<input matInput type="text"
[(ngModel)]="newCategoryDescription">
</mat-form-field>
diff --git a/ui/src/scss/sp/buttons.scss b/ui/src/scss/sp/buttons.scss
index ce26ed7..7215afb 100644
--- a/ui/src/scss/sp/buttons.scss
+++ b/ui/src/scss/sp/buttons.scss
@@ -56,7 +56,7 @@
}
.mat-raised-button.mat-primary:enabled {
- background: $sp-color-primary;
+ background: var(--color-primary);
color: rgba(255, 255, 255, 0.75);
}
diff --git a/ui/src/scss/sp/dialog.scss b/ui/src/scss/sp/dialog.scss
index 5e64bdd..44b3f06 100644
--- a/ui/src/scss/sp/dialog.scss
+++ b/ui/src/scss/sp/dialog.scss
@@ -43,7 +43,7 @@
}
.sp-no-padding-dialog .mat-dialog-container .md-dialog .md-toolbar {
- background: $sp-color-primary;
+ background: var(--color-primary);
color: white;
}
@@ -71,4 +71,4 @@
min-height: 52px;
overflow: hidden;
border-top: 1px solid #cccccc;
-}
\ No newline at end of file
+}
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index a36f7ee..15d6e19 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -203,7 +203,7 @@ md-dialog-actions {
}
md-toolbar:not(.md-menu-toolbar) {
- background: $sp-color-primary;
+ background: var(--color-primary);
}
.md-list-item-text {
@@ -877,7 +877,7 @@ md-select.md-default-theme
.md-select-value.md-select-placeholder, md-select .md
.assembly-options-preview {
color: white;
padding: 5px;
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0
2px 1px -1px rgba(0, 0, 0, .12);
+ //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14),
0 2px 1px -1px rgba(0, 0, 0, .12);
}
@@ -896,12 +896,12 @@ md-select.md-default-theme
.md-select-value.md-select-placeholder, md-select .md
overflow: auto;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0
2px 1px -1px rgba(0, 0, 0, .12);
padding: 5px;
- border: 1px solid $sp-color-accent-light;
+ border: 1px solid var(--color-bg-2);
height: 300px;
width: 100%;
- background-color: white;
- background-image: linear-gradient(90deg, rgba(208, 208, 208, .5) 10%,
transparent 0%), linear-gradient(rgba(208, 208, 208, .5) 10%, transparent 0%);
+ background-color: var(--color-bg-1);
+ background-image: var(--canvas-color);
background-size: 15px 15px;
}
@@ -919,7 +919,6 @@ md-select.md-default-theme
.md-select-value.md-select-placeholder, md-select .md
height: 100%;
width: 100%;
z-index: 0;
-
}
#pipelineDisplay {
diff --git a/ui/src/scss/sp/sp-theme.scss b/ui/src/scss/sp/sp-theme.scss
index fe1302f..7d6ae27 100644
--- a/ui/src/scss/sp/sp-theme.scss
+++ b/ui/src/scss/sp/sp-theme.scss
@@ -168,7 +168,7 @@ $accent: map-get($custom-theme-light, accent);
--color-warn: #b36161;
--content-box-color: #404040;
- --canvas-color: linear-gradient(90deg, rgba(40, 40, 40, 0.5) 10%,
transparent 0%), linear-gradient(rgba(40, 40, 40, 0.5) 10%, transparent 0%);
+ --canvas-color: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%,
transparent 0%), linear-gradient(rgba(50, 50, 50, 0.5) 10%, transparent 0%);
}
