Add more fancy tabbing feeling and fix initial ordering of stats
parent
6f4274a365
commit
42cfadb9e9
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="fade-in" xmlns="http://www.w3.org/1999/html">
|
||||
<div class="fade-in" style="border-top: 1px solid #dadada; padding-top:25px;" xmlns="http://www.w3.org/1999/html">
|
||||
|
||||
<mat-button-toggle-group class="chart-select-group"
|
||||
#group="matButtonToggleGroup"
|
||||
|
|
|
|||
|
|
@ -1,70 +1,3 @@
|
|||
.player-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ########### DATATABLE ########### */
|
||||
|
||||
ngx-datatable {
|
||||
width: 940px;
|
||||
margin: auto;
|
||||
height: 68vh;
|
||||
}
|
||||
|
||||
:host /deep/ .datatable-header {
|
||||
width: 1100px !important;
|
||||
background: #222222;
|
||||
font-weight: 700;
|
||||
border-radius: 10px 10px 0 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:host /deep/ span.datatable-header-cell-label, :host /deep/ div.datatable-body-cell-label {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
:host /deep/ .ngx-datatable .datatable-header {
|
||||
/*vertical center alignment*/
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
:host /deep/ .ngx-datatable .datatable-body .datatable-body-row > 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="fade-in" style="overflow-x: auto">
|
||||
<div class="fade-in" style="border-top: 1px solid #dadada; overflow-x: auto">
|
||||
|
||||
<table mat-table matSort
|
||||
[dataSource]="sortedRows"
|
||||
matSortActive="{{tableHead[2].prop}}" matSortDirection="desc" matSortDisableClear
|
||||
matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
|
||||
(matSortChange)="sortData($event)"
|
||||
class="mat-elevation-z8">
|
||||
|
||||
|
|
@ -31,10 +31,12 @@
|
|||
<ng-container matColumnDef="interact">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button mat-mini-fab color="primary"
|
||||
<button mat-icon-button
|
||||
matTooltip="Kampagnenstatistik für {{element.name}}"
|
||||
(click)="selectPlayerDetail(1, isSteamUUID(element['steamUUID']) ?
|
||||
element['steamUUID'] : element['name'])">
|
||||
Gesamt
|
||||
<mat-icon svgIcon="stats-detail">
|
||||
</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
|
||||
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
|
||||
<g id="Header_x2F_BG" display="none">
|
||||
<rect x="-50" y="-138" display="inline" fill="#F1F1F2" width="520" height="520"/>
|
||||
</g>
|
||||
<g id="Bounding_Boxes">
|
||||
<g id="ui_x5F_spec_x5F_header_copy_3">
|
||||
</g>
|
||||
<path fill="none" d="M0,0h24v24H0V0z"/>
|
||||
</g>
|
||||
<g id="Rounded">
|
||||
<g id="ui_x5F_spec_x5F_header_copy_5">
|
||||
</g>
|
||||
<path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M8,17L8,17c-0.55,0-1-0.45-1-1v-5
|
||||
c0-0.55,0.45-1,1-1h0c0.55,0,1,0.45,1,1v5C9,16.55,8.55,17,8,17z M12,17L12,17c-0.55,0-1-0.45-1-1V8c0-0.55,0.45-1,1-1h0
|
||||
c0.55,0,1,0.45,1,1v8C13,16.55,12.55,17,12,17z M16,17L16,17c-0.55,0-1-0.45-1-1v-2c0-0.55,0.45-1,1-1h0c0.55,0,1,0.45,1,1v2
|
||||
C17,16.55,16.55,17,16,17z"/>
|
||||
</g>
|
||||
<g id="Sharp" display="none">
|
||||
<g id="ui_x5F_spec_x5F_header_copy_4" display="inline">
|
||||
</g>
|
||||
<path display="inline" d="M21,3H3v18h18V3z M9,17H7v-7h2V17z M13,17h-2V7h2V17z M17,17h-2v-4h2V17z"/>
|
||||
</g>
|
||||
<g id="Outline" display="none">
|
||||
<g id="ui_x5F_spec_x5F_header" display="inline">
|
||||
</g>
|
||||
<g display="inline">
|
||||
<path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V5h14V19z"/>
|
||||
<rect x="7" y="10" width="2" height="7"/>
|
||||
<rect x="11" y="7" width="2" height="10"/>
|
||||
<rect x="15" y="13" width="2" height="4"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Duotone" display="none">
|
||||
<g id="ui_x5F_spec_x5F_header_copy_2" display="inline">
|
||||
</g>
|
||||
<g display="inline">
|
||||
<path opacity="0.3" d="M5,5v14h14V5H5z M9,17H7v-7h2V17z M13,17h-2V7h2V17z M17,17h-2v-4h2V17z"/>
|
||||
<g>
|
||||
<path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V5h14V19z"/>
|
||||
<rect x="7" y="10" width="2" height="7"/>
|
||||
<rect x="11" y="7" width="2" height="10"/>
|
||||
<rect x="15" y="13" width="2" height="4"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Fill" display="none">
|
||||
<g id="ui_x5F_spec_x5F_header_copy" display="inline">
|
||||
</g>
|
||||
<path display="inline" d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M9,17H7v-7h2V17z
|
||||
M13,17h-2V7h2V17z M17,17h-2v-4h2V17z"/>
|
||||
</g>
|
||||
<g id="nyt_x5F_exporter_x5F_info" display="none">
|
||||
<g display="inline">
|
||||
<path d="M20-7.4l1.27,3.43c0.13,0.38,0.28,0.84,0.37,1.19h0.02C21.78-3.14,21.9-3.58,22.04-4l1.15-3.41h1.12l-1.58,4.14
|
||||
c-0.76,1.99-1.27,3.01-1.99,3.63C20.22,0.82,19.7,1,19.44,1.05l-0.26-0.89c0.26-0.08,0.61-0.25,0.92-0.52
|
||||
c0.29-0.23,0.65-0.64,0.89-1.18c0.05-0.11,0.08-0.19,0.08-0.25c0-0.06-0.02-0.14-0.07-0.28L18.85-7.4H20z"/>
|
||||
<path d="M5.88,9.29l5.56-2.87v0.83L6.75,9.6v0.02l4.69,2.35v0.83L5.88,9.93V9.29z"/>
|
||||
<path d="M13.12,8.57c0-0.6-0.01-1.09-0.05-1.57H14l0.06,0.96h0.02c0.29-0.55,0.96-1.09,1.92-1.09c0.8,0,2.05,0.48,2.05,2.47v3.47
|
||||
H17V9.45c0-0.94-0.35-1.71-1.34-1.71c-0.7,0-1.24,0.49-1.42,1.08c-0.05,0.13-0.07,0.31-0.07,0.49v3.49h-1.06V8.57z"/>
|
||||
<path d="M20,7l1.27,3.43c0.13,0.38,0.28,0.84,0.37,1.19h0.02c0.11-0.35,0.23-0.79,0.37-1.21L23.19,7h1.12l-1.58,4.14
|
||||
c-0.76,1.99-1.27,3.01-1.99,3.63c-0.52,0.46-1.03,0.64-1.29,0.68l-0.26-0.89c0.26-0.08,0.61-0.25,0.92-0.52
|
||||
c0.29-0.23,0.65-0.64,0.89-1.18c0.05-0.11,0.08-0.19,0.08-0.25c0-0.06-0.02-0.14-0.07-0.28L18.85,7H20z"/>
|
||||
<path d="M0.79,23.69l5.56-2.87v0.83L1.67,24v0.02l4.69,2.35v0.83l-5.56-2.87V23.69z"/>
|
||||
<path d="M7.14,27.68l3.35-8.69h0.82l-3.36,8.69H7.14z"/>
|
||||
<path d="M12.14,22.97c0-0.6-0.01-1.09-0.05-1.57h0.94l0.06,0.96h0.02c0.29-0.55,0.96-1.09,1.92-1.09c0.8,0,2.05,0.48,2.05,2.47
|
||||
v3.47h-1.06v-3.35c0-0.94-0.35-1.71-1.34-1.71c-0.7,0-1.24,0.49-1.42,1.08c-0.05,0.13-0.07,0.31-0.07,0.49v3.49h-1.06V22.97z"/>
|
||||
<path d="M19.03,21.4l1.27,3.43c0.13,0.38,0.28,0.84,0.37,1.19h0.02c0.11-0.35,0.23-0.79,0.37-1.21l1.15-3.41h1.12l-1.58,4.14
|
||||
c-0.76,1.99-1.27,3.01-1.99,3.63c-0.52,0.46-1.03,0.64-1.29,0.68l-0.26-0.89c0.26-0.08,0.61-0.25,0.92-0.52
|
||||
c0.29-0.23,0.65-0.64,0.89-1.18c0.05-0.11,0.08-0.19,0.08-0.25c0-0.06-0.02-0.14-0.07-0.28l-2.15-5.35H19.03z"/>
|
||||
<path d="M25.57,19.73v1.67h1.51v0.8h-1.51v3.13c0,0.72,0.2,1.13,0.79,1.13c0.28,0,0.48-0.04,0.61-0.07l0.05,0.79
|
||||
c-0.2,0.08-0.53,0.14-0.94,0.14c-0.49,0-0.89-0.16-1.14-0.44c-0.3-0.31-0.41-0.83-0.41-1.51V22.2h-0.9v-0.8h0.9V20L25.57,19.73z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
Loading…
Reference in New Issue