From bd0489d6c2e5b5d4015fa72a675d709531d0ecfb Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sun, 22 Apr 2018 13:31:38 +0200
Subject: [PATCH] Use custom table header for scoreboard

---
 .../scoreboard/scoreboard.component.css       |   2 +-
 .../scoreboard/scoreboard.component.html      |  92 ++++++++++++++++--
 .../scoreboard/scoreboard.component.ts        |   2 +
 .../war-detail/war-detail.component.css       |   2 +-
 static/src/assets/tank.png                    | Bin 0 -> 546 bytes
 5 files changed, 86 insertions(+), 12 deletions(-)
 create mode 100644 static/src/assets/tank.png

diff --git a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css
index 741bd71..97c9a5f 100644
--- a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css
+++ b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css
@@ -5,7 +5,7 @@
 /* ########### DATATABLE ########### */
 
 ngx-datatable {
-  width: 1040px;
+  width: 940px;
   margin: auto;
   height: 68vh;
 }
diff --git a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.html b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.html
index 061f789..d1e9c46 100644
--- a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.html
+++ b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.html
@@ -18,20 +18,92 @@
         </span>
       </ng-template>
     </ngx-datatable-column>
-    <ngx-datatable-column name="{{tableHead[1]}}" prop="fraction" [width]="100">
+    <ngx-datatable-column name="{{tableHead[1]}}" prop="fraction" [width]="90">
       <ng-template ngx-datatable-cell-template let-value="value">
         {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
       </ng-template>
     </ngx-datatable-column>
-    <ngx-datatable-column [width]="70" name="{{tableHead[2]}}" prop="kill"></ngx-datatable-column>
-    <ngx-datatable-column [width]="70" name="{{tableHead[3]}}" prop="friendlyFire"></ngx-datatable-column>
-    <ngx-datatable-column [width]="70" name="{{tableHead[4]}}" prop="vehicleLight"></ngx-datatable-column>
-    <ngx-datatable-column [width]="70" name="{{tableHead[5]}}" prop="vehicleHeavy"></ngx-datatable-column>
-    <ngx-datatable-column [width]="70" name="{{tableHead[6]}}" prop="vehicleAir"></ngx-datatable-column>
-    <ngx-datatable-column [width]="70" name="{{tableHead[7]}}" prop="revive"></ngx-datatable-column>
-    <ngx-datatable-column [width]="70" name="{{tableHead[8]}}" prop="flagTouch"></ngx-datatable-column>
-    <ngx-datatable-column [width]="70" name="{{tableHead[9]}}" prop="death"></ngx-datatable-column>
-    <ngx-datatable-column [width]="70" name="{{tableHead[10]}}" prop="respawn"></ngx-datatable-column>
+    <ngx-datatable-column [width]="columnWidth" prop="kill">
+      <ng-template ngx-datatable-header-template let-sort="sortFn">
+        <span class="datatable-header-cell-wrapper">
+          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[2]}}" (click)="sort()">
+            <img src="../../../../assets/tank.png">
+          </span>
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="columnWidth" prop="friendlyFire">
+      <ng-template ngx-datatable-header-template let-sort="sortFn">
+        <span class="datatable-header-cell-wrapper">
+          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[3]}}" (click)="sort()">
+            <img src="../../../../assets/tank.png">
+          </span>
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="columnWidth" prop="vehicleLight">
+      <ng-template ngx-datatable-header-template let-sort="sortFn">
+        <span class="datatable-header-cell-wrapper">
+          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[4]}}" (click)="sort()">
+            <img src="../../../../assets/tank.png">
+          </span>
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="columnWidth" prop="vehicleHeavy">
+      <ng-template ngx-datatable-header-template let-sort="sortFn">
+        <span class="datatable-header-cell-wrapper">
+          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[5]}}" (click)="sort()">
+            <img src="../../../../assets/tank.png">
+          </span>
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="columnWidth" prop="vehicleAir">
+      <ng-template ngx-datatable-header-template let-sort="sortFn">
+        <span class="datatable-header-cell-wrapper">
+          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[6]}}" (click)="sort()">
+            <img src="../../../../assets/tank.png">
+          </span>
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="columnWidth" prop="revive">
+      <ng-template ngx-datatable-header-template let-sort="sortFn">
+        <span class="datatable-header-cell-wrapper">
+          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[7]}}" (click)="sort()">
+            <img src="../../../../assets/tank.png">
+          </span>
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="columnWidth" prop="flagTouch">
+      <ng-template ngx-datatable-header-template let-sort="sortFn">
+        <span class="datatable-header-cell-wrapper">
+          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[8]}}" (click)="sort()">
+            <img src="../../../../assets/tank.png">
+          </span>
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="columnWidth" prop="death">
+      <ng-template ngx-datatable-header-template let-sort="sortFn">
+        <span class="datatable-header-cell-wrapper">
+          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[9]}}" (click)="sort()">
+            <img src="../../../../assets/tank.png">
+          </span>
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="columnWidth" prop="respawn">
+      <ng-template ngx-datatable-header-template let-sort="sortFn">
+        <span class="datatable-header-cell-wrapper">
+          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[10]}}" (click)="sort()">
+            <img src="../../../../assets/tank.png">
+          </span>
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
     <!--<ngx-datatable-column [width]="80" name="" prop="name">-->
     <!--<ng-template ngx-datatable-cell-template let-value="value">-->
     <!--<span class="btn btn-sm btn-default in-table-btn disabled">Detail</span>-->
diff --git a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.ts b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.ts
index a1dbfa6..316a561 100644
--- a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.ts
+++ b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.ts
@@ -26,6 +26,8 @@ export class ScoreboardComponent implements OnChanges {
 
   cellHeight = 40;
 
+  columnWidth = 65;
+
   rows = [];
 
   reorderable = false;
diff --git a/static/src/app/statistic/war-detail/war-detail.component.css b/static/src/app/statistic/war-detail/war-detail.component.css
index c656ac1..9f7a896 100644
--- a/static/src/app/statistic/war-detail/war-detail.component.css
+++ b/static/src/app/statistic/war-detail/war-detail.component.css
@@ -28,7 +28,7 @@ span.tab-control {
 }
 
 .nav-tabs {
-  width: 980px;
+  width: 920px;
   margin: auto;
   clear: both;
   border-bottom: 0;
diff --git a/static/src/assets/tank.png b/static/src/assets/tank.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d03cc9ff65184912750d9463882c164d337445d
GIT binary patch
literal 546
zcmV+-0^R+IP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800006VoOIv0RI60
z0RN!9r;`8x0oO@HK~z}7?UcQ1ltB=OpE>2c_z{8}T8K>=3$aroHi8h;%EBrjmI18=
zZS2HWu~1793Hk>pVzALBpddl3NQj6YNG_2CH4%c3g>&IG-r*JAVevlA&hF0a&hF0s
zproXvqzlybwq>`Q?{yOOg1t|@pbq!z<lA$@hw2OUxxaX$-dFc_a|`W!qKlw$;4)AL
zY8~7bfY-nZa0VCvHs#zJFbK>?#6rgeR3f5f*MMq7EZhA9e*<0uw}218BJd>>2;h4}
zG&crSTI)vy>V7qVNnlDH08Rk+fa$*^Fa=BiW56gd5)tnsq7e}vBcj>yENWG~>%Zr#
zI+8^@)Ug)Si}sdfbxyrm*fWX=oV33@U9Y=B682f&h9Y9AQW!V@%=JoAHuTrBSpTSn
zJB4eSP?ywc^{V<zeWadCA(~Ui)KlsWbyYp9o>m*`q<T<&tUgKmQm*~BQ!!T5MfJKm
zoX(#zxW%FLQ9Z8K)OXpxq8?3qUOiukJC?s~RNeMl5pIy(LG_4wEdytBtVLCw$uG7i
zV_Lq4)m`d}`YMxK&AD;4u5Rs0iq$G`8)yJq^4&HAJAo#!1E>I1;BzY9?(~}lex!WQ
kM8t!3id#}rQu1H$6H7t)&9Cq_&Hw-a07*qoM6N<$f*p(cIsgCw

literal 0
HcmV?d00001