Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 3aa211d

Browse files
abhiomkarabhiomkar
authored
feat(drawer): Improved navigation drawer (#3417)
BREAKING CHANGE: Drawer variants have new DOM structure, mixins, and JS. MDCPersistentDrawer and MDCTemporaryDrawer components are replaced with a single MDCDrawer component which supports both.
1 parent 108f9ea commit 3aa211d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+3125
-5124
lines changed

‎closure_externs.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
* @see http://npmjs.com/focus-trap
7171
*/
7272

73-
goog.provide('mdc.thirdparty.focusTrap')
73+
goog.provide('mdc.thirdparty.focusTrap');
7474

7575
/**
7676
* @typedef {{

‎demos/drawer/dismissible-drawer.html

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2018 Google Inc.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.
22+
-->
23+
<html>
24+
<head>
25+
<meta charset="utf-8">
26+
<title>Dismissible Drawer - Material Components Catalog</title>
27+
<meta name="viewport" content="width=device-width, initial-scale=1">
28+
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
29+
<link rel="stylesheet" href="/assets/drawer/drawer.css">
30+
<link rel="stylesheet" href="/assets/radio.css">
31+
<script src="/ready.js"></script>
32+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
33+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
34+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
35+
</head>
36+
<body class="mdc-typography demo-body">
37+
<aside id="demo-drawer" class="mdc-drawer mdc-drawer--dismissible mdc-drawer--open demo-drawer">
38+
<div class="mdc-drawer__header">
39+
<h3 class="mdc-drawer__title">Mail</h3>
40+
<h6 class="mdc-drawer__subtitle">email@material.io</h6>
41+
</div>
42+
<div class="mdc-drawer__content">
43+
<nav class="mdc-list">
44+
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
45+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
46+
Inbox
47+
</a>
48+
<a class="mdc-list-item" href="#">
49+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
50+
Star
51+
</a>
52+
<a class="mdc-list-item" href="#">
53+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
54+
Sent Mail
55+
</a>
56+
<a class="mdc-list-item" href="#">
57+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
58+
Drafts
59+
</a>
60+
61+
<hr class="mdc-list-divider">
62+
<h6 class="mdc-list-group__subheader">Labels</h6>
63+
<a class="mdc-list-item" href="#">
64+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
65+
Family
66+
</a>
67+
<a class="mdc-list-item" href="#">
68+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
69+
Friends
70+
</a>
71+
<a class="mdc-list-item" href="#">
72+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
73+
Work
74+
</a>
75+
76+
<hr class="mdc-list-divider">
77+
<a class="mdc-list-item" href="#">
78+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
79+
Settings
80+
</a>
81+
<a class="mdc-list-item" href="#">
82+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
83+
Help & feedback
84+
</a>
85+
</nav>
86+
</div>
87+
</aside>
88+
<div class="demo-content mdc-drawer-app-content" id="demo-content">
89+
<header class="mdc-top-app-bar demo-top-app-bar" id="app-bar">
90+
<div class="mdc-top-app-bar__row">
91+
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
92+
<a href="#" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">menu</a>
93+
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
94+
</section>
95+
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
96+
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
97+
</section>
98+
</div>
99+
</header>
100+
101+
<main class="demo-main" id="demo-main">
102+
<div class="mdc-top-app-bar--fixed-adjust"></div>
103+
<h1 class="mdc-typography--headline4">Dismissible Drawer</h1>
104+
<p class="mdc-typography--body1">It sits to the left of this content. Currently active destination: <strong class="demo-selected-destination">Inbox</strong></p>
105+
106+
<div id="demo-radio-buttons">
107+
<div class="mdc-form-field">
108+
<div class="mdc-radio">
109+
<input class="mdc-radio__native-control" type="radio" id="theme-radio-default" name="theme" checked>
110+
<div class="mdc-radio__background">
111+
<div class="mdc-radio__outer-circle"></div>
112+
<div class="mdc-radio__inner-circle"></div>
113+
</div>
114+
</div>
115+
<label for="theme-radio-default">Default</label>
116+
</div>
117+
<div class="mdc-form-field">
118+
<div class="mdc-radio">
119+
<input class="mdc-radio__native-control" type="radio" id="theme-radio-custom" name="theme">
120+
<div class="mdc-radio__background">
121+
<div class="mdc-radio__outer-circle"></div>
122+
<div class="mdc-radio__inner-circle"></div>
123+
</div>
124+
</div>
125+
<label for="theme-radio-custom">Custom Theme</label>
126+
</div>
127+
<div class="mdc-form-field">
128+
<div class="mdc-radio">
129+
<input class="mdc-radio__native-control" type="radio" id="theme-radio-accessible" name="theme">
130+
<div class="mdc-radio__background">
131+
<div class="mdc-radio__outer-circle"></div>
132+
<div class="mdc-radio__inner-circle"></div>
133+
</div>
134+
</div>
135+
<label for="theme-radio-accessible">Accessible Theme</label>
136+
</div>
137+
</div>
138+
139+
<div class="extra-content-wrapper">
140+
<button type="button" class="mdc-button mdc-button--outlined mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button>
141+
</div>
142+
<div class="extra-content-wrapper">
143+
<button id="toggle-wide" class="mdc-button mdc-button--outlined mdc-button--dense">Toggle extra-wide content</button>
144+
<div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
145+
</div>
146+
<div class="extra-content-wrapper">
147+
<button id="toggle-tall" class="mdc-button mdc-button--outlined mdc-button--dense">Toggle extra-tall content</button>
148+
<div id="extra-tall-content" class="mdc-elevation--z2">&nbsp;</div>
149+
</div>
150+
</main>
151+
</div>
152+
153+
<script src="/assets/material-components-web.js" async></script>
154+
<script>
155+
demoReady(function() {
156+
var extraWide = document.querySelector('#extra-wide-content');
157+
extraWide.style.display = 'none';
158+
document.querySelector('#toggle-wide').addEventListener('click', function() {
159+
extraWide.style.display = extraWide.style.display ? '' : 'none';
160+
});
161+
var extraTall = document.querySelector('#extra-tall-content');
162+
extraTall.style.display = 'none';
163+
document.querySelector('#toggle-tall').addEventListener('click', function() {
164+
extraTall.style.display = extraTall.style.display ? '' : 'none';
165+
});
166+
167+
var drawerEl = document.getElementById('demo-drawer');
168+
var drawer = new mdc.drawer.MDCDrawer(drawerEl);
169+
var radioEl = document.querySelector('#demo-radio-buttons');
170+
radioEl.addEventListener('change', function(e) {
171+
drawerEl.classList.remove('demo-drawer--custom');
172+
drawerEl.classList.remove('demo-drawer--accessible');
173+
174+
if(e.target.id === 'theme-radio-custom') {
175+
drawerEl.classList.add('demo-drawer--custom');
176+
} else if(e.target.id === 'theme-radio-accessible') {
177+
drawerEl.classList.add('demo-drawer--accessible');
178+
}
179+
});
180+
181+
var rtlToggleBtn = document.querySelector('.demo-toolbar-example-heading__rtl-toggle-button');
182+
rtlToggleBtn.addEventListener('click', function(event) {
183+
document.body.setAttribute('dir', document.body.getAttribute('dir') === 'rtl' ? 'ltr' : 'rtl');
184+
});
185+
186+
var topAppBarEl = document.getElementById('app-bar');
187+
var topAppBar = new mdc.topAppBar.MDCTopAppBar(topAppBarEl);
188+
var mainEl = document.getElementById('demo-main');
189+
topAppBar.setScrollTarget(mainEl);
190+
topAppBar.listen('MDCTopAppBar:nav', function() {
191+
drawer.open = !drawer.open;
192+
});
193+
194+
var listEl = drawerEl.querySelector('.mdc-list');
195+
var selectedDestinationEl = document.querySelector('.demo-selected-destination');
196+
var mainEl = document.querySelector('.demo-main');
197+
listEl.addEventListener('click', function(event) {
198+
selectedDestinationEl.textContent = event.target.lastChild.textContent;
199+
mainEl.querySelector('input').focus();
200+
});
201+
document.body.addEventListener('MDCDrawer:closed', function() {
202+
mainEl.querySelector('input').focus();
203+
});
204+
});
205+
</script>
206+
</body>
207+
</html>

‎demos/drawer/drawer.scss

Lines changed: 54 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
@import "../../packages/mdc-list/mixins";
2423
@import "../../packages/mdc-form-field/mdc-form-field";
2524
@import "../common";
26-
@import "../../packages/mdc-drawer/mdc-drawer";
2725
@import "../../packages/mdc-drawer/mixins";
26+
@import "../../packages/mdc-drawer/mdc-drawer";
2827
@import "../../packages/mdc-elevation/mdc-elevation";
2928
@import "../../packages/mdc-list/mdc-list";
3029
@import "../../packages/mdc-button/mdc-button";
30+
@import "../../packages/mdc-top-app-bar/mdc-top-app-bar";
3131

3232
.examples {
3333
display: flex;
@@ -65,36 +65,64 @@
6565
padding: 10px;
6666
}
6767

68-
.demo-drawer--custom {
69-
@include mdc-drawer-fill-color($material-color-teal-900);
70-
@include mdc-drawer-ink-color(#fff);
71-
@include mdc-list-item-graphic-ink-color(#fff);
68+
.demo-form-field {
69+
margin: 16px 0;
70+
}
7271

73-
.demo-drawer-list-item {
74-
@include mdc-list-item-graphic-ink-color(text-icon-on-dark);
75-
@include mdc-list-item-primary-text-ink-color(text-secondary-on-dark);
76-
}
72+
/* Place drawer and content side by side. */
73+
.demo-body {
74+
display: flex;
75+
padding: 0;
76+
margin: 0;
77+
height: 100vh;
78+
}
7779

78-
.demo-drawer-list-item.mdc-list-item--selected {
79-
@include mdc-list-item-graphic-ink-color(text-primary-on-dark);
80-
@include mdc-list-item-primary-text-ink-color(text-primary-on-dark);
81-
}
80+
.demo-content {
81+
flex: auto;
82+
overflow: auto;
83+
background: #fff;
8284
}
8385

84-
.demo-drawer--accessible {
85-
@include mdc-drawer-fill-color-accessible($material-color-indigo-500);
86+
.demo-main {
87+
padding-left: 16px;
88+
padding-right: 16px;
89+
overflow: auto;
90+
height: 100%;
91+
width: 100%;
92+
box-sizing: border-box;
93+
}
8694

87-
.demo-drawer-list-item {
88-
@include mdc-list-item-graphic-ink-color(text-icon-on-dark);
89-
@include mdc-list-item-primary-text-ink-color(text-secondary-on-dark);
90-
}
95+
#extra-wide-content {
96+
width: 200vw;
97+
}
9198

92-
.demo-drawer-list-item.mdc-list-item--selected {
93-
@include mdc-list-item-graphic-ink-color(text-primary-on-dark);
94-
@include mdc-list-item-primary-text-ink-color(text-primary-on-dark);
95-
}
99+
#extra-tall-content {
100+
height: 200vh;
96101
}
97102

98-
.demo-form-field {
99-
margin: 16px 0;
103+
.demo-drawer--custom {
104+
@include mdc-drawer-border-color(lightblue);
105+
@include mdc-drawer-subtitle-ink-color(darkolivegreen);
106+
@include mdc-drawer-surface-fill-color(pink);
107+
@include mdc-drawer-item-icon-ink-color(darkolivegreen);
108+
@include mdc-drawer-title-ink-color(darkolivegreen);
109+
@include mdc-drawer-activated-overlay-color(darkcyan);
110+
@include mdc-drawer-item-text-ink-color(darkolivegreen);
111+
@include mdc-drawer-item-activated-text-ink-color(darkcyan);
112+
@include mdc-drawer-item-activated-icon-ink-color(darkcyan);
113+
}
114+
115+
.demo-drawer--accessible {
116+
@include mdc-drawer-fill-color-accessible(darkcyan);
117+
@include mdc-drawer-activated-overlay-color(pink);
118+
@include mdc-drawer-item-activated-text-ink-color(pink);
119+
@include mdc-drawer-item-activated-icon-ink-color(pink);
120+
}
121+
122+
.demo-top-app-bar {
123+
position: absolute;
124+
}
125+
126+
.demo-selected-destination {
127+
font-weight: 500;
100128
}

‎demos/drawer/index.html

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -27,24 +27,23 @@
2727
<meta name="viewport" content="width=device-width, initial-scale=1">
2828
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
2929
<link rel="stylesheet" href="/assets/drawer/drawer.css">
30-
<link rel="stylesheet" href="/assets/radio.css">
3130
<script src="/ready.js"></script>
3231
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
3332
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
3433
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
35-
3634
</head>
3735
<body class="mdc-typography demo-body">
38-
<div class="mdc-toolbar mdc-toolbar--fixed">
39-
<div class="mdc-toolbar__row">
40-
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
36+
<header class="mdc-top-app-bar" id="app-bar">
37+
<div class="mdc-top-app-bar__row">
38+
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
4139
<a href="/" class="catalog-back mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
42-
<span class="mdc-toolbar__title catalog-title">Drawer</span>
40+
<span class="mdc-top-app-bar__title">Drawer</span>
4341
</section>
4442
</div>
45-
</div>
43+
</header>
4644

47-
<main class="mdc-toolbar-fixed-adjust">
45+
<main>
46+
<div class="mdc-top-app-bar--fixed-adjust"></div>
4847
<div class="intro">
4948
<p>
5049
To best show the functionality of drawers, we put all demos in iframes.
@@ -60,34 +59,24 @@
6059
<section class="examples">
6160
<div class="example">
6261
<h2 class="drawer-example-heading">
63-
<span>Temporary Drawer</span>
64-
</h2>
65-
<p><a href="./temporary-drawer.html" target="_blank">View in separate window</a></p>
66-
<iframe src="./temporary-drawer.html"></iframe>
67-
</div>
68-
69-
<div class="example">
70-
<h2 class="drawer-example-heading">
71-
<span>Persistent Drawer</span>
62+
<span>Permanent drawer</span>
7263
</h2>
73-
<p><a href="./persistent-drawer.html" target="_blank">View in separate window</a></p>
74-
<iframe src="./persistent-drawer.html"></iframe>
64+
<p><a href="./permanent-drawer.html" target="_blank">View in separate window</a></p>
65+
<iframe src="./permanent-drawer.html"></iframe>
7566
</div>
76-
7767
<div class="example">
7868
<h2 class="drawer-example-heading">
79-
<span>Permanent drawer above toolbar</span>
69+
<span>Dismissible drawer</span>
8070
</h2>
81-
<p><a href="./permanent-drawer-above-toolbar.html" target="_blank">View in separate window</a></p>
82-
<iframe src="./permanent-drawer-above-toolbar.html"></iframe>
71+
<p><a href="./dismissible-drawer.html" target="_blank">View in separate window</a></p>
72+
<iframe src="./dismissible-drawer.html"></iframe>
8373
</div>
84-
8574
<div class="example">
8675
<h2 class="drawer-example-heading">
87-
<span>Permanent drawer below toolbar</span>
76+
<span>Modal drawer</span>
8877
</h2>
89-
<p><a href="./permanent-drawer-below-toolbar.html" target="_blank">View in separate window</a></p>
90-
<iframe src="./permanent-drawer-below-toolbar.html"></iframe>
78+
<p><a href="./modal-drawer.html" target="_blank">View in separate window</a></p>
79+
<iframe src="./modal-drawer.html"></iframe>
9180
</div>
9281
</section>
9382
</main>

0 commit comments

Comments
 (0)