mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-11 12:17:59 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #293 from MeteorPackaging/meteor-integration

Browse Source 
Package versions without Bootstrap glyphicons & without any icons
This commit is contained in:
Fez Vrasta 2014-12-16 12:28:00 +01:00
commit 0e9acdf8a5
17 changed files with 232 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.travis.yml
View File

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

7
Gruntfile.js
View File

@ -224,7 +224,12 @@ module.exports = function(grunt) {
command: "node_modules/.bin/spacejam --mongo-url mongodb:// test-packages ./" command: "node_modules/.bin/spacejam --mongo-url mongodb:// test-packages ./"
}, },
"meteor-publish": { "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(";")
} }
} }

27
meteor/README.md
View File

@ -3,16 +3,26 @@
Packaging [FezVrasta's Bootstrap Material Design](https://github.com/FezVrasta/bootstrap-material-design) Packaging [FezVrasta's Bootstrap Material Design](https://github.com/FezVrasta/bootstrap-material-design)
for [Meteor.js](http://meteor.com). 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 # Usage
Just run Just run
```sh ```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 # Dependencies
@ -37,13 +47,20 @@ If you encounter an issue while using this package, please CC @dandv when you fi
# DONE # 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 # 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 # Acknowledgements

1
meteor/example/.meteor/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
local

7
meteor/example/.meteor/packages Normal file
View File

@ -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

1
meteor/example/.meteor/release Normal file
View File

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

3
meteor/example/client/bmd.css Normal file
View File

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

14
meteor/example/client/bmd.html Normal file
View File

@ -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>

15
meteor/example/client/bmd.js Normal file
View File

@ -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!'])});
}
});

1
meteor/example/packages/bootstrap-material-design Symbolic link
View File

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

5
meteor/example/run.bat Executable file
View File

@ -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

15
meteor/example/run.sh Executable file
View File

@ -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

3
meteor/init.js Normal file
View File

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

39
meteor/package-noglyph.js Normal file
View File

@ -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)
});

34
meteor/package-noicons.js Normal file
View File

@ -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);
});

3
meteor/package.js
View File

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

63
meteor/test-noicons.js Normal file
View File

@ -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();
});
});