Permalink
Browse files

reorg: Tag mdl-repeat changed to Attribute, Tag mdl-property changed …

…to Attribute (mdl-observe)
  • Loading branch information...
MikeMitterer committed Jul 22, 2015
1 parent 7a57dcf commit c0163364bce802f414c931a96adf247f9c3a7498
Showing with 249 additions and 211 deletions.
  1. +6 −6 example/mdlx_dnd/.sitegen/html/_content/index.html
  2. +6 −6 example/mdlx_dnd/web/index.html
  3. +7 −7 example/spa_model/.sitegen/html/_content/index.html
  4. +7 −7 example/spa_model/web/index.html
  5. +4 −4 example/spa_observe/.sitegen/html/_content/index.html
  6. +4 −4 example/spa_observe/web/index.html
  7. +2 −2 example/spa_repeat/.sitegen/html/_content/index.html
  8. +2 −2 example/spa_repeat/web/index.html
  9. +2 −2 example/spa_todo/.sitegen/html/_content/index.html
  10. +2 −2 example/spa_todo/lib/src/ToDoItem.dart
  11. +2 −2 example/spa_todo/web/index.html
  12. +8 −8 example/styleguide/.sitegen/html/_content/views/accordion.html
  13. +6 −6 example/styleguide/.sitegen/html/_content/views/dnd.html
  14. +7 −7 example/styleguide/.sitegen/html/_content/views/model.html
  15. +4 −4 example/styleguide/.sitegen/html/_content/views/observe.html
  16. +2 −2 example/styleguide/.sitegen/html/_content/views/repeat.html
  17. +2 −2 example/styleguide/.sitegen/html/_content/views/todo.html
  18. +8 −8 example/styleguide/.sitegen/html/_partials/usage/accordion/html.html
  19. +6 −6 example/styleguide/.sitegen/html/_partials/usage/dnd/html.html
  20. +7 −7 example/styleguide/.sitegen/html/_partials/usage/model/html.html
  21. +4 −4 example/styleguide/.sitegen/html/_partials/usage/observe/html.html
  22. +2 −2 example/styleguide/.sitegen/html/_partials/usage/repeat/html.html
  23. +2 −2 example/styleguide/.sitegen/html/_partials/usage/todo/html.html
  24. +8 −8 example/styleguide/.sitegen/html/_templates/default.html
  25. +2 −2 example/styleguide/lib/src/ToDoItem.dart
  26. +8 −8 example/styleguide/web/index.html
  27. +8 −8 example/styleguide/web/views/accordion.html
  28. +6 −6 example/styleguide/web/views/dnd.html
  29. +7 −7 example/styleguide/web/views/model.html
  30. +4 −4 example/styleguide/web/views/observe.html
  31. +2 −2 example/styleguide/web/views/repeat.html
  32. +2 −2 example/styleguide/web/views/todo.html
  33. +8 −8 example/styleguide/web/views/usage/accordion.html
  34. +6 −6 example/styleguide/web/views/usage/dnd.html
  35. +7 −7 example/styleguide/web/views/usage/model.html
  36. +4 −4 example/styleguide/web/views/usage/observe.html
  37. +2 −2 example/styleguide/web/views/usage/repeat.html
  38. +2 −2 example/styleguide/web/views/usage/todo.html
  39. +2 −2 lib/mdltemplate.dart
  40. +1 −1 lib/src/components/MaterialAccordion.dart
  41. +3 −0 lib/src/dnd/MaterialDraggable.dart
  42. +3 −0 lib/src/dnd/MaterialDropZone.dart
  43. +3 −0 lib/src/template/components/MaterialModel.dart
  44. +1 −0 lib/src/template/components/MaterialMustache.dart
  45. +20 −22 lib/src/template/components/{MaterialProperty.dart → MaterialObserve.dart}
  46. +38 −8 lib/src/template/components/MaterialRepeat.dart
@@ -10,13 +10,13 @@ <h2>Drag & Drop (experimental)</h2>
<div class="choose ">
<h6>Choose language</h6>
<mdl-repeat class="source langbox mdl-dnd__drag-container" for-each="language in languages">
<div mdl-repeat="language in languages" class="source langbox mdl-dnd__drag-container" >
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<mdl-draggable template class="language" consumes="language" drop-zone="{{language.type}}">
{{language.name}}
</mdl-draggable>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</mdl-repeat>
</div>
</div>
<div class="accept">
@@ -28,13 +28,13 @@ <h6>Programming languages</h6>
<!-- programming language item becomes a 'draggable' item and can be dragged to 'trash' -->
<!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
<mdl-repeat for-each="language in programming" class="mdl-dnd__drag-container">
<div mdl-repeat="language in programming" class="mdl-dnd__drag-container">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<mdl-draggable template class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</mdl-repeat>
</div>
</mdl-dropzone>
</div>
@@ -46,13 +46,13 @@ <h6>Natural languages</h6>
<!-- natural language item becomes a 'draggable' item and can be dragged to 'trash' -->
<!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
<mdl-repeat for-each="language in natural" class="mdl-dnd__drag-container">
<div mdl-repeat="language in natural" class="mdl-dnd__drag-container">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<mdl-draggable template class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</mdl-repeat>
</div>
</mdl-dropzone>
</div>
</div>
@@ -54,13 +54,13 @@ <h2>Drag & Drop (experimental)</h2>
<div class="danddcontainer">
<div class="choose ">
<h6>Choose language</h6>
<mdl-repeat class="source langbox mdl-dnd__drag-container" for-each="language in languages">
<div mdl-repeat="language in languages" class="source langbox mdl-dnd__drag-container" >
<mdl-draggable template class="language" consumes="language" drop-zone="{{language.type}}">
{{language.name}}
</mdl-draggable>
</mdl-repeat>
</div>
</div>
<div class="accept">
<div class="langbox">
@@ -69,13 +69,13 @@ <h6>Programming languages</h6>
on-drop-success="addToProgrammingLanguages(data)">
<!-- programming language item becomes a 'draggable' item and can be dragged to 'trash' -->
<!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
<mdl-repeat for-each="language in programming" class="mdl-dnd__drag-container">
<div mdl-repeat="language in programming" class="mdl-dnd__drag-container">
<mdl-draggable template class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
</mdl-repeat>
</div>
</mdl-dropzone>
</div>
<div class="langbox">
@@ -84,13 +84,13 @@ <h6>Natural languages</h6>
on-drop-success="addToNaturalLanguages(data)">
<!-- natural language item becomes a 'draggable' item and can be dragged to 'trash' -->
<!-- mdl-repeat takes its for-each param from the next SCOPE-AWARE-Parent (mld-dropzone is not SCOPE-AWARE) -->
<mdl-repeat for-each="language in natural" class="mdl-dnd__drag-container">
<div mdl-repeat="language in natural" class="mdl-dnd__drag-container">
<mdl-draggable template class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
</mdl-repeat>
</div>
</mdl-dropzone>
</div>
</div>
@@ -60,13 +60,13 @@
</div>
<div class="output mdl-color--200 mdl-color-text--white">
Text in TextField: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.minimodel"></mdl-property><br>
OS1: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.os1"></mdl-property><br>
OS2: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.os2"></mdl-property><br>
WIFI: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.wifi"></mdl-property><br>
Light #1: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.lights[0]"></mdl-property><br>
Light #2: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.lights[1]"></mdl-property><br>
Intensity: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.intensity"></mdl-property><br>
Text in TextField: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.minimodel"></span><br>
OS1: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.os1"></span><br>
OS2: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.os2"></span><br>
WIFI: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.wifi"></span><br>
Light #1: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.lights[0]"></span><br>
Light #2: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.lights[1]"></span><br>
Intensity: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.intensity"></span><br>
</div>
</div>
@@ -102,13 +102,13 @@
mdl-model="modelTest.intensity"/>
</div>
<div class="output mdl-color--200 mdl-color-text--white">
Text in TextField: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.minimodel"></mdl-property><br>
OS1: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.os1"></mdl-property><br>
OS2: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.os2"></mdl-property><br>
WIFI: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.wifi"></mdl-property><br>
Light #1: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.lights[0]"></mdl-property><br>
Light #2: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.lights[1]"></mdl-property><br>
Intensity: <mdl-property class="mdl-color-text--accent-500" observe="modelTest.intensity"></mdl-property><br>
Text in TextField: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.minimodel"></span><br>
OS1: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.os1"></span><br>
OS2: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.os2"></span><br>
WIFI: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.wifi"></span><br>
Light #1: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.lights[0]"></span><br>
Light #2: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.lights[1]"></span><br>
Intensity: <span class="mdl-color-text--accent-500" mdl-observe="modelTest.intensity"></span><br>
</div>
</div>
@@ -8,18 +8,18 @@
If you "REMOVE" "German" - it will be replace with "Austrian"
</p>
<p>
Now it's: <mdl-property observe="time"></mdl-property><br>
Nr. of records: <mdl-property observe="records"></mdl-property><br>
Now it's: <span mdl-observe="time"></span><br>
Nr. of records: <span mdl-observe="records"></span><br>
</p>
<mdl-repeat for-each="language in languages">
<div mdl-repeat="language in languages">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<div template class="language" >
Language: {{language.name}} ({{language.type}})
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
data-mdl-click="remove({{language.name}})">Remove</button>
</div>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</mdl-repeat>
</div>
</div>
@@ -55,18 +55,18 @@
If you "REMOVE" "German" - it will be replace with "Austrian"
</p>
<p>
Now it's: <mdl-property observe="time"></mdl-property><br>
Nr. of records: <mdl-property observe="records"></mdl-property><br>
Now it's: <span mdl-observe="time"></span><br>
Nr. of records: <span mdl-observe="records"></span><br>
</p>
<mdl-repeat for-each="language in languages">
<div mdl-repeat="language in languages">
<div template class="language" >
Language: {{language.name}} ({{language.type}})
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
data-mdl-click="remove({{language.name}})">Remove</button>
</div>
</mdl-repeat>
</div>
</div>
</section>
@@ -3,7 +3,7 @@
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/spa_repeat/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<mdl-repeat id="main">
<div mdl-repeat id="main">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<div template >
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check-{{id}}">
@@ -15,7 +15,7 @@
data-mdl-click="remove()">Remove</button>
</div>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</mdl-repeat>
</div>
</div>
@@ -50,7 +50,7 @@
<div class="content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<section class="demo-section demo-section--repeat">
<div class="demo-preview-block">
<mdl-repeat id="main">
<div mdl-repeat id="main">
<div template >
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check-{{id}}">
@@ -62,7 +62,7 @@
data-mdl-click="remove()">Remove</button>
</div>
</mdl-repeat>
</div>
</div>
</section>
@@ -11,8 +11,8 @@
<button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
Add
</button>
<mdl-property observe="nrOfItemsDone"></mdl-property> /
<mdl-property observe="nrOfItems"></mdl-property>
<span mdl-observe="nrOfItemsDone"></span> /
<span mdl-observe="nrOfItems"></span>
<div id="todo" class="todo-items"></div>
@@ -136,7 +136,7 @@ class ToDoItemComponent extends MdlTemplateComponent implements ScopeAware {
@override
String template = """
<mdl-repeat for-each="item in items">
<div mdl-repeat="item in items">
{{! ----- Turn off default mustache interpretation ---- }} {{= | | =}}
<div template class="row">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check{{item.id}}">
@@ -154,7 +154,7 @@ class ToDoItemComponent extends MdlTemplateComponent implements ScopeAware {
</button>
</div>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</mdl-repeat>
</div>
""".trim().replaceAll(new RegExp(r"\s+")," ");
}
@@ -57,8 +57,8 @@
<button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
Add
</button>
<mdl-property observe="nrOfItemsDone"></mdl-property> /
<mdl-property observe="nrOfItems"></mdl-property>
<span mdl-observe="nrOfItemsDone"></span> /
<span mdl-observe="nrOfItems"></span>
<div id="todo" class="todo-items"></div>
</div>
<!-- <script type="application/dart" src="main.dart"></script> -->
@@ -4,22 +4,22 @@
</div>
<div class="demo-preview-block">
<h5>Multiple sections can be open at the same time</h5>
<div class="mdl-accordion-group mdl-js-accordion mdl-js-ripple-effect">
<div class="mdl-accordion">
<div class="mdl-accordion-group mdl-js-ripple-effect">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 1<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 2<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
</div>
</div>
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 3<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
@@ -29,22 +29,22 @@ <h5 class="mdl-accordion--header">Header</h5>
</div>
<div class="preview-block sample">
<h5>Only one section is open</h5>
<div class="mdl-accordion-group mdl-js-accordion mdl-accordion--radio-type mdl-js-ripple-effect">
<div class="mdl-accordion">
<div class="mdl-accordion-group mdl-accordion--radio-type mdl-js-ripple-effect">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 1<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 2<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
<p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
</div>
</div>
<div class="mdl-accordion">
<div class="mdl-accordion mdl-js-accordion">
<label class="mdl-accordion__label">Panel 3<i class="material-icons indicator">chevron_right</i></label>
<div class="mdl-accordion--content">
<h5 class="mdl-accordion--header">Header</h5>
Oops, something went wrong.

0 comments on commit c016336

Please sign in to comment.