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
commit d8d5c352ee0482bafa996ee7c6baa31675667646 Author: Dominik Riemer <[email protected]> AuthorDate: Thu Jul 8 15:01:28 2021 +0200 [STREAMPIPES-395] Harmonize colors in CSS module --- .../adapter-description.component.scss | 8 ++++++++ .../data-marketplace/data-marketplace.component.html | 18 +++++++++--------- .../data-marketplace/data-marketplace.component.scss | 8 ++++---- .../existing-adapters/existing-adapters.component.html | 8 ++++---- .../existing-adapters/existing-adapters.component.scss | 7 +++---- .../format-configuration.component.html | 2 +- .../generic-adapter-configuration.component.html | 2 +- .../components/new-adapter/new-adapter.component.html | 4 ++-- .../components/new-adapter/new-adapter.component.scss | 3 +++ .../event-property-row.component.scss | 6 +++--- .../event-schema/event-schema.component.html | 2 +- .../loading-message/loading-message.component.html | 2 +- .../specific-adapter-configuration.component.html | 2 +- 13 files changed, 41 insertions(+), 31 deletions(-) diff --git a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss index d71d25a..94ea44f 100644 --- a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss +++ b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss @@ -20,17 +20,25 @@ height: 100%; box-shadow: 1px 1px 2px #555; border: 1px solid gray; + background: var(--color-bg-dialog); + cursor: pointer; padding: 10px; + opacity: 0.7; } .adapter-description-box { height: 100%; box-shadow: 1px 1px 2px #555; border: 1px solid gray; + background: var(--color-bg-dialog); cursor: pointer; padding: 10px; opacity: 0.7; } +.adapter-box:hover { + opacity: 1; +} + .adapter-description-box:hover { opacity: 1; } diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html index 9968cfb..762df25 100644 --- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html +++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html @@ -17,9 +17,9 @@ --> <div fxLayout="column" fxFlex="100" class="page-container page-container-padding page-container-connect"> - <div fxLayout="row" style="padding:0px;background-color:#f6f6f6;"> - <div fxLayout="fill" style="line-height:24px;border-bottom:1px solid #ccc"> - <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndexChange($event)"> + <div fxLayout="row" style="padding:0px;" class="sp-tab-bg"> + <div fxLayout="fill" class="page-container-nav"> + <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndexChange($event)" color="accent"> <mat-tab label="Data Marketplace"> </mat-tab> <mat-tab id="all-adapters" label="My Adapters"> @@ -27,11 +27,11 @@ </mat-tab-group> </div> <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center" - style="padding-left:10px;padding-right:10px;font-size:14px;line-height:24px;border-bottom:1px solid #ccc" + style="padding-left:10px;padding-right:10px;font-size:14px;" class="page-container-nav" *ngIf="selectedIndex === 0 && newAdapterFromDescription === undefined"> <button mat-icon-button id="startAdapterTutorial3" (click)="startAdapterTutorial3()" matTooltip="Tutorial: Generic Adapter"> - <mat-icon color="primary">school</mat-icon> + <mat-icon color="accent">school</mat-icon> </button> </div> </div> @@ -40,14 +40,14 @@ <div class="data-marketplace-options-item pl-5" style="margin-top:8px;" fxLayoutAlign="start center" fxLayout="row"> - <mat-icon color="primary">search</mat-icon> + <mat-icon color="accent">search</mat-icon> <mat-form-field class="form-style"> <input matInput placeholder="Find Element" value="" (input)="updateFilterTerm($event.target.value)" name="something"> </mat-form-field> </div> <div class="data-marketplace-options-item"> - <mat-form-field> + <mat-form-field color="accent"> <mat-select [(value)]="selectedType" (selectionChange)="filterAdapter($event)"> <mat-option *ngFor="let type of adapterTypes" [value]="type"> {{type}} @@ -56,7 +56,7 @@ </mat-form-field> </div> <div class="data-marketplace-options-item"> - <mat-form-field> + <mat-form-field color="accent"> <mat-select [(value)]="selectedCategory" (selectionChange)="filterAdapter($event)"> <mat-option *ngFor="let category of adapterCategories" [value]="category.code"> {{category.label}} @@ -80,7 +80,7 @@ </div> <div class="container-fluid marketplace-container" *ngIf="adaptersLoading" fxFlex="100" fxLayoutAlign="center center" fxLayout="row"> - <mat-spinner [mode]="'indeterminate'" [diameter]="20"></mat-spinner> + <mat-spinner [mode]="'indeterminate'" [diameter]="20" color="accent"></mat-spinner> <h4> Searching for available adapters, please wait...</h4> </div> <div class="container-fluid marketplace-container" *ngIf="!adaptersLoading && !adapterLoadingError"> diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss index c36e18b..459b31d 100644 --- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss +++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss @@ -61,13 +61,13 @@ .icon-style { margin: 15px 4px 0px 0px; - color:rgb(27, 20, 100); + color: var(--color-accent); } .data-marketplace-options { padding:0px; - background-color:#f6f6f6; - border-bottom: 1px solid #cccccc; + background-color: var(--color-bg-1); + border-bottom: 1px solid var(--color-bg-3); } .data-marketplace-options-item { @@ -81,4 +81,4 @@ ::ng-deep .mat-select-panel:not([class*=mat-elevation-z]) { box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12); -} \ No newline at end of file +} diff --git a/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.html b/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.html index 026aba1..dfd1b26 100644 --- a/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.html +++ b/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.html @@ -27,13 +27,13 @@ <ng-container matColumnDef="start"> <th mat-header-cell *matHeaderCellDef> Start</th> <td mat-cell *matCellDef="let adapter"> - <button color="primary" mat-button mat-icon-button matTooltip="Start adapter" + <button color="accent" mat-button mat-icon-button matTooltip="Start adapter" matTooltipPosition="above" (click)="startAdapter(adapter)" *ngIf="(connectService.isDataStreamDescription(adapter)) && !adapter.running"> <i class="material-icons">play_arrow</i> </button> - <button color="primary" mat-button mat-icon-button matTooltip="Stop adapter" + <button color="accent" mat-button mat-icon-button matTooltip="Stop adapter" matTooltipPosition="above" (click)="stopAdapter(adapter)" *ngIf="(connectService.isDataStreamDescription(adapter)) && adapter.running"> @@ -97,13 +97,13 @@ <!-- </button>--> <!-- </span>--> <span fxFlex fxFlexOrder="1" fxLayout="row" fxLayoutAlign="center center"> - <button color="primary" mat-button mat-icon-button matTooltip="Create adapter template" + <button color="accent" mat-button mat-icon-button matTooltip="Create adapter template" matTooltipPosition="above" (click)="createTemplate(adapter)"><i class="material-icons">content_copy</i> </button> </span> <span fxFlex fxFlexOrder="3" fxLayout="row" fxLayoutAlign="center center"> - <button color="primary" mat-button mat-icon-button matTooltip="Delete adapter" + <button color="accent" mat-button mat-icon-button matTooltip="Delete adapter" data-cy="delete" matTooltipPosition="above" (click)="deleteAdapter(adapter)"> <i class="material-icons">delete</i> </button> diff --git a/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.scss b/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.scss index a249b79..b69117a 100644 --- a/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.scss +++ b/ui/src/app/connect/components/data-marketplace/existing-adapters/existing-adapters.component.scss @@ -18,19 +18,18 @@ .mat-table { - background: #FAFAFA; + } .mat-paginator { border-top: 1px solid rgba(0,0,0,.12); - background: #FAFAFA; } .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); } .adapter-icon { diff --git a/ui/src/app/connect/components/format-configuration/format-configuration.component.html b/ui/src/app/connect/components/format-configuration/format-configuration.component.html index 2eb4221..a1ac028 100644 --- a/ui/src/app/connect/components/format-configuration/format-configuration.component.html +++ b/ui/src/app/connect/components/format-configuration/format-configuration.component.html @@ -58,7 +58,7 @@ data-cy="sp-format-selection-next-button" [disabled]="!formatConfigurationValid" (click)="clickNext()" - color="primary" mat-raised-button> + color="accent" mat-raised-button> Next </button> </div> diff --git a/ui/src/app/connect/components/generic-adapter-configuration/generic-adapter-configuration.component.html b/ui/src/app/connect/components/generic-adapter-configuration/generic-adapter-configuration.component.html index 1b2c549..5e1418c 100644 --- a/ui/src/app/connect/components/generic-adapter-configuration/generic-adapter-configuration.component.html +++ b/ui/src/app/connect/components/generic-adapter-configuration/generic-adapter-configuration.component.html @@ -35,7 +35,7 @@ <button class="mat-basic" mat-raised-button (click)="removeSelection()">Cancel</button> <div id="generic-settings-next-button"> <button class="stepper-button" [disabled]="!genericAdapterSettingsFormValid" - (click)="clickNext()" color="primary" mat-raised-button>Next + (click)="clickNext()" color="accent" mat-raised-button>Next </button> </div> </div> diff --git a/ui/src/app/connect/components/new-adapter/new-adapter.component.html b/ui/src/app/connect/components/new-adapter/new-adapter.component.html index d263ed2..8eba54f 100644 --- a/ui/src/app/connect/components/new-adapter/new-adapter.component.html +++ b/ui/src/app/connect/components/new-adapter/new-adapter.component.html @@ -42,7 +42,7 @@ </div> </div> - <mat-horizontal-stepper [linear]="true" #stepper> + <mat-horizontal-stepper [linear]="true" #stepper color="accent" class="stepper"> <mat-step *ngIf="!isGenericAdapter"> <ng-template matStepLabel>Settings</ng-template> <sp-specific-adapter-configuration @@ -96,4 +96,4 @@ </mat-horizontal-stepper> -</div> \ No newline at end of file +</div> diff --git a/ui/src/app/connect/components/new-adapter/new-adapter.component.scss b/ui/src/app/connect/components/new-adapter/new-adapter.component.scss index c8f9b76..6eeed25 100644 --- a/ui/src/app/connect/components/new-adapter/new-adapter.component.scss +++ b/ui/src/app/connect/components/new-adapter/new-adapter.component.scss @@ -52,3 +52,6 @@ opacity:0.5; } +.stepper { + background-color: var(--color-bg-0); +} diff --git a/ui/src/app/connect/components/schema-editor/event-property-row/event-property-row.component.scss b/ui/src/app/connect/components/schema-editor/event-property-row/event-property-row.component.scss index 57420f1..a3becc8 100644 --- a/ui/src/app/connect/components/schema-editor/event-property-row/event-property-row.component.scss +++ b/ui/src/app/connect/components/schema-editor/event-property-row/event-property-row.component.scss @@ -18,13 +18,13 @@ ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { - background-color: rgb(27, 20, 100) !important; + background-color: var(--color-accent) !important; } ::ng-deep .mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element { - background-color: rgb(27, 20, 100) !important; + background-color: var(--color-accent) !important; } .checkbox-selected { opacity: 1 !important; -} \ No newline at end of file +} diff --git a/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.html b/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.html index 67edc60..d422367 100644 --- a/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.html +++ b/ui/src/app/connect/components/schema-editor/event-schema/event-schema.component.html @@ -69,7 +69,7 @@ <button class="stepper-button" id="event-schema-next-button" data-cy="sp-event-schema-next-button" - color="primary" mat-raised-button + color="accent" mat-raised-button (click)="clickNext()" [disabled]="!validEventSchema"> Next diff --git a/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.html b/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.html index f875923..639fd6c 100644 --- a/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.html +++ b/ui/src/app/connect/components/schema-editor/loading-message/loading-message.component.html @@ -18,7 +18,7 @@ <div fxLayout="column" > <div fxLayoutAlign="center"> - <mat-spinner fxLayoutAlign="center" style="margin: 10px 0 5px 0">Loading</mat-spinner> + <mat-spinner fxLayoutAlign="center" style="margin: 10px 0 5px 0" color="accent">Loading</mat-spinner> </div> <div fxLayoutAlign="center"> <h3>Guessing the event schema...</h3> diff --git a/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.html b/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.html index 5b14da8..e5923e3 100644 --- a/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.html +++ b/ui/src/app/connect/components/specific-adapter-configuration/specific-adapter-configuration.component.html @@ -35,7 +35,7 @@ <button class="mat-basic" mat-raised-button (click)="removeSelection()">Cancel</button> <div id="specific-settings-next-button"> <button class="stepper-button" [disabled]="!specificAdapterSettingsFormValid" - (click)="clickNext()" color="primary" mat-raised-button>Next + (click)="clickNext()" color="accent" mat-raised-button>Next </button> </div> </div>
