From 42cfadb9e96c8e51e49d9c5df34fa77482d8f9c6 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sat, 14 Jul 2018 12:54:53 +0200 Subject: [PATCH] Add more fancy tabbing feeling and fix initial ordering of stats --- static/src/app/app.component.ts | 2 + .../fraction-stats.component.css | 24 +++--- .../fraction-stats.component.html | 2 +- .../war/scoreboard/scoreboard.component.css | 81 +------------------ .../war/scoreboard/scoreboard.component.html | 10 ++- .../war/scoreboard/scoreboard.component.ts | 7 +- .../war/war-header/war-header.component.css | 21 +++-- .../src/assets/icon/round-assessment-24px.svg | 78 ++++++++++++++++++ 8 files changed, 120 insertions(+), 105 deletions(-) create mode 100644 static/src/assets/icon/round-assessment-24px.svg diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts index 8149986..5e2b202 100644 --- a/static/src/app/app.component.ts +++ b/static/src/app/app.component.ts @@ -42,6 +42,8 @@ export class AppComponent implements OnInit { sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-edit-24px.svg')); this.iconRegistry.addSvgIcon('delete', sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-delete-24px.svg')); + this.iconRegistry.addSvgIcon('stats-detail', + sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/round-assessment-24px.svg')); router.events.subscribe(event => { if (event instanceof NavigationStart) { diff --git a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.css b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.css index 98f5a74..8b96911 100644 --- a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.css +++ b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.css @@ -1,32 +1,30 @@ .chart-select-group { display: flex; - width: 945px; + width: fit-content; margin: auto; } -.chart-select-group > mat-button-toggle { - background: #4b4b4b; - color: #f5f5f5; - border: 1px solid #000; +:host /deep/ mat-button-toggle { + color: #666666; + background: #e7e7e7; } -.chart-select-group > mat-button-toggle:hover { +:host /deep/ mat-button-toggle:hover { background: #afafaf; - color: #f5f5f5; } -mat-button-toggle.mat-button-toggle-checked { - background: #222222 !important; +:host /deep/ mat-button-toggle.mat-button-toggle-checked { + background: #ffffff; } :host /deep/ label.mat-button-toggle-label { - margin: 2px 0 !important; + margin: 2px 0; } :host /deep/ div.mat-button-toggle-label-content { - line-height: 25px !important; - margin-bottom: 0 !important; - font-weight: normal !important; + line-height: 25px; + margin-bottom: 0; + font-weight: normal; } .chart-container { diff --git a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html index 94f8719..9806126 100644 --- a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html +++ b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html @@ -1,4 +1,4 @@ -
+
div { - /*vertical alignment*/ - position: relative; - top: 10px; -} - -:host /deep/ .datatable-body-row { - color: #222222; - border-bottom: 1px solid grey; -} - -:host /deep/ .datatable-body-row:hover { - background-color: #f7f7f7; -} - -:host /deep/ .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell { - margin: auto; -} - -/* Table Scrollbar BEGIN */ -:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar { - width: 12px; -} - -:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - border-radius: 10px; -} - -:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-thumb { - border-radius: 10px; - background: #4b4b4b; - -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5); -} - -/* Table Scrollbar END */ - .in-table-btn { position: absolute; margin-top: -5px; @@ -92,16 +25,8 @@ table.mat-table img { text-indent: 9px; } -/* MAT FAB BUTTON */ +/* MAT ICON BUTTON */ -button.mat-mini-fab { - color: #7b7b7b; - background: #ffffff; - width: 60px; - height: 35px; - font-size: 12px; -} - -:host/deep/span.mat-button-wrapper { - padding: 0; +:host/deep/.mat-table .mat-icon { + color: #666666; } diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html index 11905a6..bf0185b 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html @@ -1,8 +1,8 @@ -
+
@@ -31,10 +31,12 @@ diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts index d56de14..b75f627 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts @@ -3,7 +3,7 @@ import {War} from '../../../models/model-interfaces'; import {Fraction} from '../../../utils/fraction.enum'; import {PlayerUtils} from '../../../utils/player-utils'; import {saveAs} from 'file-saver/FileSaver'; -import {Sort} from '@angular/material'; +import {MatSort, Sort} from '@angular/material'; @Component({ selector: 'cc-scoreboard', @@ -55,7 +55,10 @@ export class ScoreboardComponent implements OnChanges { ngOnChanges(changes: SimpleChanges) { if (changes.war) { this.rows = changes.war.currentValue.players; - this.sortedRows = this.rows.slice(); + + const sort = new MatSort(); + sort.active = 'kill'; + this.sortData(sort); // this.elRef.nativeElement // .querySelector('.datatable-body') // .scrollTo(0, 0); diff --git a/static/src/app/statistic/war/war-header/war-header.component.css b/static/src/app/statistic/war/war-header/war-header.component.css index 9f7a896..8508278 100644 --- a/static/src/app/statistic/war/war-header/war-header.component.css +++ b/static/src/app/statistic/war/war-header/war-header.component.css @@ -19,12 +19,19 @@ span.tab-control { padding: 4px 16px; } -.war-header { - border-bottom: thin solid lightgrey; +.nav-tabs > li.active > a { + background: #ffffff; + border-bottom: none; } -.nav-tabs > li.active > a { - background: #222222; +.nav-tabs > li.active { + position: relative; + top: 1px; + z-index: 10; +} + +.nav-tabs > li img { + filter: invert(50%); } .nav-tabs { @@ -35,12 +42,12 @@ span.tab-control { } .nav-tabs > li > a { - background: #4b4b4b; + background: #e7e7e7; + border: 1px solid #dadada; } .nav-tabs > li:not(.active) > a:hover { background: #afafaf; - color: #f5f5f5; } .nav-tabs > li:last-child { @@ -49,7 +56,7 @@ span.tab-control { .nav-link { cursor: pointer !important; - color: #FFF !important; + color: #666666 !important; } .nav-tabs > li.deactivated > a.nav-link { diff --git a/static/src/assets/icon/round-assessment-24px.svg b/static/src/assets/icon/round-assessment-24px.svg new file mode 100644 index 0000000..24880bd --- /dev/null +++ b/static/src/assets/icon/round-assessment-24px.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-