From 32c5424df0e21a2729fd08f8b8d0f485249ec4fa Mon Sep 17 00:00:00 2001 From: Alagu Date: Thu, 6 Jun 2013 00:23:17 -0600 Subject: [PATCH] YAML Editor work in progress. --- lib/pagoda/public/css/pagoda.css | 57 ++++++++++++++++++++++++---- lib/pagoda/public/css/pagoda.scss | 60 +++++++++++++++++++++++++++--- lib/pagoda/public/js/editor.coffee | 5 +++ lib/pagoda/public/js/editor.js | 10 ++++- lib/pagoda/templates/edit.mustache | 10 +++-- 5 files changed, 123 insertions(+), 19 deletions(-) diff --git a/lib/pagoda/public/css/pagoda.css b/lib/pagoda/public/css/pagoda.css index 7759efe..362c389 100644 --- 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 index a7d9ef3..3e42b66 100644 --- 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 index 8ce7576..d8d6daf 100644 --- 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 index 660f240..4a6d1de 100644 --- a/lib/pagoda/public/js/editor.js +++ b/lib/pagoda/public/js/editor.js @@ -2,7 +2,7 @@ (function() { $(document).ready(function() { - var draft_post, focus_to_type, fullscreen_mobile, handle_events, init, is_edit_page, is_iphone, keyboard_events, publish_post, save_post, set_save_button, show_shortcuts; + var add_yaml_entry, draft_post, focus_to_type, fullscreen_mobile, handle_events, init, is_edit_page, is_iphone, keyboard_events, publish_post, save_post, set_save_button, show_shortcuts; key.filter = function(e) { return true; }; @@ -73,6 +73,11 @@ return set_save_button('error'); })); }; + add_yaml_entry = function() { + var html; + html = $('#add-yaml-template').html(); + return $(html).insertBefore($('.add-yaml-entry')); + }; handle_events = function() { $('#post-editor #post-title').autosize({ append: "\n" @@ -121,7 +126,8 @@ return false; }); $('#draft-action').click(draft_post); - return $('#publish-action').click(publish_post); + $('#publish-action').click(publish_post); + return $('.add-yaml-entry').click(add_yaml_entry); } }; keyboard_events = function() { diff --git a/lib/pagoda/templates/edit.mustache b/lib/pagoda/templates/edit.mustache index 1bf9c29..353ae22 100644 --- a/lib/pagoda/templates/edit.mustache +++ b/lib/pagoda/templates/edit.mustache @@ -11,18 +11,18 @@ « ADMIN {{alagu}}
-
+
    {{#data_array}}
  • +
    • {{/data_array}} +
  • Add new item
-
-
DATA
@@ -40,6 +40,10 @@
+ \ No newline at end of file