Permalink
Browse files

feature: Merged latest master

  • Loading branch information...
MikeMitterer committed Nov 2, 2015
1 parent 7fa9f35 commit f5af03fa228b8e651afc06266d9e16da9267d837
Showing with 2,046 additions and 685 deletions.
  1. +1 −1 lib/assets/styles/card/_card.orig.scss
  2. +0 −1 lib/assets/styles/data-table/README.md
  3. +18 −18 lib/assets/styles/layout/README.md
  4. +3 −1 lib/assets/styles/layout/_layout.orig.scss
  5. +7 −4 lib/assets/styles/material.css
  6. +1 −1 lib/assets/styles/material.min.css
  7. +0 −3 lib/assets/styles/slider/README.md
  8. +1 −0 lib/assets/styles/textfield/README.md
  9. +5 −4 lib/assets/styles/variables/_variables.orig.scss
  10. +5 −4 lib/assets/styles/variables/_variables.scss
  11. +0 −7 lib/src/components/MaterialDataTable.dart
  12. +19 −2 lib/src/components/MaterialLayout.dart
  13. +4 −0 lib/src/components/MaterialTextfield.dart
  14. +0 −1 samples/mdl_data-table/web/README.md
  15. +0 −31 samples/mdl_data-table2/web/main.dart
  16. +18 −18 samples/mdl_layout/web/README.md
  17. +0 −3 samples/mdl_slider/web/README.md
  18. +1 −0 samples/mdl_textfield/web/README.md
  19. +1 −1 samples/{mdl_data-table2 → mdlx_data-table2}/.sitegen/html/_content/index.html
  20. 0 samples/{mdl_data-table2 → mdlx_data-table2}/.sitegen/site.yaml
  21. 0 samples/{mdl_data-table2 → mdlx_data-table2}/lib/components/DeviceStatusElement.dart
  22. 0 samples/{mdl_data-table2 → mdlx_data-table2}/lib/devicestatus.dart
  23. 0 samples/{mdl_data-table2 → mdlx_data-table2}/pubspec.yaml
  24. 0 samples/{mdl_data-table2 → mdlx_data-table2}/web/_config.scss
  25. +1,510 −408 samples/{mdl_data-table2 → mdlx_data-table2}/web/demo.css
  26. 0 samples/{mdl_data-table2 → mdlx_data-table2}/web/demo.scss
  27. 0 samples/{mdl_data-table2 → mdlx_data-table2}/web/index.html
  28. +25 −0 samples/mdlx_data-table2/web/main.dart
  29. 0 samples/{mdl_data-table2 → mdlx_data-table2}/web/styles.css
  30. +1 −1 samples/styleguide/.sitegen/html/_data/samples.json
  31. +0 −1 samples/styleguide/.sitegen/html/_partials/usage/data-table/readme.html
  32. +1 −6 samples/styleguide/.sitegen/html/_partials/usage/data-table2/dart.html
  33. +18 −18 samples/styleguide/.sitegen/html/_partials/usage/layout/readme.html
  34. +1 −1 samples/styleguide/.sitegen/html/_partials/usage/slider/dart.html
  35. +0 −2 samples/styleguide/.sitegen/html/_partials/usage/slider/readme.html
  36. +5 −0 samples/styleguide/.sitegen/html/_partials/usage/textfield/readme.html
  37. +27 −1 samples/styleguide/web/styleguide.css
  38. +13 −2 samples/styleguide/web/styleguide.scss
  39. +2 −2 samples/styleguide/web/views/samples.html
  40. +0 −1 samples/styleguide/web/views/usage/data-table.html
  41. +0 −6 samples/styleguide/web/views/usage/data-table2.html
  42. +18 −18 samples/styleguide/web/views/usage/layout.html
  43. +1 −3 samples/styleguide/web/views/usage/slider.html
  44. +5 −0 samples/styleguide/web/views/usage/textfield.html
  45. BIN samples/template_android-dot-com/web/fonts/and_black.eot
  46. BIN samples/template_android-dot-com/web/fonts/and_black.ttf
  47. BIN samples/template_android-dot-com/web/fonts/and_black.woff
  48. +5 −5 samples/template_android-dot-com/web/index.html
  49. +9 −12 samples/template_android-dot-com/web/styles.css
  50. +7 −4 samples/template_blog/web/material.css
  51. +1 −1 samples/template_blog/web/styles.css
  52. +7 −4 tool/demobase/material.css
  53. +1 −1 tool/demobase/material.min.css
  54. +1 −1 tool/grinder/samples.dart
  55. +11 −0 tool/jsbase/button.js
  56. +11 −0 tool/jsbase/checkbox.js
  57. +0 −6 tool/jsbase/data-table.js
  58. +11 −0 tool/jsbase/icon-toggle.js
  59. +29 −20 tool/jsbase/layout.js
  60. +24 −10 tool/jsbase/menu.js
  61. +11 −0 tool/jsbase/progress.js
  62. +11 −0 tool/jsbase/ripple.js
  63. +11 −0 tool/jsbase/slider.js
  64. +11 −0 tool/jsbase/switch.js
  65. +17 −6 tool/jsbase/textfield.js
  66. +12 −1 tool/jsbase/tooltip.js
  67. +9 −0 tool/portbase/button.js.dart
  68. +9 −0 tool/portbase/checkbox.js.dart
  69. +0 −6 tool/portbase/data-table.js.dart
  70. +9 −0 tool/portbase/icon-toggle.js.dart
  71. +33 −20 tool/portbase/layout.js.dart
  72. +1 −1 tool/portbase/mdlComponentHandler.js.dart
  73. +23 −10 tool/portbase/menu.js.dart
  74. +9 −0 tool/portbase/progress.js.dart
  75. +9 −0 tool/portbase/ripple.js.dart
  76. +9 −0 tool/portbase/slider.js.dart
  77. +9 −0 tool/portbase/switch.js.dart
  78. +15 −6 tool/portbase/textfield.js.dart
  79. +10 −1 tool/portbase/tooltip.js.dart
@@ -73,7 +73,7 @@
.mdl-card__subtitle-text {
font-size: $card-subtitle-font-size;
color: grey;
color: $card-subtitle-color;
margin: 0;
}
@@ -189,4 +189,3 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-data-table__cell--non-numeric` | Applies text formatting to data cell | Optional; goes on both table header and table data cells |
| (none) | Applies numeric formatting to header or data cell (default) | |
You may add `data-mdl-data-table-selectable-name` and `data-mdl-data-table-selectable-value` attributes to the *rows* of the table. If the table is selectable, these values will be added to the name and value of the created checkboxes.
@@ -50,7 +50,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Simple Layout</span>
<span class="mdl-layout__title">Simple Layout</span>
</div>
</header>
</div>
@@ -62,7 +62,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Simple Layout</span>
<span class="mdl-layout__title">Simple Layout</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>
@@ -75,7 +75,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Simple Layout</span>
<span class="mdl-layout__title">Simple Layout</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Nav link 1</a>
@@ -93,7 +93,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Simple Layout</span>
<span class="mdl-layout__title">Simple Layout</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Nav link 1</a>
@@ -113,7 +113,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Simple Layout</span>
<span class="mdl-layout__title">Simple Layout</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Nav link 1</a>
@@ -123,7 +123,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Simple Layout</span>
<span class="mdl-layout__title">Simple Layout</span>
</div>
</div>
```
@@ -134,7 +134,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Simple Layout</span>
<span class="mdl-layout__title">Simple Layout</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Nav link 1</a>
@@ -144,7 +144,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Simple Layout</span>
<span class="mdl-layout__title">Simple Layout</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Nav link 2</a>
<a class="mdl-navigation__link" href="#">Nav link 2</a>
@@ -160,7 +160,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Simple Layout</span>
<span class="mdl-layout__title">Simple Layout</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Nav link 1</a>
@@ -170,7 +170,7 @@ To use any MDL component, you must include the minified CSS and JavaScript files
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Simple Layout</span>
<span class="mdl-layout__title">Simple Layout</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Nav link 2</a>
<a class="mdl-navigation__link" href="#">Nav link 2</a>
@@ -194,7 +194,7 @@ A layout with a fixed header for larger screens and a collapsible drawer for sma
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Material Design Lite</span>
<span class="mdl-layout__title">Material Design Lite</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Hello</a>
@@ -206,7 +206,7 @@ A layout with a fixed header for larger screens and a collapsible drawer for sma
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design Lite</span>
<span class="mdl-layout__title">Material Design Lite</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Hello</a>
<a class="mdl-navigation__link" href="#">World.</a>
@@ -227,7 +227,7 @@ The same layout with a non-fixed header that scrolls with the content.
<header class="mdl-layout__header mdl-layout__header--scroll">
<img class="mdl-layout-icon"></img>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Material Design Lite</span>
<span class="mdl-layout__title">Material Design Lite</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Hello</a>
@@ -239,7 +239,7 @@ The same layout with a non-fixed header that scrolls with the content.
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design Lite</span>
<span class="mdl-layout__title">Material Design Lite</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Hello</a>
<a class="mdl-navigation__link" href="#">World.</a>
@@ -259,11 +259,11 @@ A layout with a fixed drawer that serves as sidebar navigation on larger screens
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Fixed drawer layout demo</span>
<span class="mdl-layout__title">Fixed drawer layout demo</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design Lite</span>
<span class="mdl-layout__title">Material Design Lite</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Hello</a>
<a class="mdl-navigation__link" href="#">World.</a>
@@ -282,7 +282,7 @@ A layout with a fixed drawer but no header.
```html
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design Lite</span>
<span class="mdl-layout__title">Material Design Lite</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Hello</a>
<a class="mdl-navigation__link" href="#">World.</a>
@@ -307,7 +307,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-layout__header` | Defines container as an MDL component | Required on header element |
| `mdl-layout-icon` | Used for adding an application icon. Gets concealed by menu icon if both are visible. | Goes on optional icon element |
| `mdl-layout__header-row` | Defines container as MDL header row | Required on header content div |
| `mdl-layout-title` | Defines layout title text | Required on layout title span |
| `mdl-layout__title` | Defines layout title text | Required on layout title span |
| `mdl-layout-spacer` | Used to align elements inside a header or drawer, by growing to fill remaining space. Commonly used for aligning elements to the right. | Goes on optional div following layout title |
| `mdl-navigation` | Defines container as MDL navigation group | Required on nav element |
| `mdl-navigation__link` | Defines anchor as MDL navigation link | Required on header and/or drawer anchor elements |
@@ -67,6 +67,7 @@
// Optional utility classes for formatting special blocks in this component.
.mdl-layout__title,
.mdl-layout-title {
display: block;
position: relative;
@@ -127,7 +128,8 @@
flex-shrink: 0;
}
& > .mdl-layout-title {
& > .mdl-layout__title,
& > .mdl-layout-tile {
line-height: $layout-desktop-header-height;
padding-left: $layout-header-desktop-indent;
@@ -3043,7 +3043,7 @@ ul, ol {
position: relative;
height: 36px;
min-width: 64px;
padding: 0 8px;
padding: 0 16px;
display: inline-block;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
@@ -3357,7 +3357,7 @@ input.mdl-button[type="submit"] {
.mdl-card__subtitle-text {
font-size: 14px;
color: grey;
color: rgba(0, 0, 0, 0.54);
margin: 0; }
.mdl-card__supporting-text {
@@ -5793,6 +5793,7 @@ input.mdl-button[type="submit"] {
width: 100%;
height: 100%; }
.mdl-layout__title,
.mdl-layout-title {
display: block;
position: relative;
@@ -5859,11 +5860,13 @@ input.mdl-button[type="submit"] {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0; }
.mdl-layout__drawer > .mdl-layout-title {
.mdl-layout__drawer > .mdl-layout__title,
.mdl-layout__drawer > .mdl-layout-tile {
line-height: 64px;
padding-left: 40px; }
@media screen and (max-width: 1024px) {
.mdl-layout__drawer > .mdl-layout-title {
.mdl-layout__drawer > .mdl-layout__title,
.mdl-layout__drawer > .mdl-layout-tile {
line-height: 56px;
padding-left: 16px; } }
.mdl-layout__drawer .mdl-navigation {

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -57,9 +57,6 @@ to modify the value programmatically; instead, use the MDL `change()` method. Fo
that *slider1* is a slider object and *newvalue* is a variable containing the desired value, do not
use `slider1.value = newvalue`; instead, use `slider1.MaterialSlider.change(newvalue)`.
## More information
For working examples of the **slider** component, see the MDL [slider demo page](www.github.com/google/material-design-lite/src/slider/demo.html).
## License
Copyright Google, 2015. Licensed under an Apache-2 license.
@@ -253,6 +253,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-js-button` | Assigns basic behavior to icon container | For expandable input fields, required on "outer" div's label element |
| `mdl-button--icon` | Defines label as an MDL icon container | For expandable input fields, required on "outer" div's label element |
| `mdl-input__expandable-holder` | Defines a container as an MDL component | For expandable input fields, required on "inner" div element |
| `is-invalid` | Defines the textfield as invalid on initial load. | Optional on `mdl-textfield` element |
(1) The "search" icon is used here as an example. Other icons can be used by modifying the text. For a list of available icons, see [this page](https://www.google.com/design/icons).
@@ -77,7 +77,7 @@ $performance_font: 'Helvetica', 'Arial', sans-serif !default;
@import "functions";
/* ========== IMAGES ========== */
$image_path: '/images';
$image_path: '/images' !default;
/* ========== Color & Themes ========== */
@@ -253,6 +253,7 @@ $card-text-color: unquote("rgb(#{$color-black})") !default;
$card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
$card-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
$card-border-color: rgba(0,0,0,0.1) !default;
$card-subtitle-color: unquote("rgba(#{$color-black}, 0.54)") !default;
/* ========== Sliders ========== */
@@ -469,7 +470,7 @@ $card-background-image-url: '' !default;
*/
$button-min-width: 64px !default;
$button-height: 36px !default;
$button-padding: 8px !default;
$button-padding: 16px !default;
$button-margin: 4px !default;
$button-border-radius: 2px !default;
@@ -494,10 +495,10 @@ $bar-height: 4px !default;
/* BADGE */
$badge-font-size: 12px !default;
$badge-color: unquote("rgb(#{$color-white})") !default;
$badge-color: unquote("rgb(#{$color-accent-contrast})") !default;
$badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
$badge-background: unquote("rgb(#{$color-accent})") !default;
$badge-background-inverse: unquote("rgba(#{$color-white},0.2)") !default;
$badge-background-inverse: unquote("rgba(#{$color-accent-contrast},0.2)") !default;
$badge-size : 22px !default;
$badge-padding: 2px !default;
@@ -19,7 +19,7 @@ $preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
$performance_font: 'Helvetica', 'Arial', sans-serif !default;
/* ========== IMAGES ========== */
$image_path: '/images';
$image_path: '/images' !default;
// ========= Color & Themes =========
@@ -190,6 +190,7 @@ $card-text-color: ($color-black) !default;
$card-image-placeholder-color: ($color-accent) !default;
$card-supporting-text-text-color: $color-black !default;
$card-border-color: rgba(0,0,0,0.1) !default;
$card-subtitle-color: rgba($color-black, 0.54) !default;
// ========= Sliders =========
@@ -406,7 +407,7 @@ $card-background-image-url: '' !default;
//
$button-min-width: 64px !default;
$button-height: 36px !default;
$button-padding: 8px !default;
$button-padding: 16px !default;
$button-margin: 4px !default;
$button-border-radius: 2px !default;
@@ -431,10 +432,10 @@ $bar-height: 4px !default;
// BADGE */
$badge-font-size: 12px !default;
$badge-color: $color-white !default;
$badge-color: $color-accent-contrast !default;
$badge-color-inverse: $color-accent !default;
$badge-background: $color-accent !default;
$badge-background-inverse: rgba($color-white,0.2) !default;
$badge-background-inverse: rgba($color-accent-contrast,0.2) !default;
$badge-size : 22px !default;
$badge-padding: 2px !default;
@@ -127,13 +127,6 @@ class MaterialDataTable extends MdlComponent {
// .addEventListener('change', -- .onChange.listen(<Event>);
checkbox.onChange.listen( _selectRow(checkbox, row, null));
if (row.dataset.containsKey(_constant.SELECTABLE_NAME)) {
checkbox.name = row.dataset[_constant.SELECTABLE_NAME];
}
if (row.dataset.containsKey(_constant.SELECTABLE_VALUE)) {
checkbox.value = row.dataset[_constant.SELECTABLE_VALUE];
}
} else if (optRows != null && optRows.isNotEmpty) {
// .addEventListener('change', -- .onChange.listen(<Event>);
@@ -457,7 +457,7 @@ class MaterialLayout extends MdlComponent {
/// Individual Tab
class MaterialLayoutTab {
final dom.Element tab; // using Element instead of AnchorElement makes mdl-layout-tab-Tag with href attrib possible
final dom.AnchorElement tab; // using Element instead of AnchorElement makes mdl-layout-tab-Tag with href attrib possible
final List<dom.AnchorElement> tabs;
final List<dom.HtmlElement> panels;
final MaterialLayout layout;
@@ -502,11 +502,28 @@ class MaterialLayoutTab {
if(tab.attributes["href"].startsWith("#")) {
event.preventDefault();
event.stopPropagation();
_selectTab();
}
});
//_selectTab();
//tab.show = _selectTab();
// .addEventListener('click', -> .onClick.listen(<MouseEvent>);
tab.onClick.listen( (final dom.MouseEvent event) {
event.preventDefault();
final String href = tab.href.split('#')[1];
final dom.Element panel = layout._content.querySelector('#' + href);
layout._resetTabState(tabs);
layout._resetPanelState(panels);
tab.classes.add(_cssClasses.IS_ACTIVE);
panel.classes.add(_cssClasses.IS_ACTIVE);
});
}
}
}
@@ -170,8 +170,12 @@ class MaterialTextfield extends MdlComponent {
eventStreams.add(element.onKeyDown.listen( _onKeyDown ));
}
final bool isInvalid = element.classes.contains(_cssClasses.IS_INVALID);
_updateClasses();
element.classes.add(_cssClasses.IS_UPGRADED);
if (isInvalid) {
element.classes.add(_cssClasses.IS_INVALID);
}
}
}
}
@@ -189,4 +189,3 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
| `mdl-data-table__cell--non-numeric` | Applies text formatting to data cell | Optional; goes on both table header and table data cells |
| (none) | Applies numeric formatting to header or data cell (default) | |
You may add `data-mdl-data-table-selectable-name` and `data-mdl-data-table-selectable-value` attributes to the *rows* of the table. If the table is selectable, these values will be added to the name and value of the created checkboxes.
Oops, something went wrong.

0 comments on commit f5af03f

Please sign in to comment.