Skip to content

Commit

Permalink
Merge branch 'master' of github.com:sgasser/ember-cli-materialize int…
Browse files Browse the repository at this point in the history
…o material-loader
  • Loading branch information
Mike North committed Apr 2, 2015
2 parents 0296d3c + 05ce0fb commit 0aefa2c
Show file tree
Hide file tree
Showing 16 changed files with 182 additions and 30 deletions.
15 changes: 2 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,17 @@

[![Build Status](https://travis-ci.org/sgasser/ember-cli-materialize.svg)](https://travis-ci.org/sgasser/ember-cli-materialize)
[![Code Climate](https://codeclimate.com/github/sgasser/ember-cli-materialize/badges/gpa.svg)](https://codeclimate.com/github/sgasser/ember-cli-materialize)
[![Ember Observer Score](http://emberobserver.com/badges/ember-cli-materialize.svg)](http://emberobserver.com/addons/ember-cli-materialize)

An [ember-cli](http://www.ember-cli.com) addon for using [Materialize](http://materializecss.com/) (CSS Framework based on [Material Design](http://www.google.com/design/spec/material-design/introduction.html)) in Ember applications.

*Materialize Version 0.95.*
*Materialize Version ~0.96.0

## Main features

* Imports [Materialize](http://materializecss.com/) sass (via [ember-cli-sass](https://www.npmjs.com/package/ember-cli-sass)) and fonts into your app.
* It's a components library for all Materialize components

## Changelog
See [CHANGELOG file](https://github.com/sgasser/ember-cli-materialize/tree/master/CHANGELOG.md).

## Usage
The [online demo](http://sgasser.github.io/ember-cli-materialize) demonstrates all components with all possible options.

Expand All @@ -31,19 +29,10 @@ $ ember serve

## Installation

Using ember-cli 0.1.5:
```sh
$ ember install:addon ember-cli-materialize
```

Using previous versions:
```sh
# install via npm
$ npm install ember-cli-materialize --save-dev
# make ember-cli fetch internal dependencies
$ ember g ember-cli-materialize
```

## Contributing
See [CONTRIBUTING file](https://github.com/sgasser/ember-cli-materialize/tree/master/CONTRIBUTING.md).

Expand Down
9 changes: 9 additions & 0 deletions addon/components/materialize-badge.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import Ember from 'ember';
import layout from '../templates/components/materialize-badge';

export default Ember.Component.extend({
layout: layout,
tagName: 'span',
text: null,
classNames: ['badge']
});
1 change: 0 additions & 1 deletion addon/components/materialize-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,3 @@ export default MaterializeInputField.extend({
}
}
});

1 change: 1 addition & 0 deletions addon/templates/components/materialize-badge.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{{text}}{{yield}}
1 change: 0 additions & 1 deletion addon/templates/components/materialize-input.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,3 @@
<small class="red-text">
{{#if errors}} {{errors.firstObject}} {{else}} &nbsp; {{/if}}
</small>

3 changes: 3 additions & 0 deletions app/components/materialize-badge.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import materializeBadge from 'ember-cli-materialize/components/materialize-badge';

export default materializeBadge;
4 changes: 2 additions & 2 deletions blueprints/ember-cli-materialize/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ module.exports = {
normalizeEntityName: function() {},

beforeInstall: function(options) {
return this.addBowerPackageToProject('materialize', '~0.95.0');
return this.addBowerPackageToProject('materialize', '~0.96.0');
},

afterInstall: function() {
return this.addPackageToProject('ember-cli-sass', '^3.1.0');
return this.addPackageToProject('ember-cli-sass', '^3.2.2');
}
};
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"ember-qunit": "0.3.0",
"ember-qunit-notifications": "0.0.7",
"qunit": "~1.17.1",
"materialize": "4cee70e6740b20ee16ac013cd0ea0f33fe52853c"
"materialize": "~0.96.0"
},
"resolutions": {
"jquery": "~1.11.1"
Expand Down
20 changes: 17 additions & 3 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,25 @@ module.exports = {
included: function(app) {
this._super.included(app);

app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Bold.ttf', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Thin.woff2', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Thin.woff', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Thin.ttf', { destDir: 'font/roboto' });

app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Light.woff2', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Light.woff', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Light.ttf', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Medium.ttf', { destDir: 'font/roboto' });

app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Regular.woff2', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Regular.woff', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Regular.ttf', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Thin.ttf', { destDir: 'font/roboto' });

app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Medium.woff2', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Medium.woff', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Medium.ttf', { destDir: 'font/roboto' });

app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Bold.woff2', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Bold.woff', { destDir: 'font/roboto' });
app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Bold.ttf', { destDir: 'font/roboto' });

app.import(app.bowerDirectory + '/materialize/dist/font/material-design-icons/Material-Design-Icons.eot', { destDir: 'font/material-design-icons' });
app.import(app.bowerDirectory + '/materialize/dist/font/material-design-icons/Material-Design-Icons.ttf', { destDir: 'font/material-design-icons' });
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ember-cli-materialize",
"version": "0.7.2",
"version": "0.8.0",
"directories": {
"doc": "doc",
"test": "tests"
Expand Down
1 change: 1 addition & 0 deletions tests/dummy/app/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ var Router = Ember.Router.extend({
});

Router.map(function() {
this.route("badges");
this.route("buttons");
this.route("navbar");
this.route("cards");
Expand Down
49 changes: 49 additions & 0 deletions tests/dummy/app/templates/badges.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<div class="section index-banner">
<div class="container">
<div class="row">
<div class="col s12 m9">
<h1 class="header">Badges</h1>
</div>
</div>
</div>
</div>

<div class='container'>
<div class="section">
<div class="intro">
<h4 class="col s12 header">The component supports one option:</h4>
<ul>
<li>text, default value <span class="default-value badge">null</span></li>
</ul>
</div>
</div>
<div class="section">
<div class="row">
<div class="col s12">
<ul class="collection">
<li class="collection-item">
1. Steal Underpants
{{materialize-badge class='new' text="6"}}
</li>
<li class="collection-item">2. ???
{{#materialize-badge}}9{{/materialize-badge}}
</li>
<li class="collection-item">3. Profit</li>
</ul>
</div>
</div>
<div class="row">
<div class="col s12">

<pre class=" language-markup">
<code class=" col s12 language-markup">
<span>&#123;&#123;</span>materialize-badge class="new" text="6"<span>&#125;&#125;</span>
<span>&#123;&#123;</span>#materialize-badge<span>&#125;&#125;</span>9<span>&#123;&#123;</span>/materialize-badge<span>&#125;&#125;</span>
</code>
</pre>

</div>
</div>
</div>

</div>
41 changes: 34 additions & 7 deletions tests/dummy/app/templates/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,40 @@
<h2 class="col s12 header">Usage</h2>
<div class="section">
<ul class="collection">
{{#link-to 'buttons' class="collection-item"}}Buttons<span class="badge">6</span>{{/link-to}}
{{#link-to 'navbar' class="collection-item"}}Navbar<span class="new badge">1</span>{{/link-to}}
{{#link-to 'cards' class="collection-item"}}Cards<span class="new badge">1</span>{{/link-to}}
{{#link-to 'collapsible' class="collection-item"}}Collapsible<span class="new badge">1</span>{{/link-to}}
{{#link-to 'input' class="collection-item"}}Input<span class="new badge">4</span>{{/link-to}}
{{#link-to 'loader' class="collection-item"}}Loader<span class="new badge">1</span>{{/link-to}}
{{#link-to 'parallax' class="collection-item"}}Parallax<span class="new badge">1</span>{{/link-to}}

{{#link-to 'badges' class="collection-item"}}
Badges
{{#materialize-badge class="new"}}1{{/materialize-badge}}
{{/link-to}}

{{#link-to 'buttons' class="collection-item"}}
Buttons
{{#materialize-badge}}6{{/materialize-badge}}
{{/link-to}}

{{#link-to 'navbar' class="collection-item"}}
Navbar{{#materialize-badge class="new"}}1{{/materialize-badge}}
{{/link-to}}

{{#link-to 'cards' class="collection-item"}}
Cards{{#materialize-badge class="new"}}1{{/materialize-badge}}
{{/link-to}}

{{#link-to 'collapsible' class="collection-item"}}
Collapsible{{#materialize-badge class="new"}}1{{/materialize-badge}}
{{/link-to}}

{{#link-to 'input' class="collection-item"}}
Input{{#materialize-badge class="new"}}4{{/materialize-badge}}
{{/link-to}}

{{#link-to 'loader' class="collection-item"}}
Loader{{#materialize-badge class="new"}}1{{/materialize-badge}}
{{/link-to}}

{{#link-to 'parallax' class="collection-item"}}
Parallax{{#materialize-badge class="new"}}1{{/materialize-badge}}
{{/link-to}}
</ul>
</div>

Expand Down
16 changes: 15 additions & 1 deletion tests/dummy/app/templates/input.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<li>label, default value <span class="default-value badge">null</span></li>
<li>icon, default value <span class="default-value badge">null</span></li>
<li>value, default value <span class="default-value badge">null</span></li>
<li>type, default value <span class="default-value badge">text</span></li>
<li>required, default value <span class="default-value badge">false</span></li>
<li>readonly, default value <span class="default-value badge">false</span></li>
<li>disabled, default value <span class="default-value badge">false</span></li>
Expand Down Expand Up @@ -56,6 +57,20 @@
</div>
</div>

<div class="section">
<h4 class="col s12 header">Input with type="password"</h4>
<div class="button-example">
<br/>
{{materialize-input value="test" label='Password' type="password"}}

<pre class=" language-markup">
<code class=" col s12 language-markup">
<span>&#123;&#123;</span>materialize-input value="test" label="Password" type="password"<span>&#125;&#125;</span>
</code>
</pre>
</div>
</div>


<div class="section">
<h4 class="col s12 header">Validations</h4>
Expand Down Expand Up @@ -177,4 +192,3 @@ nameDidChange: function() {
</div>

</div>

40 changes: 40 additions & 0 deletions tests/unit/components/materialize-badge-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import Ember from 'ember';

import {
moduleForComponent,
test
} from 'ember-qunit';

moduleForComponent('materialize-badge', {
// Specify the other units that are required for this test
// needs: ['component:foo', 'helper:bar']
});

test('it renders', function(assert) {
assert.expect(2);

// Creates the component instance
var component = this.subject();
assert.equal(component._state, 'preRender');

// Renders the component to the page
this.render();
assert.equal(component._state, 'inDOM');
});


test('binding to the text property works', function(assert) {
assert.expect(2);

var component = this.subject();

this.render();
assert.equal(component.$().text().trim(), '', 'By default the text property is empty');

Ember.run(function () {
component.set('text', 'Heisenberg');
Ember.run.schedule('afterRender', function () {
assert.equal(component.$().text().trim(), 'Heisenberg', 'Setting the text property updates the content of the badge');
});
});
});
7 changes: 7 additions & 0 deletions tests/unit/components/materialize-input-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,10 @@ test('has an icon', function(assert) {
this.render();
assert.ok(component.$('>i').hasClass(icon));
});

test('has type password', function(assert) {
var type = 'password';
var component = this.subject({ type: type });
this.render();
assert.equal(component.$('>input').attr('type'), type);
});

0 comments on commit 0aefa2c

Please sign in to comment.