alchemy_cms 3.4.2 → 3.5.0.rc1

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

@@ -1,4 +1,5 @@
 $text-color: #333333;
+$muted-text-color: rgba(0, 0, 0, 0.5);
 $light-blue: #cddce5; // #c6dbe7
 $blue: darken($light-blue, 15%);
 $very-light-blue: lighten($light-blue, 12%);
@@ -23,25 +24,25 @@ $default-padding: 4px;
 $default-margin: $default-padding;
 
 $default-border-color: #afafaf;
+$border-inset-color: lighten($default-border-color, 20%);
 $default-border-width: 1px;
 $default-border-style: solid;
 $default-border: $default-border-width $default-border-style $default-border-color;
 $default-border-radius: 3px;
+$default-form-field-margin: $default-margin 0;
+$default-form-field-height: 29px;
 
 $button-bg-color: #f7f7f7;
 $button-hover-bg-color: #e6f0f5;
 $button-border-color: #9a9a9a;
 $button-hover-border-color: #888888;
 $button-text-shadow: $white 1px 1px 0;
+$button-gradient-first-color: $white !default;
+$button-gradient-second-color: darken($button-gradient-first-color, 10%) !default;
+$button-padding: 0.5em 1.5em !default;
+$button-margin: $default-form-field-margin !default;
 $linked-button-color: #ffd77a;
 
-$sb-base-color:      $white;
-$sb-border-radius:   $default-border-radius;
-$sb-font-size:       $default-font-size;
-$sb-text-color:      $text-color;
-$sb-ie-support:      true;
-$default-form-field-margin: $default-padding 0;
-
 $success_border_color: #9cc4a1;
 $success_text_color: #2e5934;
 $success_background_color: #e2efd3;
@@ -60,4 +61,16 @@ $error_background_color: #efd3d3;
 
 $form-left-width: 35%;
 $form-right-width: 65%;
-$sitemap-line-height: 24px;
+$sitemap-line-height: 32px;
+
+$main-menu-width: 150px !default;
+$collapsed-main-menu-width: 48px !default;
+$main-menu-bg-color: #baced9 !default;
+$main-menu-active-bg-color: $light-blue !default;
+$main-menu-text-color: #222 !default;
+$main-menu-entry-max-width: 100px !default;
+$toolbar-bg-color: $medium-gray !default;
+$header-height: 29px !default;
+$text-shadow-light: rgba($white, 0.5) 0 0 4px !default;
+$transition-duration: 200ms !default;
+$transition-easing: linear !default;

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

@@ -6,6 +6,8 @@
 
 @import "alchemy/defaults";
 @import "alchemy/archive";
+@import "alchemy/navigation";
+@import "alchemy/attachments";
 @import "alchemy/base";
 @import "alchemy/buttons";
 @import "alchemy/dialogs";
@@ -17,11 +19,13 @@
 @import "alchemy/forms";
 @import "alchemy/form_fields";
 @import "alchemy/frame";
+@import "alchemy/hints";
 @import "alchemy/icons";
 @import "alchemy/image_library";
 @import "alchemy/modules";
 @import "alchemy/notices";
 @import "alchemy/pagination";
+@import "alchemy/resource_info";
 @import "alchemy/search";
 @import "alchemy/selects";
 @import "alchemy/sitemap";

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

@@ -6,7 +6,7 @@ div#image_assign_filter_and_image_sizing {
 #picture_archive {
 
   .selected_item_tools {
-    margin: -4*$default-padding;
+    margin: -2*$default-padding;
     border-bottom: 1px solid $default-border-color;
     margin-bottom: 4*$default-padding;
     padding: 4*$default-padding;
@@ -19,7 +19,6 @@ div#image_assign_filter_and_image_sizing {
   margin: 2px 1px 2px 2px;
   background-color: #fff;
   float: none;
-  display: inline;
   display: inline-block;
   border: 1px solid #c0c0c0;
   position: relative;
@@ -114,11 +113,7 @@ div#image_assign_filter_and_image_sizing {
     float: none;
 
     .thumbnail_background {
-      cursor: -webkit-zoom-in;
-      cursor: -moz-zoom-in;
-      cursor: -ms-zoom-in;
-      cursor: -o-zoom-in;
-      cursor: image-url('alchemy/lupe.cur'), zoom-in, pointer;
+      @include zoom-in;
     }
   }
 }
@@ -177,7 +172,7 @@ div.assign_image_list_image {
 }
 
 div#library_sidebar {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   position: fixed;
   border-left: 1px solid $default-border-color;
   top: 0;
@@ -206,7 +201,7 @@ div#filter_bar {
 }
 
 .tag-list {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   height: 100%;
   padding-bottom: 138px;
 
@@ -242,7 +237,7 @@ div#filter_bar {
   }
 
   ul {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     list-style-type: none;
     padding: 0;
     margin: 40px 0 4px 0;
@@ -344,7 +339,7 @@ div#filter_bar {
 }
 
 .picture_tags {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   width: 50%;
   max-height: 100%;
   position: absolute;
@@ -360,7 +355,8 @@ div#filter_bar {
 }
 
 .tag {
-  @include inline-block;
+  display: inline-block;
+  vertical-align: middle;
   @extend %rounded-border;
   padding: $default-padding 2*$default-padding $default-padding 4*$default-padding;
   margin: $default-margin/2 0;

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

@@ -0,0 +1,39 @@
+.attachment_preview_container {
+  background-color: $medium-gray;
+  margin-top: 12px;
+
+  audio, video {
+    display: block;
+  }
+
+  &.image-preview {
+    height: 300px;
+    text-align: center;
+    padding: 2*$default-padding;
+    white-space: nowrap;
+
+    &:before {
+      content: '';
+      display: inline-block;
+      height: 100%;
+      vertical-align: middle;
+      margin-right: -0.25em;
+    }
+
+    img.full_width {
+      display: inline-block;
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      max-height: 100%;
+      vertical-align: middle;
+    }
+  }
+}
+
+.full-iframe {
+  width: 100%;
+  background-color: white;
+  min-height: 335px;
+  margin-top: 12px;
+}

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

@@ -1,7 +1,8 @@
 html {
   height: 100%;
 
-  &.turbolinks-progress-bar::before {
+  &.turbolinks-progress-bar::before,
+  .turbolinks-progress-bar {
     background-color: $blue !important;
     height: 3px !important;
     z-index: 400001;
@@ -52,7 +53,7 @@ h1 {
     position: fixed;
     width: 100%;
     top: 75px;
-    left: 74px;
+    left: $main-menu-width + 9px;
     z-index: 2;
     margin: 0 -8px;
     padding: 16px;
@@ -115,7 +116,7 @@ ul {
 hr {
   border: 0 none;
   border-bottom: 1px solid;
-  @include opacity(0.5);
+  opacity: 0.5;
 }
 
 .float_right { float: right }
@@ -158,7 +159,7 @@ kbd {
 }
 
 .bottom-left-rounded-border {
-  @include border-bottom-left-radius($default-border-radius);
+  border-bottom-left-radius: $default-border-radius;
 }
 
 .disable-user-select {
@@ -166,7 +167,7 @@ kbd {
 }
 
 .border-box-sizing {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
 }
 
 span.updated_at {
@@ -230,7 +231,7 @@ div#page {
 }
 
 div#new_page_from_clipboard {
-  display: none;
+  @extend .hidden;
 }
 
 div#new_page_from_clipboard input.button {
@@ -338,11 +339,11 @@ div.all_rights {
 }
 
 .date_select_without_time #date_date_4i {
-  display: none;
+  @extend .hidden;
 }
 
 .date_select_without_time #date_date_5i {
-  display: none;
+  @extend .hidden;
 }
 
 .with_padding {
@@ -364,10 +365,7 @@ div#images {
 }
 
 #all_files td.name a {
-  cursor: -webkit-zoom-in;
-  cursor: -moz-zoom-in;
-  cursor: -o-zoom-in;
-  cursor: zoom-in;
+  @include zoom-in;
 }
 
 #sitemap .placeholder {
@@ -515,15 +513,20 @@ div.browse {
 }
 
 #alchemy_preview_window {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   position: absolute;
-  left: 66px;
-  top: 73px;
+  left: $main-menu-width;
+  top: 75px;
   width: auto;
   height: auto;
   border: 0 none;
   background: #fff;
+  border-right: $default-border;
   @include transition(200ms ease-in-out);
+
+  .collapsed-menu & {
+    left: $collapsed-main-menu-width;
+  }
 }
 
 #error_trace {
@@ -534,6 +537,14 @@ div.browse {
   @extend %rounded-border;
 }
 
+.full_width {
+  width: 100%;
+}
+
+.hidden {
+  display: none;
+}
+
 @-moz-keyframes spin {
   from { -moz-transform: rotate(0deg); }
   to   { -moz-transform: rotate(360deg); }

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

@@ -26,29 +26,23 @@ button, input[type="submit"], a.button, input.button {
     margin: 0;
     padding: 0;
     border: 0 none;
-    @include box-shadow(none);
+    box-shadow: none;
     @include background(none);
-    @include border-radius(0);
+    border-radius: 0;
 
     .icon {
       margin: 0;
     }
   }
 
-  &:focus {
-    @extend %blue-focus-style;
-  }
-
   &.disabled {
     line-height: 13px;
     height: 29px;
-    padding-top: 5px;
-    padding-bottom: 4px;
   }
 }
 
 .icon_button {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   width: 27px;
   height: 27px;
   line-height: 21px;
@@ -63,7 +57,8 @@ button, input[type="submit"], a.button, input.button {
   }
 
   .icon {
-    @include inline-block;
+    display: inline-block;
+    vertical-align: middle;
     margin-top: -2px;
   }
 
@@ -72,7 +67,8 @@ button, input[type="submit"], a.button, input.button {
     background-repeat: no-repeat;
     width: 22px;
     height: 20px;
-    @include inline-block;
+    display: inline-block;
+    vertical-align: middle;
     top: -1px;
     left: -1px;
   }
@@ -88,12 +84,13 @@ button, input[type="submit"], a.button, input.button {
     height: 15px;
     padding: 0;
     float: none;
-    @include inline-block;
+    display: inline-block;
+    vertical-align: middle;
     position: relative;
     top: 0px;
     background: none;
     border: none;
-    @include box-shadow(none);
+    box-shadow: none;
 
     .icon {
       position: absolute;
@@ -112,7 +109,7 @@ button, input[type="submit"], a.button, input.button {
 
     &:hover {
       border: $default-border-width $default-border-style $button-hover-border-color;
-      @include border-radius($default-border-radius);
+      border-radius: $default-border-radius;
       background: $button-hover-bg-color;
     }
   }
@@ -130,15 +127,12 @@ button, input[type="submit"], a.button, input.button {
   &.disabled {
 
     span {
-      position: relative;
-      @include opacity(0.3);
-      cursor: default;
+      opacity: 0.3;
+      cursor: not-allowed;
     }
 
     &:hover {
-      background-color: #d3d3d3;
-      border: 1px solid $button-border-color;
-      cursor: default;
+      cursor: not-allowed;
     }
   }
 
@@ -154,8 +148,8 @@ button, input[type="submit"], a.button, input.button {
 button.icon_button {
   background: transparent;
   border: 0 none;
-  @include border-radius(0);
-  @include box-shadow(none);
+  border-radius: 0;
+  box-shadow: none;
 
   &:disabled, &.disabled {
     background: transparent;
@@ -168,7 +162,8 @@ button.icon_button {
 
 .button_with_label {
   position: relative;
-  @include inline-block(top);
+  display: inline-block;
+  vertical-align: top;
   text-align: center;
   margin: 0 2*$default-margin;
   line-height: 0;
@@ -176,7 +171,7 @@ button.icon_button {
   &.active, &:active {
 
     .icon_button {
-      background-color: darken($sb-base-color, 10%);
+      background-color: darken($white, 10%);
       border: $default-border;
       padding: 2px;
       @extend %rounded-border;
@@ -205,12 +200,13 @@ button.icon_button {
     float: none;
     margin-right: auto;
     margin-left: auto;
-    @include inline-block;
+    display: inline-block;
+    vertical-align: middle;
     position: relative;
   }
 
   &.disabled {
-    @include opacity(0.5);
+    opacity: 0.5;
     cursor: default;
   }
 }
@@ -224,20 +220,22 @@ button.icon_button {
   }
 
   label {
-    display: none;
+    @extend %rounded-border;
     position: absolute;
-    top: -25px;
+    visibility: hidden;
+    top: -20px;
     left: 50%;
     margin-left: -13px;
     z-index: 30;
     background: $dark-gray;
     color: #fff;
     padding: $default-padding 2*$default-padding;
-    @extend %rounded-border;
     line-height: 1;
-    @include box-shadow(0 0 4px $default-border-color);
+    box-shadow: 0 0 4px $default-border-color;
     white-space: nowrap;
     pointer-events: none;
+    opacity: 0;
+    transition: .3s;
 
     &:before {
       content: '';
@@ -248,6 +246,31 @@ button.icon_button {
       border-top-color: $dark-gray;
     }
 
+    &.center {
+      left: auto;
+      right: 50%;
+      margin-left: 0;
+      transform: translateX(50%);
+
+      &:before {
+        left: auto;
+        right: 50%;
+        transform: translateX(50%);
+      }
+    }
+
+    &.left {
+      left: auto;
+      right: 50%;
+      margin-left: 0;
+      margin-right: -13px;
+
+      &:before {
+        left: auto;
+        right: 8px;
+      }
+    }
+
     &.right-aligned {
       left: auto;
       margin-left: auto;
@@ -261,5 +284,10 @@ button.icon_button {
     }
   }
 
-  &:hover label { display: block }
+  &:hover label {
+    visibility: visible;
+    opacity: 1;
+    top: -25px;
+    transition-delay: .2s;
+  }
 }