restyling the editable elements in css3 (wip)

app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee

@@ -37,6 +37,9 @@ class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView
     # liquid code textarea
     @enable_liquid_editing()
 
+    # editable elements
+    @enable_editable_elements_nav()
+
     return @
 
   open_image_picker: (event) ->
@@ -61,6 +64,21 @@ class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView
   after_inputs_fold: ->
     @editor.refresh()
 
+  enable_editable_elements_nav: ->
+    @$('#editable-elements .nav a').click (event) =>
+      event.stopPropagation() & event.preventDefault()
+
+      link = $(event.target).parent()
+
+      index = parseInt(link.attr('href').match(/block-(.+)/)[1])
+
+      @$('#editable-elements .wrapper ul li.block').hide()
+      $("#block-#{index}").show()
+      @_hide_last_separator()
+
+      link.parent().find('.on').removeClass('on')
+      link.addClass('on')
+
   fill_default_slug: (event) ->
     unless @filled_slug
       setTimeout (=> @$('#page_slug').val($(event.target).val().slugify('-')) & @touched_url = true), 30

app/assets/stylesheets/locomotive/application.scss

@@ -59,7 +59,7 @@ ul.list {
 
     background: #ebedf4;
     @include border-radius(16px);
-    border-bottom: 1px solid #d9d9d9;
+    @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
 
     margin-bottom: 10px;
     clear: both;
@@ -181,7 +181,7 @@ ul.theme-assets {
 
       background: #ebedf4;
       @include border-radius(16px);
-      border-bottom: 1px solid #d9d9d9;
+      @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
 
       em {
         display: block;

app/assets/stylesheets/locomotive/editable_elements.scss

@@ -0,0 +1,67 @@
+@import "compass/css3/images";
+@import "compass/css3/border-radius";
+@import "compass/css3/text-shadow";
+@import "compass/css3/box-shadow";
+
+#editable-elements {
+
+  .nav {
+    display: block;
+    width: 100%;
+    height: 31px;
+
+    border-bottom: 1px solid #ccced7;
+
+    // padding: 5px 0px;
+
+    @include border-top-radius(8px);
+    @include background-image(linear-gradient(#ebedf4, #d7dbe7));
+
+    a {
+      float: left;
+      display: block;
+
+      // margin-left: 20px;
+
+      line-height: 31px;
+      padding: 0px 20px 0 20px;
+
+      color: #8b8d9a;
+      @include single-text-shadow(#fff, 1px, 1px, 1px);
+      text-decoration: none;
+      text-transform: capitalize;
+      font-size: 13px;
+      cursor: pointer;
+      outline: none;
+
+      &.on {
+        @include background-image(linear-gradient(#d9dde9, #ebedf4));
+
+        height: 32px;
+
+        color: #1e1f26;
+        font-weight: bold;
+
+        border-right: 1px solid #f8f9fb;
+        border-left: 1px solid #f8f9fb;
+
+        @include box-shadow(rgba(193, 197, 207, 0.4) -1px 0px 0px 0px inset, rgba(193, 197, 207, 0.4) -1px 0px 0px 0px);
+      }
+
+      &:first-child {
+        &.on {
+          @include border-top-left-radius(8px);
+          border-left: none;
+          @include box-shadow(rgba(193, 197, 207, 0.4) -1px 0px 0px 0px inset);
+        }
+      }
+    } // a
+  } // .nav
+
+  fieldset {
+    ol {
+      border-top: none;
+    }
+  } // fieldset
+
+}

app/views/locomotive/pages/_editable_elements.html.haml

@@ -5,7 +5,7 @@
     #editable-elements
       .nav
         - grouped_editable_elements.keys.each_with_index do |name, index|
-          = link_to content_tag(:span, name.try(:humanize) || t('locomotive.pages.form.default_block')), "#block-#{index}", :id => "block-nav-#{index}", :class => "#{'on' if index == 0}"
+          = link_to content_tag(:span, name.try(:humanize).gsub('\'', '') || t('locomotive.pages.form.default_block')), "#block-#{index}", :id => "block-nav-#{index}", :class => "#{'on' if index == 0}"
         .clear
 
       .wrapper
@@ -18,11 +18,11 @@
                   - elements.each do |el|
                     = f.fields_for 'editable_elements', el, :child_index => el._index do |g|
                       - case el
-                        - when EditableLongText
+                        - when ::Locomotive::EditableLongText
                           = g.input :content, :label => el.slug.humanize, :hint => el.hint, :as => :text, :input_html => { :class => 'html' }
-                        - when EditableShortText
+                        - when ::Locomotive::EditableShortText
                           = g.input :content, :label => el.slug.humanize, :hint => el.hint
-                        - when EditableFile
+                        - when ::Locomotive::EditableFile
                           = g.custom_input :source, :label => el.slug.humanize, :hint => el.hint, :css => 'file' do
                             = g.file_field :source
                             - if el.source?