hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Add war list mouseover and background color select state

pull/52/head
HardiReady 2019-02-11 21:55:16 +01:00
parent 75a20e54cb
commit 2c99565b13
3 changed files with 69 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/src/app/statistic/war/war-list/war-item.component.css
View File

@ -3,6 +3,11 @@
border-right: 1px solid #dadada; border-right: 1px solid #dadada;
} }
.war-item:hover, .selected{
background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
border-bottom: 1px solid #dadada;
}
.war-item-box { .war-item-box {
padding-top: 15px; padding-top: 15px;
} }

15
static/src/app/statistic/war/war-list/war-list.component.css
View File

@ -9,6 +9,21 @@
cursor: pointer; cursor: pointer;
} }
.list-header:hover, .selected{
background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
}
.list-header-battles {
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
border-left: 4px solid transparent;
padding: 25px;
font-size: 16px;
text-transform: uppercase;
color: #333333;
border-bottom: 1px solid #f1f1f1;
}
.mat-icon { .mat-icon {
color: #666666; color: #666666;
vertical-align: middle; vertical-align: middle;

96
static/src/app/statistic/war/war-list/war-list.component.html
View File

@ -1,54 +1,56 @@
<div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)"> <div class="war-menu">
<button mat-stroked-button (click)="selectNewCampaign()"> <div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
{{'stats.sidebar.campaign.add' | translate}} <button mat-stroked-button (click)="selectNewCampaign()">
</button> {{'stats.sidebar.campaign.add' | translate}}
<button mat-stroked-button (click)="selectNewWar()"> </button>
{{'stats.sidebar.battle.add' | translate}} <button mat-stroked-button (click)="selectNewWar()">
</button> {{'stats.sidebar.battle.add' | translate}}
</div> </button>
<div class="list-header"
[ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
<div class="select-indicator-container">
<div class="select-indicator"></div>
</div> </div>
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.overview'] : ''"
matTooltipPosition="right"
svgIcon="stats-chart"></mat-icon>
<span *ngIf="!collapsed">{{'stats.sidebar.overview' | translate}}</span>
</div>
<div class="list-header" <div class="list-header"
[ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)"> [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
<div class="select-indicator-container"> <div class="select-indicator-container">
<div class="select-indicator"></div> <div class="select-indicator"></div>
</div>
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.overview'] : ''"
matTooltipPosition="right"
svgIcon="stats-chart"></mat-icon>
<span *ngIf="!collapsed">{{'stats.sidebar.overview' | translate}}</span>
</div> </div>
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.highscore'] : ''"
matTooltipPosition="right"
svgIcon="highscore"></mat-icon>
<span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
</div>
<div class="list-header" style="cursor: default; border-bottom: 1px solid #f1f1f1;"> <div class="list-header"
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''" [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
matTooltipPosition="right" <div class="select-indicator-container">
svgIcon="battle"></mat-icon> <div class="select-indicator"></div>
<span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span> </div>
</div> <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.highscore'] : ''"
matTooltipPosition="right"
svgIcon="highscore"></mat-icon>
<span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
</div>
<div class="battle-list"> <div class="list-header-battles">
<div *ngFor="let war of campaign.wars$ | async"> <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
<cc-war-item matTooltipPosition="right"
[war]="war" svgIcon="battle"></mat-icon>
(warEdit)="editWar($event)" <span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span>
(warDelete)="deleteWar(war)" </div>
(warSelected)="selectWar($event)"
[collapsed]="collapsed" <div class="battle-list">
[selected]="war._id == selectedWarId"> <div *ngFor="let war of campaign.wars$ | async">
</cc-war-item> <cc-war-item
[war]="war"
(warEdit)="editWar($event)"
(warDelete)="deleteWar(war)"
(warSelected)="selectWar($event)"
[collapsed]="collapsed"
[selected]="war._id == selectedWarId">
</cc-war-item>
</div>
</div>
<div class="fill-vertical-border"
[ngClass]="{collapsed: collapsed}">
</div> </div>
</div> </div>
<div class="fill-vertical-border"
[ngClass]="{collapsed: collapsed}">
</div>