alchemy_cms 3.2.1 → 3.3.0.rc1

data/app/assets/stylesheets/alchemy/dialogs.scss

@@ -1,3 +1,4 @@
+.alchemy-image-overlay-container,
 .alchemy-dialog-container {
   position: fixed;
   overflow: auto;
@@ -26,6 +27,7 @@
   }
 }
 
+.alchemy-image-overlay,
 .alchemy-dialog-overlay {
   position: fixed;
   top: 0;
@@ -36,21 +38,28 @@
   background-color: rgba(0, 0, 0, 0.0);
   @include transition(background-color 200ms linear);
 
-  &.open {
-    background-color: rgba(0, 0, 0, 0.4);
-  }
-
   &.closable {
     cursor: pointer;
   }
 }
 
-.alchemy-dialog {
+.alchemy-dialog-overlay {
+
+  &.open {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+.alchemy-dialog,
+.alchemy-image-overlay-dialog {
   position: relative;
   max-width: 100%;
   display: inline-block;
   vertical-align: middle;
   text-align: left;
+}
+
+.alchemy-dialog {
   white-space: normal;
   background-color: $light-gray;
   margin: 2*$default-margin;
@@ -137,19 +146,26 @@
   text-overflow: ellipsis;
 }
 
+.alchemy-image-overlay-close,
 .alchemy-dialog-close {
   position: absolute;
+  z-index: 1;
+  cursor: pointer;
+
+  .icon.close.small {
+    line-height: 1;
+    vertical-align: text-top;
+  }
+}
+
+.alchemy-dialog-close {
   top: 0;
   right: 2*$default-padding;
-  z-index: 1;
   padding: 0 $default-padding;
   color: inherit;
-  cursor: pointer;
 
   .icon.close.small {
-    line-height: 1;
     font-size: 16px;
-    vertical-align: text-top;
   }
 }
 

data/app/assets/stylesheets/alchemy/elements.scss

@@ -21,19 +21,19 @@
 
   textarea {
     width: 100%;
-    height: 140px;
+
+    &.has_tinymce {
+      // We need to do this, because globally all texareas have height: auto !important
+      height: 140px !important;
+    }
   }
 }
 
-.element_heading {
-  padding: 0;
-  z-index: 0;
+.element-title {
   overflow: hidden;
   white-space: nowrap;
-  position: absolute;
-  left: 35px;
-  top: 11px;
-  width: 322px;
+  max-width: 322px;
+  margin-left: $default-margin;
 
   .preview_text_quote {
     font-size: 10px;
@@ -42,19 +42,23 @@
   }
 }
 
-span.preview_text_element_name {
+.preview_text_element_name {
   font-size: 10px;
   text-shadow: #efefef 1px 1px 1px;
   font-weight: bold;
   line-height: 15px;
 }
 
-.element_handle {
+.element-handle,
+.element-title {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.element-handle {
+  position: relative;
   width: 18px;
   height: 18px;
-  position: absolute;
-  left: 8px;
-  top: 9px;
 
   .element.icon {
     position: absolute;
@@ -62,7 +66,7 @@ span.preview_text_element_name {
     left: 0;
   }
 
-  span.icon {
+  .icon {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -73,10 +77,26 @@ span.preview_text_element_name {
   }
 }
 
-.draggable .element_handle {
+.draggable .element-handle {
   cursor: move;
 }
 
+.ajax-folder {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+
+  .error_icon {
+    float: left;
+    width: 14px;
+    height: 15px;
+    text-align: center;
+    background-color: white;
+    border: 1px solid #935b5b;
+    color: #935b5b;
+  }
+}
+
 .add_picture {
   float: left;
   margin: 1px;
@@ -114,13 +134,7 @@ span.preview_text_element_name {
   }
 }
 
-.ajax_folder {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-}
-
-.element_editor {
+.element-editor {
   border: 1px solid $default-border-color;
   @extend %rounded-border;
   background-color: $light-gray;
@@ -133,7 +147,7 @@ span.preview_text_element_name {
   &.dirty {
     border-color: #d0c83d;
 
-    .element_head, .element_foot {
+    > .element-header {
       background-color: #fff8df;
     }
   }
@@ -143,14 +157,42 @@ span.preview_text_element_name {
     @include box-shadow(0 0 4px $blue);
   }
 
+  &.folded {
+
+    .nested-elements {
+      display: none;
+    }
+  }
+
+  &.dragged {
+    border-style: dotted;
+    height: 36px;
+
+    * { display: none }
+  }
+
+  &.with-contents, &.without-contents.not-nestable {
+
+    .element-content {
+      padding: 2*$default-padding 2*$default-padding 0;
+      border-top: 1px solid $medium-gray;
+    }
+  }
+
   form {
     margin: 0;
-    padding: 8px 8px 0 8px;
   }
 
   .validation_notice {
+    float: left;
+    margin-top: 8px;
+    margin-bottom: 4px;
     font-size: 10px;
-    margin-top: 1em;
+    text-align: left;
+  }
+
+  .message {
+    margin: 2*$default-margin;
   }
 
   .foot_note {
@@ -165,7 +207,7 @@ span.preview_text_element_name {
     margin-top: 4px;
     @extend %rounded-border;
 
-    span.icon.warning {
+    .icon.warning {
       position: relative;
       top: 2px;
       margin-right: 8px;
@@ -174,42 +216,40 @@ span.preview_text_element_name {
   }
 
   .autocomplete_tag_list {
-    background-color: #e5dcca;
-    margin: 0 -8px 1px -8px;
-    padding: 2*$default-padding;
-    padding-left: 38px;
+    padding: $default-padding 0;
 
     label {
-      top: 21px;
-      left: 8px;
       font-size: 10px;
-      z-index: 1;
     }
 
     .select2-container {
       width: 100%;
 
       .select2-choices {
-        background-color: #F1EAD9;
-
-        .select2-search-choice {
-          background-color: #e5dcca;
-        }
+        width: 100%;
+        margin-bottom: 0;
+        margin-top: 8px;
       }
     }
   }
-}
 
-.element_head, .element_foot {
-  position: relative;
+  hr {
+    height: 0;
+    width: 100%;
+    margin: 0 0 4*$default-margin 0;
+    border: 0 none;
+    border-top: 1px solid $medium-gray;
+    @include opacity(1);
+  }
 }
 
-.element_head {
-  padding: 8px 0 6px;
-  margin-bottom: 0;
+.element-header {
+  position: relative;
   height: 20px;
+  padding: 2*$default-padding;
   background-color: $medium-gray;
   @extend .disable-user-select;
+  cursor: pointer;
 
   .spinner {
     top: 9px;
@@ -217,59 +257,30 @@ span.preview_text_element_name {
   }
 }
 
-.element_foot {
-  padding: 2*$default-padding;
-  width: 100%;
-  height: 29px;
-  margin-left: -8px;
-  margin-right: -8px;
-  background-color: $medium-gray;
+.element-toolbar {
+  padding: 6px 0;
+  height: 6*$default-padding;
+  background-color: #f0f0f0;
 
   .element_tools {
     float: left;
-    margin-right: 8px;
-    margin-top: 6px;
+    margin-top: -3px;
+    margin-left: -4px;
   }
+}
 
-  .element_public {
-    float: left;
-    margin-top: 6px;
-  }
+.element-footer {
+  border-top: 1px solid $medium-gray;
+  margin: 8px 0 0 0;
+  padding: 2*$default-padding;
+  text-align: right;
 
   .button {
-    float: right;
     margin: 0;
   }
 }
 
-div.element_tools {
-  height: 20px;
-}
-
-span.element_tools_icons {
-  float: left;
-}
-
-.element_tools a {
-  width: 16px;
-  height: 16px;
-  float: left;
-  margin: 1px 4px 1px 1px;
-}
-
-a.delete_element_button {
-  background: image-url('alchemy/icons.png') no-repeat -63px -72px;
-}
-
-a.element_copy_button {
-  background: image-url('alchemy/icons.png') no-repeat -128px -72px;
-}
-
-a.element_move_button {
-  background: image-url('alchemy/icons.png') no-repeat -97px -72px;
-}
-
-div.picture_gallery_images {
+.picture_gallery_images {
   overflow: hidden;
   margin: $default-margin 0;
   border: 1px solid $default-border-color;
@@ -286,7 +297,7 @@ div.picture_gallery_images {
   }
 }
 
-div.picture_thumbnail div.picture_image {
+.picture_thumbnail .picture_image {
   height: 93px;
   overflow: hidden;
 
@@ -295,33 +306,45 @@ div.picture_thumbnail div.picture_image {
   }
 }
 
-div#cells {
+#cells {
   min-height: 100px;
 }
 
 .linkable_essence_tools {
   position: absolute;
-  bottom: 0;
+  bottom: 6px;
   right: 0;
 
   .icon_button {
     @include button-defaults;
+    width: 29px;
+    height: 28px;
     margin: 0 0 0 4px;
-    padding: 3px;
+    padding: 2px;
     position: absolute;
-    bottom: 4px;
+    bottom: 3px;
     right: 28px;
     @include border-radius(0);
 
-    &.unlink {
+    &.linked.link-essence {
+      @include linked-button($border-radius: 0 0 0 0);
+    }
+
+    &.linked.unlink-essence {
+      @include linked-button($border-radius: 0 $default-border-radius $default-border-radius 0);
+    }
+
+    &.unlink-essence {
       right: 0;
       @extend .right-rounded-border;
     }
   }
 }
 
-a.expand_element {
-  background: image-url('alchemy/icons.png') no-repeat -160px -72px;
+.expand_element,
+.fold_element {
+  background-image: image-url('alchemy/icons.png');
+  background-repeat: no-repeat;
   height: 16px;
   width: 16px;
   text-decoration: none;
@@ -329,19 +352,20 @@ a.expand_element {
   margin: 1px;
 }
 
-a.fold_element {
-  background: image-url('alchemy/icons.png') no-repeat -192px -72px;
-  height: 16px;
-  width: 16px;
-  text-decoration: none;
-  display: block;
-  margin: 1px;
+.expand_element {
+  background-position: -160px -72px;
+}
+
+.fold_element {
+  background-position: -192px -72px;
 }
 
 .droppable_element_placeholder {
+  height: 36px;
   border: 1px dotted $button-border-color;
   background-color: $medium-gray;
   margin-bottom: 2*$default-margin;
+  @include border-radius($default-border-radius);
 }
 
 .edit_images_bottom {
@@ -352,12 +376,15 @@ a.fold_element {
   bottom: 2px;
   width: 111px;
 
-  a {
+  > a, > span.icon {
     float: left;
     margin-left: 2px;
     margin-right: 2px;
     width: 18px;
     height: 18px;
+  }
+
+  a {
 
     &.linked {
       position: relative;
@@ -372,15 +399,15 @@ a.fold_element {
 
       .icon { margin-left: 1px }
     }
+  }
 
-    &.disabled {
-      @include opacity(0.3);
-      cursor: default;
-    }
+  a.disabled, > span.icon {
+    @include opacity(0.3);
+    cursor: default;
   }
 }
 
-div.content_editor.essence_date {
+.content_editor.essence_date {
   float: none;
   @include inline-block;
   vertical-align: top;
@@ -390,7 +417,7 @@ div.content_editor.essence_date {
   }
 }
 
-div.essence_picture_editor {
+.essence_picture_editor {
   position: relative;
 
   .picture_tool_delete {
@@ -527,13 +554,6 @@ div.file_icon {
   }
 }
 
-a.new_content_link {
-  display: block;
-  text-align: center;
-  margin-bottom: 12px;
-  margin-top: 4px;
-}
-
 div.tinymce_container {
   position: relative;
   margin: $default-margin 0;
@@ -555,27 +575,37 @@ select.long {
   padding: 0;
 }
 
-div.content_editor {
-  margin-bottom: 8px;
+.content_editor {
+  padding: $default-padding 0;
   position: relative;
 
   .thin_border, input[type="text"] {
     width: 100%;
   }
 
-  &.missing p {
-    line-height: 25px;
-    padding: 2*$default-padding;
-    border: 1px solid #f5b04e;
-    background-color: #f5dea9;
-    @extend %rounded-border;
-    font-size: 11px;
+  &.missing {
+
+    .message {
+      margin: 0;
+      @include clearfix;
+    }
 
-    span.icon.warning {
+    p {
+      float: left;
+      width: 70%;
+    }
+
+    .icon.warning {
       vertical-align: text-bottom;
       margin-left: 2px;
       margin-right: 6px;
     }
+
+    .button {
+      float: right;
+      margin: 0;
+      text-decoration: none;
+    }
   }
 
   &.display_inline {
@@ -705,7 +735,7 @@ div.pictures_for_element {
   margin-top: 4px;
 }
 
-textarea.default_tinymce, textarea.custom_tinymce {
+textarea.has_tinymce {
   visibility: hidden;
 }
 
@@ -723,6 +753,7 @@ textarea.default_tinymce, textarea.custom_tinymce {
 }
 
 .element_errors {
+  display: none;
   margin-top: 8px;
   margin-bottom: 8px;
   background-color: $error_background_color;
@@ -770,3 +801,28 @@ a.hint {
     }
   }
 }
+
+.nestable-elements {
+  @include box-shadow(inset 0 4px 8px -2px darken($medium-gray, 15%));
+  background-color: $medium-gray;
+
+  .expanded.element-editor > & {
+    padding: 16px 8px 8px;
+  }
+}
+
+.nested-elements {
+
+  .element-header {
+    background-color: transparent;
+  }
+
+  .element-toolbar {
+    background-color: transparent;
+    border-top: 1px solid $medium-gray;
+  }
+}
+
+.add-nestable-element-button {
+  margin-top: 0;
+}