Skip to content

feat(sidenav): Add support for fixed sidenavs #6712

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

Merged
merged 11 commits into from
Sep 21, 2017
Merged

feat(sidenav): Add support for fixed sidenavs #6712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
057304f
add md-drawer-content
mmalerba Aug 22, 2017
53cd1bc
add back margins on content
mmalerba Aug 22, 2017
3b53330
stop using transform on container and content
mmalerba Aug 22, 2017
101f5b5
change sidenav demo to drawer
mmalerba Aug 23, 2017
40d760e
create sidenav demo
mmalerba Aug 29, 2017
2038cbd
Finish up demo
mmalerba Aug 29, 2017
34aaf22
fix tests and lint
mmalerba Aug 30, 2017
4ed9137
address comments
mmalerba Aug 31, 2017
0616d1f
default fixedInViewport to false
mmalerba Sep 6, 2017
133702c
fix lint
mmalerba Sep 19, 2017
8d77c32
don't preserve whitespace
mmalerba Sep 20, 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
21 changes: 9 additions & 12 deletions src/demo-app/demo-app/demo-app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import {
Component,
ViewEncapsulation,
ElementRef,
Renderer2,
} from '@angular/core';
import {OverlayContainer} from '@angular/cdk/overlay';
import {Component, ElementRef, Renderer2, ViewEncapsulation} from '@angular/core';

/**
* The entry app for demo site. Routes under `accessibility` will use AccessibilityDemo component,
Expand Down Expand Up @@ -48,39 +43,41 @@ export class DemoApp {
dark = false;
navItems = [
{name: 'Autocomplete', route: '/autocomplete'},
{name: 'Button', route: '/button'},
{name: 'Button Toggle', route: '/button-toggle'},
{name: 'Button', route: '/button'},
{name: 'Card', route: '/card'},
{name: 'Chips', route: '/chips'},
{name: 'Checkbox', route: '/checkbox'},
{name: 'Chips', route: '/chips'},
{name: 'Datepicker', route: '/datepicker'},
{name: 'Dialog', route: '/dialog'},
{name: 'Drawer', route: '/drawer'},
{name: 'Expansion Panel', route: '/expansion'},
{name: 'Focus Origin', route: '/focus-origin'},
{name: 'Gestures', route: '/gestures'},
{name: 'Grid List', route: '/grid-list'},
{name: 'Icon', route: '/icon'},
{name: 'Input', route: '/input'},
{name: 'List', route: '/list'},
{name: 'Menu', route: '/menu'},
{name: 'Live Announcer', route: '/live-announcer'},
{name: 'Menu', route: '/menu'},
{name: 'Overlay', route: '/overlay'},
{name: 'Platform', route: '/platform'},
{name: 'Portal', route: '/portal'},
{name: 'Progress Bar', route: '/progress-bar'},
{name: 'Progress Spinner', route: '/progress-spinner'},
{name: 'Radio', route: '/radio'},
{name: 'Ripple', route: '/ripple'},
{name: 'Select', route: '/select'},
{name: 'Sidenav', route: '/sidenav'},
{name: 'Slider', route: '/slider'},
{name: 'Slide Toggle', route: '/slide-toggle'},
{name: 'Slider', route: '/slider'},
{name: 'Snack Bar', route: '/snack-bar'},
{name: 'Stepper', route: '/stepper'},
{name: 'Style', route: '/style'},
{name: 'Table', route: '/table'},
{name: 'Tabs', route: '/tabs'},
{name: 'Toolbar', route: '/toolbar'},
{name: 'Tooltip', route: '/tooltip'},
{name: 'Platform', route: '/platform'},
{name: 'Focus Origin', route: '/focus-origin'},
{name: 'Typography', route: '/typography'}
];

Expand Down
99 changes: 49 additions & 50 deletions src/demo-app/demo-app/demo-module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,50 @@
import {NgModule} from '@angular/core';
import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {DemoApp, Home} from './demo-app';
import {DEMO_APP_ROUTES} from './routes';
import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
import {RippleDemo} from '../ripple/ripple-demo';
import {IconDemo} from '../icon/icon-demo';
import {GesturesDemo} from '../gestures/gestures-demo';
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
import {BaselineDemo} from '../baseline/baseline-demo';
import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
import {ButtonDemo} from '../button/button-demo';
import {CardDemo} from '../card/card-demo';
import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
import {ChipsDemo} from '../chips/chips-demo';
import {RadioDemo} from '../radio/radio-demo';
import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
import {TooltipDemo} from '../tooltip/tooltip-demo';
import {ListDemo} from '../list/list-demo';
import {BaselineDemo} from '../baseline/baseline-demo';
import {DatepickerDemo} from '../datepicker/datepicker-demo';
import {DemoMaterialModule} from '../demo-material-module';
import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
import {DrawerDemo} from '../drawer/drawer-demo';
import {ExpansionDemo} from '../expansion/expansion-demo';
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
import {GesturesDemo} from '../gestures/gestures-demo';
import {GridListDemo} from '../grid-list/grid-list-demo';
import {IconDemo} from '../icon/icon-demo';
import {InputDemo} from '../input/input-demo';
import {ListDemo} from '../list/list-demo';
import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
import {MenuDemo} from '../menu/menu-demo';
import {OverlayDemo, RotiniPanel, SpagettiPanel} from '../overlay/overlay-demo';
import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
import {ToolbarDemo} from '../toolbar/toolbar-demo';
import {ButtonDemo} from '../button/button-demo';
import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
import {PlatformDemo} from '../platform/platform-demo';
import {PortalDemo, ScienceJoke} from '../portal/portal-demo';
import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
import {RadioDemo} from '../radio/radio-demo';
import {RippleDemo} from '../ripple/ripple-demo';
import {SelectDemo} from '../select/select-demo';
import {SliderDemo} from '../slider/slider-demo';
import {SidenavDemo} from '../sidenav/sidenav-demo';
import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
import {SliderDemo} from '../slider/slider-demo';
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
import {PortalDemo, ScienceJoke} from '../portal/portal-demo';
import {MenuDemo} from '../menu/menu-demo';
import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../tabs/tabs-demo';
import {PlatformDemo} from '../platform/platform-demo';
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
import {InputDemo} from '../input/input-demo';
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
import {TableDemo} from '../table/table-demo';
import {PeopleDatabase} from '../table/people-database';
import {DatepickerDemo} from '../datepicker/datepicker-demo';
import {TypographyDemo} from '../typography/typography-demo';
import {ExpansionDemo} from '../expansion/expansion-demo';
import {StepperDemo} from '../stepper/stepper-demo';
import {DemoMaterialModule} from '../demo-material-module';
import {
FullscreenOverlayContainer,
OverlayContainer,
} from '@angular/cdk/overlay';
import {PeopleDatabase} from '../table/people-database';
import {TableDemo} from '../table/table-demo';
import {TableHeaderDemo} from '../table/table-header-demo';
import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../tabs/tabs-demo';
import {ToolbarDemo} from '../toolbar/toolbar-demo';
import {TooltipDemo} from '../tooltip/tooltip-demo';
import {TypographyDemo} from '../typography/typography-demo';
import {DemoApp, Home} from './demo-app';
import {DEMO_APP_ROUTES} from './routes';

@NgModule({
imports: [
Expand All @@ -62,60 +60,61 @@ import {TableHeaderDemo} from '../table/table-header-demo';
ButtonDemo,
ButtonToggleDemo,
CardDemo,
ChipsDemo,
CheckboxDemo,
ChipsDemo,
ContentElementDialog,
DatepickerDemo,
DemoApp,
DialogDemo,
DrawerDemo,
ExpansionDemo,
FocusOriginDemo,
FoggyTabContent,
GesturesDemo,
GridListDemo,
Home,
IconDemo,
IFrameDialog,
InputDemo,
JazzDialog,
ContentElementDialog,
IFrameDialog,
ListDemo,
LiveAnnouncerDemo,
MdCheckboxDemoNestedChecklist,
MenuDemo,
SnackBarDemo,
OverlayDemo,
PlatformDemo,
PortalDemo,
ProgressBarDemo,
ProgressSpinnerDemo,
RadioDemo,
RainyTabContent,
RippleDemo,
RotiniPanel,
ScienceJoke,
SelectDemo,
SidenavDemo,
SliderDemo,
SlideToggleDemo,
SnackBarDemo,
SpagettiPanel,
StepperDemo,
FocusOriginDemo,
SunnyTabContent,
TableDemo,
TableHeaderDemo,
TabsDemo,
ToolbarDemo,
TooltipDemo,
TableDemo,
TabsDemo,
SunnyTabContent,
RainyTabContent,
FoggyTabContent,
PlatformDemo,
TypographyDemo,
ExpansionDemo,
],
providers: [
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},
PeopleDatabase
],
entryComponents: [
DemoApp,
JazzDialog,
ContentElementDialog,
DemoApp,
IFrameDialog,
JazzDialog,
RotiniPanel,
ScienceJoke,
SpagettiPanel,
Expand Down
99 changes: 50 additions & 49 deletions src/demo-app/demo-app/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,86 @@
import {Routes} from '@angular/router';
import {Home} from './demo-app';
import {ButtonDemo} from '../button/button-demo';
import {AccessibilityDemo} from '../a11y/a11y';
import {ACCESSIBILITY_DEMO_ROUTES} from '../a11y/routes';
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
import {BaselineDemo} from '../baseline/baseline-demo';
import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
import {TabsDemo} from '../tabs/tabs-demo';
import {GridListDemo} from '../grid-list/grid-list-demo';
import {ButtonDemo} from '../button/button-demo';
import {CardDemo} from '../card/card-demo';
import {CheckboxDemo} from '../checkbox/checkbox-demo';
import {ChipsDemo} from '../chips/chips-demo';
import {DatepickerDemo} from '../datepicker/datepicker-demo';
import {DialogDemo} from '../dialog/dialog-demo';
import {DrawerDemo} from '../drawer/drawer-demo';
import {ExpansionDemo} from '../expansion/expansion-demo';
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
import {GesturesDemo} from '../gestures/gestures-demo';
import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
import {ListDemo} from '../list/list-demo';
import {GridListDemo} from '../grid-list/grid-list-demo';
import {IconDemo} from '../icon/icon-demo';
import {ToolbarDemo} from '../toolbar/toolbar-demo';
import {CheckboxDemo} from '../checkbox/checkbox-demo';
import {InputDemo} from '../input/input-demo';
import {ListDemo} from '../list/list-demo';
import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
import {MenuDemo} from '../menu/menu-demo';
import {OverlayDemo} from '../overlay/overlay-demo';
import {PlatformDemo} from '../platform/platform-demo';
import {PortalDemo} from '../portal/portal-demo';
import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
import {RadioDemo} from '../radio/radio-demo';
import {RippleDemo} from '../ripple/ripple-demo';
import {SelectDemo} from '../select/select-demo';
import {SidenavDemo} from '../sidenav/sidenav-demo';
import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
import {SliderDemo} from '../slider/slider-demo';
import {RadioDemo} from '../radio/radio-demo';
import {CardDemo} from '../card/card-demo';
import {ChipsDemo} from '../chips/chips-demo';
import {MenuDemo} from '../menu/menu-demo';
import {RippleDemo} from '../ripple/ripple-demo';
import {DialogDemo} from '../dialog/dialog-demo';
import {TooltipDemo} from '../tooltip/tooltip-demo';
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
import {TABS_DEMO_ROUTES} from '../tabs/routes';
import {PlatformDemo} from '../platform/platform-demo';
import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
import {InputDemo} from '../input/input-demo';
import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
import {DatepickerDemo} from '../datepicker/datepicker-demo';
import {StepperDemo} from '../stepper/stepper-demo';
import {TableDemo} from '../table/table-demo';
import {TABS_DEMO_ROUTES} from '../tabs/routes';
import {TabsDemo} from '../tabs/tabs-demo';
import {ToolbarDemo} from '../toolbar/toolbar-demo';
import {TooltipDemo} from '../tooltip/tooltip-demo';
import {TypographyDemo} from '../typography/typography-demo';
import {ExpansionDemo} from '../expansion/expansion-demo';
import {StepperDemo} from '../stepper/stepper-demo';
import {DemoApp} from './demo-app';
import {AccessibilityDemo} from '../a11y/a11y';
import {ACCESSIBILITY_DEMO_ROUTES} from '../a11y/routes';
import {DemoApp, Home} from './demo-app';

export const DEMO_APP_ROUTES: Routes = [
{path: '', component: DemoApp, children: [
{path: '', component: Home},
{path: 'autocomplete', component: AutocompleteDemo},
{path: 'baseline', component: BaselineDemo},
{path: 'button', component: ButtonDemo},
{path: 'button-toggle', component: ButtonToggleDemo},
{path: 'card', component: CardDemo},
{path: 'checkbox', component: CheckboxDemo},
{path: 'chips', component: ChipsDemo},
{path: 'table', component: TableDemo},
{path: 'datepicker', component: DatepickerDemo},
{path: 'dialog', component: DialogDemo},
{path: 'drawer', component: DrawerDemo},
{path: 'expansion', component: ExpansionDemo},
{path: 'focus-origin', component: FocusOriginDemo},
{path: 'gestures', component: GesturesDemo},
{path: 'grid-list', component: GridListDemo},
{path: 'icon', component: IconDemo},
{path: 'input', component: InputDemo},
{path: 'list', component: ListDemo},
{path: 'live-announcer', component: LiveAnnouncerDemo},
{path: 'menu', component: MenuDemo},
{path: 'overlay', component: OverlayDemo},
{path: 'platform', component: PlatformDemo},
{path: 'portal', component: PortalDemo},
{path: 'progress-bar', component: ProgressBarDemo},
{path: 'progress-spinner', component: ProgressSpinnerDemo},
{path: 'radio', component: RadioDemo},
{path: 'ripple', component: RippleDemo},
{path: 'select', component: SelectDemo},
{path: 'sidenav', component: SidenavDemo},
{path: 'slide-toggle', component: SlideToggleDemo},
{path: 'slider', component: SliderDemo},
{path: 'progress-spinner', component: ProgressSpinnerDemo},
{path: 'progress-bar', component: ProgressBarDemo},
{path: 'portal', component: PortalDemo},
{path: 'overlay', component: OverlayDemo},
{path: 'checkbox', component: CheckboxDemo},
{path: 'input', component: InputDemo},
{path: 'toolbar', component: ToolbarDemo},
{path: 'icon', component: IconDemo},
{path: 'list', component: ListDemo},
{path: 'menu', component: MenuDemo},
{path: 'live-announcer', component: LiveAnnouncerDemo},
{path: 'gestures', component: GesturesDemo},
{path: 'grid-list', component: GridListDemo},
{path: 'snack-bar', component: SnackBarDemo},
{path: 'stepper', component: StepperDemo},
{path: 'table', component: TableDemo},
{path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
{path: 'button-toggle', component: ButtonToggleDemo},
{path: 'baseline', component: BaselineDemo},
{path: 'ripple', component: RippleDemo},
{path: 'dialog', component: DialogDemo},
{path: 'toolbar', component: ToolbarDemo},
{path: 'tooltip', component: TooltipDemo},
{path: 'snack-bar', component: SnackBarDemo},
{path: 'platform', component: PlatformDemo},
{path: 'focus-origin', component: FocusOriginDemo},
{path: 'typography', component: TypographyDemo},
{path: 'expansion', component: ExpansionDemo},
{path: 'stepper', component: StepperDemo}
]}
];

Expand Down
Loading