YAML Editor work in progress.

alagu · Jun 6, 2013 · 32c5424 · 32c5424
1 parent 2b5a2bf
commit 32c5424
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 19 deletions.
diff --git a/lib/pagoda/public/css/pagoda.css b/lib/pagoda/public/css/pagoda.css
@@ -214,35 +214,65 @@ code {
 #publish-bar .yaml-block {
   display: inline-block;
 }
+#publish-bar .yaml-block .arrow-box {
+  position: relative;
+  background: #aaa;
+  border: 2px solid #444444;
+}
+#publish-bar .yaml-block .arrow-box:after, #publish-bar .yaml-block .arrow-box:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+#publish-bar .yaml-block .arrow-box:after {
+  border-color: rgba(119, 119, 119, 0);
+  border-top-color: #aaa;
+  border-width: 10px;
+  left: 50%;
+  margin-left: -10px;
+}
+#publish-bar .yaml-block .arrow-box:before {
+  border-color: rgba(68, 68, 68, 0);
+  border-top-color: #444444;
+  border-width: 13px;
+  left: 50%;
+  margin-left: -13px;
+}
 #publish-bar .yaml-block .yaml-table {
   position: absolute;
-  border: 1px solid #444;
   background-color: #fff;
-  top: -110px;
-  left: 40px;
+  top: -134px;
+  left: 20px;
+  background-color: #aaa;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   -ms-border-radius: 2px;
   -o-border-radius: 2px;
   border-radius: 2px;
-  -webkit-box-shadow: rgba(68, 68, 68, 0.9) 0 0 5px;
-  -moz-box-shadow: rgba(68, 68, 68, 0.9) 0 0 5px;
-  box-shadow: rgba(68, 68, 68, 0.9) 0 0 5px;
   padding: 0px;
 }
+#publish-bar .yaml-block .yaml-table .yaml-table-inner {
+  background-color: #fff;
+  margin: 1px;
+  border: 1px solid rgba(68, 68, 68, 0.4);
+}
 #publish-bar .yaml-block .yaml-table ul {
   margin: 0;
   padding: 0;
 }
 #publish-bar .yaml-block .yaml-table ul li .key input, #publish-bar .yaml-block .yaml-table ul li .value input {
-  width: 100px;
+  width: 90px;
   border: 0 none;
   margin: 0;
   padding: 0;
   color: #333;
   font-family: 'Titillium Web', sans-serif;
   font-size: 14px;
-  padding-left: 4px;
+  padding-left: 10px;
 }
 #publish-bar .yaml-block .yaml-table ul li .key, #publish-bar .yaml-block .yaml-table ul li .value {
   border-bottom: 1px solid #777;
@@ -260,6 +290,17 @@ code {
 #publish-bar .yaml-block .yaml-table ul li:last-child .key, #publish-bar .yaml-block .yaml-table ul li:last-child .value {
   border-bottom: 0 none;
 }
+#publish-bar .yaml-block .yaml-table ul li.add-yaml-entry {
+  color: #fff;
+  text-shadow: 0px 0px 5px #000;
+  background-color: #aaa;
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+}
+#publish-bar .yaml-block .yaml-table ul li.add-yaml-entry:hover {
+  text-shadow: 0px 0px 20px #000;
+}
 
 #publish-bar input[type=submit],
 #publish-bar a,

diff --git a/lib/pagoda/public/css/pagoda.scss b/lib/pagoda/public/css/pagoda.scss
@@ -212,16 +212,51 @@ code {
   .yaml-block {
     display: inline-block;
 
+    .arrow-box {
+      position: relative;
+      background: #aaa;
+      border: 2px solid #444444;
+      &:after, &:before {
+        top: 100%;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+      &:after {
+        border-color: rgba(119, 119, 119, 0);
+        border-top-color: #aaa;
+        border-width: 10px;
+        left: 50%;
+        margin-left: -10px;
+      }
+      &:before {
+        border-color: rgba(68, 68, 68, 0);
+        border-top-color: #444444;
+        border-width: 13px;
+        left: 50%;
+        margin-left: -13px;
+      }
+    }
+
     .yaml-table {
       position: absolute;
-      border: 1px solid #444;
       background-color: #fff;
-      top: -110px;
-      left: 40px;
+      top: -134px;
+      left: 20px;
+      background-color: #aaa;
+
       @include border-radius(2px);
-      @include box-shadow(rgba(#444, 0.9) 0 0 5px);
       padding: 0px;
 
+      .yaml-table-inner {
+        background-color: #fff;
+        margin: 1px;
+        border: 1px solid rgba(#444, 0.4);
+      }
+
       ul {
         margin: 0;
         padding: 0;
@@ -230,14 +265,14 @@ code {
 
 
           .key input, .value input {
-            width: 100px;
+            width: 90px;
             border: 0 none;
             margin: 0;
             padding: 0;
             color: #333;
             font-family: 'Titillium Web', sans-serif;
             font-size: 14px;
-            padding-left: 4px;
+            padding-left: 10px;
           }
 
           .key, .value {
@@ -262,6 +297,19 @@ code {
             } 
           }
         }
+
+        li.add-yaml-entry {
+          color: #fff;
+          text-shadow: 0px 0px 5px #000;
+          background-color: #aaa;
+          font-size: 14px;
+          line-height: 20px;
+          cursor: pointer;
+
+          &:hover {
+            text-shadow: 0px 0px 20px #000;
+          }
+        }
       }
     }
   }

diff --git a/lib/pagoda/public/js/editor.coffee b/lib/pagoda/public/js/editor.coffee
@@ -64,6 +64,10 @@ $(document).ready ->
     )
     .fail((->set_save_button('error')))
 
+  add_yaml_entry = ->
+    html = $('#add-yaml-template').html()
+    $(html).insertBefore($('.add-yaml-entry'))
+
   # Dom invoked events
   handle_events =->
     $('#post-editor #post-title').autosize({append: "\n"})
@@ -111,6 +115,7 @@ $(document).ready ->
 
       $('#draft-action').click(draft_post)
       $('#publish-action').click(publish_post)
+      $('.add-yaml-entry').click(add_yaml_entry)
 
 
   keyboard_events =->

diff --git a/lib/pagoda/public/js/editor.js b/lib/pagoda/public/js/editor.js
diff --git a/lib/pagoda/templates/edit.mustache b/lib/pagoda/templates/edit.mustache
@@ -11,18 +11,18 @@
               <a href="{{base_url}}/">&laquo; ADMIN</a>
               {{alagu}}
               <div class="yaml-block">
-                <div class="yaml-table">
+                <div class="yaml-table arrow-box">
                   <div class="yaml-table-inner">
                   <ul>
                   {{#data_array}}
                     <li>
                       <div class="key"><input type="text" value="{{key}}" /></div>
                       <div class="value"><input type="text" value="{{value}}"/></div>
+                    </li>
                   {{/data_array}}
+                  <li class="add-yaml-entry"> Add new item </li>
                   </ul>
                   </div>
-                  <div class="yaml-arrow">
-                  </div>
                 </div>
                 <a id="#" class="button">DATA</a>
               </div>
@@ -40,6 +40,10 @@
         </div>
       </div>
     </form>
+    <script type="text/template" id="add-yaml-template"><li>
+        <div class="key"><input type="text" value="" /></div>
+        <div class="value"><input type="text" value=""/></div>
+      </li></script>
   </div>
 
 </body>