From 2620748b813c24da7977c3fc22bac8b633182607 Mon Sep 17 00:00:00 2001 From: did Date: Thu, 17 Nov 2011 18:05:51 +0100 Subject: [PATCH] restyling the editable elements in css3 (wip) --- .../views/pages/_form_view.js.coffee | 18 +++++ .../stylesheets/locomotive/application.scss | 4 +- .../locomotive/editable_elements.scss | 67 +++++++++++++++++++ .../pages/_editable_elements.html.haml | 8 +-- 4 files changed, 91 insertions(+), 6 deletions(-) create mode 100644 app/assets/stylesheets/locomotive/editable_elements.scss diff --git a/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee b/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee index cc8f8138..fda3102d 100644 --- a/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee +++ b/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 diff --git a/app/assets/stylesheets/locomotive/application.scss b/app/assets/stylesheets/locomotive/application.scss index 7ee26085..ff5bf807 100644 --- a/app/assets/stylesheets/locomotive/application.scss +++ b/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; diff --git a/app/assets/stylesheets/locomotive/editable_elements.scss b/app/assets/stylesheets/locomotive/editable_elements.scss new file mode 100644 index 00000000..a782e585 --- /dev/null +++ b/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 + +} \ No newline at end of file diff --git a/app/views/locomotive/pages/_editable_elements.html.haml b/app/views/locomotive/pages/_editable_elements.html.haml index ccaf5b6d..f3f4ac56 100644 --- a/app/views/locomotive/pages/_editable_elements.html.haml +++ b/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?