alchemy_cms 4.1.0.beta → 4.1.0.rc1

data/alchemy_cms.gemspec

@@ -28,7 +28,7 @@ Gem::Specification.new do |gem|
   gem.add_runtime_dependency 'gutentag',                         ['~> 2.2', '>= 2.2.1']
   gem.add_runtime_dependency 'handlebars_assets',                ['~> 0.23']
   gem.add_runtime_dependency 'jquery-rails',                     ['~> 4.0', '>= 4.0.4']
-  gem.add_runtime_dependency 'jquery-ui-rails',                  ['~> 5.0.0']
+  gem.add_runtime_dependency 'jquery-ui-rails',                  ['~> 6.0']
   gem.add_runtime_dependency 'kaminari',                         ['~> 1.1']
   gem.add_runtime_dependency 'originator',                       ['~> 3.1']
   gem.add_runtime_dependency 'non-stupid-digest-assets',         ['~> 1.0.8']

data/app/assets/images/alchemy/icon-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#fff" d="M15.7 7.9L9.9 2.2 2.1 4.3 0 12.1l5.7 5.8 7.8-2.1 2.2-7.9zm-5.3 10.3l-1.2 4.4 3.2 3.2 4.4-1.2 1.2-4.4-3.2-3.2-4.4 1.2zM23.5 7.3L17.2 9l-1.7 6.2 4.5 4.6 6.2-1.7 1.7-6.2-4.4-4.6z"/></svg>

data/app/assets/javascripts/alchemy/admin.js

@@ -3,10 +3,10 @@
 //= require jquery2
 //= require jquery_ujs
 //= require turbolinks
-//= require jquery-ui/draggable
-//= require jquery-ui/effect-fade
-//= require jquery-ui/sortable
-//= require jquery-ui/tabs
+//= require jquery-ui/effects/effect-fade
+//= require jquery-ui/widgets/draggable
+//= require jquery-ui/widgets/sortable
+//= require jquery-ui/widgets/tabs
 //= require tinymce/tinymce.min
 //= require_tree ../../../../vendor/assets/javascripts/jquery_plugins/
 //= require clipboard.min

data/app/assets/javascripts/alchemy/alchemy.buttons.js.coffee

@@ -20,12 +20,14 @@ Alchemy.Buttons =
 
   disable: (button) ->
     $button = $(button)
-    spinner = new Alchemy.Spinner('small', {fill: '#fff'})
+    spinner = new Alchemy.Spinner('small')
     $button.data('content', $button.html())
     $button.attr('disabled', true)
+    $button.attr('tabindex', '-1')
     $button.addClass('disabled')
     $button.css
       width: $button.outerWidth()
+      height: $button.outerHeight()
     $button.empty()
     spinner.spin($button)
     return true
@@ -36,6 +38,8 @@ Alchemy.Buttons =
       $button = $(this)
       $button.removeClass('disabled')
       $button.removeAttr('disabled')
+      $button.removeAttr('tabindex')
       $button.css("width", "")
+      $button.css("height", "")
       $button.html($button.data('content'))
     return true

data/app/assets/javascripts/alchemy/alchemy.dragndrop.js.coffee

@@ -1,5 +1,5 @@
-#= require jquery-ui/draggable
-#= require jquery-ui/sortable
+#= require jquery-ui/widgets/draggable
+#= require jquery-ui/widgets/sortable
 #
 window.Alchemy = {} if typeof (window.Alchemy) is "undefined"
 

data/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee

@@ -191,8 +191,6 @@ Alchemy.ElementEditors =
     element_id = $element.attr("id").replace(/\D/g, "")
     @selectElement($element)
     @selectElementInPreview(element_id)
-    # Element submit button needs to keep it's default event
-    e.preventDefault() unless $target.is(':submit')
     return
 
   # Double click event handler for element head.

data/app/assets/javascripts/alchemy/alchemy.link_dialog.js.coffee

@@ -124,7 +124,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     $("#contents_#{content_id}_link_class_name").val(@link_type)
     $("#contents_#{content_id}_link_target").val(target)
     @$link_object.addClass('linked')
-    @$link_object.next().addClass('linked').removeClass('disabled')
+    @$link_object.next().addClass('linked').removeClass('disabled').removeAttr('tabindex')
 
   # Selects the correct tab for link type and fills all fields.
   selectTab: ->
@@ -251,6 +251,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     $("#contents_#{content_id}_link_target").val('')
     if $link.hasClass('linked')
       Alchemy.setElementDirty $(link).closest('.element-editor')
-      $link.removeClass('linked').addClass('disabled')
+      $link.removeClass('linked').addClass('disabled').attr('tabindex', '-1')
+      $link.blur()
     $('#edit_link_' + content_id).removeClass('linked')
     false

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

@@ -7,16 +7,6 @@
   -moz-text-overflow: ellipsis;
 }
 
-%thumbnail-background {
-  position: relative;
-  display: table-cell;
-  background-color: $dark-gray;
-  text-align: center;
-  vertical-align: middle;
-  padding: 0;
-  line-height: 0;
-}
-
 %field-with-error {
   border-color: $error_border_color;
   color: $error_text_color;
@@ -24,10 +14,6 @@
   box-shadow: inset 1px 1px 4px rgba($error_border_color, 0.5);
 }
 
-%blue-focus-style {
-  @include default-focus-style;
-}
-
 %default-input-style {
   border-radius: $default-border-radius;
   box-shadow: $form-field-box-shadow;
@@ -39,15 +25,14 @@
   border-width: $form-field-border-width;
   border-style: $form-field-border-style;
   border-color: $form-field-border-color;
+  height: $form-field-height;
   width: 100%;
   font-size: $form-field-font-size;
   line-height: $form-field-line-height;
-  transition-property: box-shadow, background-color, border;
-  transition-duration: 0.25s;
-  transition-timing-function: ease-in-out;
+  transition: $transition-duration;
 
   &:focus {
-    @extend %blue-focus-style;
+    @include default-focus-style($box-shadow: 0 0 0 1px $focus-color);
   }
 
   &[disabled], .disabled {

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

@@ -1,7 +1,10 @@
-@mixin default-focus-style {
-  border-color: $focus-color;
-  border-radius: $default-border-radius;
-  box-shadow: 0 0 0 1px $focus-color;
+@mixin default-focus-style(
+  $border-color: $focus-color,
+  $box-shadow: 0 0 0 2px $focus-color,
+  $border-radius: $default-border-radius) {
+  border-color: $border-color;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
   outline: none;
 
   &::-moz-focus-inner {
@@ -15,15 +18,18 @@
   $hover-color: $button-hover-bg-color,
   $hover-border-color: $button-hover-border-color,
   $border-radius: $default-border-radius,
-  $border: 1px solid $button-border-color,
+  $border: $button-border-width solid $button-border-color,
   $padding: $button-padding,
   $margin: $button-margin,
-  $color: $button-text-color) {
+  $color: $button-text-color,
+  $line-height: $form-field-line-height,
+  $focus-border-color: $button-focus-border-color,
+  $focus-box-shadow: 0 0 2px $focus-border-color) {
   display: inline-block;
   font-family: $default-font-family;
   font-size: $default-font-size;
-  font-weight: bold;
-  line-height: $form-field-line-height;
+  font-weight: $button-font-weight;
+  line-height: $line-height;
   padding: $padding;
   cursor: pointer;
   border-radius: $border-radius;
@@ -33,7 +39,7 @@
   color: $color;
   margin: $margin;
   -webkit-appearance: none;
-  transition: background-color 250ms;
+  transition: all $transition-duration;
   @include antialiased-font-smoothing;
 
   &:hover {
@@ -47,7 +53,10 @@
   }
 
   &:focus {
-    @include default-focus-style;
+    @include default-focus-style(
+      $border-color: $focus-border-color,
+      $box-shadow: $focus-box-shadow
+    );
   }
 
   &.disabled, &[disabled],
@@ -66,11 +75,10 @@
 
 @mixin form-label {
   width: $form-left-width;
-  padding-right: 2*$default-padding;
-  padding-top: $default-padding + 1;
-  margin-top: 4px;
+  padding-right: 2 * $default-padding;
+  padding-top: 0.6em;
+  margin-top: $default-margin;
   vertical-align: top;
-  line-height: 19px;
   word-break: normal;
   float: left;
   text-align: right;
@@ -151,16 +159,24 @@
     font-size: 0.8em;
     padding-right: 2*$default-padding;
   }
+
+  &:focus {
+    @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
+  }
 }
 
-@mixin linked-button($border-radius: $default-border-radius) {
+@mixin linked-button(
+  $border-radius: $default-border-radius,
+  $line-height: $form-field-line-height,
+  $padding: 3px) {
   @include button-defaults(
+    $line-height: $line-height,
     $background-color: $linked-button-color,
     $hover-color: darken($linked-button-color, 10%),
     $border: 1px solid $linked-border-color,
     $hover-border-color: darken($linked-border-color, 10%),
     $border-radius: $border-radius,
-    $padding: 3px,
+    $padding: $padding,
     $margin: 0
   );
 }

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

@@ -27,7 +27,7 @@ $small-font-size: 0.9em !default;
 $default-font-style: $default-font-size $default-font-family !default;
 
 $dialog-header-height: 36px !default;
-$dialog-header-color: $dark-blue !default;
+$dialog-header-color: $dark-gray-blue !default;
 $dialog-header-text-color: $white !default;
 $dialog-header-font-size: $default-font-size !default;
 $dialog-box-shadow: 0 8px 16px rgba(35, 35, 35, 0.5) !default;
@@ -46,33 +46,36 @@ $default-border: $default-border-width $default-border-style $default-border-col
 $default-border-radius: 3px !default;
 
 $form-field-margin: $default-margin 0 !default;
-$form-field-height: 29px !default;
+$form-field-height: 31px !default;
 $form-field-background-color: $white !default;
 $form-field-border-width: $default-border-width !default;
 $form-field-border-style: $default-border-style !default;
 $form-field-border-color: $default-border-color $default-border-color $border-inset-color $border-inset-color !default;
 $form-field-box-shadow: inset 0px 0 1px $medium-gray !default;
-$form-field-padding: 0.5em 0.75em !default;
+$form-field-padding: 0.6em 0.75em !default;
 $form-field-font-size: $default-font-size !default;
 $form-field-line-height: 1.25 !default;
 $form-field-text-color: $text-color !default;
 $form-field-disabled-text-color: #888 !default;
 $form-field-disabled-bg-color: rgba($white, 0.5) !default;
 
-$focus-color: rgba(#eca96e, 0.75) !default;
+$focus-color: rgba($dark-orange, 0.75) !default;
 
-$button-bg-color: $dark-blue !default;
-$button-hover-bg-color: lighten($button-bg-color, 5%) !default;
-$button-border-color: darken($button-bg-color, 5%) !default;
-$button-hover-border-color: lighten($button-border-color, 5%) !default;
-$button-text-color: $white !default;
+$button-bg-color: rgba($dark-orange, 0.75) !default;
+$button-hover-bg-color: $dark-orange !default;
+$button-border-color: transparent !default;
+$button-border-width: 2px !default;
+$button-text-color: $text-color !default;
+$button-hover-border-color: transparent !default;
+$button-focus-border-color: $button-text-color !default;
+$button-font-weight: bold !default;
 $button-text-shadow: none !default;
 $button-box-shadow: none !default;
-$button-padding: 0.5em 1.5em !default;
+$button-padding: 0.5em 2em !default;
 $button-margin: $form-field-margin !default;
 
 $secondary-button-bg-color: transparent !default;
-$secondary-button-text-color: $button-bg-color !default;
+$secondary-button-text-color: $button-text-color !default;
 $secondary-button-border-color: $button-bg-color !default;
 
 $linked-button-color: rgba($linked-color, 0.75) !default;
@@ -105,9 +108,9 @@ $sitemap-highlight-color: rgba(#fffba5, 0.5) !default;
 
 $main-menu-width: 150px !default;
 $collapsed-main-menu-width: 48px !default;
-$main-menu-bg-color: $dark-blue !default;
+$main-menu-bg-color: $dark-gray-blue !default;
 $main-menu-active-bg-color: $dark-orange !default;
-$main-menu-active-text-color: $very-dark-gray !default;
+$main-menu-active-text-color: $dark-gray-blue !default;
 $main-menu-text-color: $white !default;
 $main-menu-icon-color: $white !default;
 $main-menu-entry-max-width: 100px !default;
@@ -117,7 +120,7 @@ $element-toolbar-height: 37px !default;
 $header-height: 29px !default;
 $header-background: #d8d8d8 !default;
 $text-shadow-light: rgba($white, 0.5) 0 0 4px !default;
-$transition-duration: 200ms !default;
+$transition-duration: 250ms !default;
 $transition-easing: linear !default;
 
 $tooltip-background-color: lighten($dark-gray-blue, 15%) !default;
@@ -145,3 +148,5 @@ $datepicker_header_color: $text-color !default;
 $datepicker_day_bg: $light-gray !default;
 $datepicker_day_border: 1px solid $medium-gray !default;
 $datepicker_day_color: $text-color !default;
+
+$thumbnail-background-color: opacify($default-border-color, 1) !default;

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

@@ -36,6 +36,7 @@
 @import "alchemy/sitemap";
 @import "alchemy/spinner";
 @import "alchemy/tables";
+@import "alchemy/tags";
 @import "alchemy/trash";
 @import "alchemy/lists";
 @import "alchemy/upload";

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

@@ -14,16 +14,23 @@ div#image_assign_filter_and_image_sizing {
   }
 }
 
+.thumbnail_background {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $thumbnail-background-color;
+  width: 100%;
+  height: 120px;
+}
+
 .picture_thumbnail {
-  padding: $default-padding;
-  margin: 2px 1px 2px 2px;
+  margin: 2*$default-margin;
   background-color: #fff;
-  float: none;
   display: inline-block;
-  border: 1px solid #c0c0c0;
   position: relative;
-  border-radius: $default-border-radius;
-  width: 170px;
+  box-shadow: 0 0 0 1px $default-border-color;
+  width: 160px;
 
   img {
     width: auto;
@@ -32,12 +39,6 @@ div#image_assign_filter_and_image_sizing {
     max-height: 100%;
   }
 
-  .thumbnail_background {
-    @extend %thumbnail-background;
-    width: 160px;
-    height: 120px;
-  }
-
   .picture_name {
     display: block;
     width: 100%;
@@ -46,33 +47,32 @@ div#image_assign_filter_and_image_sizing {
     overflow: hidden;
     bottom: 0;
     left: 0;
-    font-family: "Courier New", Courier, mono;
-    line-height: 16px;
-    padding: $default-padding 0 0;
+    line-height: 2;
+    padding: 0 $default-padding;
+    text-overflow: ellipsis;
   }
 
   &.small {
-    width: 90px;
+    width: 80px;
 
     .thumbnail_background {
-      width: 80px;
       height: 60px;
     }
   }
 
   &.large {
-    width: 250px;
+    width: 240px;
 
     .thumbnail_background {
-      width: 240px;
       height: 180px;
     }
   }
 
   &:hover {
 
-    .picture_tool {
-      display: block;
+    .picture_tool, .picture_tags {
+      visibility: visible;
+      opacity: 1;
     }
   }
 }
@@ -82,13 +82,8 @@ div#image_assign_filter_and_image_sizing {
   padding-bottom: 60px;
   overflow: hidden;
 
-  .picture_thumbnail {
-    margin: 0 2*$default-margin 2*$default-margin 0;
-    float: left;
-
-    .thumbnail_background {
-      @include zoom-in;
-    }
+  .thumbnail_background {
+    @include zoom-in;
   }
 }
 
@@ -108,16 +103,20 @@ div.assign_image_list_image {
   position: absolute;
   background-color: white;
   top: $default-padding;
-  padding: 2px 3px;
+  padding: $default-padding / 2;
   z-index: 10;
-  display: none;
+  text-align: center;
+  border-radius: $default-border-radius;
+  box-shadow: 0 0 1px $dark-gray;
 
   &.visible {
-    display: block;
+    visibility: visible;
+    opacity: 1;
   }
 
   &.hidden {
-    display: none;
+    // Overwrite the `.hidden { display: none }` style
+    display: block;
   }
 
   &.select {
@@ -141,6 +140,23 @@ div.assign_image_list_image {
   }
 }
 
+.picture_tags {
+  overflow: hidden;
+  position: absolute;
+  bottom: 22px;
+  left: 0;
+  width: 100%;
+  max-height: 80%;
+  padding: $default-padding;
+  pointer-events: none;
+}
+
+.picture_tags, .picture_tool {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity $transition-duration;
+}
+
 div#library_sidebar {
   position: fixed;
   border-left: 1px solid $default-border-color;
@@ -169,79 +185,6 @@ div#filter_bar {
   }
 }
 
-.tag-list {
-  height: 100%;
-  padding-bottom: 138px;
-
-  &.filtered {
-    padding-bottom: 164px;
-  }
-
-  &.with_filter_bar {
-    padding-bottom: 218px;
-
-    &.filtered {
-      padding-bottom: 244px;
-    }
-  }
-
-  .js_filter_field_box {
-    position: absolute;
-    right: auto;
-    top: auto;
-    width: 200px;
-    z-index: 1100;
-    transition: background-color 200ms;
-
-    input {
-      width: 200px;
-      background-color: transparentize($white, 0.25);
-
-      &:focus {
-        background-color: $white;
-      }
-    }
-
-    label { display: none }
-  }
-
-  .js_filter_field_clear {
-    right: 4px;
-  }
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 40px 0 4px 0;
-    height: 100%;
-    width: 200px;
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    li {
-      display: block;
-
-      &:first-child { margin-top: 0 }
-
-      a {
-        @include tag-base;
-        text-decoration: none;
-        display: block;
-      }
-
-      &:hover { background-color: $very-light-blue }
-
-      &.active {
-
-        a {
-          background-color: $dark-gray;
-          color: $light-gray
-        }
-      }
-    }
-  }
-}
-
 .alchemy-dialog-body {
 
   #library_sidebar {
@@ -251,38 +194,14 @@ div#filter_bar {
 
 #assign_image_list, #assign_file_list {
   position: relative;
-  height: 535px;
+  height: 548px;
 }
 
 #assign_image_list {
   padding-right: 244px;
-
-  .tag-list ul {
-    height: 316px;
-  }
-
-  &.filtered .tag-list ul {
-    height: 292px;
-  }
-}
-
-#assign_file_list {
-
-  .tag-list ul {
-    height: 396px;
-  }
-
-  &.filtered .tag-list ul {
-    height: 372px;
-  }
 }
 
 #overlay_file_list {
-
-  &.with_tag_list {
-    padding-right: 234px;
-  }
-
   .assign_file_file {
     display: block;
     margin-bottom: 4px;
@@ -312,38 +231,6 @@ div#filter_bar {
   }
 }
 
-.picture_tags {
-  overflow: hidden;
-  position: absolute;
-  top: 22px;
-  left: $default-padding;
-  width: 50%;
-  max-height: 80%;
-  padding: $default-padding;
-  pointer-events: none;
-  display: none;
-}
-
-.picture_thumbnail:hover .picture_tags {
-  display: block;
-}
-
-.tag {
-  @include tag-base(
-    $margin: $default-margin/2 0,
-    $padding: $default-padding 2*$default-padding $default-padding
-  );
-  display: inline-block;
-  vertical-align: middle;
-  color: $text-color;
-  pointer-events: none;
-  font-size: $small-font-size;
-}
-
-.tags .list .tag {
-  padding: 0;
-}
-
 #all_files td.name a {
   @include zoom-in;
 }

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

@@ -96,15 +96,15 @@ a {
     text-decoration: underline;
   }
 
-  &:focus {
-    @extend %blue-focus-style;
-  }
-
   img {
     border: none;
   }
 }
 
+a:focus, [tabindex]:focus {
+  @include default-focus-style;
+}
+
 form {
   margin-bottom: 0;
 }