mwaylabs · StritziK · Jan 15, 2014 · Jan 15, 2014 · Jan 15, 2014 · Jan 17, 2014
diff --git a/doc-template/additional/Demo-App.md b/doc-template/additional/Demo-App.md
diff --git a/doc-template/additional/Generator.md b/doc-template/additional/Generator.md
@@ -0,0 +1,186 @@
+# The-M-Project generator [![Build Status](https://travis-ci.org/mwaylabs/generator-m.png)](https://travis-ci.org/mwaylabs/generator-m) [![Coverage Status](https://coveralls.io/repos/mwaylabs/generator-m/badge.png?branch=master)](https://coveralls.io/r/mwaylabs/generator-m?branch=master)
+
+A [Yeoman](http://yeoman.io) generator for [The-M-Project 2.0](http://the-m-project.org).
+
+## Getting Started
+
+Make sure you have installed Node.js, Git and optionally, Ruby and Compass (if you plan to use Sass).
+
+Install: `npm install -g generator-m`
+
+Create a folder and name it after the application name and `cd` into it:
+```
+mkdir my-new-project && cd $_
+```
+
+Run the yo generator:
+```
+yo m
+```
+
+Run `grunt` for building and `grunt server` for preview
+
+## Generators
+
+Available generators:
+
+* [m](#app)
+* [m:view](#view)
+* [m:layout](#layout)
+* [m:controller](#controller)
+* [m:model](#model)
+* [m:collection](#collection)
+* [m:router](#router)
+* [m:i18n](#i18n)
+
+### App
+Create a new The-M-Project app and generate all the boilerplate for you.
+
+```
+yo m
+```
+
+### View
+
+Generates a view in `app/scripts/views`.
+
+Example:
+```
+yo m:view foo
+```
+
+Produces `app/scripts/views/foo.js`:
+
+```javascript
+APPNAME.Views.FooView = M.View.extend({
+   // ...
+})
+```
+### Layout
+
+Generates a layout in `app/scripts/layouts`.
+
+Example:
+```
+yo m:layout foo
+```
+
+Produces `app/scripts/layouts/foo.js`:
+
+```javascript
+APPNAME.Layouts.FooLayout = M.Layout.extend({
+   // ...
+})
+```
+
+### Controller
+
+Generates a controller in `app/scripts/controllers`.
+
+Example:
+```
+yo m:controller foo
+```
+
+Produces `app/scripts/controllers/foo.js`:
+
+```javascript
+APPNAME.Controllers.FooController = M.Controller.extend({
+   // ...
+})
+```
+
+### Model
+
+Generates a model in `app/scripts/models`.
+
+Example:
+```bash
+yo m:model foo
+```
+
+Produces `app/scripts/models/foo.js`:
+
+```javascript
+APPNAME.Models.FooModel = M.Model.extend({
+   // ...
+})
+```
+
+### Collection
+
+Generates a collection in `app/scripts/collections`.
+
+Example:
+```
+yo m:collection foo
+```
+
+Produces `app/scripts/collections/foo.js`:
+
+```javascript
+APPNAME.Collections.FooCollection = M.Collection.extend({
+   // ...
+})
+```
+
+### Router
+
+Generates a router in `app/scripts/routers`.
+
+Example:
+```
+yo m:routers foo
+```
+
+Produces `app/scripts/routers/foo.js`:
+
+```javascript
+APPNAME.Routers.FooRouter = M.Router.extend({
+   // ...
+})
+```
+
+### I18N
+
+Generates a i18n in `app/i18n`.
+
+Example:
+```
+yo m:i18n en
+```
+
+Produces `app/i18n/en.json`:
+
+```javascript
+{
+    "global.button.save": "Save document",
+    "global.button.emptyTrash": "Empty Trash ({{count}})",
+    "global.error.permissionDenied": "Permission denied"
+}
+```
+
+## Options
+
+* `--skip-install`
+
+  Skips the automatic execution of `bower` and `npm` after scaffolding has finished.
+
+* `--test-framework <framework>`
+
+  Defaults to `mocha`. Can be switched for another supported testing framework like `jasmine`.
+
+
+## Contribute
+
+See the [contributing docs](https://github.com/yeoman/yeoman/blob/master/contributing.md)
+
+When submitting an issue, please follow the [guidelines](https://github.com/yeoman/yeoman/blob/master/contributing.md#issue-submission). Especially important is to make sure Yeoman is up-to-date, and providing the command or commands that cause the issue.
+
+When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.
+
+When submitting a new feature, add tests that cover the feature.
+
+## License
+
+[MIT License](http://en.wikipedia.org/wiki/MIT_License)
diff --git a/doc-template/additional/Sample-Apps.md b/doc-template/additional/Sample-Apps.md
@@ -0,0 +1,21 @@
+# The-M-Project - Absinthe Sample Apps
+
+[Looking for the Samples of The-M-Project 1.x?](https://github.com/mwaylabs/The-M-Project-Sample-Apps/tree/1.x)
+
+## Setup
+
+- Navigate to a sample app ```cd kitchensink/```
+- Install dependencies:
+  - ```npm install```
+  - ```bower install```
+- Start the server: ```grunt server```
+
+## Setup all
+
+If you are looking for an easy setup process for all sample applications run:
+
+```sh setup-all.sh```
+
+The script runs the following commands:
+  - ```npm install```
+  - ```bower install```
diff --git a/resources/sass/_master.scss b/resources/sass/_master.scss
@@ -32,4 +32,6 @@
 @import "themes/default/movable";
 @import "themes/default/toggleswitch";
 @import "themes/default/menu";
+@import "themes/default/alert";
+@import "themes/default/dialog";
 
diff --git a/resources/sass/themes/default/_alert.scss b/resources/sass/themes/default/_alert.scss
@@ -0,0 +1,21 @@
+.m-view.m-labelview.m-alertview-inner-message {
+  word-wrap: break-word;
+  padding: 15px;
+  text-align: center;
+}
+
+.m-view.m-labelview.m-alertview-title {
+  word-wrap: break-word;
+  padding: 15px 15px 0 15px;
+  text-align: center;
+}
+
+.m-alertview-inner {
+  position: relative;
+  width: 300px;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 1040;
+  border: 1px solid $m-modal-text-color;
+  color: $m-modal-text-color;
+  border-radius: 4px;
+}
diff --git a/resources/sass/themes/default/_variables.scss b/resources/sass/themes/default/_variables.scss
@@ -128,6 +128,7 @@ $m-primary-margin-bottom: 20px;
 
 // Modal
 $modal-backdrop-background-color: $black;
+$m-modal-text-color: $m-button-text-color;
 
 $content-padding: 15px;
 

diff --git a/resources/sass/themes/default/dialog.scss b/resources/sass/themes/default/dialog.scss
@@ -0,0 +1,21 @@
+.m-view.m-labelview.m-dialogview-inner-message {
+  word-wrap: break-word;
+  padding: 15px;
+  text-align: center;
+}
+
+.m-view.m-labelview.m-dialogview-headline {
+  word-wrap: break-word;
+  padding: 15px 15px 0 15px;
+  text-align: center;
+}
+
+.m-dialogview-inner {
+  position: relative;
+  width: 300px;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 1040;
+  border: 1px solid $m-modal-text-color;
+  color: $m-modal-text-color;
+  border-radius: 4px;
+}
diff --git a/resources/sass/themes/ios/_alert.scss b/resources/sass/themes/ios/_alert.scss
@@ -0,0 +1,6 @@
+.ios .m-alertview-inner {
+  position: relative;
+  width: 300px;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 1040;
+}
diff --git a/resources/sass/themes/ios/dialog.scss b/resources/sass/themes/ios/dialog.scss
@@ -0,0 +1,6 @@
+.ios .m-dialogview-inner {
+  position: relative;
+  width: 300px;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 1040;
+}
diff --git a/resources/sass/themproject_ios.scss b/resources/sass/themproject_ios.scss
@@ -3,6 +3,8 @@
 
 .ios {
   @import "master";
+  @import "themes/ios/alert";
+  @import "themes/ios/dialog";
   @import "themes/ios/buttongroup";
   @import "themes/ios/radiolist";
   @import "themes/ios/checkboxlist";

diff --git a/src/_ui.js b/src/_ui.js
@@ -16,7 +16,6 @@
 // @include ./ui/views/button.js
 // @include ./ui/views/list.js
 // @include ./ui/views/slider.js
-// @include ./ui/views/dialog.js
 // @include ./ui/views/toggle.js
 // @include ./ui/views/image.js
 // @include ./ui/views/toast.js
@@ -30,6 +29,8 @@
 // @include ./ui/views/checkboxlist.js
 // @include ./ui/views/modal.js
 // @include ./ui/views/loader.js
+// @include ./ui/views/alert.js
+// @include ./ui/views/dialog.js
 // @include ./ui/views/text.js
 // @include ./ui/views/debug.js
 // @include ./ui/views/movable.js

diff --git a/src/templates.js b/src/templates.js
diff --git a/src/templates/default/alert.ejs b/src/templates/default/alert.ejs
@@ -0,0 +1,7 @@
+<div class="m-view m-overlayview m-alertview m-alertview-show" style="display: block;">
+    <div class="m-view m-overlayview-inner m-alertview-inner">
+        <div class="m-view m-labelview m-alertview-title"><%= title %></div>
+        <div class="m-view m-labelview m-alertview-inner-message"><%= text %></div>
+        <div data-childviews="buttonContainer"></div>
+    </div>
+</div>
diff --git a/src/templates/default/dialog.ejs b/src/templates/default/dialog.ejs
@@ -1 +1,7 @@
-<div></div>
+<div class="m-view m-overlayview m-dialogview m-dialogview-show" style="display: block;">
+    <div class="m-view m-overlayview-inner m-dialogview-inner">
+        <div class="m-view m-labelview m-dialogview-headline"><%= headline %></div>
+        <div class="m-view m-labelview m-dialogview-inner-message"><%= text %></div>
+        <div data-childviews="buttons"></div>
+    </div>
+</div>
diff --git a/src/templates/default/loader.ejs b/src/templates/default/loader.ejs
@@ -1 +1,15 @@
-<div class="m-view m-overlayview m-loaderview m-loaderview-show" style="display: block;"> <div class="m-view m-overlayview-inner m-loaderview-inner"> <div class="m-view m-labelview m-loaderview-inner-message"></div> <div class="m-view m-loaderview-inner-icon m-loaderview-inner-icon-only"> <div class="m-view m-loaderview-inner-icon-1"></div> <div class="m-view m-loaderview-inner-icon-2"></div> <div class="m-view m-loaderview-inner-icon-3"></div> <div class="m-view m-loaderview-inner-icon-4"></div> <div class="m-view m-loaderview-inner-icon-5"></div> <div class="m-view m-loaderview-inner-icon-6"></div> <div class="m-view m-loaderview-inner-icon-7"></div> <div class="m-view m-loaderview-inner-icon-8"></div> </div> </div> </div>
+<div class="m-view m-overlayview m-loaderview m-loaderview-show" style="display: block;">
+    <div class="m-view m-overlayview-inner m-loaderview-inner">
+        <div class="m-view m-labelview m-loaderview-inner-message"></div>
+        <div class="m-view m-loaderview-inner-icon m-loaderview-inner-icon-only">
+            <div class="m-view m-loaderview-inner-icon-1"></div>
+            <div class="m-view m-loaderview-inner-icon-2"></div>
+            <div class="m-view m-loaderview-inner-icon-3"></div>
+            <div class="m-view m-loaderview-inner-icon-4"></div>
+            <div class="m-view m-loaderview-inner-icon-5"></div>
+            <div class="m-view m-loaderview-inner-icon-6"></div>
+            <div class="m-view m-loaderview-inner-icon-7"></div>
+            <div class="m-view m-loaderview-inner-icon-8"></div>
+        </div>
+    </div>
+</div>