Add war list mouseover and background color select state

pull/52/head
HardiReady 2019-02-11 21:56:00 +01:00
parent 2c99565b13
commit 22340d32e8
1 changed files with 46 additions and 48 deletions

View File

@ -1,56 +1,54 @@
<div class="war-menu"> <div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
<div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)"> <button mat-stroked-button (click)="selectNewCampaign()">
<button mat-stroked-button (click)="selectNewCampaign()"> {{'stats.sidebar.campaign.add' | translate}}
{{'stats.sidebar.campaign.add' | translate}} </button>
</button> <button mat-stroked-button (click)="selectNewWar()">
<button mat-stroked-button (click)="selectNewWar()"> {{'stats.sidebar.battle.add' | translate}}
{{'stats.sidebar.battle.add' | translate}} </button>
</button> </div>
</div>
<div class="list-header" <div class="list-header"
[ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(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.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 + highscore}" (click)="selectHighscore(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.highscore'] : ''"
matTooltipPosition="right"
svgIcon="highscore"></mat-icon>
<span *ngIf="!collapsed">{{'stats.sidebar.highscore' | 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-battles"> <div class="list-header-battles">
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''" <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
matTooltipPosition="right" matTooltipPosition="right"
svgIcon="battle"></mat-icon> svgIcon="battle"></mat-icon>
<span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span> <span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span>
</div> </div>
<div class="battle-list"> <div class="battle-list">
<div *ngFor="let war of campaign.wars$ | async"> <div *ngFor="let war of campaign.wars$ | async">
<cc-war-item <cc-war-item
[war]="war" [war]="war"
(warEdit)="editWar($event)" (warEdit)="editWar($event)"
(warDelete)="deleteWar(war)" (warDelete)="deleteWar(war)"
(warSelected)="selectWar($event)" (warSelected)="selectWar($event)"
[collapsed]="collapsed" [collapsed]="collapsed"
[selected]="war._id == selectedWarId"> [selected]="war._id == selectedWarId">
</cc-war-item> </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>