From 3cff79aa9bbd9afdcbd458bd5cecbbaf5f83cda9 Mon Sep 17 00:00:00 2001 From: phnagy <89772437+phnagy@users.noreply.github.com> Date: Fri, 26 Jan 2024 17:55:19 +0100 Subject: [PATCH] Improve navbar ui/ux (#81) --- src/app/app.component.html | 103 ++++++------------ src/app/app.component.scss | 37 ------- src/app/app.component.ts | 15 ++- src/app/app.module.ts | 4 + .../dashboard/dashboard.component.html | 14 +-- .../dashboard/dashboard.component.ts | 19 ++-- src/assets/images/{icon.png => logo-l.png} | Bin src/assets/images/logo-s.png | Bin 0 -> 2629 bytes src/assets/images/logo-s.svg | 9 ++ src/scss/_style-constants.scss | 5 + src/scss/_utility.scss | 23 ++++ 11 files changed, 102 insertions(+), 127 deletions(-) rename src/assets/images/{icon.png => logo-l.png} (100%) create mode 100644 src/assets/images/logo-s.png create mode 100644 src/assets/images/logo-s.svg diff --git a/src/app/app.component.html b/src/app/app.component.html index 326646bad..a50c2441c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,9 +1,39 @@
-
-
- -
TEASE
+
+
+ +
TEASE
+
+ +
+ + + + + + + + +
@@ -19,69 +49,6 @@
- -
- - -
-
- -
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index cee7e0f4a..822548e09 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -15,31 +15,6 @@ background-color: $gray-f5; } -// toolbar -.title-bar { - width: 100vw; - height: $toolbar-height; - background-color: $primary-color; - position:sticky; -} - -.title-bar-item-container { - padding: 10px 20px; -} - -@include horizontal-spacing(toolbar-items-spacing, 5px); - -.icon { - height: 60px; - margin-right: 20px; -} - -.app-title { - color: white; - font-size: 40px; - font-weight: 100; -} - /* overlay container */ .overlay-container { margin-top: auto; @@ -79,15 +54,3 @@ width: 100vw; overflow: hidden; } - -// toolbar temporary -.buttons-overlay { - position: fixed; - left: 0; - top: 0; - right: 0; -} - -.buttons-overlay-item { - margin: 10px 10px 0 0; -} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a8afeb038..9e328ff75 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, ComponentFactoryResolver, EventEmitter, Type, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Component, ComponentFactoryResolver, Type, ViewChild, ViewEncapsulation } from '@angular/core'; import { TeamService } from './shared/layers/business-logic-layer/team.service'; import { DashboardComponent } from './dashboard/dashboard/dashboard.component'; import { OverlayHostDirective } from './overlay-host.directive'; @@ -9,6 +9,7 @@ import { PersonHighlightingOverlayComponent } from './dashboard/person-highlight import { Location } from '@angular/common'; import { ExportOverlayComponent } from './dashboard/export-overlay/export-overlay.component'; import { ConstraintLoggingService } from './shared/layers/business-logic-layer/constraint-logging.service'; +import { ConstraintsOverlayComponent } from './dashboard/constraints-overlay/constraints-overlay.component'; @Component({ selector: 'app-root', @@ -18,8 +19,6 @@ import { ConstraintLoggingService } from './shared/layers/business-logic-layer/c }) export class AppComponent implements OverlayServiceHost { overlayVisible = false; - teamStatisticsButtonPressed = new EventEmitter(); - toggleTeamStatisticsButtonState = true; @ViewChild(DashboardComponent) dashboardComponent: DashboardComponent; @@ -41,7 +40,7 @@ export class AppComponent implements OverlayServiceHost { history.pushState(null, '', '#TEASE'); }; pushState(); - this.location.subscribe(event => { + this.location.subscribe(() => { pushState(); }); } @@ -97,6 +96,14 @@ export class AppComponent implements OverlayServiceHost { this.overlayService.displayComponent(PersonHighlightingOverlayComponent, {}); } + openConstraintsDialog(): void { + this.overlayService.displayComponent(ConstraintsOverlayComponent, { displayWarning: !this.areAllTeamsEmpty() }); + } + + protected areAllTeamsEmpty(): boolean { + return this.teamService.teams.reduce((acc, team) => acc && !team.persons.length, true); + } + /* OverlayServiceHost interface */ public displayComponent(component: Type, data: any) { const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5d219a866..8294bfe72 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -20,6 +20,8 @@ import { LPTeamGenerationService } from './shared/layers/business-logic-layer/te import { HighlightingToolbarComponent } from './highlighting-toolbar/highlighting-toolbar.component'; import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common'; import { ReactiveFormsModule } from '@angular/forms'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { MatMenuModule } from '@angular/material/menu'; @NgModule({ declarations: [AppComponent, OverlayHostDirective, HighlightingToolbarComponent], @@ -33,9 +35,11 @@ import { ReactiveFormsModule } from '@angular/forms'; AppRoutingModule, DragulaModule.forRoot(), ReactiveFormsModule, + MatTooltipModule, /* own modules */ SharedModule, DashboardModule, + MatMenuModule, ], providers: [ TeamService, diff --git a/src/app/dashboard/dashboard/dashboard.component.html b/src/app/dashboard/dashboard/dashboard.component.html index eb8272960..cfdd6fac2 100644 --- a/src/app/dashboard/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard/dashboard.component.html @@ -30,20 +30,20 @@ mat-raised-button color="primary" class="distribute-button flex-no-shrink" - (click)="togglePersonPoolStatistics()"> -
- timeline -
{{ statisticsVisible ? 'Hide' : 'Show' }} Statistics
+ (click)="onTeamStatisticsButtonPressed()"> +
+ timeline +
{{ toggleTeamStatisticsButtonState ? 'Show' : 'Hide' }} Team Statistics
diff --git a/src/app/dashboard/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard/dashboard.component.ts index 45414868d..4892165d7 100644 --- a/src/app/dashboard/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard/dashboard.component.ts @@ -1,10 +1,9 @@ -import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core'; import { TeamService } from '../../shared/layers/business-logic-layer/team.service'; import { DragulaService } from 'ng2-dragula'; import { Person } from '../../shared/models/person'; import { PersonDetailOverlayComponent } from '../person-detail-overlay/person-detail-overlay.component'; import { OverlayService } from '../../overlay.service'; -import { ConstraintsOverlayComponent } from '../constraints-overlay/constraints-overlay.component'; import { SkillLevel } from '../../shared/models/skill'; import { Device } from '../../shared/models/device'; import { FormControl, FormGroup } from '@angular/forms'; @@ -24,7 +23,8 @@ enum PersonPoolDisplayMode { }) export class DashboardComponent implements OnInit, OnDestroy { @Output() importPressed = new EventEmitter(); - @Input() teamStatisticsButtonPressed; + teamStatisticsButtonPressed = new EventEmitter(); + toggleTeamStatisticsButtonState = true; statisticsVisible = false; @@ -80,14 +80,6 @@ export class DashboardComponent implements OnInit, OnDestroy { return this.teamService.teams && this.teamService.teams.length > 0; } - openConstraintsDialog(): void { - this.overlayService.displayComponent(ConstraintsOverlayComponent, { displayWarning: !this.areAllTeamsEmpty() }); - } - - protected areAllTeamsEmpty(): boolean { - return this.teamService.teams.reduce((acc, team) => acc && team.persons.length === 0, true); - } - togglePersonPoolStatistics(): void { this.statisticsVisible = !this.statisticsVisible; @@ -105,4 +97,9 @@ export class DashboardComponent implements OnInit, OnDestroy { ngOnDestroy(): void { this.dragulaSubscription?.unsubscribe(); } + + onTeamStatisticsButtonPressed() { + this.teamStatisticsButtonPressed.emit(this.toggleTeamStatisticsButtonState); + this.toggleTeamStatisticsButtonState = !this.toggleTeamStatisticsButtonState; + } } diff --git a/src/assets/images/icon.png b/src/assets/images/logo-l.png similarity index 100% rename from src/assets/images/icon.png rename to src/assets/images/logo-l.png diff --git a/src/assets/images/logo-s.png b/src/assets/images/logo-s.png new file mode 100644 index 0000000000000000000000000000000000000000..1b362c585f2ec593b1b182c76faaa778ef039bbc GIT binary patch literal 2629 zcmV-L3cB@)P)FwF9myoyWo$jhv z?|t=Nz4xk$;eR06ywL<}*#st60sJ0n`8YlEAz3vTB>fHpq79t&La>wc-Hb~61Y3bT zW=L!%%<^b#Avm@}%54PWPRxv2Y0P2B=mEBA?BeYXx-EdRxuOw<^BleIBqcF?7?Q}6 zWq(f3OKh!uV>}VIDTMzurPF@i^N& zG%_tf`H#7AtmDqTmjfQ6Rx!sEZ>bdAA)J9Hip!1@1cn;qrfH^4_`s@@iRyy z1RR(8oj4G00<$k75zWEiC`W&S$bOz}LZ-Aa%$n=pT@IWe#pB{G$a{|1$mNwVqF>Rrt|Wz&=K-qj=KejP^DGH+nC4v{54LYk~6t~P|UiH=&>1khOgqUP0O zDwY6qpVQ01af0$SG3=B_tY^vslz)lMCo{dQ-jyqdunL2V-^Jh}dW=tMfiS8AAXtO~ zo0;H^p``;X>eue((I9wk&4okq2l>M!|F0Na_%??4x*|xh7v;MZb3y|{aLVVC#-?}Ff4MXTA-URz;3*y0a{H1WL=@hu#T58I(!YNx*u$`1r_6e zfMKZF^%p%M^T7xg0taBICiOh#%My zYR_bBq{dSv!mgsS?Fm#{!{kuEO|Z=zCNG#prHY zwuRbbu{c?)B+HS`bnUj1XeQ!f4X4msQvgVjBq~-wIK{GP(28cXf}PxW5MaBv$lXes zE-zCWXiR377n-uIFVL0Gda@#Bq&SgmKb+)4UOFqt;L8c1Y%C~MWr`<|zFd;feRH>; zI~W9z_omvqt_5sfEkgJjs?fdqeeXlcKwsP010jC9^;H@a4^|l|n-stWg>Mbogek*` zSESn}HF%O@bqslXAjI$HQ;5#Wd2$1Oqwnl!HLnu{caQY_= zm&lL&YZ5?Dl=ZP1xVf>ALXjhYi~Q(yg2mTOx0Al$_J(I~sM3T27Vo8oELhypsOX`} z3e)K-&Vl}1%01i(T1l#WM5Q7!uU_+%BXd?ISTa^v4h218n9`XW7-jf6d1)huAPX{` z#MERgnm|p@H%M>rY$K>PSZo3P0Iim@!q5q&$y^u0@1l>?-V$E3j>wBF+eEryVJqQ$uN}y#2Uj1dxF*Yycxm zmXeaC@?d)K0-SWGr<-^y#RZL_Koaewg5Oh}JUOnR!h`C%2Zt9{pGC`XLW`uX#Qr=W+@Ipwk z50E>9;O>y$R?JyF$G${6lDzf>Q@qlX?9`<6;|W)7+|Q8`eJ4w*36J>l`)ECmPBbD+ zvPGqt6QO2!?qvBM64DzGs>qT9a5KF=FHWR|LxUrc35iX{*cic(?wxz4ZM5lQl;mtQ#x)Q}9N zQ zJ$=60h*xDPk?~SWf@CFIpFkz0v?_6ibZw>dcD)$I90%AV*-Ir7l#uKz^j~X@k_W2A zX~ZH@C(dedihh08{HRujY)9CFm6S^AeK!hT*k}m5Q;(63SL355*YcHYi*zXY(TJRI zE!~LmT_|9kQ1d8mlE5DnzDsfv(>p3ZvfW{w-KDl+$M!oK*q}#g!J{qTME%6=V-bSAv?h05H1eJ4h<}2*c@te~z&+HQY7+nlHbcxQe zg+7}wGwPzyeU0u>_p?t?VYp425x@ze^=ZP0ucpo7Mi^`ju)GWyp1rs nLTTX~C0^PwWsc~&KSTO21O?iBRCU$B00000NkvXXu0mjf5n=W@ literal 0 HcmV?d00001 diff --git a/src/assets/images/logo-s.svg b/src/assets/images/logo-s.svg new file mode 100644 index 000000000..96d04d3ff --- /dev/null +++ b/src/assets/images/logo-s.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/scss/_style-constants.scss b/src/scss/_style-constants.scss index f4756035b..e5cd37f88 100644 --- a/src/scss/_style-constants.scss +++ b/src/scss/_style-constants.scss @@ -27,3 +27,8 @@ $max-scrollbar-width: 100px; $standard-border: 1px solid #ccc; $regular-overlay-width: 850px; + +//tease 2.0 colors +$artemis-dark: #353d47; +$navbar-dark-color: rgba(255, 255, 255, .6); +$artemis-primary: #3e8acc; diff --git a/src/scss/_utility.scss b/src/scss/_utility.scss index 397763bd4..4e05b156e 100644 --- a/src/scss/_utility.scss +++ b/src/scss/_utility.scss @@ -31,3 +31,26 @@ height: 100%; } + +//tease 2.0 +.bg-artemis-dark { + background-color: $artemis-dark !important; +} + +.bg-artemis-primary { + background-color: $artemis-primary !important; +} + +.btn-icon { + display: flex; + justify-content: center; +} + +.btn-icon mat-icon { + color: $navbar-dark-color; +} + +.btn-icon:hover mat-icon { + color: $artemis-primary; +} +