locomotivecms 3.0.0.pre.alpha.2 → 3.0.0.pre.alpha.3

data/app/assets/stylesheets/locomotive/components/_drawer.scss

@@ -5,30 +5,20 @@
     padding: 20px 0px 10px 0px;
   }
 
+  .header-row {
+    padding: 15px 0px;
+  }
+
   h1 {
     font-size: 22px;
     font-family: $font-family-sans-serif;
-    color: $main_title_color;
+    // color: $main_title_color;
+    color: $drawer_title_color;
     margin: 0px;
   }
 
   > .close-button {
-    position: absolute;
-    z-index: 991;
-    top: 0px;
-    right: 0px;
-    font-size: 15px;
-    cursor: pointer;
-    width: $drawer_close_button_size;
-    height: $drawer_close_button_size;
-    line-height: $drawer_close_button_size;
-    text-align: center;
-    background: $drawer_close_background_color;
-    color: $drawer_close_button_color;
-  }
-
-  h1 {
-    color: $drawer_title_color;
+    @include control-window-button;
   }
 
-}
+}

data/app/assets/stylesheets/locomotive/components/_live_editing.scss

@@ -0,0 +1,83 @@
+body.live-editing {
+
+  .content .close-button, .content .expand-button {
+    @include control-window-button;
+    z-index: 995;
+  }
+
+  .content .close-button {
+    @include opacity(0);
+    left: 0px;
+  }
+
+  &.full-width-preview {
+    .content .close-button {
+      @include opacity(1);
+    }
+
+    .content.expand-button {
+      display: none;
+    }
+
+    .content {
+      background-color: $live_editing_content_alt_background_color;
+      > .inner {
+        @include opacity(0);
+      }
+    }
+  }
+
+  .preview {
+    border-left: $live_editing_content_width solid #fff;
+    left: -$live_editing_content_width;
+  }
+
+  .content {
+    background-color: $live_editing_content_background_color;
+    > .inner {
+      border-left: 1px solid $live_editing_content_border_color;
+    }
+
+    .scrollable {
+      margin-top: 173px;
+
+      &.no-editable-elements {
+        margin-top: 105px;
+      }
+
+      fieldset.inputs {
+        padding-top: 0px;
+      }
+    }
+
+    .header-row {
+      padding: 15px 0px 15px 0px;
+    }
+
+    .info-row {
+      p {
+        margin-bottom: 0px;
+        line-height: 30px;
+        color: $main_title_color;
+
+        a {
+          color: $main_title_color;
+        }
+
+        button {
+          margin-left: 20px;
+        }
+      }
+
+      fieldset.inputs {
+        .form-group.input {
+          margin-bottom: 0px;
+        }
+      }
+    }
+
+    .editable-elements fieldset:first-child {
+      padding-top: 0px;
+    }
+  }
+}

data/app/assets/stylesheets/locomotive/components/_transitions.scss

@@ -5,7 +5,7 @@
 }
 
 .content {
-  @include transition(left 0.3s ease-in-out);
+  @include transition(left 0.3s ease-in-out, right 0.3s ease-in-out);
 }
 
 body.sidebar-closed {
@@ -24,6 +24,57 @@ body.slide-right-sidebar {
   }
 }
 
+// Live editing
+
+body.live-editing {
+
+  // STATE: SHRINKED
+
+  .content {
+    @include transform(translate3d(0, 0, 0));
+    @include transition(transform 0.3s ease-in-out);
+
+    > .inner {
+      @include transition(opacity 0.0s ease-in-out);
+    }
+
+    .close-button {
+      @include transition(opacity 0.0s ease-in-out);
+    }
+  }
+
+  .preview {
+    @include transform(translate3d(0, 0, 0));
+    @include transition(transform 0.3s ease-in-out, border-left-width 0.6s ease);
+  }
+
+  &.full-width-preview {
+
+    // STATE: EXPANDED
+
+    .content {
+      @include transform(translate3d($live_editing_content_width - 2em, 0, 0));
+
+      @include transition(transform 0.3s ease-in-out, background-color 0.1s ease-in-out 0.2s);
+      > .inner {
+        @include transition(opacity 0.1s ease-in-out 0.2s);
+      }
+
+      .close-button {
+        @include transition(opacity 0.2s ease-in-out 0.2s);
+      }
+    }
+
+    .preview {
+      @include transform(translate3d($live_editing_content_width - 2em, 0, 0));
+      border-left-width: 2em;
+      @include transition(transform 0.3s ease-in-out);
+    }
+
+  }
+
+}
+
 // Drawer
 
 .content > .overlay {
@@ -76,3 +127,14 @@ body.drawer-opened {
 
 }
 
+// body.inline-editing {
+
+//   .content {
+//     @include transition(left 0.3s ease-in-out, right 0.1s linear);
+//   }
+
+//   .drawer {
+//     @include transition(all 0.1s linear);
+//   }
+// }
+

data/app/assets/stylesheets/locomotive/components/header/_base.scss

@@ -64,8 +64,12 @@ $header_site_arrow_color:     #349cb0;
   li {
     a {
       display: inline-block;
+
+      &:first-child {
+        padding-right: 0px;
+      }
+
       span.arrow {
-        margin-left: 5px;
         position: relative;
         top: 1px;
 

data/app/assets/stylesheets/locomotive/components/misc/_notify.scss

@@ -4,10 +4,14 @@
   [data-notify="icon"] {
     font-size: 18px;
     margin-right: 9px;
-    color: #fff;
   }
 
   [data-notify="message"] {
+  }
+}
+
+[data-notify="container"].alert-success, [data-notify="container"].alert-danger {
+   [data-notify="icon"], [data-notify="message"] {
     color: #fff;
   }
 }
@@ -19,9 +23,3 @@
 [data-notify="container"].alert-danger {
   background-color: $brand-danger;
 }
-
-[data-notify="container"].alert-info {
-  [data-notify="icon"],  [data-notify="message"] {
-    color: $state-info-text;
-  }
-}

data/app/assets/stylesheets/locomotive/globals/_bootstrap.scss

@@ -464,8 +464,8 @@ $nav-tabs-active-link-hover-border-color:      $brand-primary !default; // #5199
 // $state-info-bg:                  #d9edf7 !default;
 // $state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
 
-// $state-warning-text:             #8a6d3b !default;
-// $state-warning-bg:               #fcf8e3 !default;
+$state-warning-text:                #8a6d3b !default;
+$state-warning-bg:                  #fcf8e3 !default;
 // $state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
 
 // $state-danger-text:              #a94442 !default;
@@ -592,8 +592,8 @@ $nav-tabs-active-link-hover-border-color:      $brand-primary !default; // #5199
 // $alert-info-text:             $state-info-text !default;
 // $alert-info-border:           $state-info-border !default;
 
-// $alert-warning-bg:            $state-warning-bg !default;
-// $alert-warning-text:          $state-warning-text !default;
+$alert-warning-bg:               $state-warning-bg !default;
+$alert-warning-text:             $state-warning-text !default;
 // $alert-warning-border:        $state-warning-border !default;
 
 // $alert-danger-bg:             $state-danger-bg !default;

data/app/assets/stylesheets/locomotive/globals/_mixins.scss

@@ -63,3 +63,19 @@
   @include user-select(none);
 }
 
+@mixin control-window-button
+{
+  position: absolute;
+  z-index: 991;
+  top: 0px;
+  right: 0px;
+  font-size: 15px;
+  cursor: pointer;
+  width: $control_window_button_size;
+  height: $control_window_button_size;
+  line-height: $control_window_button_size;
+  text-align: center;
+  background: $control_window_background_color;
+  color: $control_window_button_color;
+}
+

data/app/assets/stylesheets/locomotive/globals/_nprogress.scss

@@ -0,0 +1,3 @@
+$nprogress-color:                           #fec145;
+$nprogress-height:                          10px;
+$nprogress-zindex:                          10100;

data/app/assets/stylesheets/locomotive/globals/_variables.scss

@@ -1,54 +1,62 @@
 // custom variables go here
 
-$alt-font-family-sans-serif:          "Muli", sans-serif;
-
-$background_gradient_start:           #54b9cd;
-$background_gradient_end:             #5488cc;
-
-$overlay_background:                  #333;
-
-$main_title_color:                    #666;
-$main_background_color:               #fff;
-
-$paragraph_color:                     #595959;
-
-$header_default_color:                #fff;
-
-$background_content_list:             #f1f4f5;
-
-$sidebar_width:                       21em;
-$sidebar_darker_background_color:     #2f2f2f;
-$sidebar_background_color:            #383838;
-$sidebar_text_color:                  #fff;
-$sidebar_section_border_color:        #474747;
-$sidebar_section_title_color:         #949999;
-$sidebar_link_color:                  rgba(#fff, 0.8);
-$sidebar_hovered_link_color:          #fff;
-$sidebar_font_size:                   $font-size-base - 1;
-$sidebar_title_font_size:             $font-size-base - 2;
-
-$sidebar_link_height:                 45px;
-$sidebar_link_arrow_color:            #616161;
-$sidebar_link_icon_color:             #949999;
-$sidebar_link_background_hover_color: #474747;
-
-$drawer_width:                        40em;
-$drawer_background_color:             white;
-$drawer_close_button_size:            30px;
-$drawer_close_button_color:           #fff; //#333;
-$drawer_close_background_color:       #333;
-$drawer_title_color:                  #666;
-
-$form_input_background_color:         #f7f7f7;
-$form_input_padding:                  15px;
-$form_input_radius:                   4px;
-$form_input_label_color:              #555;
-$form_input_label_size:               11px;
-$form_input_control_border_size:      4px;
-$form_input_control_border_color:     #d7d7d7;
-$form_input_help_color:               #828787;
-$form_input_help_size:                12px;
-$form_input_wrapper_background_color: #fff;
+$alt-font-family-sans-serif:              "Muli", sans-serif;
+
+$background_gradient_start:               #54b9cd;
+$background_gradient_end:                 #5488cc;
+
+$overlay_background:                      #333;
+
+$main_title_color:                        #666;
+$main_background_color:                   #fff;
+
+$paragraph_color:                         #595959;
+
+$header_default_color:                    #fff;
+
+$background_content_list:                 #f1f4f5;
+
+$sidebar_width:                           21em;
+$sidebar_darker_background_color:         #2f2f2f;
+$sidebar_background_color:                #383838;
+$sidebar_text_color:                      #fff;
+$sidebar_section_border_color:            #474747;
+$sidebar_section_title_color:             #949999;
+$sidebar_link_color:                      rgba(#fff, 0.8);
+$sidebar_hovered_link_color:              #fff;
+$sidebar_font_size:                       $font-size-base - 1;
+$sidebar_title_font_size:                 $font-size-base - 2;
+
+$sidebar_link_height:                     45px;
+$sidebar_link_arrow_color:                #616161;
+$sidebar_link_icon_color:                 #949999;
+$sidebar_link_background_hover_color:     #474747;
+
+$drawer_width:                            40em;
+$drawer_background_color:                 white;
+$drawer_title_color:                      #666;
+
+$control_window_button_size:              30px;
+$control_window_button_color:             #fff; //#333;
+$control_window_background_color:         #333;
+
+$live_editing_content_width:                40em;
+$live_editing_content_border_color:         $navbar-default-bg;
+$live_editing_content_background_color:     #fff;
+$live_editing_content_alt_background_color: #333;
+
+$form_input_background_color:             #f7f7f7;
+$form_input_hovered_background_color:     #f7f8d1;
+$form_input_padding:                      15px;
+$form_input_radius:                       4px;
+$form_input_label_color:                  #555;
+$form_input_label_size:                   11px;
+$form_input_control_border_size:          4px;
+$form_input_control_border_color:         #d7d7d7;
+$form_input_hovered_control_border_color: #d9d9ba;
+$form_input_help_color:                   #828787;
+$form_input_help_size:                    12px;
+$form_input_wrapper_background_color:     #fff;
 
 $form_input_array_item_height:              30px;
 $form_input_array_draggable_color:          #ccc;

data/app/assets/stylesheets/locomotive/layouts/_live_editing.scss

@@ -0,0 +1,29 @@
+body.live-editing {
+
+  .preview {
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: $live_editing_content_width;
+  }
+
+  .content {
+    left: auto;
+    right: 0px;
+    width: $live_editing_content_width;
+
+    .inner {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+    }
+  }
+
+  &.sidebar-closed .content {
+    left: auto;
+  }
+
+}

data/app/controllers/locomotive/editable_elements_controller.rb

@@ -6,20 +6,67 @@ module Locomotive
     localized
 
     before_filter :load_page
+    after_filter  :store_location_if_content_entry
 
-    layout 'locomotive/layouts/preview'
+    layout :editable_elements_layout
 
     def index
       authorize @page
-      respond_with(@page)
+
+      @editable_elements = parsing_service.find_or_create_editable_elements(@page)
+
+      respond_with(@page) do |format|
+        format.html { render_index }
+      end
+    end
+
+    def update_all
+      authorize @page, :update?
+
+      @editable_elements = persisting_service.update_all(page_params[:editable_elements_attributes].values)
+
+      respond_with(@page, notice: t(:notice, scope: 'flash.locomotive.pages.update'), location: editable_elements_path(current_site, @page)) do |format|
+        format.html { render_index }
+      end
     end
 
     private
 
+    def editable_elements_layout
+      @page.default_response_type? ? 'locomotive/layouts/live_editing' : '/locomotive/layouts/application'
+    end
+
     def load_page
       @page = current_site.pages.find(params[:page_id])
     end
 
+    def page_params
+      params.require(:page).permit(editable_elements_attributes: [:id, :page_id, :source, :remove_source, :remote_source_url, :content])
+    end
+
+    def parsing_service
+      @parsing_service ||= Locomotive::PageParsingService.new(current_site, current_content_locale)
+    end
+
+    def persisting_service
+      @persisting_service ||= Locomotive::EditableElementService.new(current_site, current_locomotive_account)
+    end
+
+    def render_index
+      @editable_elements_by_block = @editable_elements.group_by { |(_, e)| e.block }
+
+      @content_entry = @page.content_type.entries.find(params[:content_entry_id]) if params[:content_entry_id]
+
+      if request.xhr?
+        render partial: 'edit'
+      else
+        render @page.default_response_type? ? 'index' : 'index_without_preview'
+      end
+    end
+
+    def store_location_if_content_entry
+      store_location if @content_entry
+    end
 
   end
 end