add Recipes(scaffolding)

src/browser/main/tpls/states/home.tpl.html

@@ -1,5 +1,5 @@
 <div class="home-state">
-  <h1 class="jumbotron">Codexen App <small>v0.1</small></h1>
+  <h1 class="jumbotron">Codexen App <small>v0.2</small></h1>
   <p>
     App for Code snippets<br>
   </p>

src/browser/main/tpls/states/recipes.detail.html

@@ -0,0 +1,33 @@
+<div class="snippets-detail-state">
+
+  <div class="detail-header">
+    <span class="detail-header-title">
+      <small>callsign</small>
+      <span ng-bind="vm.recipe.title"></span>
+      <small><span ng-bind="vm.recipe.updatedAt|fromNow"></span> <i class="fa fa-clock-o"></i></small>
+    </span>
+    <span class="detail-header-control pull-right">
+      <!-- <button type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button> -->
+      <button btn-edit-recipe="vm.recipe" type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
+      <button btn-delete-recipe="vm.recipe" type="button" name="button" class="btn btn-danger"><i class="fa fa-trash"></i></button>
+    </span>
+  </div>
+
+  <div class="detail-body">
+
+    <div ng-if="!vm.isLoaded" class="">
+      Loadding
+    </div>
+
+    <div ng-if="vm.isLoaded" class="">
+
+      <div tag-list="vm.recipe.Tags"></div>
+
+      <div class="panel panel-default">
+        <div class="panel-body">
+          <div ng-bind-html="vm.recipe.content | marked"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/browser/main/tpls/states/recipes.list.tpl.html

@@ -0,0 +1,62 @@
+<div class="snippets-list-state">
+
+  <div class="left-pane">
+    <div class="snippet-search">
+
+      <div class="input-group">
+        <input ng-model="vm.search" ng-change="vm.searchRecipes()" type="text" name="name" class="form-control" placeholder="Search ..." autocomplete="off">
+        <span class="input-group-btn">
+          <button btn-new-recipe class="btn btn-default" type="button">
+            <i class="fa fa-plus-square-o"></i>
+          </button>
+        </span>
+      </div>
+    </div>
+    <ul class="snippet-list">
+
+      <li ng-if="vm.isLoading" class="message-item">
+        <h4>
+          Loading
+        </h4>
+      </li>
+
+      <li ng-if="!vm.isLoading && vm.snippets==0 && !vm.isGuest" class="message-item">
+        <h4>
+          Empty List
+        </h4>
+        <button btn-new-snippet class="btn btn-default"><i class="fa fa-plus-square-o"></i> New Snippet</button>
+      </li>
+
+      <li ng-if="!vm.isLoading && vm.isGuest" class="message-item">
+        <h4>
+          Sign In to access
+        </h4>
+        <a ui-sref="auth.signin" class="btn btn-default"><i class="fa fa-signin"></i> Sign In</a>
+      </li>
+
+      <li recipe-item="recipe" ng-repeat="recipe in vm.filtered" ui-sref="recipes.detail({id:recipe.id})" ng-class="{active:vm.recipeId===recipe.id}">
+        <div class="media">
+          <div class="media-left">
+            <img width="25" height="25" class="img-circle" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}" alt="" />
+          </div>
+          <div class="media-body">
+            <p ng-bind="recipe.title"></p>
+            <p class="created-at">
+              <span ng-bind="recipe.updatedAt|fromNow"></span>
+            </p>
+          </div>
+        </div>
+        <div tag-list="recipe.Tags"></div>
+      </li>
+    </ul>
+  </div>
+
+  <div class="right-pane">
+    <div ng-if="'recipes'|isState">
+      No snippet selected.
+    </div>
+    <div ui-view></div>
+  </div>
+
+
+</div>

src/browser/main/tpls/states/snippets.list.tpl.html

@@ -2,7 +2,14 @@
 
   <div class="left-pane">
     <div class="snippet-search">
-      <input ng-model="vm.search" ng-change="vm.searchSnippets()" type="text" name="name" class="form-control" placeholder="Search ..." autocomplete="off">
+      <div class="input-group">
+        <input ng-model="vm.search" ng-change="vm.searchSnippets()" type="text" name="name" class="form-control" placeholder="Search ..." autocomplete="off">
+        <span class="input-group-btn">
+          <button btn-new-snippet class="btn btn-default" type="button">
+            <i class="fa fa-plus-square-o"></i>
+          </button>
+        </span>
+      </div>
     </div>
     <ul class="snippet-list">