Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navdrawer updates #465

Merged
merged 8 commits into from
Sep 11, 2017
Merged

Navdrawer updates #465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b637e33
Cleanup unnecessary HammerGesturesManager refs
damyanpetev Aug 25, 2017
4989d8c
Merge remote-tracking branch 'remotes/Infragistics/master' into navdr…
damyanpetev Sep 1, 2017
ba8ec6d
Further cleanup of hammer manager
damyanpetev Sep 5, 2017
a57587b
Add active pinThreshold on window resize and two-way bind `pin`.
damyanpetev Sep 5, 2017
8903c57
Export navigation module, close drawer in samples on change
damyanpetev Sep 5, 2017
ed5a408
(chore) Lint errors on source and demos
damyanpetev Sep 5, 2017
7274eda
Rename drawer tag to igx-nav-drawer
damyanpetev Sep 5, 2017
db3b7cf
Disable pinThreshold for manual pin test
damyanpetev Sep 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 6 additions & 11 deletions demos/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
.aside ::-webkit-scrollbar {
.ig-drawer-content {
background: #fff;
}

.ig-drawer-content ::-webkit-scrollbar {
width: 3px;
background: #e4e4e4;
}

.aside ::-webkit-scrollbar-thumb {
.ig-drawer-content ::-webkit-scrollbar-thumb {
background: #ec6f74;
border-radius: 0;
}
Expand All @@ -25,15 +29,6 @@
overflow-y: scroll;
}

.aside {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
}

.nav {
position: absolute;
width: 100%;
Expand Down
292 changes: 145 additions & 147 deletions demos/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,153 +1,151 @@
<div class="main">
<ig-nav-drawer id="navdrawer" #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [miniWidth]="drawerState.miniWidth"
[pin]="drawerState.pin" [width]="drawerState.width" [position]="drawerState.position">
<igx-nav-drawer id="navdrawer" #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [miniWidth]="drawerState.miniWidth"
[(pin)]="drawerState.pin" [width]="drawerState.width" [position]="drawerState.position">
<div class="ig-drawer-content">
<aside class="aside">
<nav class="nav">
<img class="logo" src="demos/app/rsrcs/jsblocks-logo.svg" alt="Ignite UI JS Blocks Logo">
<!--Components-->
<span class="nav-item header">Components</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/avatar">
<igx-icon fontSet="material" name="account_circle"></igx-icon>
<span>Avatar</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/badge">
<igx-icon fontSet="material" name="error"></igx-icon>
<span>Badge</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/buttonGroup">
<igx-icon fontSet="material" name="group_work"></igx-icon>
<span>Button Group</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/calendar">
<igx-icon fontSet="material" name="event"></igx-icon>
<span>Calendar</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/card">
<igx-icon fontSet="material" name="home"></igx-icon>
<span>Card</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/carousel">
<igx-icon fontSet="material" name="view_carousel"></igx-icon>
<span>Carousel</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/datePicker">
<igx-icon fontSet="material" name="date_range"></igx-icon>
<span>DatePicker</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/grid">
<igx-icon fontSet="material" name="view_column"></igx-icon>
<span>Grid</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/dialog">
<igx-icon fontSet="material" name="all_out"></igx-icon>
<span>Dialog</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/inputs">
<igx-icon fontSet="material" name="web"></igx-icon>
<span>Forms</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/icon">
<igx-icon fontSet="material" name="android"></igx-icon>
<span>Icon</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/list">
<igx-icon fontSet="material" name="list"></igx-icon>
<span>List</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/navbar">
<igx-icon fontSet="material" name="arrow_back"></igx-icon>
<span>Navbar</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/navdrawer">
<igx-icon fontSet="material" name="menu"></igx-icon>
<span>Navdrawer</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/progressbar">
<igx-icon fontSet="material" name="poll"></igx-icon>
<span>Progress Indicators</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/slider">
<igx-icon fontSet="material" name="linear_scale"></igx-icon>
<span>Slider</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/snackbar">
<igx-icon fontSet="material" name="feedback"></igx-icon>
<span>Snackbar</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/tabbar">
<igx-icon fontSet="material" name="tab"></igx-icon>
<span>Tabbar</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/toast">
<igx-icon fontSet="material" name="android"></igx-icon>
<span>Toast</span>
</span>

<!--Directives-->
<span class="nav-item header">Directives</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/buttons">
<igx-icon fontSet="material" name="radio_button_unchecked"></igx-icon>
<span>Buttons</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/layout">
<igx-icon fontSet="material" name="view_quilt"></igx-icon>
<span>Layout</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/ripple">
<igx-icon fontSet="material" name="wifi_tethering"></igx-icon>
<span>Ripple</span>
</span>

<!--Utils-->
<!-- <span class="nav-item header">Utils</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/data-operations">
<igx-icon fontSet="material" name="data_usage"></igx-icon>
<span>Data Operations</span>
</span> -->

<!--Style guide-->
<span class="nav-item header">Style</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/colors">
<igx-icon fontSet="material" name="color_lens"></igx-icon>
<span>Colors</span>
</span>
<span class="nav-item" [routerLinkActive]="'active'" routerLink="/typography">
<igx-icon fontSet="material" name="font_download"></igx-icon>
<span>Typography</span>
</span>
<span class="nav-item" [routerLinkActive]="'active'" routerLink="/shadows">
<igx-icon fontSet="material" name="layers"></igx-icon>
<span>Shadows</span>
</span>
</nav>
</aside>
<nav class="nav">
<img class="logo" src="demos/app/rsrcs/jsblocks-logo.svg" alt="Ignite UI JS Blocks Logo">
<!--Components-->
<span class="nav-item header">Components</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/avatar">
<igx-icon fontSet="material" name="account_circle"></igx-icon>
<span>Avatar</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/badge">
<igx-icon fontSet="material" name="error"></igx-icon>
<span>Badge</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/buttonGroup">
<igx-icon fontSet="material" name="group_work"></igx-icon>
<span>Button Group</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/calendar">
<igx-icon fontSet="material" name="event"></igx-icon>
<span>Calendar</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/card">
<igx-icon fontSet="material" name="home"></igx-icon>
<span>Card</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/carousel">
<igx-icon fontSet="material" name="view_carousel"></igx-icon>
<span>Carousel</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/datePicker">
<igx-icon fontSet="material" name="date_range"></igx-icon>
<span>DatePicker</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/grid">
<igx-icon fontSet="material" name="view_column"></igx-icon>
<span>Grid</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/dialog">
<igx-icon fontSet="material" name="all_out"></igx-icon>
<span>Dialog</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/inputs">
<igx-icon fontSet="material" name="web"></igx-icon>
<span>Forms</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/icon">
<igx-icon fontSet="material" name="android"></igx-icon>
<span>Icon</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/list">
<igx-icon fontSet="material" name="list"></igx-icon>
<span>List</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/navbar">
<igx-icon fontSet="material" name="arrow_back"></igx-icon>
<span>Navbar</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/navdrawer">
<igx-icon fontSet="material" name="menu"></igx-icon>
<span>Navdrawer</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/progressbar">
<igx-icon fontSet="material" name="poll"></igx-icon>
<span>Progress Indicators</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/slider">
<igx-icon fontSet="material" name="linear_scale"></igx-icon>
<span>Slider</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/snackbar">
<igx-icon fontSet="material" name="feedback"></igx-icon>
<span>Snackbar</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/tabbar">
<igx-icon fontSet="material" name="tab"></igx-icon>
<span>Tabbar</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/toast">
<igx-icon fontSet="material" name="android"></igx-icon>
<span>Toast</span>
</span>

<!--Directives-->
<span class="nav-item header">Directives</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/buttons">
<igx-icon fontSet="material" name="radio_button_unchecked"></igx-icon>
<span>Buttons</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/layout">
<igx-icon fontSet="material" name="view_quilt"></igx-icon>
<span>Layout</span>
</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/ripple">
<igx-icon fontSet="material" name="wifi_tethering"></igx-icon>
<span>Ripple</span>
</span>

<!--Utils-->
<!-- <span class="nav-item header">Utils</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/data-operations">
<igx-icon fontSet="material" name="data_usage"></igx-icon>
<span>Data Operations</span>
</span> -->

<!--Style guide-->
<span class="nav-item header">Style</span>

<span class="nav-item" [routerLinkActive]="'active'" routerLink="/colors">
<igx-icon fontSet="material" name="color_lens"></igx-icon>
<span>Colors</span>
</span>
<span class="nav-item" [routerLinkActive]="'active'" routerLink="/typography">
<igx-icon fontSet="material" name="font_download"></igx-icon>
<span>Typography</span>
</span>
<span class="nav-item" [routerLinkActive]="'active'" routerLink="/shadows">
<igx-icon fontSet="material" name="layers"></igx-icon>
<span>Shadows</span>
</span>
</nav>
</div>
</ig-nav-drawer>
</igx-nav-drawer>
<div class="content">
<router-outlet></router-outlet>
</div>
Expand Down
17 changes: 15 additions & 2 deletions demos/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Component, EventEmitter, Output, ViewChild } from "@angular/core";
import { NavigationStart, Router } from "@angular/router";
import { NavigationDrawer, NavigationDrawerModule } from "../../src/main";

@Component({
Expand All @@ -12,9 +13,21 @@ export class AppComponent {
public drawerState = {
enableGestures: true,
open: true,
pin: true,
pinThreshold: "768px",
pin: false,
pinThreshold: 768,
position: "left",
width: "242px"
};

constructor(private router: Router) {}
public ngOnInit(): void {
this.router.events
.filter((x) => x instanceof NavigationStart)
.subscribe((event: NavigationStart) => {
if (event.url !== "/" && !this.drawerState.pin) {
// Close drawer when a sample is selected
this.navdrawer.close();
}
});
}
}
6 changes: 3 additions & 3 deletions demos/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { IgxComponentsModule, IgxDirectivesModule, NavigationService } from "../../src/main";
import { IgxComponentsModule, IgxDirectivesModule, IgxNavigationModule } from "../../src/main";

import { AppComponent } from "./app.component";
import { routing } from "./app.routing";
Expand Down Expand Up @@ -44,6 +44,7 @@ import { IgxToastSampleModule } from "./toast/sample.module";
routing,
IgxComponentsModule,
IgxDirectivesModule,
IgxNavigationModule,
InputSampleModule,
CarouselSampleModule,
TabBarSampleModule,
Expand All @@ -70,7 +71,6 @@ import { IgxToastSampleModule } from "./toast/sample.module";
IgxCalendarSampleModule,
IgxDatePickerSampleModule,
LayoutSampleModule
],
providers: [NavigationService]
]
})
export class AppModule { }
Loading