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 ec4b362fb530ecdfdb808c1b6b3488c06c1986c5 Author: Dominik Riemer <[email protected]> AuthorDate: Mon Jul 5 17:48:22 2021 +0200 [STREAMPIPES-395] Extract colors from components to theme --- ui/src/app/add/add.component.html | 4 +- ui/src/app/add/add.component.scss | 3 +- .../app/configuration/configuration.component.html | 4 +- .../streampipes/streampipes.component.html | 15 +-- .../streampipes/streampipes.component.scss | 7 +- .../streampipes/streampipes.component.ts | 6 +- .../core/components/toolbar/toolbar.component.html | 19 ++-- .../core/components/toolbar/toolbar.component.ts | 27 +++++- ui/src/app/core/core.module.ts | 9 +- .../overview/dashboard-overview.component.css | 1 - .../overview/dashboard-overview.component.html | 12 +-- ui/src/app/dashboard/dashboard.component.html | 4 +- .../edit-dashboard-dialog.component.css | 2 +- .../pipeline-assembly.component.scss | 10 +- .../pipeline-element-icon-stand.component.html | 6 +- .../pipeline-element-icon-stand.component.scss | 12 +-- ui/src/app/editor/editor.component.html | 34 ++++--- ui/src/app/editor/editor.component.scss | 9 +- ui/src/app/files/files.component.html | 6 +- ui/src/app/files/files.component.scss | 5 +- ui/src/app/home/components/status.component.css | 4 +- ui/src/app/home/home.component.html | 10 +- ui/src/app/home/home.component.scss | 14 +-- .../login/components/login/login.component.html | 14 +-- .../login/components/setup/setup.component.html | 2 +- .../app/notifications/notifications.component.html | 8 +- ui/src/app/pipelines/pipelines.component.html | 6 +- ui/src/app/services/auth-status.service.ts | 1 + ui/src/scss/_variables.scss | 4 +- ui/src/scss/main.scss | 3 +- ui/src/scss/sp/buttons.ng1.scss | 10 +- ui/src/scss/sp/buttons.scss | 32 +++---- ui/src/scss/sp/colors.scss | 39 +++++--- ui/src/scss/sp/feedback.ng1.scss | 6 +- ui/src/scss/sp/layout.scss | 35 ++++++- ui/src/scss/sp/main.scss | 11 ++- ui/src/scss/sp/pipeline-element-options.scss | 4 +- .../sp/{sp-theme.scss => sp-theme-yellow.scss} | 105 ++++++++++++++++++++- ui/src/scss/sp/sp-theme.scss | 105 ++++++++++++++++++++- 39 files changed, 435 insertions(+), 173 deletions(-) diff --git a/ui/src/app/add/add.component.html b/ui/src/app/add/add.component.html index 04f769a..33943d5 100644 --- a/ui/src/app/add/add.component.html +++ b/ui/src/app/add/add.component.html @@ -25,7 +25,7 @@ </button> <div fxFlex fxLayoutAlign="start center" [attr.id]="'peType'"> <mat-tab-group [selectedIndex]="selectedCategoryIndex" - (selectedIndexChange)="setSelectedTab($event)"> + (selectedIndexChange)="setSelectedTab($event)" color="accent"> <mat-tab label="All"></mat-tab> <mat-tab label="Data Sets"></mat-tab> <mat-tab label="Data Streams"></mat-tab> @@ -36,7 +36,7 @@ </div> </div> </div> - <div fxLayout="row" class="fixed-height add-options"> + <div fxLayout="row" class="fixed-height add-options sp-tab-bg"> <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" diff --git a/ui/src/app/add/add.component.scss b/ui/src/app/add/add.component.scss index 03a1272..b641e78 100644 --- a/ui/src/app/add/add.component.scss +++ b/ui/src/app/add/add.component.scss @@ -32,8 +32,7 @@ .add-options { padding:0px; - background-color:#f6f6f6; - border-bottom: 1px solid #cccccc; + border-bottom: 1px solid var(--color-bg-2); } .add-options-item { diff --git a/ui/src/app/configuration/configuration.component.html b/ui/src/app/configuration/configuration.component.html index 7019d05..72f3c54 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" class="p-0 sp-bg-lightgray"> - <div fxLayout="fill" class="page-container-nav"> + <div fxLayout="row" class="p-0 sp-bg-lightgray page-container-nav"> + <div fxLayout="fill"> <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/core/components/streampipes/streampipes.component.html b/ui/src/app/core/components/streampipes/streampipes.component.html index b5f8bce..cb811f7 100644 --- a/ui/src/app/core/components/streampipes/streampipes.component.html +++ b/ui/src/app/core/components/streampipes/streampipes.component.html @@ -16,16 +16,7 @@ ~ --> -<!--<div flex ng-controller="ToolbarController as toolbarCtrl" class="display: flex;min-height: 100vh; max-height: 100vh;">--> -<!-- <div ui-view="spNavbar"></div>--> -<!-- <div style="display: flex;flex-direction: row; height: calc(100vh - 50px);">--> -<!-- <div md-whiteframe="6" style="width:40px;color:white;" class="sp-darkblue"--> -<!-- ui-view="spIconBar"></div>--> -<!-- <md-content class="sp-fade-only-enter" id="content" ui-view="spMain"--> -<!-- style="background:#fff !important;flex-grow: 1;"></md-content>--> -<!-- </div>--> -<!--</div>--> -<div> +<div [ngClass]="authStatusService.darkMode ? 'dark-mode base-style' : 'light-mode base-style'"> <div style="height: 50px;"> <toolbar></toolbar> </div> @@ -33,8 +24,8 @@ <div style="width:40px;color:white;" class="iconbar"> <iconbar></iconbar> </div> - <div style="width: 100%; height: 100%; overflow-y: auto;"> + <div style="width: 100%; height: 100%; overflow-y: auto;" class="base"> <router-outlet></router-outlet> </div> </div> -</div> \ No newline at end of file +</div> diff --git a/ui/src/app/core/components/streampipes/streampipes.component.scss b/ui/src/app/core/components/streampipes/streampipes.component.scss index bec7f92..0af1f82 100644 --- a/ui/src/app/core/components/streampipes/streampipes.component.scss +++ b/ui/src/app/core/components/streampipes/streampipes.component.scss @@ -20,4 +20,9 @@ .iconbar { background: $sp-color-primary; -} \ No newline at end of file +} + +.base { + color: var(--color-default-text); + background: var(--color-bg-0); +} diff --git a/ui/src/app/core/components/streampipes/streampipes.component.ts b/ui/src/app/core/components/streampipes/streampipes.component.ts index ba4d474..954d1ba 100644 --- a/ui/src/app/core/components/streampipes/streampipes.component.ts +++ b/ui/src/app/core/components/streampipes/streampipes.component.ts @@ -17,6 +17,7 @@ */ import {Component, OnInit} from "@angular/core"; +import {AuthStatusService} from "../../../services/auth-status.service"; @Component({ selector: 'streampipes', @@ -25,9 +26,12 @@ import {Component, OnInit} from "@angular/core"; }) export class StreampipesComponent implements OnInit { + constructor(public authStatusService: AuthStatusService) { + + } ngOnInit(): void { } -} \ No newline at end of file +} diff --git a/ui/src/app/core/components/toolbar/toolbar.component.html b/ui/src/app/core/components/toolbar/toolbar.component.html index 991b82c..21e588d 100644 --- a/ui/src/app/core/components/toolbar/toolbar.component.html +++ b/ui/src/app/core/components/toolbar/toolbar.component.html @@ -16,31 +16,34 @@ ~ --> -<mat-toolbar class="md-primary md-hue-2 top-nav" color="accent"> +<mat-toolbar class="md-primary md-hue-2 top-nav" color="primary"> <div class="md-toolbar-tools" style="height:50px;max-height:50px;width:100%;"> <div fxFlex="60" fxLayout fxLayoutAlign="start center"> <div class="md-toolbar-tools" style="height:50px;max-height:50px;" fxFlex fxLayout="row" fxLayoutAlign="start center"> - <div class="sp-darkblue" style="padding:5px;border-radius:0px;margin-right:15px;position:relative;left:20px;"> + <div style="padding:5px;border-radius:0px;margin-right:15px;position:relative;left:20px;"> <img alt="icon" src="../../../../assets/img/sp/sp-logo-right-white.png" style="height:28px;"> </div> - <div style="color:white;padding: 5px 5px;font-size:15px;margin-left:10px;"> + <div style="padding: 5px 5px;font-size:15px;margin-left:10px;"> <h4 style="margin-top:12px;font-size:12pt;font-weight:bold;">{{activePageName}}</h4> </div> </div> </div> <span fxFlex></span> <div fxFlex="40" fxLayout fxLayoutAlign="end center" *ngIf="authenticated" style="height:100%;"> - <div style="color:white;padding: 5px 5px;margin-left:10px;font-size:12pt;"> + <div> + <mat-slide-toggle color="accent" [formControl]="appearanceControl">Dark Mode</mat-slide-toggle> + </div> + <div style="padding: 5px 5px;margin-left:10px;font-size:12pt;"> <span style="margin-top:12px;font-weight:bold;">version: </span><span style="font-weight: normal;" *ngIf="versionInfo">{{versionInfo.backendVersion}}</span> </div> <div style="height:100%;"> - <div [ngStyle]="feedbackOpen.menuOpen ? {'background-color': 'white'} : {'background-color': '#39b54a'}" fxLayout fxLayoutAlign="center center" style="height: 100%;"> + <div [ngClass]="feedbackOpen.menuOpen ? '' : 'sp-darkblue'" fxLayout fxLayoutAlign="center center" style="height: 100%;"> <button mat-button mat-icon-button [matMenuTriggerFor]="feedbackMenu" #feedbackOpen="matMenuTrigger" matTooltip="Feedback" matTooltipPosition="below" [ngClass]="feedbackOpen.menuOpen ? 'sp-icon-button-no-hover' : 'sp-icon-button'" style="min-width:0px;" fxLayout fxLayoutAlign="center center"> - <i [ngStyle]="feedbackOpen.menuOpen ? {'color': '#39b54a'} : {'color': 'white'}" class="material-icons">feedback</i> + <i [ngClass]="feedbackOpen.menuOpen ? 'sp-darkblue-text' : ''" class="material-icons">feedback</i> </button> </div> </div> @@ -48,14 +51,14 @@ <feedback (closeFeedbackEmitter)="closeFeedbackWindow()"></feedback> </mat-menu> <div style="height:100%;"> - <div [ngStyle]="accountMenuOpen.menuOpen ? {'background-color': 'white'} : {'background-color': '#39b54a'}" fxLayout fxLayoutAlign="center center" style="height: 100%;"> + <div [ngClass]="accountMenuOpen.menuOpen ? '' : 'sp-darkblue'" fxLayout fxLayoutAlign="center center" style="height: 100%;"> <button mat-button mat-icon-button fxLayout fxLayoutAlign="center center" [ngClass]="accountMenuOpen.menuOpen ? 'sp-icon-button-no-hover' : 'sp-icon-button'" style="min-width:0px;" [matMenuTriggerFor]="menu" #accountMenuOpen="matMenuTrigger" matTooltip="User Preferences" matTooltipPosition="below"> - <i [ngStyle]="accountMenuOpen.menuOpen ? {'color': '#39b54a'} : {'color': 'white'}" class="material-icons">account_circle</i> + <i [ngClass]="accountMenuOpen.menuOpen ? 'sp-darkblue' : ''" class="material-icons">account_circle</i> </button> </div> </div> diff --git a/ui/src/app/core/components/toolbar/toolbar.component.ts b/ui/src/app/core/components/toolbar/toolbar.component.ts index b4b77b0..72721d7 100644 --- a/ui/src/app/core/components/toolbar/toolbar.component.ts +++ b/ui/src/app/core/components/toolbar/toolbar.component.ts @@ -16,13 +16,15 @@ * */ -import {Component, OnInit, ViewChild} from "@angular/core"; +import {Component, HostBinding, OnInit, ViewChild} from "@angular/core"; import {BaseNavigationComponent} from "../base-navigation.component"; import {Router} from "@angular/router"; import {RestApi} from "../../../services/rest-api.service"; import {AuthStatusService} from "../../../services/auth-status.service"; import {MatMenuTrigger} from "@angular/material/menu"; import {VersionInfo} from "../../../info/versions/service/version-info.model"; +import {FormControl} from "@angular/forms"; +import {OverlayContainer} from "@angular/cdk/overlay"; @Component({ selector: 'toolbar', @@ -37,18 +39,39 @@ export class ToolbarComponent extends BaseNavigationComponent implements OnInit versionInfo: VersionInfo; userEmail; + appearanceControl: FormControl; + constructor(Router: Router, private RestApi: RestApi, - private AuthStatusService: AuthStatusService) { + public AuthStatusService: AuthStatusService, + private overlay: OverlayContainer) { super(Router); } ngOnInit(): void { this.userEmail = this.AuthStatusService.email; + this.appearanceControl = new FormControl(this.AuthStatusService.darkMode); + this.modifyAppearance(this.AuthStatusService.darkMode); + this.appearanceControl.valueChanges.subscribe(darkMode => { + this.AuthStatusService.darkMode = darkMode; + this.modifyAppearance(darkMode); + + }); + //this.darkMode = this.AuthStatusService.darkMode; super.onInit(); this.getVersion(); } + modifyAppearance(darkMode: boolean) { + if (darkMode) { + this.overlay.getContainerElement().classList.remove("light-mode"); + this.overlay.getContainerElement().classList.add("dark-mode"); + } else { + this.overlay.getContainerElement().classList.remove("dark-mode"); + this.overlay.getContainerElement().classList.add("light-mode"); + } + } + closeFeedbackWindow() { //this.feedbackOpen = false; this.feedbackOpen.closeMenu(); diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts index fe9fb0f..9dd2c72 100644 --- a/ui/src/app/core/core.module.ts +++ b/ui/src/app/core/core.module.ts @@ -26,7 +26,7 @@ import {FeedbackComponent} from "./components/feedback/feedback.component"; import {MatButtonModule} from "@angular/material/button"; import {MatProgressSpinnerModule} from "@angular/material/progress-spinner"; import {MatInputModule} from "@angular/material/input"; -import {FormsModule} from "@angular/forms"; +import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {RouterModule} from "@angular/router"; import {ToolbarComponent} from "./components/toolbar/toolbar.component"; import {MatToolbarModule} from "@angular/material/toolbar"; @@ -36,6 +36,7 @@ import {MatDividerModule} from '@angular/material/divider'; import {MatListModule} from "@angular/material/list"; import {MatMenuModule} from "@angular/material/menu"; import {MatBadgeModule} from "@angular/material/badge"; +import {MatSlideToggleModule} from "@angular/material/slide-toggle"; @NgModule({ imports: [ @@ -53,7 +54,9 @@ import {MatBadgeModule} from "@angular/material/badge"; MatInputModule, MatToolbarModule, FormsModule, - RouterModule + RouterModule, + MatSlideToggleModule, + ReactiveFormsModule ], declarations: [ StreampipesComponent, @@ -67,4 +70,4 @@ import {MatBadgeModule} from "@angular/material/badge"; ] }) export class CoreModule { -} \ No newline at end of file +} diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview.component.css b/ui/src/app/dashboard/components/overview/dashboard-overview.component.css index f88cdf6..121e838 100644 --- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.css +++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.css @@ -27,7 +27,6 @@ table { .options-bar { padding:0px; - background-color:#f6f6f6; border-bottom: 1px solid #cccccc; margin-bottom: 10px; height: 50px; 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 3c57ecc..5a1227d 100644 --- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html +++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html @@ -18,7 +18,7 @@ <div fxFlex="100" fxLayout="column"> <div fxFlex="100" fxLayout="column"> - <div fxLayout="row" class="fixed-height options-bar"> + <div fxLayout="row" class="fixed-height options-bar sp-tab-bg"> <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> @@ -50,7 +50,7 @@ <th fxFlex="8" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Show</th> <td fxFlex="8" 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, false)"> <i class="material-icons">visibility</i> </button> @@ -62,7 +62,7 @@ <th fxFlex="8" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Window</th> <td fxFlex="8" 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)="openExternalDashboard(element)"> <i class="material-icons">open_in_new</i> </button> @@ -74,7 +74,7 @@ <th fxFlex="8" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Settings</th> <td fxFlex="8" 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)="openEditDashboardDialog(element)"> <i class="material-icons">settings</i> </button> @@ -86,7 +86,7 @@ <th fxFlex="8" fxLayoutAlign="start center" mat-header-cell *matHeaderCellDef> Edit</th> <td fxFlex="8" 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, true)"> <i class="material-icons">edit</i> </button> @@ -98,7 +98,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/dashboard/dashboard.component.html b/ui/src/app/dashboard/dashboard.component.html index 54c13db..3f2750d 100644 --- a/ui/src/app/dashboard/dashboard.component.html +++ b/ui/src/app/dashboard/dashboard.component.html @@ -17,11 +17,11 @@ --> <div fxLayout="column" class="page-container"> - <div fxLayout="row" class="p-0 sp-bg-lightgray"> + <div fxLayout="row" class="p-0 sp-tab-bg"> <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 dashboard of dashboards" label="{{dashboard.name}}"></mat-tab> </mat-tab-group> diff --git a/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.css b/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.css index e00a7b4..0b2e74d 100644 --- a/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.css +++ b/ui/src/app/dashboard/dialogs/edit-dashboard/edit-dashboard-dialog.component.css @@ -52,4 +52,4 @@ mat-dialog-content { .mat-radio-button { padding: 10px; -} \ No newline at end of file +} 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 b84c217..9018cd5 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,8 +59,8 @@ z-index: 0; margin: -1px; - 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-0); + background-image: var(--canvas-color); background-size: 15px 15px; } @@ -82,7 +82,7 @@ width: 40px; height: 80px; z-index: 10; - background: white; + background: var(--color-bg-1); box-shadow: 0.175em 0.175em 0 0 rgba(15, 28, 63, 0.125); border-radius: 10px; @@ -94,7 +94,7 @@ bottom: 10px; width: 80px; height: 80px; - background: white; + background: var(--color-bg-1); box-shadow: 0.175em 0.175em 0 0 rgba(15, 28, 63, 0.125); border-radius: 50%; z-index: 10; @@ -103,7 +103,7 @@ .pan-zoom-button { position: absolute; cursor: pointer; - color: $sp-color-accent; + color: var(--color-accent); } .pan-zoom-control-buttons { diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html index 066e70f..595f385 100644 --- a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html +++ b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html @@ -21,9 +21,9 @@ <div fxLayoutAlign="start center" fxLayout="row"> <div fxLayout="row" style="margin-right: 5px"> - <i class="material-icons">search</i> + <i class="material-icons sp-accent">search</i> <input type="text" (keyup)="applyFilter()" [(ngModel)]="elementFilter" placeholder="Find Element" - style="background-color:#f6f6f6;border: none;border-bottom: solid 2px rgb(27, 20, 100);"> + style="border: none;border-bottom: solid 2px rgb(27, 20, 100);"> </div> <div fxLayout="row"> <button mat-button [matMenuTriggerFor]="menu"><div class="menu-text-color"><i class="material-icons">list</i> Filter by category</div></button> @@ -68,4 +68,4 @@ </span> </span> </div> -</div> \ No newline at end of file +</div> diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss index 7b72065..d5a2288 100644 --- a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss +++ b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss @@ -19,24 +19,20 @@ @import '../../../../scss/_variables.scss'; .menu-text-color { - color: $sp-color-accent; + color: var(--color-accent); display: flex; align-items: center; } -::ng-deep.mat-tooltip.tooltip { - background-color: darkblue; - font-size: 12px; -} - .icon-stand { max-height: 200px; padding-bottom: 1%; overflow-y: auto; border-top: 0px; + background: var(--color-bg-1); } .border { - border: 1px solid #cccccc; + border: 1px solid var(--color-bg-2); border-top: 0; -} \ No newline at end of file +} diff --git a/ui/src/app/editor/editor.component.html b/ui/src/app/editor/editor.component.html index cf750ae..93c1c09 100644 --- a/ui/src/app/editor/editor.component.html +++ b/ui/src/app/editor/editor.component.html @@ -17,30 +17,28 @@ --> <div fxLayout="column" class="page-container"> - <div fxLayout="row" class="border" style="padding:0px;background-color:#f6f6f6;" *ngIf="!pipelineCanvasMaximized"> - <div fxFlex="100" style="line-height:24px;border-bottom:1px solid #ccc"> - <div fxFlex="100" fxLayout="row"> - <div fxFlex fxLayoutAlign="start center" [attr.id]="'peType'"> - <mat-tab-group [selectedIndex]="selectedIndex" - (selectedIndexChange)="selectPipelineElements($event)"> - <mat-tab *ngFor="let tab of tabs" label="{{tab.title}}"></mat-tab> - </mat-tab-group> - </div> - <div fxFlex="30" fxLayout="row" fxLayoutAlign="end center" style="padding-left:10px;font-size:14px;line-height:24px;border-bottom:1px solid #ccc"> - <button mat-button mat-icon-button (click)="startCreatePipelineTour()" - [matTooltip]="'Tutorial'" style="margin-right: 5px;"> - <i class="material-icons text-color"> - school - </i> - </button> - </div> + <div fxLayout="row" class="border sp-tab-bg editor-canvas-options" *ngIf="!pipelineCanvasMaximized"> + <div fxFlex="100" fxLayout="row" class="page-container-nav"> + <div fxFlex fxLayoutAlign="start center" [attr.id]="'peType'"> + <mat-tab-group [selectedIndex]="selectedIndex" + (selectedIndexChange)="selectPipelineElements($event)" color="accent"> + <mat-tab *ngFor="let tab of tabs" label="{{tab.title}}"></mat-tab> + </mat-tab-group> + </div> + <div fxFlex="30" fxLayout="row" fxLayoutAlign="end center" style="padding-left:10px;font-size:14px;line-height:24px;"> + <button mat-button mat-icon-button (click)="startCreatePipelineTour()" + [matTooltip]="'Tutorial'" style="margin-right: 5px;"> + <i class="material-icons text-color"> + school + </i> + </button> </div> </div> </div> <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100"> <div id="shepherd-test" - style="background-color:#f6f6f6;padding:0px;border-bottom:1px solid #ffffff"> + style="padding:0px;border-bottom:1px solid #ffffff"> <pipeline-element-icon-stand [activeType]="activeType" [currentElements]="currentElements" diff --git a/ui/src/app/editor/editor.component.scss b/ui/src/app/editor/editor.component.scss index b8cc5df..d21fab4 100644 --- a/ui/src/app/editor/editor.component.scss +++ b/ui/src/app/editor/editor.component.scss @@ -19,7 +19,7 @@ @import '../../scss/variables'; .text-color { - color: $sp-color-accent; + color: var(--color-accent); } .page-container { @@ -27,9 +27,14 @@ } .border { - border: 1px solid #cccccc; + border: 1px solid var(--color-bg-2); } .pipeline-assembly-margin { margin-top: 10px; } + +.editor-canvas-options { + padding: 0; + background-color: var(--color-bg-1); +} diff --git a/ui/src/app/files/files.component.html b/ui/src/app/files/files.component.html index 1dc2825..4b04ef8 100644 --- a/ui/src/app/files/files.component.html +++ b/ui/src/app/files/files.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" style="padding:0;" class="sp-tab-bg"> + <div fxFlex="100" class="page-container-nav"> <div fxFlex="100" fxLayout="row"> <div fxFlex fxLayoutAlign="start center"> <mat-tab-group> @@ -28,7 +28,7 @@ </div> </div> </div> - <div fxLayout="row" class="fixed-height add-options"> + <div fxLayout="row" class="fixed-height add-options sp-tab-bg"> <div class="add-options-item" fxLayoutAlign="start center" fxLayout="row" style="padding-left:5px;"> <div fxFlex="100" fxLayout="row"> <button mat-button mat-raised-button color="primary" diff --git a/ui/src/app/files/files.component.scss b/ui/src/app/files/files.component.scss index 35192f2..0d59f14 100644 --- a/ui/src/app/files/files.component.scss +++ b/ui/src/app/files/files.component.scss @@ -17,8 +17,7 @@ */ .add-options { - background-color:#f6f6f6; - border-bottom: 1px solid #cccccc; + border-bottom: 1px solid var(--color-bg-2); padding-top:10px; padding-bottom:10px; } @@ -30,4 +29,4 @@ .add-options-item { display: inline; margin-right: 10px; -} \ No newline at end of file +} diff --git a/ui/src/app/home/components/status.component.css b/ui/src/app/home/components/status.component.css index e8d6824..9f013db 100644 --- a/ui/src/app/home/components/status.component.css +++ b/ui/src/app/home/components/status.component.css @@ -26,7 +26,7 @@ } .status-container.pipelines { - background: rgb(27, 20, 100); + background: var(--color-accent); } .status-container.pipelines-running { @@ -56,4 +56,4 @@ .mr-20 { margin-right: 20px; -} \ No newline at end of file +} diff --git a/ui/src/app/home/home.component.html b/ui/src/app/home/home.component.html index 9397764..bf5eea9 100644 --- a/ui/src/app/home/home.component.html +++ b/ui/src/app/home/home.component.html @@ -22,10 +22,10 @@ <div fxFlex="100" fxLayout="column"> <div class="p-10 header-margin" fxLayoutAlign="center center"> <div class="welcome-text">Welcome to Apache - <span class="welcome-green">S</span> - <span class="welcome-blue">tream</span> - <span class="welcome-green">P</span> - <span class="welcome-blue">ipes</span>! + <span class="welcome-primary">S</span> + <span class="welcome-accent">tream</span> + <span class="welcome-primary">P</span> + <span class="welcome-accent">ipes</span>! </div> </div> <div fxLayout="column" fxFlex="100" class="home-margin"> @@ -57,4 +57,4 @@ </div> </div> </div> -</div> \ No newline at end of file +</div> diff --git a/ui/src/app/home/home.component.scss b/ui/src/app/home/home.component.scss index f890fff..1bce66f 100644 --- a/ui/src/app/home/home.component.scss +++ b/ui/src/app/home/home.component.scss @@ -44,12 +44,12 @@ margin-top: 20px; } -.welcome-green { - color: $sp-color-primary; +.welcome-primary { + color: var(--color-primary); } -.welcome-blue { - color: $sp-color-accent; +.welcome-accent { + color: var(--color-accent); } @@ -86,14 +86,14 @@ } .list-item:nth-child(even) { - background-color: #FAFAFA; + background-color: var(--color-bg-1); } .list-item:nth-child(odd) { - background-color:#ffffff; + background-color: var(--color-bg-0); } .list-item:hover { - background-color: #e2e2e2; + background-color: var(--color-bg-2); cursor: pointer; } diff --git a/ui/src/app/login/components/login/login.component.html b/ui/src/app/login/components/login/login.component.html index 1442046..7af8745 100644 --- a/ui/src/app/login/components/login/login.component.html +++ b/ui/src/app/login/components/login/login.component.html @@ -16,7 +16,7 @@ ~ --> -<div class="md-padding full-background sp-fade" fxLayout="row" fxLayoutAlign="center center" +<div class="md-padding full-background sp-fade light-mode" fxLayout="row" fxLayoutAlign="center center" style="min-height:100vh !important;"> <div fxFlex="40" fxLayout="column" fxLayoutAlign="center center"> <mat-card class="card-100-center box-shadow-login" style="padding:20px;position:relative;top:-25px;"> @@ -34,23 +34,23 @@ <div fxFlex="100" fxLayout="column"> <form #loginForm="ngForm" fxFlex="100" fxLayout="column"> <div fxFlex="100" fxLayout="column"> - <mat-form-field fxFlex> + <mat-form-field fxFlex color="accent"> <mat-label>Email</mat-label> <input [(ngModel)]="credentials.username" matInput type="email" name="username" class="sp" required/> </mat-form-field> - <mat-form-field fxFlex> + <mat-form-field fxFlex color="accent"> <mat-label>Password</mat-label> <input [(ngModel)]="credentials.password" matInput name="password" type="password" class="sp" required/> </mat-form-field> - <mat-checkbox [(ngModel)]="credentials.rememberMe" name="rememberMe" class="sp" color="primary">Remember Me</mat-checkbox> + <mat-checkbox [(ngModel)]="credentials.rememberMe" name="rememberMe" class="sp" color="accent">Remember Me</mat-checkbox> </div> <div class="form-actions" style="margin-top:20px;"> - <button mat-button mat-raised-button color="primary" (click)="logIn()" + <button mat-button mat-raised-button color="accent" (click)="logIn()" [disabled]="!loginForm.form.valid || loading"> <span *ngIf="loading">Logging in...</span> <span *ngIf="!loading">Login</span> </button> - <mat-spinner [mode]="'indeterminate'" color="primary" [diameter]="20" + <mat-spinner [mode]="'indeterminate'" color="accent" [diameter]="20" *ngIf="loading" style="margin-top:10px;"></mat-spinner> <div class="md-warn" *ngIf="authenticationFailed"> <h4>The password you entered is incorrect. Please try again.</h4> @@ -61,7 +61,7 @@ </div> </mat-card> <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center"> - <button mat-button mat-raised-button color="primary" (click)="openDocumentation()" + <button mat-button mat-raised-button color="accent" (click)="openDocumentation()" style="min-width:0px;padding-left:20px;padding-right:20px;font-size:18px;"> View Docs </button> diff --git a/ui/src/app/login/components/setup/setup.component.html b/ui/src/app/login/components/setup/setup.component.html index efef941..1f2ecc5 100644 --- a/ui/src/app/login/components/setup/setup.component.html +++ b/ui/src/app/login/components/setup/setup.component.html @@ -16,7 +16,7 @@ ~ --> -<div class="full-background setup-container" fxLayout="row" fxLayoutAlign="center center"> +<div class="full-background setup-container light-mode" fxLayout="row" fxLayoutAlign="center center"> <div fxFlex="80" fxLayout="column" fxLayoutAlign="center center"> <div fxFlex="100" fxLayout="column" class="box-shadow-login setup-card"> <form #setupForm="ngForm" fxFlex="100" fxLayout="column"> diff --git a/ui/src/app/notifications/notifications.component.html b/ui/src/app/notifications/notifications.component.html index 4090002..26a27f8 100644 --- a/ui/src/app/notifications/notifications.component.html +++ b/ui/src/app/notifications/notifications.component.html @@ -17,11 +17,11 @@ --> <div fxLayout="column" class="page-container page-container-max-height"> - <div fxLayout="row" style="padding:0px;background-color:#f6f6f6;"> - <div fxFlex="100" style="line-height:24px;border-bottom:1px solid #ccc"> + <div fxLayout="row" style="padding:0px;" class="sp-tab-bg"> + <div fxFlex="100" class="page-container-nav"> <div fxFlex="100" fxLayout="row"> <div fxFlex fxLayoutAlign="start center"> - <mat-tab-group> + <mat-tab-group color="accent"> <mat-tab label="My Notifications"></mat-tab> </mat-tab-group> </div> @@ -72,4 +72,4 @@ </div> </div> -</div> \ No newline at end of file +</div> diff --git a/ui/src/app/pipelines/pipelines.component.html b/ui/src/app/pipelines/pipelines.component.html index 5ff32f2..45bb49d 100644 --- a/ui/src/app/pipelines/pipelines.component.html +++ b/ui/src/app/pipelines/pipelines.component.html @@ -17,12 +17,12 @@ --> <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"> <button mat-button mat-flat-button color="primary" (click)="showPipelineCategoriesDialog()">Manage Categories</button> <div fxFlex fxLayoutAlign="start center" [attr.id]="'peType'"> - <mat-tab-group [selectedIndex]="selectedCategoryIndex" (selectedIndexChange)="setSelectedTab($event)"> + <mat-tab-group [selectedIndex]="selectedCategoryIndex" (selectedIndexChange)="setSelectedTab($event)" color="accent"> <mat-tab label="All pipelines"></mat-tab> <mat-tab *ngFor="let category of pipelineCategories" label="{{category.categoryName}}"></mat-tab> </mat-tab-group> diff --git a/ui/src/app/services/auth-status.service.ts b/ui/src/app/services/auth-status.service.ts index c8eb371..65d01d7 100644 --- a/ui/src/app/services/auth-status.service.ts +++ b/ui/src/app/services/auth-status.service.ts @@ -27,6 +27,7 @@ export class AuthStatusService { token: string; authenticated: boolean = false; configured: boolean = false; + darkMode: boolean = true; constructor() { } diff --git a/ui/src/scss/_variables.scss b/ui/src/scss/_variables.scss index 73382b0..2199f3f 100644 --- a/ui/src/scss/_variables.scss +++ b/ui/src/scss/_variables.scss @@ -16,9 +16,9 @@ * */ -$sp-color-primary: rgb(57, 181, 74); +$sp-color-primary: rgb(57, 181, 74); $sp-color-primary-light: rgb(59, 205, 76); -$sp-color-accent: rgb(27, 20, 100); +$sp-color-accent: #19319E; $sp-color-accent-light-blue: rgb(59, 92, 149); $sp-color-accent-light: rgb(156, 156, 156); $sp-color-accent-light-transparent: rgba(156, 156, 156, 0.4); diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss index 1ce7ae8..ac7d0cb 100644 --- a/ui/src/scss/main.scss +++ b/ui/src/scss/main.scss @@ -43,7 +43,6 @@ @import './sp/sp-theme'; @import './sp/main'; -@import './sp/layout'; @import './sp/loading-bar'; @import './sp/buttons'; @import './sp/buttons.ng1'; @@ -63,6 +62,8 @@ @import './sp/progress-bar.scss'; @import './sp/jsplumb'; +@import './sp/layout'; + @import './sp/input.ng1'; @import './sp/documentation.ng1'; @import './sp/stepper'; diff --git a/ui/src/scss/sp/buttons.ng1.scss b/ui/src/scss/sp/buttons.ng1.scss index 936c600..f81c95e 100644 --- a/ui/src/scss/sp/buttons.ng1.scss +++ b/ui/src/scss/sp/buttons.ng1.scss @@ -19,13 +19,13 @@ @import '../_variables'; .sp-navbar-item { - background: $sp-color-primary; + background: var(--color-primary); -webkit-transition: all 0.75s ease; transition: all 0.75s ease; } .sp-navbar-item-selected { - background: white; + background: var(--color-bg-0); } .sp-navbar-item:hover { @@ -33,11 +33,11 @@ } .sp-navbar-icon { - color: white; + color: var(--color-bg-0); } .sp-navbar-icon-selected { - color: $sp-color-primary + color: var(--color-primary); } .sp-icon-button:hover { @@ -153,4 +153,4 @@ background:#a8a8a8; -webkit-transition: all 0.75s ease; transition: all 0.75s ease; -} \ No newline at end of file +} diff --git a/ui/src/scss/sp/buttons.scss b/ui/src/scss/sp/buttons.scss index 35e1cba..7507159 100644 --- a/ui/src/scss/sp/buttons.scss +++ b/ui/src/scss/sp/buttons.scss @@ -18,8 +18,8 @@ @import '../_variables'; -.mat-button.mat-primary, .mat-icon-button.mat-primary, .mat-stroked-button.mat-primary { - color:$sp-color-accent; +.mat-button.mat-accent, .mat-icon-button.mat-accent, .mat-stroked-button.mat-accent { + color: var(--color-accent); } .mat-button, .mat-raised-button, .mat-flat-button { @@ -50,18 +50,18 @@ vertical-align: middle; } -.mat-fab.mat-primary { - background: $sp-color-accent; +.mat-fab.mat-accent { + background: var(--color-accent); color: rgba(255, 255, 255, 0.75); } -.mat-raised-button.mat-accent:enabled { +.mat-raised-button.mat-primary:enabled { background: $sp-color-primary; color: rgba(255, 255, 255, 0.75); } .mat-raised-button.mat-accent:hover:enabled { - background: $sp-color-primary-light; + background: $sp-color-accent-light-blue; -webkit-transition: all 0.75s ease; transition: all 0.75s ease; } @@ -71,8 +71,8 @@ color: #cdcdcd; } -.mat-raised-button.mat-primary:enabled { - background: $sp-color-accent; +.mat-raised-button.mat-accent:enabled { + background: var(--color-accent); color: rgba(255, 255, 255, 0.75); } @@ -96,17 +96,17 @@ max-height: 75px; line-height: 25px; background: white; - border: 1.5px solid $sp-color-accent; + border: 1.5px solid var(--color-accent); color: $sp-color-accent } -.mat-raised-button.mat-primary:hover:enabled { +.mat-raised-button.mat-accent:hover:enabled { background: $sp-color-accent-light-blue; -webkit-transition: all 0.75s ease; transition: all 0.75s ease; } -.mat-raised-button.mat-primary:disabled { +.mat-raised-button.mat-accent:disabled { background: #ebebeb; color: #cdcdcd; } @@ -127,18 +127,18 @@ color: #cdcdcd; } -.mat-flat-button.mat-primary:enabled { - color: $sp-color-accent; +.mat-flat-button.mat-accent:enabled { + color: var(--color-accent); background: rgba(0, 0, 0, 0); } -.mat-flat-button.mat-primary:hover:enabled { +.mat-flat-button.mat-accent:hover:enabled { background: #d9d9d9; -webkit-transition: all 0.75s ease; transition: all 0.75s ease; } -.mat-flat-button.mat-primary:disabled { +.mat-flat-button.mat-accent:disabled { color: #cdcdcd; background: rgba(0, 0, 0, 0); -} \ No newline at end of file +} diff --git a/ui/src/scss/sp/colors.scss b/ui/src/scss/sp/colors.scss index 1f24134..accfc9e 100644 --- a/ui/src/scss/sp/colors.scss +++ b/ui/src/scss/sp/colors.scss @@ -19,15 +19,15 @@ @import '../_variables'; .sp-darkblue { - background: $sp-color-primary; + background: var(--color-primary); } .sp-darkblue-text { - color: $sp-color-primary; + color: var(--color-primary); } .sp-darkblue-border { - border: 1px solid $sp-color-primary; + border: 1px solid var(--color-primary); } .sp-blue-100-border { @@ -40,11 +40,11 @@ } .sp-blue { - color: $sp-color-accent-light; + color: var(--content-box-color); } .sp-blue-bg { - background: $sp-color-accent-light; + background: var(--content-box-color); } .sp-border-round { @@ -52,18 +52,17 @@ } .sp-blue-border { - border: 3px solid $sp-color-accent-light; + border: 3px solid var(--content-box-color); padding-top:20px; padding-bottom:20px; - background: #FAFAFA; } .sp-border-left-accent-light { - border-left: 2px solid $sp-color-accent-light; + border-left: 2px solid var(--content-box-color); } .sp-blue-border-nopadding { - border: 3px solid $sp-color-accent-light; + border: 3px solid var(--content-box-color); } .sp-lightblue { @@ -75,7 +74,7 @@ } .sp-green { - color: $sp-color-accent; + color: var(--color-accent); } .sp-darkgreen { @@ -83,15 +82,23 @@ } .sp-accent { - color: $sp-color-accent; + color: var(--color-accent); } .sp-accent-bg { - background: $sp-color-accent; + background: var(--color-accent); +} + +.sp-primary { + color: var(--color-primary); +} + +.sp-primary-bg { + background: var(--color-primary); } .sp-accent-light { - color: $sp-color-accent-light; + color: var(--content-box-color); } .sp-primary-border-1px { @@ -99,5 +106,9 @@ } .sp-bg-lightgray { - background-color: #f6f6f6; + background-color: var(--color-bg-1); +} + +.sp-tab-bg { + background-color: var(--color-bg-1); } diff --git a/ui/src/scss/sp/feedback.ng1.scss b/ui/src/scss/sp/feedback.ng1.scss index f8e9b96..26a5874 100644 --- a/ui/src/scss/sp/feedback.ng1.scss +++ b/ui/src/scss/sp/feedback.ng1.scss @@ -20,14 +20,14 @@ .feedback-container { font-size:14pt; - background: white; + background: var(--color-bg-0); height: 600px; z-index: 100; //border-left: 2px solid $sp-color-primary; //border-bottom: 2px solid $sp-color-primary; //border-right: 2px solid $sp-color-primary; padding:24px; - color:black; + //color:black; } .feedback-width-100 { @@ -57,4 +57,4 @@ font-size:16pt; margin-top:10px; margin-bottom:20px; -} \ No newline at end of file +} diff --git a/ui/src/scss/sp/layout.scss b/ui/src/scss/sp/layout.scss index d8ffe1c..1d23127 100644 --- a/ui/src/scss/sp/layout.scss +++ b/ui/src/scss/sp/layout.scss @@ -77,7 +77,7 @@ .page-container-nav { line-height:24px; - border-bottom:1px solid #ccc; + border-bottom:1px solid var(--color-bg-2); } .text-center { @@ -87,3 +87,36 @@ .text-left { text-align: left; } + + +h4, .h4 { + font-size: 18px; +} + +h3, .h3 { + font-size: 24px; +} + +h1, .h1, h2, .h2, h3, .h3 { + margin-top: 20px; + margin-bottom: 10px; +} + +h4, .h4, h5, .h5, h6, .h6 { + margin-top: 10px; + margin-bottom: 10px; +} + +h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} + +img { + vertical-align: middle; +} +img { + border: 0; +} diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss index 3164bf9..3b9f268 100644 --- a/ui/src/scss/sp/main.scss +++ b/ui/src/scss/sp/main.scss @@ -360,7 +360,7 @@ md-content { .page-container { margin: 10px; - border: 1px solid #cccccc; + border: 1px solid var(--color-bg-3); min-height: calc(100% - 20px); //height: 100%; } @@ -762,7 +762,7 @@ md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md .draggable-icon-preview { margin-right: 20px; vertical-align: top; - background-color: white; + background-color: var(--color-bg-1); display: inline-block; height: 50px; width: 50px; @@ -775,14 +775,14 @@ md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md .draggable-icon { cursor: pointer; vertical-align: top; - background-color: white; + background-color: var(--color-pe); display: inline-block; height: 80px; width: 80px; line-height: 80px; margin-left: 3%; margin-top: 5px; - box-shadow: 1px 1px 2px #555; + box-shadow: 1px 1px 2px var(--color-shadow); text-align: center; z-index:200; } @@ -886,6 +886,7 @@ md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md /* border: 2px solid rgb(63,81,181);; */ /* border-bottom: 2px solid rgb(63,81,181); */ color: black; + background: var(--color-bg-1); padding: 0px; /* margin-top: 1%; */ } @@ -962,7 +963,7 @@ md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md box-shadow: 0 0 2px #555; display: inline-block; vertical-align: middle; - background-color: white; + background-color: var(--color-pe); text-align: center; font-size: 24px; font-family: Roboto; diff --git a/ui/src/scss/sp/pipeline-element-options.scss b/ui/src/scss/sp/pipeline-element-options.scss index a61d505..ea2aa70 100644 --- a/ui/src/scss/sp/pipeline-element-options.scss +++ b/ui/src/scss/sp/pipeline-element-options.scss @@ -24,10 +24,10 @@ height: 40%; width: 40%; border-radius: 50%; - box-shadow: 0 0 3px $sp-color-accent; + box-shadow: 0 0 3px var(--color-accent); text-align: center; padding: 1px 1px; - background-color: $sp-color-accent; + background-color: var(--color-accent); color: rgba(255, 255, 255, 0.75); } diff --git a/ui/src/scss/sp/sp-theme.scss b/ui/src/scss/sp/sp-theme-yellow.scss similarity index 50% copy from ui/src/scss/sp/sp-theme.scss copy to ui/src/scss/sp/sp-theme-yellow.scss index d694090..7323ba3 100644 --- a/ui/src/scss/sp/sp-theme.scss +++ b/ui/src/scss/sp/sp-theme-yellow.scss @@ -21,7 +21,7 @@ @include mat-core(); -$mat-streampipes-accent: ( +$mat-streampipes-primary: ( 50: #ffebee, 100: #ffcdd2, 200: #72e879, @@ -54,7 +54,7 @@ $mat-streampipes-accent: ( ) ); -$mat-streampipes: ( +$mat-streampipes-accent: ( 50: #ffebee, 100: #ffcdd2, 200: #4e3c93, @@ -87,13 +87,108 @@ $mat-streampipes: ( ) ); -$custom-theme-primary: mat-palette($mat-streampipes); +$mat-streampipes-accent-dark: ( + 50: #ffebee, + 100: #ffcdd2, + 200: #4e3c93, + 300: #2a0c9a, + 400: #395481, + 500: #83a3de, + 600: #0303a3, + 700: #01016a, + 800: #000039, + 900: #00002b, + A100: #ff8a80, + A200: #ff5252, + A400: #ff1744, + A700: #d50000, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: white, + A400: white, + A700: white, + ) +); + +$custom-theme-primary: mat-palette($mat-streampipes-primary); +$custom-theme-accent-dark: mat-palette($mat-streampipes-accent-dark); $custom-theme-accent: mat-palette($mat-streampipes-accent); $custom-theme-warn: mat-palette($mat-red); -$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn); +$custom-theme-light: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn); +$custom-theme-dark: mat-dark-theme($custom-theme-primary, $custom-theme-accent-dark, $custom-theme-warn); $custom-typography: mat-typography-config($font-family: 'Roboto, Arial'); + @include angular-material-typography($custom-typography); -@include angular-material-theme($custom-theme); \ No newline at end of file + +$primary: map-get($custom-theme-light, primary); +$accent-dark: map-get($custom-theme-dark, accent); +$accent: map-get($custom-theme-light, accent); + + +.dark-mode { + @include angular-material-theme($custom-theme-dark); + + .base-style { + color: rgba(255, 255, 255, 0.87); + background: #121212; + } + + .mat-toolbar.mat-primary { + color: #121212; + } + + .mat-tooltip.tooltip { + background-color: rgba(255, 255, 255, 0.87); + font-size: 12px; + } + + --color-primary: #{mat-color($primary)}; + --color-accent: #{mat-color($accent-dark)}; + --color-bg-0: #121212; + --color-bg-1: #282828; + --color-bg-2: #404040; + --color-bg-3: #424242; + --color-shadow: #c4c4c4; + --color-pe: #404040; + --color-default-text: rgba(255, 255, 255, 0.87); + + --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%); + +} + +.light-mode { + @include angular-material-theme($custom-theme-light); + + .base-style { + color: #121212; + background: #FFFFFF; + } + + --color-primary: #{mat-color($primary)}; + --color-accent: #{mat-color($accent)}; + --color-bg-0: #FFFFFF; + --color-bg-1: #FAFAFA; + --color-bg-2: #f1f1f1; + --color-bg-3: rgb(204, 204, 204); + --color-shadow: #555; + --color-pe: #FFFFFF; + --color-default-text: #121212; + + --content-box-color: rgb(156, 156, 156); + --canvas-color: linear-gradient(90deg, rgba(208, 208, 208, 0.5) 10%, transparent 0%), linear-gradient(rgba(208, 208, 208, 0.5) 10%, transparent 0%); + +} diff --git a/ui/src/scss/sp/sp-theme.scss b/ui/src/scss/sp/sp-theme.scss index d694090..4facd31 100644 --- a/ui/src/scss/sp/sp-theme.scss +++ b/ui/src/scss/sp/sp-theme.scss @@ -21,7 +21,7 @@ @include mat-core(); -$mat-streampipes-accent: ( +$mat-streampipes-primary: ( 50: #ffebee, 100: #ffcdd2, 200: #72e879, @@ -54,7 +54,7 @@ $mat-streampipes-accent: ( ) ); -$mat-streampipes: ( +$mat-streampipes-accent: ( 50: #ffebee, 100: #ffcdd2, 200: #4e3c93, @@ -87,13 +87,108 @@ $mat-streampipes: ( ) ); -$custom-theme-primary: mat-palette($mat-streampipes); +$mat-streampipes-accent-dark: ( + 50: #ffebee, + 100: #ffcdd2, + 200: #4e3c93, + 300: #2a0c9a, + 400: #395481, + 500: #83a3de, + 600: #0303a3, + 700: #01016a, + 800: #000039, + 900: #00002b, + A100: #ff8a80, + A200: #ff5252, + A400: #ff1744, + A700: #d50000, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: white, + A400: white, + A700: white, + ) +); + +$custom-theme-primary: mat-palette($mat-streampipes-primary); +$custom-theme-accent-dark: mat-palette($mat-streampipes-accent-dark); $custom-theme-accent: mat-palette($mat-streampipes-accent); $custom-theme-warn: mat-palette($mat-red); -$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn); +$custom-theme-light: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn); +$custom-theme-dark: mat-dark-theme($custom-theme-primary, $custom-theme-accent-dark, $custom-theme-warn); $custom-typography: mat-typography-config($font-family: 'Roboto, Arial'); + @include angular-material-typography($custom-typography); -@include angular-material-theme($custom-theme); \ No newline at end of file + +$primary: map-get($custom-theme-light, primary); +$accent-dark: map-get($custom-theme-dark, accent); +$accent: map-get($custom-theme-light, accent); + + +.dark-mode { + @include angular-material-theme($custom-theme-dark); + + .base-style { + color: rgba(255, 255, 255, 0.87); + background: #121212; + } + + .mat-toolbar.mat-primary { + color: #121212; + } + + .mat-tooltip.tooltip { + background-color: rgba(255, 255, 255, 0.87); + font-size: 12px; + } + + --color-primary: #{mat-color($primary)}; + --color-accent: #{mat-color($accent-dark)}; + --color-bg-0: #121212; + --color-bg-1: #282828; + --color-bg-2: #404040; + --color-bg-3: #424242; + --color-shadow: #c4c4c4; + --color-pe: #404040; + --color-default-text: rgba(255, 255, 255, 0.87); + + --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%); + +} + +.light-mode { + @include angular-material-theme($custom-theme-light); + + .base-style { + color: #121212; + background: #FFFFFF; + } + + --color-primary: #{mat-color($primary)}; + --color-accent: #{mat-color($accent)}; + --color-bg-0: #FFFFFF; + --color-bg-1: #FAFAFA; + --color-bg-2: #f1f1f1; + --color-bg-3: rgb(204, 204, 204); + --color-shadow: #555; + --color-pe: #FFFFFF; + --color-default-text: #121212; + + --content-box-color: rgb(156, 156, 156); + --canvas-color: linear-gradient(90deg, rgba(208, 208, 208, 0.5) 10%, transparent 0%), linear-gradient(rgba(208, 208, 208, 0.5) 10%, transparent 0%); + +}
