Skip to content

Commit

Permalink
feat(toolbar): Improve toolbar to support multiple row. (#448)
Browse files Browse the repository at this point in the history 
Background
===

When toolbar was originally implemented, it was design to be a single
row toolbar. However, it turns out that we need one higher level
wrapper to group the current toolbar and future tabs. We carefully
balanced between introducing a new "appbar" concept v.s. extending the
functionality of existing toolbar to support multiple row, we decided
to go for the latter without introducing a new component.

Changes
===
- Implement multiple row toolbar
- Updated README and demo

BREAKING CHANGE: All existing toolbar need to add <div class="mdc-toolbar__row">
to properly align its contents.
  • Loading branch information
@yeelan0319
yeelan0319 committed Mar 29, 2017
1 parent 2b4c9a3 commit 14ffe53
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 61 deletions.
27 changes: 17 additions & 10 deletions demos/toolbar/default-toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}
.demo-paragraph {
margin: 0px;
padding: 20px 16px;
padding: 20px 28px;
}
.material-icons {
text-decoration: none;
Expand All @@ -33,20 +33,27 @@
[dir='rtl'] .material-icons {
padding-left: 8px;
}
@media (max-width: 599px) {
.demo-paragraph {
padding: 16px;
}
}
</style>
<script src="../assets/material-components-web.css.js" charset="utf-8"></script>
</head>
<body class="mdc-typography mdc-toolbar-demo">
<header class="mdc-toolbar">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
<a class="material-icons">menu</a>
<span class="mdc-toolbar__title">Title</span>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
<a class="material-icons" aria-label="Download" alt="Download">file_download</a>
<a class="material-icons" aria-label="Print this page" alt="Print this page">print</a>
<a class="material-icons" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
</section>
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
<a class="material-icons">menu</a>
<span class="mdc-toolbar__title">Title</span>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
<a class="material-icons" aria-label="Download" alt="Download">file_download</a>
<a class="material-icons" aria-label="Print this page" alt="Print this page">print</a>
<a class="material-icons" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
</section>
</div>
</header>
<main>
<p class="demo-paragraph">
Expand Down
27 changes: 17 additions & 10 deletions demos/toolbar/fixed-top-toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}
.demo-paragraph {
margin: 0px;
padding: 20px 16px;
padding: 20px 28px;
}
.material-icons {
text-decoration: none;
Expand All @@ -33,20 +33,27 @@
[dir='rtl'] .material-icons {
padding-left: 8px;
}
@media (max-width: 599px) {
.demo-paragraph {
padding: 16px;
}
}
</style>
<script src="../assets/material-components-web.css.js" charset="utf-8"></script>
</head>
<body class="mdc-typography mdc-toolbar-demo">
<header class="mdc-toolbar mdc-toolbar--fixed">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
<a class="material-icons">menu</a>
<span class="mdc-toolbar__title">Title</span>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
<a class="material-icons" aria-label="Download" alt="Download">file_download</a>
<a class="material-icons" aria-label="Print this page" alt="Print this page">print</a>
<a class="material-icons" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
</section>
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
<a class="material-icons">menu</a>
<span class="mdc-toolbar__title">Title</span>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
<a class="material-icons" aria-label="Download" alt="Download">file_download</a>
<a class="material-icons" aria-label="Print this page" alt="Print this page">print</a>
<a class="material-icons" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
</section>
</div>
</header>
<main>

Expand Down
72 changes: 48 additions & 24 deletions packages/mdc-toolbar/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
# MDC Toolbar

MDC Toolbar provides a RTL-aware Material Design toolbar component adhering to the
[Material Design toolbar spec](https://www.google.com/design/spec/components/toolbars.html)
Toolbars scroll with content by default, but supports fixed on
top as well. Currently, this component does not yet support the "Waterfall" or
"Flexible Header" patterns.
MDC Toolbar acts as a container for multiple rows containing items such as
application title, navigation menu, and tabs, among other things. Toolbars
scroll with content by default, but supports fixed on top as well. Currently,
this component does not yet support the "Waterfall" or "Flexible Header" patterns.


## Installation
Expand All @@ -20,13 +19,32 @@ Wrap the items with `mdc-toolbar` class in following way:

```html
<header class="mdc-toolbar">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
<a class="material-icons">menu</a>
<span class="mdc-toolbar__title">Title</span>
</section>
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
<a class="material-icons">menu</a>
<span class="mdc-toolbar__title">Title</span>
</section>
</div>
</header>
```

MDC Toolbars can accommodate multiple rows using the wrapper `mdc-toolbar__row`:

```html
<header class="mdc-toolbar">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
<a class="material-icons">menu</a>
<span class="mdc-toolbar__title">Title</span>
</section>
</div>
<div class="mdc-toolbar__row">
...
</div>
</header>
```


### Fixed toolbars

By default, toolbars scroll with the page content. To keep the toolbar fixed to
Expand All @@ -41,9 +59,11 @@ toolbar will not overlay any of the element's content.

```html
<header class="mdc-toolbar mdc-toolbar--fixed">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
<span class="mdc-toolbar__title">Title</span>
</section>
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
<span class="mdc-toolbar__title">Title</span>
</section>
</div>
</header>
<main class="mdc-toolbar-fixed-adjust">
<p class="demo-paragraph">
Expand All @@ -61,15 +81,17 @@ of the toolbar (respectively).

```html
<header class="mdc-toolbar">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
Section aligns to start.
</section>
<section class="mdc-toolbar__section">
Section aligns to center.
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end">
Section aligns to end.
</section>
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
Section aligns to start.
</section>
<section class="mdc-toolbar__section">
Section aligns to center.
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end">
Section aligns to end.
</section>
</div>
</header>
```

Expand All @@ -83,9 +105,11 @@ a page's title, or an application name.

```html
<header class="mdc-toolbar">
<section class="mdc-toolbar__section">
<span class="mdc-toolbar__title">Title</span>
</section>
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section">
<span class="mdc-toolbar__title">Title</span>
</section>
</div>
</header>
```

Expand Down
43 changes: 26 additions & 17 deletions packages/mdc-toolbar/mdc-toolbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
@import "@material/theme/mixins";
@import "@material/typography/mixins";

$mdc-toolbar-height: 64px;
$mdc-toolbar-mobile-height: 56px;
$mdc-toolbar-padding: 24px 16px;
$mdc-toolbar-row-height: 64px;
$mdc-toolbar-mobile-row-height: 56px;
$mdc-toolbar-padding: 20px 28px;
$mdc-toolbar-mobile-padding: 16px;

$mdc-toolbar-mobile-breakpoint: 599px;
Expand All @@ -30,27 +30,35 @@ $mdc-toolbar-mobile-breakpoint: 599px;
.mdc-toolbar {
display: flex;
position: relative;
align-items: center;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: $mdc-toolbar-height;
padding: $mdc-toolbar-padding;
box-sizing: border-box;

@include mdc-theme-prop(background-color, primary);
@include mdc-theme-prop(color, text-primary-on-primary);

// TODO: refactor this out when #23 is implemented
@media (max-width: $mdc-toolbar-mobile-breakpoint) {
height: $mdc-toolbar-mobile-height;
padding: $mdc-toolbar-mobile-padding;
&__row {
display: flex;
position: relative;
width: 100%;
height: $mdc-toolbar-row-height;
padding: $mdc-toolbar-padding;
box-sizing: border-box;

// TODO: refactor this out when #23 is implemented
@media (max-width: $mdc-toolbar-mobile-breakpoint) {
height: $mdc-toolbar-mobile-row-height;
padding: $mdc-toolbar-mobile-padding;
}
}

&__section {
display: inline-flex;
flex: 1;
align-items: center;
align-items: flex-start;
justify-content: center;
z-index: 1;

&--align-start {
justify-content: flex-start;
Expand All @@ -61,12 +69,13 @@ $mdc-toolbar-mobile-breakpoint: 599px;
justify-content: flex-end;
order: 1;
}
}

.mdc-toolbar__title {
@include mdc-typography(title);
&__title {
@include mdc-typography(title);

margin: 0;
}
margin: 0;
line-height: 1.5rem;
}
}

Expand All @@ -82,9 +91,9 @@ $mdc-toolbar-mobile-breakpoint: 599px;
// postcss-bem-linter: end

.mdc-toolbar-fixed-adjust {
margin-top: $mdc-toolbar-height;
margin-top: $mdc-toolbar-row-height;

@media (max-width: 599px) {
margin-top: $mdc-toolbar-mobile-height;
margin-top: $mdc-toolbar-mobile-row-height;
}
}

0 comments on commit 14ffe53

Please sign in to comment.