Merge pull request #1 from FezVrasta/master

Merging changes

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 
-node_js: "0.10"
+node_js: 0.10
 
 before_script:
   - npm install -g grunt-cli

Gruntfile.js

@@ -224,7 +224,12 @@ module.exports = function(grunt) {
         command: "node_modules/.bin/spacejam --mongo-url mongodb:// test-packages ./"
       },
       "meteor-publish": {
-        command: "meteor publish"
+        command: [
+          "ALL_EXIT_CODE=0; for PACKAGE_FILE in meteor/package*.js",
+            "do cp $PACKAGE_FILE ./package.js && meteor publish $@",
+            "ALL_EXIT_CODE=$(echo $ALL_EXIT_CODE + $? | bc); done",
+          "exit $ALL_EXIT_CODE"
+        ].join(";")
       }
     }
 

README.md

@@ -130,17 +130,15 @@ The syntax to add a Material icon is:
 
 ## Material.js
 
-`Material.js` is a jQuery plugin that add some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
+`Material.js` is a jQuery plugin that adds some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
 
 ### Functions
 
-This plugin exposes some functions, them are:
+* `$.material.init()` - shortcut to run all the following commands:
-
+* `$.material.ripples()` will apply ripples.js to the default elements.
-`$.material.init()` is a shortcut to run all the following commands.
+* `$.material.input()` will enable the MD style to the text inputs, and other kind of inputs (number, email, file etc).
-`$.material.ripples()` will apply ripples.js to the default elements.
+* `$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the [Inputs section](#inputs).
-`$.material.input()` will enable the MD style to the text inputs, and other kind of inputs (number, email, file etc).
+* `$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs section.
-`$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs chapter.
-`$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs chapter.
 
 ### Apply Material.js only to specific elements
 

dist/css/material-wfont.css

@@ -30,7 +30,7 @@ Then, run this script to get the list.
 
 
 (function() {
-  var colors = {};
+  var colors = {}, main = {};
   $(".color-group").each(function() {
     var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
     colors[color] = {};
@@ -41,18 +41,21 @@ Then, run this script to get the list.
 
       colors[color][shade] = hex;
     });
+    main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
 
   });
   var LESS = "";
   $.each(colors, function(name, shades) {
     LESS += "\n\n";
-    LESS += "@" + name + ": " + shades[500] + ";\n";
     $.each(shades, function(shade, hex) {
       LESS += "@" + name + "-" + shade + ": " + hex + ";\n";
     });
+    if (main[name]) {
+      LESS += "@" + name + ": " + main[name] + ";\n";
+    }
   });
   console.log(LESS);
-});
+})();
 
 
 */
@@ -7005,7 +7008,7 @@ body .jumbotron-material-blue-grey-A700,
   color: #a8a8a8 !important;
 }
 .btn.btn-raised {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .btn.btn-raised:active:not(.btn-link) {
@@ -9221,7 +9224,7 @@ body .jumbotron-material-blue-grey-A700,
   position: relative;
   border-radius: 2px;
   margin: 10px 1px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .btn-group:active:not(.btn-link),
@@ -9234,7 +9237,7 @@ body .jumbotron-material-blue-grey-A700,
 }
 .btn-group.btn-group-raised,
 .btn-group-vertical.btn-group-raised {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .btn-group.btn-group-raised:active:not(.btn-link),

dist/css/material.css

@@ -6,7 +6,7 @@ Then, run this script to get the list.
 
 
 (function() {
-  var colors = {};
+  var colors = {}, main = {};
   $(".color-group").each(function() {
     var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
     colors[color] = {};
@@ -17,18 +17,21 @@ Then, run this script to get the list.
 
       colors[color][shade] = hex;
     });
+    main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
 
   });
   var LESS = "";
   $.each(colors, function(name, shades) {
     LESS += "\n\n";
-    LESS += "@" + name + ": " + shades[500] + ";\n";
     $.each(shades, function(shade, hex) {
       LESS += "@" + name + "-" + shade + ": " + hex + ";\n";
     });
+    if (main[name]) {
+      LESS += "@" + name + ": " + main[name] + ";\n";
+    }
   });
   console.log(LESS);
-});
+})();
 
 
 */
@@ -6981,7 +6984,7 @@ body .jumbotron-material-blue-grey-A700,
   color: #a8a8a8 !important;
 }
 .btn.btn-raised {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .btn.btn-raised:active:not(.btn-link) {
@@ -9197,7 +9200,7 @@ body .jumbotron-material-blue-grey-A700,
   position: relative;
   border-radius: 2px;
   margin: 10px 1px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .btn-group:active:not(.btn-link),
@@ -9210,7 +9213,7 @@ body .jumbotron-material-blue-grey-A700,
 }
 .btn-group.btn-group-raised,
 .btn-group-vertical.btn-group-raised {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
   transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .btn-group.btn-group-raised:active:not(.btn-link),

less/_buttons.less

@@ -20,7 +20,7 @@
 
     .variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
 
-	.background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
+  .background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
 
     &.btn-flat {
         background: none;
@@ -101,7 +101,7 @@
 }
 
 .btn-shadow() {
-    .shadow-z-2();
+    .shadow-z-1();
     transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     &:active:not(.btn-link) {
         .shadow-z-3();

meteor/README.md

@@ -3,16 +3,26 @@
 Packaging [FezVrasta's Bootstrap Material Design](https://github.com/FezVrasta/bootstrap-material-design)
 for [Meteor.js](http://meteor.com).
 
+
+# Versions
+
+All versions include the Material Design theme CSS, JS, and `ripple.js` for the ripple click effect.
+
+* [fezvrasta:bootstrap-material-design](https://atmospherejs.com/fezvrasta/bootstrap-material-design) - Includes Bootstrap's glyphicons along with some Material Design icons.
+* [fezvrasta:bootstrap-material-design-noglyph](https://atmospherejs.com/fezvrasta/bootstrap-material-design-noglyph) - No Bootstrap glyphicons, but includes the Material Design icons.
+* [fezvrasta:bootstrap-material-design-noicons](https://atmospherejs.com/fezvrasta/bootstrap-material-design-noicons) - No icons at all. Useful if you want to use another icon set instead, such as [Font Awesome](https://atmospherejs.com/fortawesome/fontawesome).
+
+
 # Usage
 
 Just run
 
 
 ```sh
-meteor add meteorpackaging:bootstrap-material-design
+meteor add fezvrasta:bootstrap-material-design
 ```
 
-and your Bootstrap CSS will look like Google's Material Design (Polymer Paper).
+and your Bootstrap CSS will look like Google's Material Design (Polymer Paper Elements).
 
 
 # Dependencies
@@ -37,13 +47,20 @@ If you encounter an issue while using this package, please CC @dandv when you fi
 
 # DONE
 
-* Icons font loading test: EOT, SVG, TTF, WOFF
+* Automatically initialize the JS on client startup: `$.material.init()`
-* Ripples test
+* Material Design Icons font loading test: EOT, SVG, TTF, WOFF
+* Bootstrap plugin loading tests
+* Visual check, including for the ripple effect
 
 
 # TODO
 
-* Depend on a version of twbs:bootstrap without the Glyphicons font, to avoid loading those obsoleted icons
+* LESS version / fine-grained control? See [nemo64's package](https://github.com/Nemo64/meteor-bootstrap).
+
+
+# Testing
+
+To test the theme in a browser, run `cp meteor/package.js ./ && meteor test-packages ./`
 
 
 # Acknowledgements

meteor/example/.meteor/.gitignore

@@ -0,0 +1 @@
+local

meteor/example/.meteor/packages

@@ -0,0 +1,7 @@
+# Meteor packages used by this project, one per line.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+meteor-platform
+fezvrasta:bootstrap-material-design-noglyph

meteor/example/.meteor/release

@@ -0,0 +1 @@
+METEOR@1.0.1

meteor/example/client/bmd.css

@@ -0,0 +1,3 @@
+body {
+  background: #8BC34A;
+}

meteor/example/client/bmd.html

@@ -0,0 +1,14 @@
+<body>
+  <h1>Watch the ripple effect on newly created buttons!</h1>
+
+  {{> hello}}
+</body>
+
+<template name="hello">
+  <button type="button" class="btn btn-info">Click Me</button>
+  <hr/>
+  {{#each buttons}}
+    <button type="button" class="btn btn-primary">{{name}}</button>
+    <br/>
+  {{/each}}
+</template>

meteor/example/client/bmd.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var Buttons = new Mongo.Collection(null);
+
+Template.hello.helpers({
+  buttons: function () {
+    return Buttons.find();
+  }
+});
+
+Template.hello.events({
+  'click button': function (event, template) {
+    Buttons.insert({name: _.sample(['No, click ME!', 'Click me too!', 'Click here!', 'Hey!', 'Psst!'])});
+  }
+});

meteor/example/packages/bootstrap-material-design

@@ -0,0 +1 @@
+../../../

meteor/example/run.bat

@@ -0,0 +1,5 @@
+mklink ..\..\package.js "meteor/package-noglyph.js"
+mklink package.json "../../package.json"
+set MONGO_URL=mongodb://
+meteor run
+del ..\..\package.js package.json

meteor/example/run.sh

@@ -0,0 +1,15 @@
+# sanity check: make sure we're in the root directory of the example
+cd "$( dirname "$0" )"
+
+# delete temp files even if Ctrl+C is pressed
+int_trap() {
+  echo "Cleaning up..."
+}
+trap int_trap INT
+
+ln -s "meteor/package-noglyph.js" ../../package.js
+ln -s "../../package.json" package.json
+
+MONGO_URL=mongodb:// meteor run
+
+rm ../../package.js package.json

meteor/init.js

@@ -0,0 +1,3 @@
+Meteor.startup(function () {
+  $.material.init();
+});

meteor/package-noglyph.js

@@ -0,0 +1,39 @@
+// package metadata file for Meteor.js
+'use strict';
+
+var packageName = 'fezvrasta:bootstrap-material-design-noglyph';  // https://atmospherejs.com/fezvrasta/bootstrap-material-design-noglyph
+var where = 'client';  // where to install: 'client' or 'server'. For both, pass nothing.
+
+var packageJson = JSON.parse(Npm.require("fs").readFileSync('package.json'));
+
+Package.describe({
+  name: packageName,
+  summary: 'FezVrasta\'s Bootstrap Google Material Design theme. Material icons instead of Bootstrap glyphicons.',
+  version: packageJson.version,
+  git: 'https://github.com/fezvrasta/bootstrap-material-design.git'
+});
+
+Package.onUse(function (api) {
+  api.versionsFrom(['METEOR@0.9.0', 'METEOR@1.0']);
+  api.use('twbs:bootstrap-noglyph@3.3.1');
+  api.use('jquery');
+  api.addFiles([
+    // we bundle all font files, but the client will request only one of them via the CSS @font-face rule
+    'dist/fonts/Material-Design-Icons.eot',  // IE8 or older
+    'dist/fonts/Material-Design-Icons.svg',  // SVG fallback for iOS < 5 - http://caniuse.com/#feat=svg-fonts, http://stackoverflow.com/a/11002874/126903
+    'dist/fonts/Material-Design-Icons.ttf',  // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf
+    'dist/fonts/Material-Design-Icons.woff', // Supported by all modern browsers
+    'dist/css/material-wfont.css',           // includes @font-face rules to load the Roboto font
+    'dist/css/ripples.css',
+    'dist/js/material.js',
+    'dist/js/ripples.js',
+    'meteor/init.js'
+  ], where);
+});
+
+Package.onTest(function (api) {
+  api.use(packageName, where);
+  api.use(['tinytest', 'http'], where);
+
+  api.addFiles('meteor/test.js', where);  // same test because we don't test the glyphicons in particular (that's the job of twbs:bootstrap)
+});

meteor/package-noicons.js

@@ -0,0 +1,34 @@
+// package metadata file for Meteor.js
+'use strict';
+
+var packageName = 'fezvrasta:bootstrap-material-design-noicons';  // https://atmospherejs.com/fezvrasta/bootstrap-material-design-noicons
+var where = 'client';  // where to install: 'client' or 'server'. For both, pass nothing.
+
+var packageJson = JSON.parse(Npm.require("fs").readFileSync('package.json'));
+
+Package.describe({
+  name: packageName,
+  summary: 'FezVrasta\'s Bootstrap theme implementing Google\'s Material Design (Paper Elements). No icons.',
+  version: packageJson.version,
+  git: 'https://github.com/fezvrasta/bootstrap-material-design.git'
+});
+
+Package.onUse(function (api) {
+  api.versionsFrom(['METEOR@0.9.0', 'METEOR@1.0']);
+  api.use('twbs:bootstrap-noglyph@3.3.1');
+  api.use('jquery');
+  api.addFiles([
+    'dist/css/material-wfont.css',           // includes @font-face rules to load the Roboto font
+    'dist/css/ripples.css',
+    'dist/js/material.js',
+    'dist/js/ripples.js',
+    'meteor/init.js'
+  ], where);
+});
+
+Package.onTest(function (api) {
+  api.use(packageName, where);
+  api.use(['tinytest', 'http'], where);
+
+  api.addFiles('meteor/test-noicons.js', where);
+});

meteor/package.js

@@ -26,7 +26,8 @@ Package.onUse(function (api) {
     'dist/css/material-wfont.css',           // includes @font-face rules to load the Roboto font
     'dist/css/ripples.css',
     'dist/js/material.js',
-    'dist/js/ripples.js'
+    'dist/js/ripples.js',
+    'meteor/init.js'
   ], where);
 });
 

meteor/test-noicons.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var packageName;  // there seems to be no official way of finding out the name of the very package we're testing - http://stackoverflow.com/questions/27180709/in-a-tinytest-test-file-how-do-i-get-the-name-of-the-package
+
+var plugins = ['affix', 'alert', 'button', 'carousel', 'collapse', 'dropdown', 'modal', 'popover', 'scrollspy', 'tab', 'tooltip'];
+
+// test plugins
+plugins.forEach(function (plugin) {
+  Tinytest.add('Plugin - ' + plugin, function (test) {
+    test.instanceOf($(document.body)[plugin], Function, 'instantiated correctly');
+  });
+});
+
+// visual check
+plugins.forEach(function (plugin) {
+
+  Tinytest.addAsync('Visual check - ' + plugin, function (test, done) {
+    var bootstrapDropZone = document.createElement('div');
+    document.body.appendChild(bootstrapDropZone);
+
+
+    HTTP.get('http://rawgit.com/twbs/bootstrap/master/js/tests/visual/' + plugin + '.html', function callback(error, result) {
+      if (error) {
+        test.fail('Error getting the test file. Do we have an Internet connection to rawgit.com?');
+      } else {
+        // [^] matches across newlines. Stay within the container div, or else the fragment will attempt to load resources on its own.
+        bootstrapDropZone.innerHTML = result.content.match(/<div[^]+<\/div>/);
+        test.ok({message: 'Test passed if the display looks OK *and* clicking dropdowns/popovers/tooltips works.'});
+      }
+
+      done();
+    });
+
+  });
+
+});
+
+
+Tinytest.addAsync('Visual check - Material Design', function (test, done) {
+  var bootstrapDropZone = document.createElement('div');
+  document.body.appendChild(bootstrapDropZone);
+
+  HTTP.get('http://rawgit.com/FezVrasta/bootstrap-material-design/master/bootstrap-elements.html', function callback(error, result) {
+    if (error) {
+      test.fail('Error getting the FezVrasta test file. Do we have an Internet connection to rawgit.com?');
+    } else {
+      // [^] matches across newlines. Stay within the container div, or else the fragment will attempt to load resources on its own.
+      bootstrapDropZone.innerHTML = result.content.match(/<meta name="viewport"[^]+<script src=/);
+      test.ok({message: 'Test passed if the display looks OK *and* clicking dropdowns/popovers/tooltips works.'});
+      // only does anything after loading the 'dropdown' plugin test
+      $('[data-toggle="dropdown"]').dropdown();
+      // only does anything after loading the 'popover' plugin test
+      $('[data-toggle="popover"]').popover();
+      // only does anything after loading the 'tooltip' plugin test
+      $('[data-toggle="tooltip"]').tooltip();
+      // don't initialize the modals because that messes up the Tinytest runner HTML
+      $.material.init();
+    }
+
+    done();
+  });
+
+});