update recipe states

src/browser/main/tpls/directives/snippet-view.html

@@ -0,0 +1,14 @@
+<div
+  ui-ace="{
+    showGutter: false,
+    useWrapMode : true,
+    mode:snippet.mode.toLowerCase(),
+    maxLines: -1,
+    theme:'solarized_dark',
+    rendererOptions: {
+        maxLinks: Infinity
+      }
+    }"
+  readonly
+  ng-model="snippet.content"
+  ></div>

src/browser/main/tpls/modals/edit-recipe-modal.html

@@ -14,12 +14,6 @@
         <i class="glyphicon glyphicon-bell"></i> Markdown
       </tab-heading>
 
-      <div class="form-group">
-        <span>
-          <button class="btn btn-default">Add Snippet</button>
-        </span>
-      </div>
-
       <div class="form-group">
         <div
           ui-ace="{
@@ -37,12 +31,17 @@
       </tab-heading>
       <div class="panel panel-default">
         <div class="panel-body">
-          <div ng-bind-html="vm.recipe.content | marked"></div>
+          <div ng-bind-html="vm.recipe.content | marked" class="marked"></div>
         </div>
       </div>
     </tab>
   </tabset>
 
+  <div class="form-group">
+      <button ng-click="vm.insertSnippet()" class="btn btn-default">Add Snippet</button>
+      <button btn-expand-recipe="vm.recipe" class="btn btn-default">Expand Editor</button>
+  </div>
+
     <div class="form-group">
       <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.recipe.Tags" theme="bootstrap">
         <ui-select-match placeholder="Tags...">{{$item.name}}</ui-select-match>

src/browser/main/tpls/modals/expand-recipe-modal.html

@@ -0,0 +1,37 @@
+<div class="expand-recipe-modal">
+  <div class="modal-header">
+    <button ng-click="vm.insert('h1')" class="btn btn-default"><i class="fa fa-header fa-fw"></i></button>
+    <button ng-click="vm.insert('ul')" class="btn btn-default"><i class="fa fa-list-ul fa-fw"></i></button>
+    <button ng-click="vm.insert('ol')" class="btn btn-default"><i class="fa fa-list-ol fa-fw"></i></button>
+    <button ng-click="vm.insert('a')" class="btn btn-default"><i class="fa fa-link fa-fw"></i></button>
+    <button ng-click="vm.insert('table')" class="btn btn-default"><i class="fa fa-table fa-fw"></i></button>
+    <button ng-click="vm.insertSnippet()" class="btn btn-default">Insert Snippet</button>
+  </div>
+  <div class="modal-body">
+    <div class="container-fluid expand-editor">
+      <div class="row">
+        <div class="col-xs-6 editor-pane">
+          <div
+            ui-ace="{
+              mode: 'Markdown',
+              theme: 'solarized_dark',
+              useWrapMode: true
+            }"
+            ng-model="vm.recipe.content"
+          ></div>
+        </div>
+
+        <div class="col-xs-6">
+          <div class="panel panel-default preview-pane">
+            <div class="panel-body">
+              <div ng-bind-html="vm.recipe.content | marked" class="marked"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="vm.cancel()">Close</button>
+  </div>
+</div>

src/browser/main/tpls/modals/new-recipe-modal.html

@@ -5,7 +5,7 @@
 
   <div class="modal-body">
     <div class="form-group">
-      <input ng-model="vm.title" type="text" class="form-control" placeholder="Title">
+      <input ng-model="vm.recipe.title" type="text" class="form-control" placeholder="Title">
     </div>
 
   <tabset>
@@ -14,12 +14,6 @@
         <i class="glyphicon glyphicon-bell"></i> Markdown
       </tab-heading>
 
-      <div class="form-group">
-        <span>
-          <button class="btn btn-default">Add Snippet</button>
-        </span>
-      </div>
-
       <div class="form-group">
         <div
           ui-ace="{
@@ -27,7 +21,7 @@
             theme: 'solarized_dark',
             useWrapMode: true
           }"
-          ng-model="vm.content"
+          ng-model="vm.recipe.content"
         ></div>
       </div>
     </tab>
@@ -37,14 +31,19 @@
       </tab-heading>
       <div class="panel panel-default">
         <div class="panel-body">
-          <div ng-bind-html="vm.content | marked"></div>
+          <div ng-bind-html="vm.recipe.content | marked" class="marked"></div>
         </div>
       </div>
     </tab>
   </tabset>
 
+  <div class="form-group">
+      <button ng-click="vm.insertSnippet()" class="btn btn-default">Add Snippet</button>
+      <button btn-expand-recipe="vm.recipe" class="btn btn-default">Expand Editor</button>
+  </div>
+
     <div class="form-group">
-      <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.Tags" theme="bootstrap">
+      <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.recipe.Tags" theme="bootstrap">
         <ui-select-match placeholder="Tags...">{{$item.name}}</ui-select-match>
         <ui-select-choices repeat="tag in vm.tagCandidates" refresh="vm.refreshTagCandidates($select.search)"
          refresh-delay="100">

src/browser/main/tpls/modals/select-snippet-modal.html

@@ -0,0 +1,19 @@
+<div class="select-snippet-modal">
+  <div class="modal-header">
+    Select a snippet
+  </div>
+  <div class="modal-body">
+    <ul class="snippet-list">
+      <li ng-repeat="snippet in vm.snippets" ng-click="vm.select(snippet)">
+        <p ng-bind="snippet.callSign"></p>
+        <p ng-bind="snippet.description"></p>
+        <p class="created-at">
+          <span ng-bind="snippet.updatedAt|fromNow"></span>
+        </p>
+      </li>
+    </ul>
+  </div>
+  <div class="modal-footer">
+    <button ng-click="vm.cancel()" class="btn btn-default">Cancel</button>
+  </div>
+</div>

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

@@ -25,7 +25,7 @@
 
       <div class="panel panel-default">
         <div class="panel-body">
-          <div ng-bind-html="vm.recipe.content | marked"></div>
+          <div ng-bind-html="vm.recipe.content | marked" class="marked"></div>
         </div>
       </div>
     </div>