Add basic horizontal campaign navigation

pull/43/head
HardiReady 2018-07-27 07:20:57 +02:00
parent 0ef9a6aac2
commit da6037d001
6 changed files with 146 additions and 25 deletions

View File

@ -105,15 +105,20 @@
</div>
<div>
<button mat-icon-button
class="sidebar-toggle-btn"
(click)="toggleSidebar()"
*ngIf="showSidebarToggleBtn">
<mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">
</mat-icon>
<mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">
</mat-icon>
</button>
<!--<button mat-icon-button-->
<!--class="sidebar-toggle-btn"-->
<!--(click)="toggleSidebar()"-->
<!--*ngIf="showSidebarToggleBtn">-->
<!--<mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">-->
<!--</mat-icon>-->
<!--<mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">-->
<!--</mat-icon>-->
<!--</button>-->
<div id="top">
<router-outlet name="top"></router-outlet>
</div>
<div id="left"
[style.background]="leftBackground"

View File

@ -48,7 +48,6 @@ export class UserListSheetComponent implements OnInit {
selectUser(user) {
this.bottomSheetRef.dismiss();
event.preventDefault();
this.router.navigate(['overview', {outlets: {'right': ['member', user._id]}}]);
}
}

View File

@ -0,0 +1,36 @@
.scroll-btn {
position: absolute;
height: 53px;
width: 32px;
cursor: pointer;
}
.scroll-btn-right {
top: 50px;
left: 98%;
}
.campaign-horizontal-list {
width: 100%;
height: 100%;
display: flex;
margin: 0;
padding: 0;
overflow: hidden;
box-shadow: #dadada 0px 1px 5px;
}
.campaign-entry {
width: fit-content;
border: 1px solid #dadada;
min-width: 20%;
padding: 15px;
text-align: center;
cursor: pointer;
font-size: 16px;
float:left;
}
.campaign-entry:hover {
background: #f9f9f9;
}

View File

@ -0,0 +1,37 @@
<div class="scroll-btn"
*ngIf="isLeftScrollVisible"
(mouseenter)="setRepeater(-25)"
(mouseout)="clearRepeater()">
<mat-icon svgIcon="chevron-left"></mat-icon>
</div>
<div class="campaign-horizontal-list" #horizontalList>
<div class="campaign-entry">
Ewige Übersicht
</div>
<div class="campaign-entry">
Operation Schmelztiegel
</div>
<div class="campaign-entry">
Return to Hell in a Bowl
</div>
<div class="campaign-entry">
Operation Schmelztiegel
</div>
<div class="campaign-entry">
Return to Hell in a Bowl
</div>
<div class="campaign-entry">
Operation Schmelztiegel
</div>
<div class="campaign-entry">
Return to Hell in a Bowl
</div>
</div>
<div class="scroll-btn scroll-btn-right"
(mouseenter)="setRepeater(25)"
(mouseout)="clearRepeater()">
<mat-icon svgIcon="chevron-right"></mat-icon>
</div>

View File

@ -0,0 +1,37 @@
import {Component, ElementRef, ViewChild} from '@angular/core';
@Component({
selector: 'campaign-navigation',
templateUrl: './campaign-navigation.component.html',
styleUrls: ['./campaign-navigation.component.css']
})
export class CampaignNavigationComponent {
@ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;
isLeftScrollVisible = false;
repeater;
constructor() {
}
public scrollList(scrollValue: number): void {
console.log("call")
this.panel.nativeElement.scrollLeft += scrollValue;
if (this.panel.nativeElement.scrollLeft > 0) {
this.isLeftScrollVisible = true
} else {
this.isLeftScrollVisible = false;
this.clearRepeater();
}
}
setRepeater(value: number) {
this.repeater = setInterval(() => this.scrollList(value), 200);
}
clearRepeater() {
clearInterval(this.repeater)
}
}

View File

@ -13,6 +13,7 @@ import {StatisticHighScoreComponent} from './campaign/highscore/highscore.compon
import {WarHeaderComponent} from './war/war-header/war-header.component';
import {WarEditComponent} from './war/war-edit/war-edit.component';
import {LoginGuardMT} from '../login';
import {CampaignNavigationComponent} from './campaign/campaign-navigation/campaign-navigation.component';
export const statsRoutes: Routes = [{
@ -24,6 +25,11 @@ export const statsRoutes: Routes = [{
}
]
},
{
path: 'top',
component: CampaignNavigationComponent,
outlet: 'top'
},
{
path: 'overview/:id',
component: StatisticOverviewComponent,
@ -73,5 +79,6 @@ export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(stat
export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, StatisticHighScoreComponent,
CampaignSubmitComponent, WarListComponent, WarSubmitComponent, WarEditComponent, WarHeaderComponent,
ScoreboardComponent, FractionStatsComponent, CampaignPlayerDetailComponent, WarItemComponent];
ScoreboardComponent, FractionStatsComponent, CampaignPlayerDetailComponent, WarItemComponent,
CampaignNavigationComponent];