Skip to content
This repository was archived by the owner on May 20, 2023. It is now read-only.

Commit d1b50ef

Browse files
nshahannshahan
authored
Add Application Layout styles and directives (#146)
 * Add Material Select Searchbox component. * Material Expansionpanel: Add high density mixin. * Material Icon: Add back and forward arrows to the list of flipped icons. * Material Input: Add leading text color mixin. * Material Popup: * Integrate with Angular CSS shimming and remove `shadowCssClass`. * Material design scrollbars by default (instead of the native scrollbars). * Add ARIA attributes. * Material Select: Fix selectable menu item property functionality. * Material Tree: * Add optional row separator borders. * Fix dropdown closing on toggle issue. * Material Tooltips: Add ARIA attributes. * Improve performance of `TreeSelectionOptions` constructor from O(n^2) to O(n) in the size of `listOfOptions`. * Remove uses of 'getBool' in boolean typed inputs. * Remove use of Compass in SASS files. * Refactor Angular annotations to inline versions.
1 parent 6be3498 commit d1b50ef

File tree

106 files changed

+1658
-720
lines changed

Some content is hidden

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

106 files changed

+1658
-720
lines changed

‎CHANGELOG.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,29 @@
1+
## 0.6.0-alpha+3
2+
3+
> NOTE: This code is considered production quality, but depends on angular:
4+
> 4.0.0-alpha+3. The alpha tag represents the evolving nature of the AngularDart
5+
> api, not code quality (4.0.0-alpha is used in production Google apps).
6+
7+
* Add Application Layout styles and directives.
8+
* Add Material Select Searchbox component.
9+
* Material Expansionpanel: Add high density mixin.
10+
* Material Icon: Add back and forward arrows to the list of flipped icons.
11+
* Material Input: Add leading text color mixin.
12+
* Material Popup:
13+
* Integrate with Angular CSS shimming and remove `shadowCssClass`.
14+
* Material design scrollbars by default (instead of the native scrollbars).
15+
* Add ARIA attributes.
16+
* Material Select: Fix selectable menu item property functionality.
17+
* Material Tree:
18+
* Add optional row separator borders.
19+
* Fix dropdown closing on toggle issue.
20+
* Material Tooltips: Add ARIA attributes.
21+
* Improve performance of `TreeSelectionOptions` constructor from O(n^2) to O(n)
22+
in the size of `listOfOptions`.
23+
* Remove uses of 'getBool' in boolean typed inputs.
24+
* Remove use of Compass in SASS files.
25+
* Refactor Angular annotations to inline versions.
26+
127
## 0.6.0-alpha+2
228

329
> NOTE: This code is considered production quality, but depends on angular:

‎README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,17 @@ Firefox, and Safari.
5757
* [angular2 pub package](https://pub.dartlang.org/packages/angular2)
5858
* [Material Design site](https://material.io)
5959

60+
## Required Icon Font
61+
For icons to appear, add the following icon font download to your page.
62+
[Example](https://github.com/dart-lang/angular_components_example/blob/master/web/index.html#L13)
63+
64+
```html
65+
<link
66+
rel="stylesheet"
67+
type="text/css"
68+
href="https://fonts.googleapis.com/icon?family=Material+Icons">
69+
```
70+
6071
## Custom component styles
6172

6273
Get access to the core Material Design SASS files used to style these components
@@ -68,3 +79,8 @@ in your SASS files.
6879
> NOTE: These .scss files are not used during the build step, but we are
6980
> planning to add this support. See
7081
> [issue #45](https://github.com/dart-lang/angular_components/issues/45).
82+
83+
## Project Roadmap
84+
85+
Our current work is summarized in
86+
[issue 142](https://github.com/dart-lang/angular_components/issues/142).

‎lib/src/all_components.dart‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
library angular_components.all_components;
66

77
export 'components/annotations/rtl_annotation.dart';
8+
export 'components/app_layout/material_drawer_base.dart';
9+
export 'components/app_layout/material_persistent_drawer.dart';
10+
export 'components/app_layout/material_temporary_drawer.dart';
811
export 'components/auto_dismiss/auto_dismiss.dart';
912
export 'components/button_decorator/button_decorator.dart';
1013
export 'components/content/deferred_content.dart';
@@ -57,6 +60,7 @@ export 'components/material_select/material_select.dart';
5760
export 'components/material_select/material_select_base.dart';
5861
export 'components/material_select/material_select_dropdown_item.dart';
5962
export 'components/material_select/material_select_item.dart';
63+
export 'components/material_select/material_select_searchbox.dart';
6064
export 'components/material_select/shift_click_selection.dart';
6165
export 'components/material_spinner/material_spinner.dart';
6266
export 'components/material_tab/fixed_material_tab_strip.dart';

‎lib/src/components/app_layout/README.md‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
# App Layout
2+
3+
App layout is a system of styles, directives, and components that when used
4+
together can give a material look and feel to the scafolding of your
5+
application. It provides an App Bar, Drawers, and Navigation styling following
6+
the material spec.
7+
8+
[TOC]
9+
10+
## Setup
11+
12+
The styles are provided by
13+
`package:third_party.dart_src.acx.app_layout/layout.scss.css`. To use these
14+
styles in an angular component simply add it as a `styleUrls` value in your
15+
`Component` annotation. It is suggested that the style is added before any
16+
component specific styling so you can easily override style values as needed.
17+
18+
```dart
19+
@Component(
20+
selector: 'my-component',
21+
templateUrl: 'my_component.html',
22+
styleUrls: const [
23+
'package:third_party.dart_src.acx.app_layout/layout.scss.css',
24+
'my_component.scss.css'])
25+
class MyComponent {}
26+
```
27+
28+
## App Bar
29+
30+
An app bar has the following classes which can be used together to create a
31+
header:
32+
33+
<!-- mdformat off(Basic table formatting for Github markdown compatibility) -->
34+
35+
Class | Description
36+
----------------------- | ------------------------------------------------------
37+
**material-header** | Container element for the header.
38+
shadow | Modifier on material-header to apply a shadow to the <br>header.
39+
dense-header | Makes the App Bar denser for interfaces that primarily <br>use mouse and keyboard.
40+
**material-header-row** | A row within the header.
41+
material-drawer-button | A button within the row that is placed on the left and <br>is used for navigation.
42+
material-header-title | A title for the header.
43+
material-spacer | Consumes space between the title and any navigation <br>links. Needs to be placed after the title and before <br>any navigation elements.
44+
material-navigation | Navigation elements which will be displayed on the <br>left side of the header.
45+
46+
<!-- mdformat on -->
47+
48+
Here is an example:
49+
50+
```html
51+
<header class="material-header">
52+
<div class="material-header-row">
53+
<material-button icon
54+
class="material-drawer-button" (trigger)="drawer.toggle()">
55+
<material-icon icon="menu"></material-icon>
56+
</material-button>
57+
<span class="material-header-title">Simple Layout</span>
58+
<div class="material-spacer"></div>
59+
<nav class="material-navigation">
60+
<a>Link 1</a>
61+
</nav>
62+
<nav class="material-navigation">
63+
<a>Link 2</a>
64+
</nav>
65+
<nav class="material-navigation">
66+
<a>Link 3</a>
67+
</nav>
68+
</div>
69+
</header>
70+
```
71+
72+
![Simple App Bar](g3doc/simple_app_bar.png)
73+
74+
## Drawers
75+
76+
There are three kinds of drawers that are available: _permanent_, _persistent_,
77+
and _temporary_. All drawers are instantiated by the `material-drawer` element.
78+
These drawers are implemented differently to provide the best performance
79+
for each. For the main content outside of the drawer wrap it in a
80+
`material-content` element, or a element with the class `material-content`.
81+
82+
### Permanent Drawers
83+
84+
Permanent drawers are drawers which can't be closed. They are provided purely by
85+
CSS. To have a permanent drawer add the `permanent` attribute to the
86+
`material-drawer` element. Example:
87+
88+
```html
89+
<material-drawer permanent>
90+
<!-- Drawer content here -->
91+
</material-drawer>
92+
<material-content>
93+
<!-- Content goes here -->
94+
</material-content>
95+
```
96+
97+
### Persistent Drawers
98+
99+
Persistent drawers are drawers which can be open and closed by an action, such
100+
as a button trigger. These drawers reposition the content to fit in with the
101+
flow of the drawer. To use a persistent drawer add the `persistent` attribute
102+
to the `material-drawer` element, and add the
103+
`MaterialPersistentDrawerDirective` to the parent's directives list.
104+
105+
Lastly, connect the open/close drawer action to the drawer. This is most easily
106+
done using the [reference variable](https://webdev.dartlang.org/angular/guide/template-syntax#!#ref-vars)
107+
syntax. The persistent drawer directive exports itself as `drawer` this allows
108+
it to be used easily by other actions. `toggle()` can be used to open/close the
109+
drawer. The drawer supports the `deferredConent` directive allowing a developer
110+
to add/remove content from the page when the drawer is not visible (closed.)
111+
Here is a complete example:
112+
113+
```html
114+
<material-drawer persistent #drawer="drawer">
115+
<div *deferredContent>
116+
<!-- Drawer content goes here -->
117+
</div>
118+
</material-drawer>
119+
<material-content>
120+
<header class="material-header shadow">
121+
<div class="material-header-row">
122+
<!-- This button will toggle (open/close) the drawer -->
123+
<material-button icon
124+
class="material-drawer-button" (trigger)="drawer.toggle()">
125+
<material-icon icon="menu"></material-icon>
126+
</material-button>
127+
<!-- Other header info goes here -->
128+
</div>
129+
</header>
130+
<div>
131+
Content goes here.
132+
</div>
133+
</material-content>
134+
```
135+
136+
### Temporary drawers
137+
138+
Temporary drawers are drawers that live on top of the conent. They are provided
139+
by `MaterialTemporaryDrawerComponent` which has a similar look and feel to the
140+
other drawers. To use a temporary drawer add the `temporary` attribute to the
141+
`material-drawer` element, and add `MaterialTemporaryDrawerComponent` to the
142+
parent's directive list.
143+
144+
The temporary drawer has an optional `overlay` attribute which can be used
145+
to show a transparent overlay above non-drawer content while the drawer is open.
146+
147+
Here is an example:
148+
149+
```html
150+
<material-drawer temporary #drawer="drawer" overlay>
151+
<div *deferredContent>
152+
Here is some drawer content.
153+
</div>
154+
</material-drawer>
155+
<material-content>
156+
<header class="material-header shadow">
157+
<div class="material-header-row">
158+
<material-button class="material-drawer-button" icon
159+
(trigger)="drawer.toggle()">
160+
<material-icon icon="menu"></material-icon>
161+
</material-button>
162+
<span class="material-header-title">Mobile Layout</span>
163+
<div class="material-spacer"></div>
164+
</div>
165+
</header>
166+
<!-- Content goes here -->
167+
</material-content>
168+
```
169+
170+
### Displaying the drawer on the opposite side
171+
172+
All drawers have an HTML attribute `end` which positions the drawer on the
173+
opposite side of the page as normal (right side in LTR, and left side in RTL.)
174+
175+
Example:
176+
177+
```html
178+
<material-drawer temporary end>
179+
<!-- This drawer is going to be on the right side in LTR,
180+
left side in RTL. -->
181+
</material-drawer>
182+
```
183+
184+
### App Bar and Drawer interaction
185+
186+
The app bar and the drawer work in tandem to provide an overal app layout for
187+
an application. The app bar can live both inside, or outside of
188+
`material-content`. If it is inside of `material-content` it will live with the
189+
content and if applicable be repositioned with the content. If it is on top of
190+
`material-content` the drawer and content will be positioned below the app bar
191+
for the `permanent` and `persistent` drawers.
192+
193+
Example:
194+
195+
```html
196+
<header class="material-header shadow">
197+
<div class="material-header-row">
198+
<material-button icon
199+
class="material-drawer-button" (trigger)="drawer.toggle()">
200+
<material-icon icon="menu"></material-icon>
201+
</material-button>
202+
<span class="material-header-title">Simple Layout</span>
203+
<div class="material-spacer"></div>
204+
<nav class="material-navigation">
205+
<a>Link 1</a>
206+
</nav>
207+
</div>
208+
</header>
209+
<material-drawer persistent #drawer="drawer">
210+
<!-- Drawer content here -->
211+
</material-drawer>
212+
<material-content>
213+
<!-- Content here -->
214+
</material-content>
215+
```
216+
217+
<!-- TODO(tsander): Add documentation for navigation. Add images for examples
218+
-->

‎lib/src/components/app_layout/_material_drawer.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/*
2+
* Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file
3+
* for details. All rights reserved. Use of this source code is governed by a
4+
* BSD-style license that can be found in the LICENSE file.
5+
*/
6+
7+
/*
8+
* NOTE: SASS files are not used during the build step of this package and are
9+
* provided as reference only. These .scss files were used to generate the
10+
* corresponding .css files in a separate process. We are working on a solution
11+
* to include CSS generation from SASS files during the build process.
12+
*/
13+
14+
@import 'lib/src/css/material/material';
15+
16+
$mat-drawer-width: $mat-grid * 32;
17+
18+
@mixin material-drawer-common {
19+
background-color: $mat-white;
20+
bottom: 0;
21+
box-sizing: border-box;
22+
display: flex;
23+
flex-direction: column;
24+
flex-wrap: nowrap;
25+
left: 0;
26+
overflow: hidden;
27+
position: absolute;
28+
top: 0;
29+
width: $mat-drawer-width;
30+
}

‎lib/src/components/app_layout/_mixins.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
* Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file
3+
* for details. All rights reserved. Use of this source code is governed by a
4+
* BSD-style license that can be found in the LICENSE file.
5+
*/
6+
7+
/*
8+
* NOTE: SASS files are not used during the build step of this package and are
9+
* provided as reference only. These .scss files were used to generate the
10+
* corresponding .css files in a separate process. We are working on a solution
11+
* to include CSS generation from SASS files during the build process.
12+
*/
13+
14+
/// Sets width of MaterialTemporaryDrawerComponent.
15+
///
16+
/// Must be applied to the component itself, e.g.:
17+
///
18+
/// ```
19+
/// material-drawer[temporary] {
20+
/// @include mat-temporary-drawer-width(512px);
21+
/// }
22+
/// ```
23+
@mixin mat-temporary-drawer-width($width) {
24+
::ng-deep .drawer-content {
25+
width: $width;
26+
}
27+
28+
&:not([end]):not(.mat-drawer-expanded) ::ng-deep .drawer-content {
29+
left: -$width;
30+
}
31+
32+
&[end]:not(.mat-drawer-expanded) ::ng-deep .drawer-content {
33+
right: -$width;
34+
}
35+
}

‎lib/src/components/app_layout/g3doc/simple_app_bar.png‎

13 KB
Loading

0 commit comments

Comments
 (0)