Permalink
Browse files

fixes: #23

  • Loading branch information...
MikeMitterer committed Sep 2, 2015
1 parent 34e0563 commit 0b2508fb6ba37a2291fba4634a72fd3de8b86b0d
Showing with 625 additions and 261 deletions.
  1. +3 −3 lib/mdlapplication.dart
  2. +2 −0 lib/src/application/modules/DomRenderer.dart
  3. +5 −4 lib/src/components/MaterialTextfield.dart
  4. +10 −10 samples/mdl_animation/web/demo.css
  5. +7 −4 samples/mdl_badge/web/README.md
  6. +8 −5 samples/mdl_button/web/README.md
  7. +1 −1 samples/mdl_button/web/main.dart
  8. +7 −4 samples/mdl_card/web/README.md
  9. +7 −4 samples/mdl_checkbox/web/README.md
  10. +7 −4 samples/mdl_data-table/web/README.md
  11. +9 −6 samples/mdl_footer/web/README.md
  12. +11 −4 samples/mdl_grid/web/README.md
  13. +7 −4 samples/mdl_icon-toggle/web/README.md
  14. +9 −4 samples/mdl_layout/web/README.md
  15. +12 −6 samples/mdl_menu/web/README.md
  16. +7 −4 samples/mdl_progress/web/README.md
  17. +7 −4 samples/mdl_radio/web/README.md
  18. +7 −4 samples/mdl_shadow/web/README.md
  19. +10 −7 samples/mdl_slider/web/README.md
  20. +7 −4 samples/mdl_spinner/web/README.md
  21. +7 −4 samples/mdl_switch/web/README.md
  22. +7 −4 samples/mdl_tabs/web/README.md
  23. +66 −64 samples/mdl_textfield/.sitegen/html/_content/index.html
  24. +13 −8 samples/mdl_textfield/web/README.md
  25. +1 −0 samples/mdl_textfield/web/demo.css
  26. +69 −67 samples/mdl_textfield/web/index.html
  27. +7 −4 samples/mdl_tooltip/web/README.md
  28. +15 −4 samples/mdl_typography/web/README.md
  29. +28 −0 samples/styleguide/.sitegen/html/_content/views/data-table.html
  30. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/badge/readme.html
  31. +3 −1 samples/styleguide/.sitegen/html/_partials/usage/button/readme.html
  32. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/card/readme.html
  33. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/checkbox/readme.html
  34. +28 −0 samples/styleguide/.sitegen/html/_partials/usage/data-table/html.html
  35. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/data-table/readme.html
  36. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/footer/readme.html
  37. +22 −0 samples/styleguide/.sitegen/html/_partials/usage/grid/readme.html
  38. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/icon-toggle/readme.html
  39. +12 −0 samples/styleguide/.sitegen/html/_partials/usage/layout/readme.html
  40. +15 −7 samples/styleguide/.sitegen/html/_partials/usage/menu/readme.html
  41. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/progress/readme.html
  42. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/radio/readme.html
  43. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/shadow/readme.html
  44. +3 −1 samples/styleguide/.sitegen/html/_partials/usage/slider/readme.html
  45. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/spinner/readme.html
  46. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/switch/readme.html
  47. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/tabs/readme.html
  48. +3 −0 samples/styleguide/.sitegen/html/_partials/usage/textfield/readme.html
  49. +2 −0 samples/styleguide/.sitegen/html/_partials/usage/tooltip/readme.html
  50. +8 −0 samples/styleguide/.sitegen/html/_partials/usage/typography/readme.html
  51. +0 −2 samples/styleguide/web/assets/styles/_demo/_animation.scss
  52. +1 −0 samples/styleguide/web/assets/styles/_demo/_layout.scss
  53. +28 −0 samples/styleguide/web/views/data-table.html
  54. +2 −0 samples/styleguide/web/views/usage/badge.html
  55. +3 −1 samples/styleguide/web/views/usage/button.html
  56. +2 −0 samples/styleguide/web/views/usage/card.html
  57. +2 −0 samples/styleguide/web/views/usage/checkbox.html
  58. +30 −0 samples/styleguide/web/views/usage/data-table.html
  59. +2 −0 samples/styleguide/web/views/usage/footer.html
  60. +22 −0 samples/styleguide/web/views/usage/grid.html
  61. +2 −0 samples/styleguide/web/views/usage/icon-toggle.html
  62. +12 −0 samples/styleguide/web/views/usage/layout.html
  63. +15 −7 samples/styleguide/web/views/usage/menu.html
  64. +2 −0 samples/styleguide/web/views/usage/progress.html
  65. +2 −0 samples/styleguide/web/views/usage/radio.html
  66. +2 −0 samples/styleguide/web/views/usage/shadow.html
  67. +3 −1 samples/styleguide/web/views/usage/slider.html
  68. +2 −0 samples/styleguide/web/views/usage/spinner.html
  69. +2 −0 samples/styleguide/web/views/usage/switch.html
  70. +2 −0 samples/styleguide/web/views/usage/tabs.html
  71. +3 −0 samples/styleguide/web/views/usage/textfield.html
  72. +2 −0 samples/styleguide/web/views/usage/tooltip.html
  73. +8 −0 samples/styleguide/web/views/usage/typography.html
View
@@ -20,8 +20,8 @@
library mdlapplication;
@MirrorsUsed(metaTargets: const [ MdlComponentModelAnnotation ],
targets: const [ 'List' ],
symbols: const [ '[]' ])
targets: const [ 'List' ],
symbols: const [ '[]' ])
import 'dart:mirrors';
import 'dart:html' as dom;
@@ -92,4 +92,4 @@ void registerApplicationComponents() {
}
_addModule();
}
}
@@ -35,6 +35,7 @@ typedef void _DomRenderFunction();
/**
* DomRenderer converts a String into HtmlNodes
*
*/
@di.Injectable()
class DomRenderer {
@@ -66,6 +67,7 @@ class DomRenderer {
try {
final dom.Element child = new dom.Element.html(content, validator: _validator());
//final dom.Element child = new dom.DocumentFragment.html(content, validator: _validator());
//_logger.info("Parent $parent");
componentFactory().upgradeElement(child).then( (_) {
@@ -110,13 +110,14 @@ class MaterialTextfield extends MdlComponent {
/// Update text field value.
void change(final String value) {
if (value != null && value != _relaxedInput.value) {
int selStart = (_relaxedInput).selectionStart;
int selStart = (_relaxedInput as dom.InputElement).selectionStart;
int selEnd = (_relaxedInput as dom.InputElement).selectionStart;
void _placeTheCursorWhereItWasBefore(final int position) {
(_relaxedInput).setSelectionRange(position,position);
}
_relaxedInput.value = value;
(_relaxedInput as dom.InputElement).setSelectionRange(selStart,selEnd);
_placeTheCursorWhereItWasBefore(selStart);
}
_updateClasses();
@@ -49,17 +49,17 @@
/* TOOLTIP */
.demo-page--animation, .demo-section--animation {
/* Outside the view, on the left.
We leave the view when moving to this state, so we use fast-out-linear-in. */
We leave the view when moving to this state, so we use fast-out-linear-in. */
/* Left side.
We enter the view when moving to this state, so we use linear-out-slow-in. */
We enter the view when moving to this state, so we use linear-out-slow-in. */
/* Right side.
We're always visible when moving to this state, so we use default. */
We're always visible when moving to this state, so we use default. */
/* Outside the view, on the right.
We leave the view when moving to this state, so we use fast-out-linear-in. */
We leave the view when moving to this state, so we use fast-out-linear-in. */
/* Right side.
We enter the view when moving to this state, so we use linear-out-slow-in. */
We enter the view when moving to this state, so we use linear-out-slow-in. */
/* Left side.
We're always visible when moving to this state, so we use default. */ }
We're always visible when moving to this state, so we use default. */ }
.demo-page--animation .demo-animation, .demo-section--animation .demo-animation {
height: 200px;
width: 300px;
@@ -104,7 +104,7 @@
width: 100px;
position: absolute;
top: 50px;
transition-property: left;
transition-duration: 0.2s; }
/*# sourceMappingURL=demo.css.map */
-webkit-transition-property: left;
transition-property: left;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s; }
@@ -1,4 +1,4 @@
##Introduction
## Introduction
The Material Design Lite (MDL) **badge** component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.
You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example:
@@ -11,7 +11,10 @@ A badge is almost always positioned near a link so that the user has a convenien
Badges are a new feature in user interfaces, and provide users with a visual clue to help them discover additional relevant content. Their design and use is therefore an important factor in the overall user experience.
###To include an MDL **badge** component:
## Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
### To include an MDL **badge** component:
&nbsp;1. Code an `<a>` (anchor/link) or a `<span>` element. Include any desired attributes and content.
```html
@@ -30,7 +33,7 @@ The badge component is ready for use.
>**Note:** Because of the badge component's small size, the `data-badge` value should typically contain one to three characters. More than three characters will not cause an error, but some characters may fall outside the badge and thus be difficult or impossible to see. The value of the `data-badge` attribute is centered in the badge.
####Examples
#### Examples
A badge inside a link.
```html
<a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>
@@ -54,7 +57,7 @@ A badge inside a link with no badge background color.
This badge has no background color.</a>
```
##Configuration options
## Configuration options
The MDL CSS classes apply various predefined visual enhancements to the badge. The table below lists the available classes and their effects.
| MDL class | Effect | Remarks |
@@ -1,11 +1,14 @@
##Introduction
## Introduction
The Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML `<button>` element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.
Buttons are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the button component's [Material Design specifications page](http://www.google.com/design/spec/components/buttons.html) for details.
The available button display types are *flat* (default), *raised*, *fab*, *mini-fab*, and *icon*; any of these types may be plain (light gray) or *colored*, and may be initially or programmatically *disabled*. The *fab*, *mini-fab*, and *icon* button types typically use a small image as their caption rather than text.
###To include an MDL **button** component:
## Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
### To include an MDL **button** component:
&nbsp;1. Code a `<button>` element. Include any desired attributes and values, such as an id or event handler, and add a text caption or image as appropriate.
```html
@@ -18,7 +21,7 @@ The available button display types are *flat* (default), *raised*, *fab*, *mini-
The button component is ready for use.
####Examples
#### Examples
A button with the "raised" effect.
```html
<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
@@ -35,7 +38,7 @@ A button with the "icon" and "colored" effects.
```
##Configuration options
## Configuration options
The MDL CSS classes apply various predefined visual and behavioral enhancements to the button. The table below lists the available classes and their effects.
| MDL class | Effect | Remarks |
@@ -47,7 +50,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-button--fab` | Applies *fab* (circular) display effect | Mutually exclusive with *raised*, *mini-fab*, and *icon* |
| `mdl-button--mini-fab` | Applies *mini-fab* (small fab circular) display effect | Mutually exclusive with *raised*, *fab*, and *icon* |
| `mdl-button--icon` | Applies *icon* (small plain circular) display effect | Mutually exclusive with *raised*, *fab*, and *mini-fab* |
| `mdl-button--colored` | Applies *colored* display effect | Colors are defined in `material.min.css` |
| `mdl-button--colored` | Applies *colored* display effect (primary or accent color, depending on the type of button) | Colors are defined in `material.min.css` |
| `mdl-button--primary` | Applies *primary* color display effect | Colors are defined in `material.min.css` |
| `mdl-button--accent` | Applies *accent* color display effect | Colors are defined in `material.min.css` |
| `mdl-js-ripple-effect` | Applies *ripple* click effect | May be used in combination with any other classes |
@@ -11,7 +11,7 @@ main() {
registerMdl();
componentFactory().run().then((_) {
//final MaterialButton button = MaterialButton()
});
}
@@ -1,11 +1,14 @@
##Introduction
## Introduction
The Material Design Lite (MDL) **card** component is a user interface element representing a virtual piece of paper that contains related data &mdash; such as a photo, some text, and a link &mdash; that are all about a single subject.
Cards are a convenient means of coherently displaying related content that is composed of different types of objects. They are also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length. Cards have a constant width and a variable height, depending on their content.
Cards are a fairly new feature in user interfaces, and allow users an access point to more complex and detailed information. Their design and use is an important factor in the overall user experience. See the card component's [Material Design specifications page](http://www.google.com/design/spec/components/cards.html) for details.
###To include an MDL **card** component:
## Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
### To include an MDL **card** component:
&nbsp;1. Code a `<div>` element; this is the "outer" container, intended to hold all of the card's content.
```html
@@ -67,7 +70,7 @@ Cards are a fairly new feature in user interfaces, and allow users an access poi
The card component is ready for use.
####Examples
#### Examples
A card (no shadow) with a title, image, text, and action.
@@ -109,7 +112,7 @@ Card (level-3 shadow) with an image, caption, and text:
</div>
```
##Configuration options
## Configuration options
The MDL CSS classes apply various predefined visual and behavioral enhancements to the card. The table below lists the available classes and their effects.
| MDL class | Effect | Remarks |
@@ -1,11 +1,14 @@
##Introduction
## Introduction
The Material Design Lite (MDL) **checkbox** component is an enhanced version of the standard HTML `<input type="checkbox">` element. A checkbox consists of a small square and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Checkboxes typically, but not necessarily, appear in groups, and can be selected and deselected individually. The MDL checkbox component allows you to add display and click effects.
Checkboxes are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the checkbox component's [Material Design specifications page](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) for details.
The enhanced checkbox component has a more vivid visual look than a standard checkbox, and may be initially or programmatically *disabled*.
###To include an MDL **checkbox** component:
## Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
### To include an MDL **checkbox** component:
&nbsp;1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the checkbox it will contain. The `for` attribute is optional when the `<input>` element is contained inside the `<label>` element, but is recommended for clarity.
```html
@@ -36,7 +39,7 @@ The enhanced checkbox component has a more vivid visual look than a standard che
The checkbox component is ready for use.
####Example
#### Example
A checkbox with a ripple click effect.
@@ -47,7 +50,7 @@ A checkbox with a ripple click effect.
</label>
```
##Configuration options
## Configuration options
The MDL CSS classes apply various predefined visual and behavioral enhancements to the checkbox. The table below lists the available classes and their effects.
| MDL class | Effect | Remarks |
@@ -1,11 +1,14 @@
##Introduction
## Introduction
The Material Design Lite (MDL) **data-table** component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities.
Tables are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the data-table component's [Material Design specifications page](http://www.google.com/design/spec/components/data-tables.html) for details.
The available row/column/cell types in a data-table are mostly self-formatting; that is, once the data-table is defined, the individual cells require very little specific attention. For example, the rows exhibit shading behavior on mouseover and selection, numeric values are automatically formatted by default, and the addition of a single class makes the table rows individually or collectively selectable. This makes the data-table component convenient and easy to code for the developer, as well as attractive and intuitive for the user.
###To include an MDL **data-table** component:
## Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
### To include an MDL **data-table** component:
&nbsp;1. Code a `<table>` element. Include `<thead>` and `<tbody>` elements to hold the title and data rows, respectively.
```html
@@ -74,7 +77,7 @@ The available row/column/cell types in a data-table are mostly self-formatting;
The data-table component is ready for use.
####Examples
#### Examples
A data-table with a "master" select checkbox and individual row select checkboxes.
```html
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
@@ -145,7 +148,7 @@ A data-table without select checkboxes containing mostly text data.
</table>
```
##Configuration options
## Configuration options
The MDL CSS classes apply various predefined visual and behavioral enhancements to the data-table. The table below lists the available classes and their effects.
| MDL class | Effect | Remarks |
@@ -1,11 +1,14 @@
##Introduction
## Introduction
The Material Design Lite (MDL) **footer** component is a comprehensive container intended to present a substantial amount of related content in a visually attractive and logically intuitive area. Although it is called "footer", it may be placed at any appropriate location on a device screen, either before or after other content.
An MDL footer component takes two basic forms: *mega-footer* and *mini-footer*. As the names imply, mega-footers contain more (and more complex) content than mini-footers. A mega-footer presents multiple sections of content separated by horizontal rules, while a mini-footer presents a single section of content. Both footer forms have their own internal structures, including required and optional elements, and typically include both informational and clickable content, such as links.
Footers, as represented by this component, are a fairly new feature in user interfaces, and allow users to view discrete blocks of content in a coherent and consistently organized way. Their design and use is an important factor in the overall user experience.
###To include an MDL **mega-footer** component:
## Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
### To include an MDL **mega-footer** component:
&nbsp;1a. Code a `<footer>` element. Inside the footer, include one `<div>` element for each content section, typically three: *top*, *middle*, and *bottom*.
```html
@@ -226,7 +229,7 @@ Footers, as represented by this component, are a fairly new feature in user inte
The mega-footer component is ready for use.
####Examples
#### Examples
A mega-footer component with three sections and two drop-down sections in the middle section.
```html
@@ -277,7 +280,7 @@ A mega-footer component with three sections and two drop-down sections in the mi
</footer>
```
###To include an MDL **mini-footer** component:
### To include an MDL **mini-footer** component:
&nbsp;1a. Code a `<footer>` element. Inside the footer, code two `<div>` elements, one for the *left* section and one for the *right* section.
```html
@@ -356,7 +359,7 @@ A mega-footer component with three sections and two drop-down sections in the mi
The mini-footer component is ready for use.
####Examples
#### Examples
A mini-footer with left and right sections.
@@ -380,7 +383,7 @@ A mini-footer with left and right sections.
</footer>
```
##Configuration options
## Configuration options
The MDL CSS classes apply various predefined visual enhancements to the footer. The table below lists the available classes and their effects.
| MDL class | Effect | Remarks |
Oops, something went wrong.

0 comments on commit 0b2508f

Please sign in to comment.