Permalink
Browse files

doc: New samples for MaterialObserve and Formatter in styleguide

  • Loading branch information...
MikeMitterer committed Aug 14, 2015
1 parent 5bd4c35 commit 8ccffca22bff8eab7fe2041f30e59073c6e3333f
Showing with 519 additions and 230 deletions.
  1. +8 −0 example/mdld_formatter/.sitegen/html/_content/index.html
  2. +4 −1 example/mdld_formatter/web/demo.scss
  3. +6 −0 example/mdld_formatter/web/index.html
  4. +3 −0 example/mdld_formatter/web/main.dart
  5. +10 −8 example/mdld_observe/.sitegen/html/_content/index.html
  6. +9 −5 example/mdld_observe/web/demo.scss
  7. +9 −8 example/mdld_observe/web/index.html
  8. +3 −3 example/mdld_observe/web/main.dart
  9. +1 −0 example/mdld_repeat/.sitegen/html/_content/index.html
  10. +1 −0 example/mdld_repeat/web/index.html
  11. +17 −15 example/spa_todo/lib/src/ToDoItem.dart
  12. +3 −3 example/spa_todo/web/main.dart
  13. +15 −9 example/styleguide/.sitegen/html/_content/views/dnd.html
  14. +6 −0 example/styleguide/.sitegen/html/_content/views/formatter.html
  15. +31 −12 example/styleguide/.sitegen/html/_content/views/observe.html
  16. +12 −9 example/styleguide/.sitegen/html/_content/views/repeat.html
  17. +15 −9 example/styleguide/.sitegen/html/_partials/usage/dnd/html.html
  18. +3 −0 example/styleguide/.sitegen/html/_partials/usage/formatter/dart.html
  19. +6 −0 example/styleguide/.sitegen/html/_partials/usage/formatter/html.html
  20. +33 −3 example/styleguide/.sitegen/html/_partials/usage/observe/dart.html
  21. +31 −12 example/styleguide/.sitegen/html/_partials/usage/observe/html.html
  22. +12 −9 example/styleguide/.sitegen/html/_partials/usage/repeat/html.html
  23. +3 −3 example/styleguide/.sitegen/html/_partials/usage/todo/dart.html
  24. +17 −15 example/styleguide/lib/src/ToDoItem.dart
  25. +1 −0 example/styleguide/web/assets/styles/_demo.scss
  26. +4 −1 example/styleguide/web/assets/styles/_demo/_formatter.scss
  27. +14 −0 example/styleguide/web/assets/styles/_demo/_observe.scss
  28. +51 −2 example/styleguide/web/main.dart
  29. +15 −9 example/styleguide/web/views/dnd.html
  30. +6 −0 example/styleguide/web/views/formatter.html
  31. +31 −12 example/styleguide/web/views/observe.html
  32. +12 −9 example/styleguide/web/views/repeat.html
  33. +15 −9 example/styleguide/web/views/usage/dnd.html
  34. +8 −0 example/styleguide/web/views/usage/formatter.html
  35. +57 −15 example/styleguide/web/views/usage/observe.html
  36. +12 −9 example/styleguide/web/views/usage/repeat.html
  37. +3 −3 example/styleguide/web/views/usage/todo.html
  38. +9 −5 lib/src/formatter/ChooseFormatter.dart
  39. +8 −6 lib/src/formatter/LowerCaseFormatter.dart
  40. +7 −20 lib/src/formatter/NumberFormatter.dart
  41. +8 −6 lib/src/formatter/UpperCaseFormatter.dart
@@ -3,10 +3,18 @@
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/master/example/mdld_formatter/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<h5>Number-Formatter</h5>
PI: <span mdl-observe="pi"></span><br>
PI with formatter: <span mdl-observe="pi | number(value,2)"></span><br>
<br>
<h5>Uppercase / Lowercase</h5>
Name: <span mdl-observe="name"></span><br>
Name with formatter: <span mdl-observe="name | uppercase(value)"></span> (UpperCaseFormatter)<br>
Name with formatter: <span mdl-observe="name | lowercase(value)"></span> (LowerCaseFormatter)<br>
<br>
<h5>Choose-Formatter</h5>
Status is: <span mdl-observe="checkStatus | choose(value, 'Valid!','OFF')"
mdl-class="!checkStatus : 'status-off'"></span>
</div>
@@ -1,5 +1,8 @@
//@import "packages/mdl/assets/styles/material-design-lite";
.demo-page--formatter, .demo-section--formatter {
.status-off {
color: red;
font-weight: bold;
}
}
@@ -49,12 +49,18 @@
<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--formatter">
<div class="demo-preview-block">
<h5>Number-Formatter</h5>
PI: <span mdl-observe="pi"></span><br>
PI with formatter: <span mdl-observe="pi | number(value,2)"></span><br>
<br>
<h5>Uppercase / Lowercase</h5>
Name: <span mdl-observe="name"></span><br>
Name with formatter: <span mdl-observe="name | uppercase(value)"></span> (UpperCaseFormatter)<br>
Name with formatter: <span mdl-observe="name | lowercase(value)"></span> (LowerCaseFormatter)<br>
<br>
<h5>Choose-Formatter</h5>
Status is: <span mdl-observe="checkStatus | choose(value, 'Valid!','OFF')"
mdl-class="!checkStatus : 'status-off'"></span>
</div>
</section>
</div>
@@ -15,6 +15,7 @@ class Application extends MaterialApplication {
final ObservableProperty<double> pi = new ObservableProperty<double>(3.14159265359);
final ObservableProperty<String> name = new ObservableProperty<String>("Mike");
final ObservableProperty<bool> checkStatus = new ObservableProperty<bool>(false);
final List<String> xmen;
@@ -30,6 +31,8 @@ class Application extends MaterialApplication {
new Timer.periodic(new Duration(milliseconds: 500),(final Timer timer) {
final int index = rnd.nextInt(xmen.length);
name.value = xmen[index];
checkStatus.value = index % 2;
});
}
@@ -4,16 +4,13 @@
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<p>
Wait 2 secs - A timer will add 10 more List-Items!<br>
If you "REMOVE" "German" - it will be replace with "Austrian"
</p>
<p>
<h5>Customized 'ObservableProperty'</h5>
Now it's: <span mdl-observe="time"></span><br>
Nr. of records: <span mdl-observe="records"></span><br>
</p>
<div>
Observe Object (_Name): <span mdl-observe="isNameNull | choose(value, '(Name-Object is null!)','')"></span>
<div mdl-observe="name" class="name mdl-color--100">
<div class="object-test">
<h5>Observes Object (_Name) with 'null' check</h5>
<div mdl-observe="isNameNull | choose(value, '(Name-Object is null!)','')"></div>
<div mdl-observe="nameObject" class="name mdl-color--100">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<template>
<div>
@@ -26,6 +23,11 @@
</div>
</div>
<p>
<h5>Observable-List</h5>
Wait 2 secs - A timer will add 10 more List-Items!<br>
If you "REMOVE" "German" - it will be replace with "Austrian"<br><br>
Nr. of records: <strong><span mdl-observe="records"></span></strong><br>
<div mdl-repeat="language in languages">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<template>
@@ -2,12 +2,16 @@
.demo-page--observe, .demo-section--observe {
[mdl-observe].name {
padding: 8px;
border-radius: 8px;
.object-test {
min-height: 120px;
&:empty {
display: none;
[mdl-observe].name {
padding : 8px;
border-radius : 8px;
&:empty {
display : none;
}
}
}
@@ -50,16 +50,13 @@
<section class="demo-section demo-section--observe">
<div class="demo-preview-block">
<p>
Wait 2 secs - A timer will add 10 more List-Items!<br>
If you "REMOVE" "German" - it will be replace with "Austrian"
</p>
<p>
<h5>Customized 'ObservableProperty'</h5>
Now it's: <span mdl-observe="time"></span><br>
Nr. of records: <span mdl-observe="records"></span><br>
</p>
<div>
Observe Object (_Name): <span mdl-observe="isNameNull | choose(value, '(Name-Object is null!)','')"></span>
<div mdl-observe="name" class="name mdl-color--100">
<div class="object-test">
<h5>Observes Object (_Name) with 'null' check</h5>
<div mdl-observe="isNameNull | choose(value, '(Name-Object is null!)','')"></div>
<div mdl-observe="nameObject" class="name mdl-color--100">
<template>
<div>
@@ -72,6 +69,10 @@
</div>
</div>
<p>
<h5>Observable-List</h5>
Wait 2 secs - A timer will add 10 more List-Items!<br>
If you "REMOVE" "German" - it will be replace with "Austrian"<br><br>
Nr. of records: <strong><span mdl-observe="records"></span></strong><br>
<div mdl-repeat="language in languages">
<template>
@@ -39,7 +39,7 @@ class Application extends MaterialApplication {
final ObservableList<_Language> languages = new ObservableList<_Language>();
final ObservableProperty<String> time = new ObservableProperty<String>("",interval: new Duration(seconds: 1));
final ObservableProperty<String> records = new ObservableProperty<String>("");
final ObservableProperty<_Name> name = new ObservableProperty<_Name>(new _Name("Mike","Mitterer"));
final ObservableProperty<_Name> nameObject = new ObservableProperty<_Name>(null);
final ObservableProperty<bool> isNameNull = new ObservableProperty<bool>(true);
final List<_Name> _names = new List<_Name>();
@@ -72,8 +72,8 @@ class Application extends MaterialApplication {
int counter = 0;
new Timer.periodic(new Duration(milliseconds: 1000),(final Timer timer) {
name.value = _names[counter % 4]; // 0,1,2,...
isNameNull.value = name.value == null;
nameObject.value = _names[counter % 4]; // 0,1,2,...
isNameNull.value = nameObject.value == null;
counter++;
});
}
@@ -3,6 +3,7 @@
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/master/example/mdld_repeat/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<h5>Displays 'Names-List' via public MaterialRepeat functions</h5>
<div mdl-repeat id="main">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<template>
@@ -49,6 +49,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">
<h5>Handles 'Names' via public MaterialRepeat functions</h5>
<div mdl-repeat id="main">
<template>
@@ -138,21 +138,23 @@ class ToDoItemComponent extends MdlTemplateComponent implements ScopeAware {
String template = """
<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}}">
{{#item.checked}}
<input type="checkbox" id="check{{item.id}}" class="mdl-checkbox__input" checked data-mdl-click="check({{item.id}})"/>
{{/item.checked}}
{{^item.checked}}
<input type="checkbox" id="check{{item.id}}" class="mdl-checkbox__input" data-mdl-click="check({{item.id}})"/>
{{/item.checked}}
<span class="mdl-checkbox__label">{{item.name}}</span>
</label>
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
data-mdl-click="remove({{item.id}})">
Remove
</button>
</div>
<template>
<div class="row">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check{{item.id}}">
{{#item.checked}}
<input type="checkbox" id="check{{item.id}}" class="mdl-checkbox__input" checked data-mdl-click="check({{item.id}})"/>
{{/item.checked}}
{{^item.checked}}
<input type="checkbox" id="check{{item.id}}" class="mdl-checkbox__input" data-mdl-click="check({{item.id}})"/>
{{/item.checked}}
<span class="mdl-checkbox__label">{{item.name}}</span>
</label>
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
data-mdl-click="remove({{item.id}})">
Remove
</button>
</div>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
""".trim().replaceAll(new RegExp(r"\s+")," ");
@@ -12,8 +12,8 @@ import "package:mdl_todo_sample/todo.dart";
class Application implements MaterialApplication {
final Logger _logger = new Logger('main.Application');
final ObservableProperty<String> nrOfItems = new ObservableProperty<String>("");
final ObservableProperty<String> nrOfItemsDone = new ObservableProperty<String>("",
final ObservableProperty<int> nrOfItems = new ObservableProperty<int>(0);
final ObservableProperty<int> nrOfItemsDone = new ObservableProperty<int>(0,
interval: new Duration(milliseconds: 500));
Application() {
@@ -25,7 +25,7 @@ class Application implements MaterialApplication {
final MaterialTextfield item = MaterialTextfield.widget(dom.querySelector("#item"));
final ToDoItemComponent todo = ToDoItemComponent.widget(dom.querySelector("#todo"));
nrOfItems.observes( () => todo.items.length > 0 ? todo.items.length.toString() : "<no records>");
nrOfItems.observes( () => todo.items.length );
nrOfItemsDone.observes(() {
int done = 0;
todo.items.forEach((final ToDoItem item) { done += item.checked ? 1 : 0; });
@@ -9,9 +9,11 @@ <h2>Drag & Drop (experimental)</h2>
<h6>Choose language</h6>
<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>
<template>
<mdl-draggable class="language" consumes="language" drop-zone="{{language.type}}">
{{language.name}}
</mdl-draggable>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
</div>
@@ -22,9 +24,11 @@ <h6>Programming languages</h6>
on-drop-success="addToProgrammingLanguages(data)">
<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>
<template>
<mdl-draggable class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
</mdl-dropzone>
@@ -35,9 +39,11 @@ <h6>Natural languages</h6>
on-drop-success="addToNaturalLanguages(data)">
<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>
<template>
<mdl-draggable class="language" consumes="language" drop-zone="trash">
{{language.name}}
</mdl-draggable>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
</mdl-dropzone>
@@ -3,11 +3,17 @@
Loading...
</div>
<div class="demo-preview-block">
<h5>Number-Formatter</h5>
PI: <span mdl-observe="pi"></span><br>
PI with formatter: <span mdl-observe="pi | number(value,2)"></span><br>
<br>
<h5>Uppercase / Lowercase</h5>
Name: <span mdl-observe="name"></span><br>
Name with formatter: <span mdl-observe="name | uppercase(value)"></span> (UpperCaseFormatter)<br>
Name with formatter: <span mdl-observe="name | lowercase(value)"></span> (LowerCaseFormatter)<br>
<br>
<h5>Choose-Formatter</h5>
Status is: <span mdl-observe="checkStatus | choose(value, 'Valid!','OFF')"
mdl-class="!checkStatus : 'status-off'"></span>
</div>
</section>
@@ -4,21 +4,40 @@
</div>
<div class="demo-preview-block">
<p>
Wait 2 secs - A timer will add 10 more List-Items!<br>
If you "REMOVE" "German" - it will be replace with "Austrian"
</p>
<p>
<h5>Customized 'ObservableProperty'</h5>
Now it's: <span mdl-observe="time"></span><br>
Nr. of records: <span mdl-observe="records"></span><br>
</p>
<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 class="object-test">
<h5>Observes Object (_Name) with 'null' check</h5>
<div mdl-observe="isNameNull | choose(value, '(Name-Object is null!)','')"></div>
<div mdl-observe="nameObject" class="name mdl-color--100">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<template>
<div>
Firstname: {{first}},<br>
Last name: {{last}}<br>
<div>Text in <strong>DIV</strong></div>
</div>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
<p>
<h5>Observable-List</h5>
Wait 2 secs - A timer will add 10 more List-Items!<br>
If you "REMOVE" "German" - it will be replace with "Austrian"<br><br>
Nr. of records: <strong><span mdl-observe="records"></span></strong><br>
<div mdl-repeat="language in languages">
{{! ----- Turn off default mustache interpretation (sitegen) ---- }} {{= | | =}}
<template>
<div 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>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
</p>
</div>
</section>
@@ -3,17 +3,20 @@
Loading...
</div>
<div class="demo-preview-block">
<h5>Displays 'Names-List' via public MaterialRepeat functions</h5>
<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}}">
<input type="checkbox" id="check-{{id}}" class="mdl-checkbox__input"
data-mdl-click="clicked('{{name}}')" />
<span class="mdl-checkbox__label">Repeat me: <strong>{{name}}</strong> (ID: {{id}})</span>
</label>
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
data-mdl-click="remove()">Remove</button>
</div>
<template>
<div>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="check-{{id}}">
<input type="checkbox" id="check-{{id}}" class="mdl-checkbox__input"
data-mdl-click="clicked('{{name}}')" />
<span class="mdl-checkbox__label">Repeat me: <strong>{{name}}</strong> (ID: {{id}})</span>
</label>
<button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect"
data-mdl-click="remove()">Remove</button>
</div>
</template>
|= {{ }} =| {{! ----- Turn on mustache ---- }}
</div>
</div>
Oops, something went wrong.

0 comments on commit 8ccffca

Please sign in to comment.