This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-319
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-319 by this push:
new 74fb762 [STREAMPIPES-395] Harmonize colors in data explorer module
74fb762 is described below
commit 74fb7629474648a1956ff96f4e5555fe2704e8e4
Author: Dominik Riemer <[email protected]>
AuthorDate: Fri Jul 16 15:56:56 2021 +0200
[STREAMPIPES-395] Harmonize colors in data explorer module
---
.../grid/data-explorer-dashboard-grid.component.scss | 12 ++++++------
.../overview/data-explorer-dashboard-overview.component.html | 4 ++--
.../overview/data-explorer-dashboard-overview.component.scss | 11 +++--------
.../time-selector/timeRangeSelector.component.html | 12 ++++++------
.../time-selector/timeRangeSelector.component.scss | 8 ++++----
.../widget/data-explorer-dashboard-widget.component.scss | 6 +++++-
.../components/widgets/table/table-widget.component.scss | 3 +--
.../utils/no-data/no-data-in-date-range.component.css | 4 ++++
.../utils/no-data/no-data-in-date-range.component.html | 2 +-
ui/src/app/data-explorer/data-explorer.component.css | 2 --
ui/src/app/data-explorer/data-explorer.component.html | 8 ++++----
.../data-explorer-add-visualization-dialog.component.css | 10 +++++-----
.../data-explorer-add-visualization-dialog.component.html | 2 +-
ui/src/app/login/components/setup/setup.component.html | 4 ++--
ui/src/scss/sp/sp-theme.scss | 2 ++
ui/src/scss/sp/widgets.scss | 4 ++--
16 files changed, 48 insertions(+), 46 deletions(-)
diff --git
a/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.scss
b/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.scss
index cfa6fbc..b7b42ce 100644
---
a/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.scss
+++
b/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.scss
@@ -17,11 +17,11 @@
*/
gridster.custom-gridster-style ::ng-deep {
- background: white;
+ background: var(--color-bg-1);
}
gridster.custom-gridster-style.edit ::ng-deep {
- background: white;
+ background: var(--color-bg-1);
}
gridster.scrollVertical ::ng-deep {
@@ -31,11 +31,11 @@ gridster.scrollVertical ::ng-deep {
}
::ng-deep gridster.custom-gridster-style>.gridster-row {
- border-bottom: 1px solid #ccc;
- border-top: 1px solid #ccc;
+ border-bottom: 1px solid var(--color-bg-2);
+ border-top: 1px solid var(--color-bg-2);
}
::ng-deep gridster.custom-gridster-style>div.gridster-column {
- border-left: 1px solid #ccc;
- border-right: 1px solid #ccc;
+ border-left: 1px solid var(--color-bg-2);
+ border-right: 1px solid var(--color-bg-2);
}
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 da323e8..1a72053 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
@@ -49,7 +49,7 @@
<th fxFlex="10" fxLayoutAlign="start center"
mat-header-cell *matHeaderCellDef> Show</th>
<td fxFlex="10" fxLayoutAlign="start center" mat-cell
*matCellDef="let element">
<div fxLayout="row">
- <button mat-button mat-icon-button
color="primary"
+ <button mat-button mat-icon-button
color="accent"
(click)="showDashboard(element)">
<i class="material-icons">visibility</i>
</button>
@@ -61,7 +61,7 @@
<th fxFlex="10" fxLayoutAlign="start center"
mat-header-cell *matHeaderCellDef> Delete</th>
<td fxFlex="10" fxLayoutAlign="start center" mat-cell
*matCellDef="let element">
<div fxLayout="row">
- <button mat-button mat-icon-button
color="primary"
+ <button mat-button mat-icon-button
color="accent"
(click)="openDeleteDashboardDialog(element)">
<i class="material-icons">delete</i>
</button>
diff --git
a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.scss
b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.scss
index f80d59e..25b8b8b 100644
---
a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.scss
+++
b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.scss
@@ -20,20 +20,15 @@ table {
width:100%;
}
-.mat-table {
- background: #FAFAFA;
-}
-
.mat-paginator {
- border-top: 1px solid rgba(0,0,0,.12);
- background: #FAFAFA;
+ border-top: 1px solid rgba(0, 0, 0, .12);
}
.mat-row:nth-child(even) {
- background-color: #FAFAFA;
+ background-color: var(--color-bg-2);
}
.mat-row:nth-child(odd) {
- background-color:#ffffff;
+ background-color: var(--color-bg-3);
}
.w-100 {
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 666a4fb..42ffa86 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
@@ -20,15 +20,15 @@
<div class="time-range-wrapper" fxFlex fxLayoutAlign="center center">
<button mat-button mat-raised-button
*ngFor="let item of possibleTimeButtons"
- [color]="selectedTimeButton.value === item.value ? 'primary' : ''"
+ [color]="selectedTimeButton.value === item.value ? 'accent' : ''"
class="button-margin smaller-button-font-size"
(click)="this.setCurrentDateRange(item)">{{item.value}}</button>
</div>
<div class="time-wrapper" fxFlex fxLayoutAlign="center center">
- <button mat-button class="button-icon icon-button-font-size mr--15">
+ <button mat-button class="button-icon icon-button-font-size mr--15"
color="accent">
<mat-icon (click)="decreaseTime()">navigate_before</mat-icon>
</button>
- <mat-form-field appearance="standard" class="start-date
form-field-margin form-field-size-smaller">
+ <mat-form-field appearance="standard" class="start-date
form-field-margin form-field-size-smaller" color="accent">
<mat-label>From</mat-label>
<input matInput
[owlDateTime]="dt1"
@@ -37,7 +37,7 @@
(dateTimeChange)="changeCustomDateRange()">
<owl-date-time #dt1></owl-date-time>
</mat-form-field>
- <mat-form-field appearance="standard" class="end-date
form-field-margin form-field-size-smaller">
+ <mat-form-field appearance="standard" class="end-date
form-field-margin form-field-size-smaller" color="accent">
<mat-label>To</mat-label>
<input matInput
[owlDateTime]="dt2"
@@ -46,12 +46,12 @@
(dateTimeChange)="changeCustomDateRange()">
<owl-date-time #dt2></owl-date-time>
</mat-form-field>
- <button mat-button class="button-icon icon-button-font-size mr--15"
color="primary">
+ <button mat-button class="button-icon icon-button-font-size mr--15"
color="accent">
<mat-icon (click)="increaseTime()">navigate_next</mat-icon>
</button>
</div>
<div class="time-range-wrapper" fxFlex fxLayoutAlign="center center">
- <button mat-button mat-raised-button color="primary"
+ <button mat-button mat-raised-button color="accent"
class="button-margin smaller-button-font-size"
matTooltip="Reload" matTooltipPosition="above">
<mat-icon (click)="refreshData()">autorenew</mat-icon>
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 a29dbd6..4768cb9 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
@@ -42,13 +42,13 @@
}
.time-range-wrapper {
- border: 1px solid $sp-color-accent;
- background: $sp-color-accent;
+ border: 1px solid var(--color-accent);
+ background: var(--color-accent);
}
.time-wrapper {
- border: 1px solid $sp-color-accent;
- background: white;
+ border: 1px solid var(--color-accent);
+ background: var(--color-bg-0);
}
.mr--15 {
diff --git
a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss
b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss
index 64ce696..f6b17de 100644
---
a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss
+++
b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.scss
@@ -18,6 +18,10 @@
@import '../../../../scss/variables';
+.gridster-item-content {
+ background: var(--color-bg-0);
+}
+
.h-100 {
height:100%;
}
@@ -42,7 +46,7 @@
display: flex;
flex-flow: column;
height: 100%;
- border:3px solid $sp-color-accent-light;
+ border:3px solid var(--content-box-color);
}
.box .row.content {
diff --git
a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.scss
b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.scss
index 1a94e78..87790ef 100644
---
a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.scss
+++
b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.scss
@@ -34,5 +34,4 @@
.column-header {
font-size:14px;
font-weight: bold;
- color: #393939;
-}
\ No newline at end of file
+}
diff --git
a/ui/src/app/data-explorer/components/widgets/utils/no-data/no-data-in-date-range.component.css
b/ui/src/app/data-explorer/components/widgets/utils/no-data/no-data-in-date-range.component.css
index 13cbc4a..2d5997c 100644
---
a/ui/src/app/data-explorer/components/widgets/utils/no-data/no-data-in-date-range.component.css
+++
b/ui/src/app/data-explorer/components/widgets/utils/no-data/no-data-in-date-range.component.css
@@ -15,3 +15,7 @@
* limitations under the License.
*
*/
+
+.default-text {
+ color: var(--color-default-text);
+}
diff --git
a/ui/src/app/data-explorer/components/widgets/utils/no-data/no-data-in-date-range.component.html
b/ui/src/app/data-explorer/components/widgets/utils/no-data/no-data-in-date-range.component.html
index ad151cd..630accc 100644
---
a/ui/src/app/data-explorer/components/widgets/utils/no-data/no-data-in-date-range.component.html
+++
b/ui/src/app/data-explorer/components/widgets/utils/no-data/no-data-in-date-range.component.html
@@ -22,7 +22,7 @@
<!-- TODO Icon -->
</div>
<div fxLayout="row" fxLayoutAlign="center center" style="margin-top: 30px">
- <h3>Found no data in selected time range ({{viewDateRange.startDate |
date:'MM/dd/yyyy HH:mm'}} - {{viewDateRange.endDate | date:'MM/dd/yyyy
HH:mm'}})</h3>
+ <h3 class="default-text">Found no data in selected time range
({{viewDateRange.startDate | date:'MM/dd/yyyy HH:mm'}} -
{{viewDateRange.endDate | date:'MM/dd/yyyy HH:mm'}})</h3>
</div>
</div>
diff --git a/ui/src/app/data-explorer/data-explorer.component.css
b/ui/src/app/data-explorer/data-explorer.component.css
index 0b8993f..4482be5 100644
--- a/ui/src/app/data-explorer/data-explorer.component.css
+++ b/ui/src/app/data-explorer/data-explorer.component.css
@@ -78,8 +78,6 @@
.data-explorer-options {
padding:0px;
- background-color:#f6f6f6;
- border-bottom: 1px solid #cccccc;
}
.data-explorer-options-item {
diff --git a/ui/src/app/data-explorer/data-explorer.component.html
b/ui/src/app/data-explorer/data-explorer.component.html
index c730241..561857c 100644
--- a/ui/src/app/data-explorer/data-explorer.component.html
+++ b/ui/src/app/data-explorer/data-explorer.component.html
@@ -29,19 +29,19 @@
</div>
</div>
</div>
- <div class="fixed-height data-explorer-options" fxLayout="row"
*ngIf="selectedIndex > 0">
+ <div class="fixed-height data-explorer-options sp-tab-bg" fxLayout="row"
*ngIf="selectedIndex > 0">
<div class="data-explorer-options-item pl-10" fxLayoutAlign="start
center" fxLayout="row">
- <button mat-button color="primary" matTooltip="Save"
[matTooltipPosition]="'above'" (click)="saveDashboard()">
+ <button mat-button color="accent" matTooltip="Save"
[matTooltipPosition]="'above'" (click)="saveDashboard()">
<mat-icon>save</mat-icon> <span>Save</span>
</button>
</div>
<div class="data-explorer-options-item" fxLayoutAlign="start center"
fxLayout="row">
- <button mat-button color="primary" matTooltip="Add visualization"
[matTooltipPosition]="'above'" (click)="addVisualization()">
+ <button mat-button color="accent" matTooltip="Add visualization"
[matTooltipPosition]="'above'" (click)="addVisualization()">
<mat-icon>add</mat-icon> <span>Add visualization</span>
</button>
</div>
<div class="data-explorer-options-item" fxLayoutAlign="start center"
fxLayout="row">
- <mat-slide-toggle color="primary" [(ngModel)]="gridVisible"
(ngModelChange)="toggleGrid()">
+ <mat-slide-toggle color="accent" [(ngModel)]="gridVisible"
(ngModelChange)="toggleGrid()">
<span>Show grid</span>
</mat-slide-toggle>
</div>
diff --git
a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.css
b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.css
index 554bb0a..b7f5117 100644
---
a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.css
+++
b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.css
@@ -22,8 +22,8 @@
}
mat-toolbar {
- background: #39b54a;
- color:white;
+ background: var(--color-primary);
+ color:var(--color-bg-0);
}
mat-dialog-content {
@@ -62,10 +62,10 @@ mat-dialog-content {
}
.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
+ border-bottom: 1px solid var(--color-bg-0);
+}
diff --git
a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.html
b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.html
index 3fef00b..47d7c7d 100644
---
a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.html
+++
b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.html
@@ -68,7 +68,7 @@
&& !(data)">
Back
</button>
- <button mat-button mat-raised-button color="primary" (click)="next()">
+ <button mat-button mat-raised-button color="accent" (click)="next()">
<span *ngIf="!data && 'configure-widget' === page">Create</span>
<span *ngIf="data && 'configure-widget' === page">Save</span>
<span *ngIf="data == null && !('configure-widget' ===
page)">Next</span>
diff --git a/ui/src/app/login/components/setup/setup.component.html
b/ui/src/app/login/components/setup/setup.component.html
index ace0dfb..495d019 100644
--- a/ui/src/app/login/components/setup/setup.component.html
+++ b/ui/src/app/login/components/setup/setup.component.html
@@ -52,10 +52,10 @@
<div fxFlex="80" style="width:50%">
<h4>{{msg.notifications[0].title}}</h4></div>
<div fxFlex="20" style="width:50%">
- <mat-icon class="md-accent"
color="primary" style="width: 36px; height: 36px"
+ <mat-icon class="md-accent" color="accent"
style="width: 36px; height: 36px"
*ngIf="msg.success">done
</mat-icon>
- <mat-icon class="md-accent"
color="primary" style="width: 36px; height: 36px"
+ <mat-icon class="md-accent" color="accent"
style="width: 36px; height: 36px"
*ngIf="!(msg.success)">error
</mat-icon>
</div>
diff --git a/ui/src/scss/sp/sp-theme.scss b/ui/src/scss/sp/sp-theme.scss
index df360ef..13d4119 100644
--- a/ui/src/scss/sp/sp-theme.scss
+++ b/ui/src/scss/sp/sp-theme.scss
@@ -161,6 +161,7 @@ $accent: map-get($custom-theme-light, accent);
--color-bg-1: #282828;
--color-bg-2: #404040;
--color-bg-3: #424242;
+ --color-bg-4: #5f5f5f;
--color-bg-dialog: rgb(66, 66, 66);
--color-shadow: #c4c4c4;
--color-pe: #404040;
@@ -193,6 +194,7 @@ $accent: map-get($custom-theme-light, accent);
--color-bg-1: #FAFAFA;
--color-bg-2: #f1f1f1;
--color-bg-3: rgb(224, 224, 224);
+ --color-bg-4: rgb(212, 212, 212);
--color-bg-dialog: #FFFFFF;
--color-shadow: #555;
--color-pe: #FFFFFF;
diff --git a/ui/src/scss/sp/widgets.scss b/ui/src/scss/sp/widgets.scss
index 1f4164b..61653da 100644
--- a/ui/src/scss/sp/widgets.scss
+++ b/ui/src/scss/sp/widgets.scss
@@ -22,8 +22,8 @@
}
.widget-inner-options {
- background: #f6f6f6;
- border-bottom: 1px solid #ccc;
+ background: var(--color-bg-4);
+ border-bottom: 1px solid var(--color-bg-1);
padding: 5px;
height: 40px;
}
