alchemy_cms 3.2.1 → 3.3.0.rc1

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

@@ -3,6 +3,7 @@ input[type="url"],
 input[type="text"],
 input[type="email"],
 input[type="password"],
+input[type="search"],
 .thin_border,
 .input_field {
   @extend %default-input-style;
@@ -12,10 +13,21 @@ input[type="password"],
   }
 }
 
+input[type="search"] {
+  -webkit-appearance: textfield;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration  {
+  -webkit-appearance: none;
+}
+
 textarea {
   height: auto;
-  padding: 4px 8px !important;
-  line-height: 19px !important;
+  padding: 4px 8px;
+  line-height: 19px;
 }
 
 input#search_input_field {
@@ -55,12 +67,6 @@ div.search_field span.icon, div.js_filter_field_box span.icon {
   }
 }
 
-.autocomplete_tag_list {
-  position: relative;
-
-  label { position: absolute }
-}
-
 .alchemy-char-counter {
   display: block;
   clear: both;

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

@@ -34,7 +34,8 @@ form {
     input[type="password"],
     textarea,
     .select2-container,
-    .autocomplete_tag_list {
+    .autocomplete_tag_list,
+    .mce-tinymce {
       width: $form-right-width;
       float: right;
     }
@@ -112,6 +113,14 @@ form {
       text-align: right;
       margin-bottom: 0.25em;
     }
+
+    &.language_locale small.error {
+      @include form-hint(
+        $background-color: $error_background_color,
+        $border-color: $error_border_color
+      );
+      text-align: left;
+    }
   }
 
   .inline-input {

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

@@ -149,6 +149,8 @@ div#overlay_text_box {
 }
 
 #archive_all {
+  @include box-sizing(border-box);
+  height: 100%;
   padding-bottom: 60px;
 
   &.with_tag_filter {
@@ -201,18 +203,12 @@ div#user_info {
     text-shadow: 0px 1px 1px #FFFFFF;
     @extend .disable-user-select;
     cursor: default;
-    line-height: 27px;
     float: left;
     @extend .top-rounded-border;
     border: $default-border;
     border-bottom-style: none;
     height: 24px;
     margin-right: 1px;
-
-    .page_name {
-      position: relative;
-      bottom: 2px;
-    }
   }
 
   .page_name {
@@ -221,14 +217,11 @@ div#user_info {
 
   .page_language {
     float: none;
-    position: relative;
     @include inline-block;
-    bottom: 3px;
     color: #3265b1;
     @extend %rounded-border;
     margin-right: 2px;
     font-size: 10px;
-    line-height: 12px;
     text-transform: uppercase;
   }
 
@@ -282,7 +275,7 @@ div#user_info {
   }
 }
 
-#subnav_additions {
+#locked_pages {
   height: 25px;
   overflow: hidden;
 

data/app/assets/stylesheets/alchemy/icon-font.scss

@@ -1,14 +1,17 @@
 @font-face {
   font-family: 'Alchemy Icons';
-  src: font-url('alchemy/icons.eot');
-  src: font-url('alchemy/icons.eot?#iefix') format('embedded-opentype'),
-       font-url('alchemy/icons.woff') format('woff'),
-       font-url('alchemy/icons.ttf') format('truetype'),
-       font-url('alchemy/icons.svg#Alchemy-Icons') format('svg');
+  src: font-url('alchemy/icons.eot?sgh5oh');
+  src: font-url('alchemy/icons.eot?#iefixsgh5oh') format('embedded-opentype'),
+       font-url('alchemy/icons.ttf?sgh5oh') format('truetype'),
+       font-url('alchemy/icons.woff?sgh5oh') format('woff'),
+       font-url('alchemy/icons.svg?sgh5oh#Alchemy-Icons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
+.icon-angle-double-right,
+.icon-angle-left,
+.icon-angle-right,
 .icon-plus,
 .icon-minus,
 .icon-cross,
@@ -38,13 +41,17 @@
   text-transform: none;
   text-decoration: none;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   width: 16px;
   color: #666;
   text-align: center;
-  line-height: 1em;
+  line-height: 1;
   @include inline-block;
 }
 
+.icon-angle-double-right:before { content: "\f101" }
+.icon-angle-left:before { content: "\f104" }
+.icon-angle-right:before { content: "\f105" }
 .icon-plus:before { content: "\e000" }
 .icon-minus:before { content: "\e001" }
 .icon-cross:before { content: "\e004" }

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

@@ -101,6 +101,10 @@
     background-position: 1px -70px;
   }
 
+  &.element-hide {
+    background-position: -416px -168px;
+  }
+
   &.element_public {
     background-position: -94px -166px;
   }
@@ -109,6 +113,14 @@
     background-position: -512px -72px;
   }
 
+  &.element_copy {
+    background-position: -128px -72px;
+  }
+
+  &.cut {
+    background-position: -97px -72px;
+  }
+
   &.error {
     background-position: -32px -168px;
   }
@@ -213,6 +225,10 @@
     background-position: -64px -136px;
   }
 
+  &.remove {
+    background-position: -63px -72px;
+  }
+
   &.rtf {
     background-position: -320px -136px;
   }

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

@@ -0,0 +1,269 @@
+$picture-overlay-handle-width: 18px;
+$image-overlay-form-width: 350px - $picture-overlay-handle-width;
+$image-overlay-transition-duration: 200ms;
+$image-overlay-transition-easing: ease-in;
+
+.alchemy-image-overlay {
+
+  &.open {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+}
+
+.alchemy-image-overlay-container,
+.alchemy-image-overlay-dialog {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.alchemy-image-overlay-dialog {
+
+  &.hide-form {
+
+    .picture-details-overlay {
+      right: -$image-overlay-form-width;
+    }
+
+    .zoomed-picture-background {
+      padding-right: 2*$default-padding;
+    }
+
+    .alchemy-image-overlay-close {
+      right: $picture-overlay-handle-width + 2*$default-padding;
+    }
+
+    .next-picture {
+      right: $picture-overlay-handle-width;
+    }
+
+    .spinner {
+      margin-left: 0;
+    }
+
+    .picture-overlay-handle {
+      right: 0;
+
+      .icon-angle-double-right {
+        @include transform(rotate(180deg) translate(50%, 50%));
+      }
+    }
+  }
+}
+
+.alchemy-image-overlay-body {
+  width: 100%;
+  height: 100%;
+
+  > .message {
+    margin: 2*$default-margin;
+    max-width: 400px;
+  }
+}
+
+.alchemy-image-overlay-close {
+  width: 32px;
+  height: 32px;
+  top: 2*$default-padding;
+  right: 2*$default-padding + $picture-overlay-handle-width + $image-overlay-form-width;
+  cursor: pointer;
+  @include transition(right $image-overlay-transition-duration $image-overlay-transition-easing);
+
+  .icon.close.small {
+    font-size: 32px;
+    color: $medium-gray;
+    text-shadow: 0 0 $default-padding $text-color;
+    @include transition(color $image-overlay-transition-duration linear);
+
+    &:hover {
+      color: $white;
+    }
+  }
+}
+
+.picture-details-overlay,
+.picture-overlay-handle {
+  position: absolute;
+  top: 0;
+  background-color: $medium-gray;
+  @include box-shadow(-2px 0 $default-padding -2px $text-color);
+  @include transition(right $image-overlay-transition-duration $image-overlay-transition-easing);
+}
+
+.picture-details-overlay {
+  @include box-sizing(border-box);
+  right: 0;
+  width: $image-overlay-form-width;
+  height: 100%;
+  padding: 2*$default-padding 4*$default-padding 2*$default-padding $default-padding;
+  overflow: auto;
+
+  form .control-label,
+  .resource_info .value label {
+    width: 100%;
+    text-align: left;
+    float: none;
+    display: block;
+    padding: 0;
+    margin: $default-margin 0 0;
+  }
+
+  form .input .hint {
+    margin-left: 0;
+  }
+
+  form .input .select2-container,
+  form .input input[type="text"],
+  .resource_info .value p {
+    width: 100%;
+  }
+}
+
+.picture-overlay-handle {
+  width: $picture-overlay-handle-width;
+  height: 100%;
+  right: $image-overlay-form-width;
+  cursor: pointer;
+
+  .icon-angle-double-right {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    @include transform(translate(-50%, -50%));
+    font-size: 14px;
+    color: $text-color;
+    @include transition(transform $image-overlay-transition-duration $image-overlay-transition-easing);
+  }
+
+  &:hover {
+    background-color: darken($medium-gray, 5%);
+  }
+}
+
+.zoomed-picture-background {
+  @include box-sizing(border-box);
+  width: 100%;
+  height: 100%;
+  padding-top: 2*$default-padding;
+  padding-right: $image-overlay-form-width + 2*$default-padding + $picture-overlay-handle-width;
+  padding-bottom: 2*$default-padding;
+  padding-left: 2*$default-padding;
+  margin: 0 auto;
+  text-align: center;
+  cursor: pointer;
+  @include transition(padding-right $image-overlay-transition-duration $image-overlay-transition-easing);
+
+  &:before {
+    content: '';
+    vertical-align: middle;
+    display: inline-block;
+    height: 100%;
+    margin-left: -4px;
+  }
+
+  .spinner {
+    position: absolute !important;
+    left: 50% !important;
+    top: 50% !important;
+    @include transform(translateY(-50%));
+    margin-left: -$image-overlay-form-width/2 + $picture-overlay-handle-width;
+    @include transition(margin-left $image-overlay-transition-duration $image-overlay-transition-easing);
+  }
+
+  img {
+    display: inline-block;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    @include box-shadow(0 0 2*$default-margin $text-color);
+    background-color: $dark-gray;
+    vertical-align: middle;
+    cursor: default;
+  }
+}
+
+.picture-file-infos,
+.picture-usage-info {
+  padding: 2*$default-padding 0;
+
+  .message {
+    @include box-sizing(border-box);
+    margin: 2*$default-padding 0;
+  }
+}
+
+#pictures_page_list {
+
+  h3 {
+    padding: $default-padding 0 0;
+    margin: 0;
+  }
+
+  ol {
+    padding-left: 0;
+    list-style-position: inside;
+  }
+
+  .list {
+    margin: 2*$default-margin 0;
+
+    li {
+      padding: 2*$default-padding;
+      @include border-radius($default-border-radius);
+      white-space: normal;
+
+      &.even { background: #F7F7F7 }
+    }
+  }
+}
+
+.picture-overlay-navigation {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+
+  .previous-picture,
+  .next-picture {
+    position: absolute;
+    top: 0;
+    width: 64px;
+    height: 128px;
+    line-height: 120px;
+    margin-top: -64px;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+    @include transition(background-color $image-overlay-transition-duration linear);
+
+    &:hover {
+      background-color: rgba(0,0,0, 0.3);
+
+      .icon-angle-left,
+      .icon-angle-right {
+        color: $white;
+        text-shadow: none;
+      }
+    }
+  }
+
+  .icon-angle-left,
+  .icon-angle-right {
+    font-size: 48px;
+    color: $medium-gray;
+    text-shadow: 0 0 $default-padding $text-color;
+    @include transition(all $image-overlay-transition-duration linear);
+  }
+
+  .previous-picture {
+    left: 0;
+    @include border-right-radius($default-border-radius);
+  }
+
+  .next-picture {
+    right: $image-overlay-form-width + $picture-overlay-handle-width;
+    @include border-left-radius($default-border-radius);
+    @include transition(right $image-overlay-transition-duration $image-overlay-transition-easing);
+  }
+}