Skip to content

Commit

Permalink
feat(top-app-bar): Implement short top app bar (#2290)
Browse files Browse the repository at this point in the history 
Adds the short top app bar variant to the top app bar.
  • Loading branch information
@williamernest
williamernest authored Feb 28, 2018
1 parent a9f9bf2 commit fd8d8d9
Show file tree
Hide file tree
Showing 15 changed files with 589 additions and 75 deletions.
122 changes: 104 additions & 18 deletions demos/top-app-bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,15 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body class="mdc-typography">
<body class="mdc-typography demo-body">
<header id="demo-top-app-bar" class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__menu-icon">menu</a>
<span class="mdc-top-app-bar__title">Title</span>
<a class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">San Francisco, CA</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="top-app-bar">
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Download" alt="Download">file_download</a>
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Print this page" alt="Print this page">print</a>
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
<section id="iconSection" class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
<a id="right-item" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
</section>
</div>
</header>
Expand Down Expand Up @@ -81,7 +79,7 @@
</nav>
</aside>

<main>
<main class="demo-main">
<div>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Expand Down Expand Up @@ -119,25 +117,113 @@
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>
<p class="demo-paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
</p>

</div>
</main>

<div class="demo-controls-container">
<h3>Demo Controls</h3>
<div>
<input type="checkbox" id="rtl-checkbox"/>
<label for="rtl-checkbox">RTL</label>
</div>
<div>
<input type="checkbox" id="short-checkbox"/>
<label for="short-checkbox">Short</label>
</div>
<div>
<input type="checkbox" id="no-action-item-checkbox"/>
<label for="no-action-item-checkbox">No Action Item</label>
</div>
</div>

<script src="/assets/common.js" async></script>
<script src="/assets/material-components-web.js" async></script>
<script type="text/javascript">
demoReady(function() {
var appBarEl = document.getElementById('demo-top-app-bar');
var appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);
demoReady(function() {
var appBarEl = document.getElementById('demo-top-app-bar');
var rightItemEl = document.getElementById('right-item');
var rightSection = document.getElementById('iconSection');
var drawerEl = document.querySelector('.mdc-drawer');

var drawerEl = document.querySelector('.mdc-drawer');
var MDCTemporaryDrawer = mdc.drawer.MDCTemporaryDrawer;
var drawer = new MDCTemporaryDrawer(drawerEl);
var drawer = new mdc.drawer.MDCTemporaryDrawer(drawerEl);
var appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);

appBarEl.addEventListener('MDCTopAppBar:nav', function() {
drawer.open = true;
});
var shortCheckbox = document.getElementById('short-checkbox');
var noActionItemCheckbox = document.getElementById('no-action-item-checkbox');
var rtlCheckbox = document.getElementById('rtl-checkbox');

appBarEl.addEventListener('MDCTopAppBar:nav', function() {
drawer.open = true;
});

});
shortCheckbox.addEventListener('change', function() {
appBarEl.classList[this.checked ? 'add' : 'remove']('mdc-top-app-bar--short');
appBarEl.classList.remove('mdc-top-app-bar--short-has-action-item');

appBar.destroy();
appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);

if (!this.checked) {
appBarEl.classList.remove('mdc-top-app-bar--short-collapsed');
appBarEl.classList.remove('mdc-top-app-bar--short-has-action-item');
}
});

noActionItemCheckbox.addEventListener('change', function() {
if (this.checked) {
rightSection.removeChild(rightItemEl);
appBarEl.classList.remove('mdc-top-app-bar--short-has-action-item');
} else {
rightSection.appendChild(rightItemEl);
appBarEl.classList.add('mdc-top-app-bar--short-has-action-item');
}
});

rtlCheckbox.addEventListener('change', function() {
document.body[this.checked ? 'setAttribute' : 'removeAttribute']("dir", "rtl");
appBarEl.classList.remove('mdc-top-app-bar--short-has-action-item');

appBar.destroy();
appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);
})
});
</script>
</body>
</html>
22 changes: 22 additions & 0 deletions demos/top-app-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,25 @@
padding: 16px;
}
}

.demo-body {
padding: 0;
margin: 0;
box-sizing: border-box;
}

.demo-main {
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
overflow: auto;
}

.demo-controls-container {
@include mdc-elevation(4);
position: fixed;
bottom: 0;
right: 0;
background-color: white;
padding: 10px;
}
50 changes: 36 additions & 14 deletions packages/mdc-top-app-bar/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# Top App Bar

MDC Top App Bar acts as a container for items such as application title, navigation menu, and action items, among other
things. Top app bars scroll with content by default.
MDC Top App Bar acts as a container for items such as application title, navigation icon, and action items. Top app bars scroll with content by default.

## Design & API Documentation

Expand All @@ -28,26 +27,42 @@ npm install --save @material/top-app-bar
<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__menu-icon">menu</a>
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Title</span>
</section>
</div>
</header>
```

Top app bars can accommodate multiple icons on the right:
Top app bars can accommodate multiple action items on the opposite side of the navigation icon:

```html
<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__menu-icon">menu</a>
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Title</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="top-app-bar">
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Download" alt="Download">file_download</a>
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Print this page" alt="Print this page">print</a>
<a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page" alt="Print this page">print</a>
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
</section>
</div>
</header>
```

Short top app bars should only be used with one action item:

```html
<header class="mdc-top-app-bar mdc-top-app-bar--short">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Title</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
</section>
</div>
</header>
Expand All @@ -70,16 +85,19 @@ Top app bars can accommodate multiple icons on the right:

Class | Description
--- | ---
`mdc-top-app-bar` | Mandatory
`mdc-top-app-bar` | Mandatory.
`mdc-top-app-bar--short` | Class used to style the top app bar as a short top app bar.
`mdc-top-app-bar--short-collapsed` | Class used to indicate the short top app bar is collapsed.

### Sass Mixins

Mixin | Description
--- | ---
`mdc-top-app-bar-ink-color($color)` | Sets the ink color of the top app bar
`mdc-top-app-bar-icon-ink-color($color)` | Sets the ink color of the top app bar icons
`mdc-top-app-bar-fill-color($color)` | Sets the fill color of the top app bar
`mdc-top-app-bar-fill-color-accessible($color)` | Sets the fill color of the top app bar and automatically sets a high-contrast ink color
`mdc-top-app-bar-ink-color($color)` | Sets the ink color of the top app bar.
`mdc-top-app-bar-icon-ink-color($color)` | Sets the ink color of the top app bar icons.
`mdc-top-app-bar-fill-color($color)` | Sets the fill color of the top app bar.
`mdc-top-app-bar-fill-color-accessible($color)` | Sets the fill color of the top app bar and automatically sets a high-contrast ink color.
`mdc-top-app-bar-short-border-radius($border-radius)` | Sets the `border-bottom-radius` property on the action item side. Used only for the short top app bar when collapsed.

### `MDCTopAppBar`

Expand All @@ -95,6 +113,10 @@ Method Signature | Description
`registerNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the native navigation icon element for a given event.
`deregisterNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the native navigation icon element for a given event.
`notifyNavigationIconClicked() => void` | Emits a custom event `MDCTopAppBar:nav` when the navigation icon is clicked.
`registerScrollHandler(handler) => void` | Registers a handler to be called when user scrolls. Our default implementation adds the handler as a listener to the window's `scroll` event.
`deregisterScrollHandler(handler) => void` | Unregisters a handler to be called when user scrolls. Our default implementation removes the handler as a listener to the window's `scroll` event.
`getViewportScrollY() => number` | Gets the number of pixels that the content of body is scrolled from the top of the page.
`getTotalActionItems() => number` | Gets the number of action items in the top app bar.

### Events

Expand Down
Loading

0 comments on commit fd8d8d9

Please sign in to comment.