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 38a998edec995c5ab5e5bcd38e36e99d151177b7 Author: Dominik Riemer <[email protected]> AuthorDate: Tue Jul 13 17:10:02 2021 +0200 [STREAMPIPES-395] Harmonize colors in navigation bars --- ui/deployment/dev/config.yml | 2 +- .../{sp-logo-right-white.png => logo-navigation.png} | Bin ui/deployment/prebuild.js | 4 ++-- .../components/streampipes/streampipes.component.scss | 2 +- .../app/core/components/toolbar/toolbar.component.html | 14 +++++++------- .../app/core/components/toolbar/toolbar.component.scss | 6 ++++++ .../assets/img/sp/logo-navigation.png} | Bin ui/src/scss/sp/buttons.ng1.scss | 16 ++++++++-------- ui/src/scss/sp/sp-theme.scss | 14 ++++++++++++++ 9 files changed, 39 insertions(+), 19 deletions(-) diff --git a/ui/deployment/dev/config.yml b/ui/deployment/dev/config.yml index 12508da..492d5f6 100644 --- a/ui/deployment/dev/config.yml +++ b/ui/deployment/dev/config.yml @@ -16,7 +16,7 @@ login: backgroundImage: 'deployment/dev/img/background.png' logo: 'deployment/dev/img/logo.png' - logo-right: 'deployment/dev/img/sp-logo-right-white.png' + logo-navigation: 'deployment/dev/img/logo-navigation.png' modules: - spEditor - spPipelines diff --git a/ui/deployment/dev/img/sp-logo-right-white.png b/ui/deployment/dev/img/logo-navigation.png similarity index 100% copy from ui/deployment/dev/img/sp-logo-right-white.png copy to ui/deployment/dev/img/logo-navigation.png diff --git a/ui/deployment/prebuild.js b/ui/deployment/prebuild.js index e9243b4..be35a65 100644 --- a/ui/deployment/prebuild.js +++ b/ui/deployment/prebuild.js @@ -88,8 +88,8 @@ fs.writeFileSync('src/app/core/components/base-navigation.component.ts', mustach // Move Images fs.writeFileSync('src/assets/img/login/logo.png', fs.readFileSync(config['login']['logo'])); console.log('Moved: logo.png'); -fs.writeFileSync('src/assets/img/sp/sp-logo-right-white.png', fs.readFileSync(config['login']['logo-right'])); -console.log('Moved: sp-logo-right-white.png'); +fs.writeFileSync('src/assets/img/sp/logo-navigation.png', fs.readFileSync(config['login']['logo-navigation'])); +console.log('Moved: sp-logo-navigation.png'); // if (process.env.THEME_LOC !== 'undefined') { // console.log('Using custom-provided theme ' + process.env.THEME_LOC); diff --git a/ui/src/app/core/components/streampipes/streampipes.component.scss b/ui/src/app/core/components/streampipes/streampipes.component.scss index 0b42b19..2230324 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: var(--color-primary); + background: var(--color-navigation-bg); } .base { diff --git a/ui/src/app/core/components/toolbar/toolbar.component.html b/ui/src/app/core/components/toolbar/toolbar.component.html index e550fa4..1f16f9a 100644 --- a/ui/src/app/core/components/toolbar/toolbar.component.html +++ b/ui/src/app/core/components/toolbar/toolbar.component.html @@ -16,12 +16,12 @@ ~ --> -<mat-toolbar class="md-primary md-hue-2 top-nav" color="primary"> +<mat-toolbar class="md-primary md-hue-2 top-nav toolbar-bg"> <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 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 style="padding:5px;border-radius:0px;margin-right:15px;position:relative;left:30px;"> + <img alt="icon" src="../../../../assets/img/sp/logo-navigation.png" style="height:40px;"> </div> <div style="padding: 5px 5px;font-size:15px;margin-left:10px;"> <h4 style="margin-top:12px;font-size:12pt;font-weight:bold;">{{activePageName}}</h4> @@ -37,13 +37,13 @@ <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 [ngClass]="feedbackOpen.menuOpen ? '' : 'sp-darkblue'" fxLayout fxLayoutAlign="center center" style="height: 100%;"> + <div [ngClass]="feedbackOpen.menuOpen ? 'sp-navbar-item-selected' : 'sp-navbar-item'" 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 [ngClass]="feedbackOpen.menuOpen ? 'sp-darkblue-text' : ''" class="material-icons">feedback</i> + <i [ngClass]="feedbackOpen.menuOpen ? 'sp-navbar-icon-selected' : 'sp-navbar-icon'" class="material-icons">feedback</i> </button> </div> </div> @@ -51,7 +51,7 @@ <feedback (closeFeedbackEmitter)="closeFeedbackWindow()"></feedback> </mat-menu> <div style="height:100%;"> - <div [ngClass]="accountMenuOpen.menuOpen ? '' : 'sp-darkblue'" fxLayout fxLayoutAlign="center center" style="height: 100%;"> + <div [ngClass]="accountMenuOpen.menuOpen ? 'sp-navbar-item-selected' : 'sp-navbar-item'" 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;" @@ -59,7 +59,7 @@ #accountMenuOpen="matMenuTrigger" matTooltip="User Preferences" matTooltipPosition="below" data-cy="sp-user-preferences"> - <i [ngClass]="accountMenuOpen.menuOpen ? 'sp-darkblue' : ''" class="material-icons">account_circle</i> + <i [ngClass]="accountMenuOpen.menuOpen ? 'sp-navbar-icon-selected' : 'sp-navbar-icon'" class="material-icons">account_circle</i> </button> </div> </div> diff --git a/ui/src/app/core/components/toolbar/toolbar.component.scss b/ui/src/app/core/components/toolbar/toolbar.component.scss index 531c9d0..cd99037 100644 --- a/ui/src/app/core/components/toolbar/toolbar.component.scss +++ b/ui/src/app/core/components/toolbar/toolbar.component.scss @@ -32,3 +32,9 @@ max-width: 100%; position: relative; } + +.toolbar-bg { + background: var(--color-navigation-bg); + border-bottom: 2px solid var(--color-navigation-divider); + color: var(--color-navigation-text); +} diff --git a/ui/deployment/dev/img/sp-logo-right-white.png b/ui/src/assets/img/sp/logo-navigation.png similarity index 100% rename from ui/deployment/dev/img/sp-logo-right-white.png rename to ui/src/assets/img/sp/logo-navigation.png diff --git a/ui/src/scss/sp/buttons.ng1.scss b/ui/src/scss/sp/buttons.ng1.scss index f81c95e..d65059d 100644 --- a/ui/src/scss/sp/buttons.ng1.scss +++ b/ui/src/scss/sp/buttons.ng1.scss @@ -19,29 +19,29 @@ @import '../_variables'; .sp-navbar-item { - background: var(--color-primary); - -webkit-transition: all 0.75s ease; - transition: all 0.75s ease; + background: var(--color-navigation-bg); + //-webkit-transition: all 0.75s ease; + //transition: all 0.75s ease; } .sp-navbar-item-selected { - background: var(--color-bg-0); + background: var(--color-navigation-bg-selected); } .sp-navbar-item:hover { - background: $sp-color-primary-light; + color: var(--color-navigation-selected); } .sp-navbar-icon { - color: var(--color-bg-0); + color: var(--color-navigation-link-text); } .sp-navbar-icon-selected { - color: var(--color-primary); + color: var(--color-navigation-selected); } .sp-icon-button:hover { - background: $sp-color-primary-light !important; + color: var(--color-navigation-selected) !important; } .sp-icon-button-no-hover:hover { diff --git a/ui/src/scss/sp/sp-theme.scss b/ui/src/scss/sp/sp-theme.scss index 7d6ae27..df360ef 100644 --- a/ui/src/scss/sp/sp-theme.scss +++ b/ui/src/scss/sp/sp-theme.scss @@ -167,6 +167,13 @@ $accent: map-get($custom-theme-light, accent); --color-default-text: rgba(255, 255, 255, 0.87); --color-warn: #b36161; + --color-navigation-bg: #{mat-color($primary)}; + --color-navigation-link-text: #121212; + --color-navigation-text: #121212; + --color-navigation-selected: #{mat-color($primary)}; + --color-navigation-bg-selected: #121212; + --color-navigation-divider: #{mat-color($primary)}; + --content-box-color: #404040; --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%); @@ -192,6 +199,13 @@ $accent: map-get($custom-theme-light, accent); --color-default-text: #121212; --color-warn: #B71C1C; + --color-navigation-bg: #{mat-color($primary)}; + --color-navigation-link-text: #FFFFFF; + --color-navigation-text: #FFFFFF; + --color-navigation-selected: #{mat-color($primary)}; + --color-navigation-bg-selected: #FFFFFF; + --color-navigation-divider: #{mat-color($primary)}; + --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%);
