From e2d849fc874e03731839fdd457c5d1034eda8626 Mon Sep 17 00:00:00 2001 From: Danny Grove Date: Fri, 24 Jul 2015 00:31:47 -0700 Subject: [PATCH 1/2] Add support for MDL CSS Framework --- app/prompts.json | 8 +++ app/src/router.js | 10 ++- app/techs.json | 6 ++ app/templates/_bower.json | 2 + app/templates/src/app/_mdl/__mdl-index.css | 47 +++++++++++++ app/templates/src/app/_mdl/__mdl-index.less | 62 +++++++++++++++++ app/templates/src/app/_mdl/__mdl-index.scss | 63 ++++++++++++++++++ app/templates/src/app/_mdl/__mdl-index.styl | 53 +++++++++++++++ .../app/components/navbar/__mdl-navbar.html | 14 ++++ app/templates/src/app/main/__mdl.html | 45 +++++++++++++ app/templates/src/assets/images/mdl.png | Bin 0 -> 1316 bytes test/template/test-bower.js | 6 ++ 12 files changed, 314 insertions(+), 2 deletions(-) create mode 100644 app/templates/src/app/_mdl/__mdl-index.css create mode 100644 app/templates/src/app/_mdl/__mdl-index.less create mode 100644 app/templates/src/app/_mdl/__mdl-index.scss create mode 100644 app/templates/src/app/_mdl/__mdl-index.styl create mode 100644 app/templates/src/app/components/navbar/__mdl-navbar.html create mode 100644 app/templates/src/app/main/__mdl.html create mode 100644 app/templates/src/assets/images/mdl.png diff --git a/app/prompts.json b/app/prompts.json index fe8371a1..9e12281a 100644 --- a/app/prompts.json +++ b/app/prompts.json @@ -159,6 +159,14 @@ }, "name": "Angular Material, the reference implementation of the Google's Material Design specification" }, + { + "value": { + "key": "mdl", + "module": null + }, + "name": "Material Design Lite, light-weight implementation of Google's Material Design" + }, + { "value": { "key": "foundation", diff --git a/app/src/router.js b/app/src/router.js index bd90f10c..b7b6fe68 100644 --- a/app/src/router.js +++ b/app/src/router.js @@ -10,14 +10,20 @@ module.exports = function(GulpAngularGenerator) { var routerPartialSrc = 'src/app/main/__' + this.props.ui.key + '.html'; if (this.props.router.module === 'ngRoute') { - this.routerHtml = '
'; + this.routerHtml = '
"angular-material": "~0.9.7", +<% } if(props.ui.key === 'mdl') { -%> + "material-design-lite": "~1.0.1", <% } if(props.bootstrapComponents.key === 'ui-bootstrap') { -%> "angular-bootstrap": "~0.13.0", <% } if(props.bootstrapComponents.key === 'angular-strap') { -%> diff --git a/app/templates/src/app/_mdl/__mdl-index.css b/app/templates/src/app/_mdl/__mdl-index.css new file mode 100644 index 00000000..20e0cc41 --- /dev/null +++ b/app/templates/src/app/_mdl/__mdl-index.css @@ -0,0 +1,47 @@ +@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic); + +html { + font-family: 'Roboto Slab', serif; +} + +[layout=row] { + flex-direction: row; +} + +.browsehappy { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +.thumbnail img.pull-right { + width: 50px; +} + +section.jumbotron { + margin-bottom: 30px; + padding: 1px 30px; + background-color: #5aadbb; + text-align: center; + + color: white; +} + +section.jumbotron h1 { + font-size: 3em; +} + +.mdl-grid { + display: flex; + flex-flow: row wrap; +} + +.mdl-grid .mdl-card { + width: 30%; +} + +.mdl-grid .mdl-card img.pull-right { + float: right; + width: 50px; +} diff --git a/app/templates/src/app/_mdl/__mdl-index.less b/app/templates/src/app/_mdl/__mdl-index.less new file mode 100644 index 00000000..95d58316 --- /dev/null +++ b/app/templates/src/app/_mdl/__mdl-index.less @@ -0,0 +1,62 @@ +/** + * Do not remove this comments bellow. It's the markers used by wiredep to inject + * less dependencies when defined in the bower.json of your dependencies + */ +// bower:less +// endbower + +@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic); + +html { + font-family: 'Roboto Slab', serif; +} + +[layout=row] { + flex-direction: row; +} + +.browsehappy { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +.thumbnail { + img.pull-right { + width: 50px; + } +} + +section.jumbotron { + margin-bottom: 30px; + padding: 1px 30px; + background-color: #5aadbb; + text-align: center; + + color: white; + + h1 { + font-size: 3em; + } +} + +.mdl-grid { + display: flex; + flex-flow: row wrap; + .mdl-card { + width: 30%; + + img.pull-right { + float: right; + width: 50px; + } + } +} + +/** + * Do not remove this comments bellow. It's the markers used by gulp-inject to inject + * all your less files automatically + */ +// injector +// endinjector diff --git a/app/templates/src/app/_mdl/__mdl-index.scss b/app/templates/src/app/_mdl/__mdl-index.scss new file mode 100644 index 00000000..88d4ffe8 --- /dev/null +++ b/app/templates/src/app/_mdl/__mdl-index.scss @@ -0,0 +1,63 @@ +/** + * Do not remove this comments bellow. It's the markers used by wiredep to inject + * sass dependencies when defined in the bower.json of your dependencies + */ +// bower:scss +// endbower + +@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic); + +html { + font-family: 'Roboto Slab', serif; +} + +[layout=row] { + flex-direction: row; +} + +.browsehappy { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +.thumbnail { + img.pull-right { + width: 50px; + } +} + +section.jumbotron { + margin-bottom: 30px; + padding: 1px 30px; + background-color: #5aadbb; + text-align: center; + + color: white; + + h1 { + font-size: 3em; + } +} + +.mdl-grid { + display: flex; + flex-flow: row wrap; + + .mdl-card { + width: 30%; + + img.pull-right { + float: right; + width: 50px; + } + } +} + +/** + * Do not remove this comments bellow. It's the markers used by gulp-inject to inject + * all your sass files automatically + */ +// injector +// endinjector diff --git a/app/templates/src/app/_mdl/__mdl-index.styl b/app/templates/src/app/_mdl/__mdl-index.styl new file mode 100644 index 00000000..4ab28d28 --- /dev/null +++ b/app/templates/src/app/_mdl/__mdl-index.styl @@ -0,0 +1,53 @@ +/** + * Do not remove this comments bellow. It's the markers used by wiredep to inject + * stylus dependencies when defined in the bower.json of your dependencies + */ +// bower:styl +// endbower + +@import url("//fonts.googleapis.com/css?family=Roboto\+Slab:400,700|Roboto:400,700,700italic,400italic") + +html + font-family 'Roboto Slab', serif + +[layout=row] + flex-direction row + +.browsehappy + margin 0.2em 0 + background #ccc + color #000 + padding 0.2em 0 + +.thumbnail + img + &.pull-right + width 50px + + +section + &.jumbotron + margin-bottom 30px + padding 1px 30px + background-color #5aadbb + text-align center + color white + h1 + font-size 3em + +.mdl-grid + display flex + flex-flow row wrap + .mdl-card + width 30% + img + &.pull-right + float right + width 50px + +/** + * Do not remove this comments bellow. It's the markers used by gulp-inject to inject + * all your stylus files automatically + */ +// injector +// endinjector diff --git a/app/templates/src/app/components/navbar/__mdl-navbar.html b/app/templates/src/app/components/navbar/__mdl-navbar.html new file mode 100644 index 00000000..a1440908 --- /dev/null +++ b/app/templates/src/app/components/navbar/__mdl-navbar.html @@ -0,0 +1,14 @@ +
+
+ + Gulp Angular + +
+ +
+
+
diff --git a/app/templates/src/app/main/__mdl.html b/app/templates/src/app/main/__mdl.html new file mode 100644 index 00000000..f8e5c2f4 --- /dev/null +++ b/app/templates/src/app/main/__mdl.html @@ -0,0 +1,45 @@ +
+
+
+ + Gulp Angular + +
+ +
+
+
+
+
+

'Allo, 'Allo!

+

+ I'm Yeoman
+ Always a pleasure scaffolding your apps. +

+ +

+ With ♥ thanks to the contributions of +

+
+ +
+
+
+ {{ awesomeThing.title }} +
+

{{ awesomeThing.title }}

+

{{ awesomeThing.description }}

+

{{ awesomeThing.url }}

+
+
+
+
+
+
diff --git a/app/templates/src/assets/images/mdl.png b/app/templates/src/assets/images/mdl.png new file mode 100644 index 0000000000000000000000000000000000000000..7a85ab906bae4b36211e60cc477c3e0a1226ff58 GIT binary patch literal 1316 zcmX|=3s6*57{|YJ_wI5R7WM+mLs<3!cNY{`xVy48`3T3cvc^ef+9fg+$2L+iA9!ujc5+lI!!nA_)uucD`#8VzKmYH{ zH}`Dz`>GP-v*H0Dv8LKvN8VVu85Mcnm*4yo0IB^mW>=D-A)j1NaGa3qa#>1CO~u8= z!t(3_cb45{ceyy8&vQ(&773QZGPBE-!}Iw(Z!an5970}E8ChcGc}uCs>~QBh+=Sa) z9?mInPB+JU?1}`NORzcJHm8RWju*I6!R`|5P7fhAo=D(a#P1+jqQi;NZ!g-e~mOf$z>=xHvd?>HEu9u3j6etu0yrpjuhut(YCWeCNtwouR^j zZ_GjJbU%Nzyl`C8^m(5+j;vohR<-P}vpv38pw8SK>RR}4!J?l>f1h)`d2t}zwIb8M z#C-DB?O8Utv42hR9BPXBqt2<LW7Yz6UbTd|cnY>dg4C=HB?CQp2lgPb^d(JH*EiFT zhG~!VTIyWr#8>ItX)s@WQ5x~7!x=ye+n^hjYi})rA-tE)E`wHailo6)fmyl-XbLwB zP!_ghYe>t+_dQv9oo3WOS}!f3Xq7SY;Pfa&z;a@j*8NQ>}T0?S;3H7!b_jB+17_h)RDi@|`*mV`h;2aC$RK4@ z!*kFn>(X&L(ET4mFBBmY&cwE`%1`<=awHeZplUcpFD8ZAy*B7j;f6{*Hg(u7D5@Hu zIhZbP!J05ro!p&^0u&DAJY02Guf?fAcRdA1a3)H_X>4BbXF)Sn6k?28~C` z(MMXG;IeqdI9UUcy%Y%HnZs>K;iTc@09+y)b;QYW6Seg)itQ*tWc~Rk!W2uN*A9IQ z9BD!c-9ba7jTH@kyG*rHXXxi=z_U0nrixTLa1k)>O6VcwGO5v<6r&np{(u22iC{@A zV1|A{z36S@dJv7|mw^`XAQLmzixpvwpNX}@i0a|!mHv|(B95_p|J=Ct+n7~0R~$Ik U{Oi5_?~zjuHI+W^(P<6Rzx~da$^ZZW literal 0 HcmV?d00001 diff --git a/test/template/test-bower.js b/test/template/test-bower.js index d0c745f6..5c77d3e9 100644 --- a/test/template/test-bower.js +++ b/test/template/test-bower.js @@ -157,6 +157,12 @@ describe('gulp-angular bower template', function () { result.should.not.match(/foundation/); result.should.not.match(/material/); + model.props.ui.key = 'mdl'; + result = bower(model) + result.should.match(/"material-design-lite"/); + result.should.not.match(/bootstrap/); + result.should.not.match(/foundation/); + model.props.ui.key = 'foundation'; model.props.foundationComponents.key = 'angular-foundation'; result = bower(model); From d832cd947e5862e5d20f6e607c7f1bdd7a3102d1 Mon Sep 17 00:00:00 2001 From: Danny Grove Date: Mon, 24 Aug 2015 08:48:17 -0700 Subject: [PATCH 2/2] Adds missing semicolon --- test/template/test-bower.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/template/test-bower.js b/test/template/test-bower.js index 5c77d3e9..c078272b 100644 --- a/test/template/test-bower.js +++ b/test/template/test-bower.js @@ -158,7 +158,7 @@ describe('gulp-angular bower template', function () { result.should.not.match(/material/); model.props.ui.key = 'mdl'; - result = bower(model) + result = bower(model); result.should.match(/"material-design-lite"/); result.should.not.match(/bootstrap/); result.should.not.match(/foundation/);