Permalink
Browse files

doc: mdl-attribute + mdl-class added to styleguide

  • Loading branch information...
MikeMitterer committed Jul 23, 2015
1 parent bc15126 commit f2fa90da01124968a1be3cbc968e6cb99eef7e7c
Showing with 1,150 additions and 144 deletions.
  1. +23 −0 example/mdld_attribute/.sitegen/html/_content/index.html
  2. 0 example/{spa_class → mdld_attribute}/.sitegen/site.yaml
  3. +33 −0 example/mdld_attribute/pubspec.yaml
  4. +23 −0 example/mdld_attribute/web/demo.scss
  5. +101 −0 example/mdld_attribute/web/index.html
  6. +50 −0 example/mdld_attribute/web/main.dart
  7. +1 −1 example/{spa_class → mdld_class}/.sitegen/html/_content/index.html
  8. 0 example/{spa_model → mdld_class}/.sitegen/site.yaml
  9. 0 example/{spa_class → mdld_class}/pubspec.yaml
  10. 0 example/{spa_class → mdld_class}/web/demo.scss
  11. 0 example/{spa_class → mdld_class}/web/index.html
  12. 0 example/{spa_class → mdld_class}/web/main.dart
  13. 0 example/{spa_model → mdld_model}/.sitegen/html/_content/index.html
  14. 0 example/{spa_observe → mdld_model}/.sitegen/site.yaml
  15. 0 example/{spa_model → mdld_model}/pubspec.yaml
  16. 0 example/{spa_model → mdld_model}/web/README.md
  17. 0 example/{spa_model → mdld_model}/web/demo.scss
  18. 0 example/{spa_model → mdld_model}/web/index.html
  19. 0 example/{spa_model → mdld_model}/web/main.dart
  20. 0 example/{spa_observe → mdld_observe}/.sitegen/html/_content/index.html
  21. 0 example/{spa_repeat → mdld_observe}/.sitegen/site.yaml
  22. 0 example/{spa_observe → mdld_observe}/pubspec.yaml
  23. 0 example/{spa_observe → mdld_observe}/web/demo.scss
  24. 0 example/{spa_observe → mdld_observe}/web/index.html
  25. 0 example/{spa_observe → mdld_observe}/web/main.dart
  26. 0 example/{spa_observe → mdld_observe}/web/views/home.html
  27. 0 example/{spa_observe → mdld_observe}/web/views/slider.html
  28. 0 example/{spa_observe → mdld_observe}/web/views/test.html
  29. 0 example/{spa_observe → mdld_observe}/web/views/test2.html
  30. 0 example/{spa_repeat → mdld_repeat}/.sitegen/html/_content/index.html
  31. +2 −0 example/mdld_repeat/.sitegen/site.yaml
  32. 0 example/{spa_repeat → mdld_repeat}/pubspec.yaml
  33. 0 example/{spa_repeat → mdld_repeat}/web/demo.scss
  34. 0 example/{spa_repeat → mdld_repeat}/web/index.html
  35. 0 example/{spa_repeat → mdld_repeat}/web/main.dart
  36. 0 example/{spa_repeat → mdld_repeat}/web/views/home.html
  37. 0 example/{spa_repeat → mdld_repeat}/web/views/slider.html
  38. 0 example/{spa_repeat → mdld_repeat}/web/views/test.html
  39. 0 example/{spa_repeat → mdld_repeat}/web/views/test2.html
  40. +23 −0 example/styleguide/.sitegen/html/_content/views/attribute.html
  41. +17 −0 example/styleguide/.sitegen/html/_content/views/class.html
  42. +1 −1 example/styleguide/.sitegen/html/_content/views/samples.html
  43. +8 −0 example/styleguide/.sitegen/html/_content/views/usage/attribute.html
  44. +8 −0 example/styleguide/.sitegen/html/_content/views/usage/class.html
  45. +3 −1 example/styleguide/.sitegen/html/_data/{templatecomponents.json → directives.json}
  46. +5 −2 example/styleguide/.sitegen/html/_data/samples.json
  47. +5 −0 example/styleguide/.sitegen/html/_data/spas.json
  48. +32 −0 example/styleguide/.sitegen/html/_partials/usage/attribute/dart.html
  49. +18 −0 example/styleguide/.sitegen/html/_partials/usage/attribute/html.html
  50. +2 −0 example/styleguide/.sitegen/html/_partials/usage/attribute/readme.html
  51. +32 −0 example/styleguide/.sitegen/html/_partials/usage/class/dart.html
  52. +12 −0 example/styleguide/.sitegen/html/_partials/usage/class/html.html
  53. +2 −0 example/styleguide/.sitegen/html/_partials/usage/class/readme.html
  54. +22 −11 example/styleguide/.sitegen/html/_templates/default.html
  55. +2 −0 example/styleguide/web/assets/styles/_demo.scss
  56. +21 −0 example/styleguide/web/assets/styles/_demo/_attribute.scss
  57. +18 −0 example/styleguide/web/assets/styles/_demo/_class.scss
  58. +26 −12 example/styleguide/web/index.html
  59. +12 −0 example/styleguide/web/main.dart
  60. +23 −0 example/styleguide/web/views/attribute.html
  61. +17 −0 example/styleguide/web/views/class.html
  62. +82 −40 example/styleguide/web/views/samples.html
  63. +81 −0 example/styleguide/web/views/usage/attribute.html
  64. +75 −0 example/styleguide/web/views/usage/class.html
  65. +3 −0 lib/mdl.dart
  66. +63 −0 lib/mdldirective.dart
  67. +0 −10 lib/mdltemplate.dart
  68. +1 −1 lib/src/components/MaterialAccordion.dart
  69. +4 −0 lib/src/components/MaterialTextfield.dart
  70. +5 −3 lib/src/core/MdlComponent.dart
  71. +174 −0 lib/src/directive/components/MaterialAttribute.dart
  72. +37 −37 lib/src/{template → directive}/components/MaterialClass.dart
  73. +2 −2 lib/src/{template → directive}/components/MaterialModel.dart
  74. +2 −2 lib/src/{template → directive}/components/MaterialObserve.dart
  75. +11 −11 lib/src/{template → directive}/components/model/ModelObserver.dart
  76. +2 −2 lib/src/{template → directive}/components/model/ModelObserverFactory.dart
  77. +51 −0 lib/src/directive/utils.dart
  78. +2 −2 tool/grind.dart
  79. +12 −5 tool/grinder/samples.dart
  80. +1 −1 tool/templates/content.tmpl.html
@@ -0,0 +1,23 @@
title: ATTRIBUTE
samplename: attribute
sampleurl: https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/spa_attribute/web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div class="demo-preview-block">
<div class="controls">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample-text-attribute" mdl-attribute="!checkAttribute : 'disabled' "/>
<label class="mdl-textfield__label" for="sample-text-attribute" mdl-class="checkAttribute : 'enabled'">
<span class="enabled">Type something</span>
<span class="disabled">I'm Disabled</span>
</label>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" mdl-attribute="!checkAttribute : 'disabled' ">Submit</button>
</div>
<div class="switches">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-attribute">
<input type="checkbox" id="switch-attribute" class="mdl-switch__input" mdl-model="checkAttribute"/>
<span class="mdl-switch__label">Turn 'disabled' on/off</span>
</label>
</div>
</div>
@@ -0,0 +1,33 @@
name: mdl_Attribute_sample
description: Material Design Lite 'Attribute' Sample
version: 0.1.0
author: Mike Mitterer <office@mikemitterer.at>
homepage: https://github.com/MikeMitterer/dart-material-design-lite
dependencies:
browser: any
intl: any
args: any
validate: any
browser_detect: any
logging: any
logging_handlers: any
console_log_handler: any
# path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
mdl:
path: ../../
di: any
transformers:
- di
# - $dart2js:
# minify: false
# sourceMaps: true
@@ -0,0 +1,23 @@
//@import "packages/mdl/assets/styles/material-design-lite";
.demo-page--attribute, .demo-section--attribute {
.mdl-textfield__label {
> .enabled {
display: none;
}
> .disabled {
display: inline;
}
&.enabled > {
.enabled {
display: inline;
}
.disabled {
display: none;
}
}
}
}
@@ -0,0 +1,101 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Material Design Lite (MDL/Dart) for Dart is a library of components for web developers based on Google's Material Design, ported to Dart.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ATTRIBUTE</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<!--<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>-->
<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
<link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
<link rel="stylesheet" href="prism-default.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="styles.css">
<style>
div.loading { display: none; }
body.mdl-upgrading > * { display: none; }
body.mdl-upgrading div.loading { display: block; }
header, body { padding: 0; margin: 0; }
</style>
</head>
<body class="demo-page demo-page--attribute mdl-upgrading"> <div class="loading">Loading...</div>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-color--grey-100">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">ATTRIBUTE-Sample</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>
<div class="ribbon mdl-color--primary"></div>
<main class="mdl-layout__content">
<div class="container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<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--attribute">
<div class="demo-preview-block">
<div class="controls">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample-text-attribute" mdl-attribute="!checkAttribute : 'disabled' "/>
<label class="mdl-textfield__label" for="sample-text-attribute" mdl-class="checkAttribute : 'enabled'">
<span class="enabled">Type something</span>
<span class="disabled">I'm Disabled</span>
</label>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" mdl-attribute="!checkAttribute : 'disabled' ">Submit</button>
</div>
<div class="switches">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-attribute">
<input type="checkbox" id="switch-attribute" class="mdl-switch__input" mdl-model="checkAttribute"/>
<span class="mdl-switch__label">Switch 'disabled' on/off</span>
</label>
</div>
</div>
</section>
</div>
</div>
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<p class="sitegen-link">Page was generated with <a href="https://pub.dartlang.org/packages/sitegen" target="_blank">SiteGen.</a>
<span class="additional-info">The static site generator for Dart.</span></p>
</div>
<div class="mdl-mini-footer--right-section">
<p class="mm-link">Brought to you by:
<a href="http://www.mikemitterer.at/" target="_blank">Mike Mitterer, IT-Consulting and Development Ltd.</a>
</p>
</div>
</footer>
</div>
<a href="https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/spa_attribute/web" target="_blank" id="view-source">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--accent"><i class="material-icons">pageview</i></button>
</a>
<script type="application/dart" src="main.dart"></script>
<script data-pub-inline src="packages/browser/dart.js"></script>
<!-- Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-64837522-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
@@ -0,0 +1,50 @@
import "dart:html" as dom;
import "dart:async";
import "dart:math" as Math;
import 'package:logging/logging.dart';
import 'package:console_log_handler/console_log_handler.dart';
import 'package:di/di.dart' as di;
import 'package:mdl/mdl.dart';
import 'package:mdl/mdlobservable.dart';
@MdlComponentModel @di.Injectable()
class Application extends MaterialApplication {
final Logger _logger = new Logger('main.Application');
final ObservableProperty<bool> checkAttribute = new ObservableProperty<bool>(false);
Application() {
}
@override
void run() {
}
//- private -----------------------------------------------------------------------------------
}
main() async {
final Logger _logger = new Logger('main.Attribute');
configLogging();
registerMdl();
final MaterialApplication application = await componentFactory().
rootContext(Application).run(enableVisualDebugging: true);
application.run();
}
void configLogging() {
hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK
// now control the logging.
// Turn off all logging first
Logger.root.level = Level.INFO;
Logger.root.onRecord.listen(new LogConsoleHandler());
}
@@ -11,7 +11,7 @@
<div class="switches">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-border">
<input type="checkbox" id="switch-border" class="mdl-switch__input" mdl-model="checkBorder"/>
<span class="mdl-switch__label">Switch 'border' on/off</span>
<span class="mdl-switch__label">Turn 'border' on/off</span>
</label>
</div>
</div>
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -0,0 +1,2 @@
template_dir: ../_templates
assets_dir: ../_assets
File renamed without changes.
@@ -0,0 +1,23 @@
<section class="demo-section demo-section--attribute demo-page--attribute">
<div id="usage" class="mdl-include mdl-js-include" data-url="views/usage/attribute.html">
Loading...
</div>
<div class="demo-preview-block">
<div class="controls">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample-text-attribute" mdl-attribute="!checkAttribute : 'disabled' "/>
<label class="mdl-textfield__label" for="sample-text-attribute" mdl-class="checkAttribute : 'enabled'">
<span class="enabled">Type something</span>
<span class="disabled">I'm Disabled</span>
</label>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" mdl-attribute="!checkAttribute : 'disabled' ">Submit</button>
</div>
<div class="switches">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-attribute">
<input type="checkbox" id="switch-attribute" class="mdl-switch__input" mdl-model="checkAttribute"/>
<span class="mdl-switch__label">Turn 'disabled' on/off</span>
</label>
</div>
</div>
</section>
@@ -0,0 +1,17 @@
<section class="demo-section demo-section--class demo-page--class">
<div id="usage" class="mdl-include mdl-js-include" data-url="views/usage/class.html">
Loading...
</div>
<div class="demo-preview-block">
<div class="testtext" mdl-class="checkBorder : 'withborder'">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="switches">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-border">
<input type="checkbox" id="switch-border" class="mdl-switch__input" mdl-model="checkBorder"/>
<span class="mdl-switch__label">Turn 'border' on/off</span>
</label>
</div>
</div>
</section>
@@ -13,7 +13,7 @@ <h4>Standalone samples</h4>
{{name}}
</span>
</a> |
<a href="https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/{{prefix}}{{name}}/web"
<a href="https://github.com/MikeMitterer/dart-material-design-lite/tree/master/example/{{prefix}}{{name}}/web"
class="mdl-color-text--400 github" target="_blank">
Source on GitHub
</a>
@@ -0,0 +1,8 @@
template: usage
dart: ->usage.attribute.dart
html: ->usage.attribute.html
readme: ->usage.attribute.readme
component: attribute
~~~
@@ -0,0 +1,8 @@
template: usage
dart: ->usage.class.dart
html: ->usage.class.html
readme: ->usage.class.readme
component: class
~~~
@@ -1,5 +1,7 @@
[
{ "name": "observe", "link": "#/observe" },
{ "name": "attribute", "link": "#/attribute" },
{ "name": "class", "link": "#/class" },
{ "name": "model", "link": "#/model" },
{ "name": "observe", "link": "#/observe" },
{ "name": "repeat", "link": "#/repeat" }
]
@@ -1,10 +1,12 @@
[
{ "name": "accordion", "original": false, "prefix": "mdlx_" },
{ "name": "animation", "original": true, "prefix": "mdl_" },
{ "name": "attribute", "original": false, "prefix": "mdld_" },
{ "name": "badge", "original": true, "prefix": "mdl_" },
{ "name": "button", "original": true, "prefix": "mdl_" },
{ "name": "card", "original": true, "prefix": "mdl_" },
{ "name": "checkbox", "original": true, "prefix": "mdl_" },
{ "name": "class", "original": false, "prefix": "mdld_" },
{ "name": "content", "original": false, "prefix": "spa_" },
{ "name": "data-table", "original": true, "prefix": "mdl_" },
{ "name": "dialog", "original": false, "prefix": "mdlx_" },
@@ -18,14 +20,15 @@
{ "name": "layout", "original": true, "prefix": "mdl_" },
{ "name": "list", "original": true, "prefix": "mdlo_" },
{ "name": "menu", "original": true, "prefix": "mdl_" },
{ "name": "model", "original": false, "prefix": "mdld_" },
{ "name": "nav-pills", "original": false, "prefix": "mdlx_" },
{ "name": "notification", "original": false, "prefix": "mdlx_" },
{ "name": "observe", "original": true, "prefix": "spa_" },
{ "name": "observe", "original": true, "prefix": "mdld_" },
{ "name": "palette", "original": true, "prefix": "mdl_" },
{ "name": "panel", "original": false, "prefix": "mdlx_" },
{ "name": "progress", "original": true, "prefix": "mdl_" },
{ "name": "radio", "original": true, "prefix": "mdl_" },
{ "name": "repeat", "original": false, "prefix": "spa_" },
{ "name": "repeat", "original": false, "prefix": "mdld_" },
{ "name": "shadow", "original": true, "prefix": "mdl_" },
{ "name": "slider", "original": true, "prefix": "mdl_" },
{ "name": "snackbar", "original": false, "prefix": "mdlx_" },
@@ -0,0 +1,5 @@
[
{ "name": "content" },
{ "name": "include" },
{ "name": "todo" }
]
@@ -0,0 +1,32 @@
import &#39;package:mdl&#47;mdl.dart&#39;;
import &#39;package:mdl&#47;mdlobservable.dart&#39;;
@MdlComponentModel @di.Injectable()
class Application extends MaterialApplication &#123;
final Logger _logger = new Logger(&#39;main.Application&#39;);
final ObservableProperty&lt;bool&gt; checkAttribute = new ObservableProperty&lt;bool&gt;(false);
Application() &#123;
&#125;
@override
void run() &#123;
&#125;
&#47;&#47;- private -----------------------------------------------------------------------------------
&#125;
main() async &#123;
final Logger _logger = new Logger(&#39;main.Attribute&#39;);
registerMdl();
final MaterialApplication application = await componentFactory().
rootContext(Application).run(enableVisualDebugging: true);
application.run();
&#125;
Oops, something went wrong.

0 comments on commit f2fa90d

Please sign in to comment.