alchemy_cms 7.4.5 → 8.0.0.a

data/app/models/alchemy/storage_adapter.rb

@@ -0,0 +1,74 @@
+module Alchemy
+  class StorageAdapter
+    class UnknownAdapterError < StandardError; end
+
+    attr_reader :name, :adapter
+
+    delegate(
+      :attachment_url_class,
+      :by_file_format_scope,
+      :by_file_type_scope,
+      :file_extension,
+      :file_formats,
+      :file_mime_type,
+      :file_name,
+      :file_size,
+      :has_convertible_format?,
+      :image_file_extension,
+      :image_file_format,
+      :image_file_height,
+      :image_file_name,
+      :image_file_present?,
+      :image_file_size,
+      :image_file_width,
+      :picture_url_class,
+      :preloaded_pictures,
+      :preprocessor_class,
+      :ransackable_associations,
+      :ransackable_attributes,
+      :rescuable_errors,
+      :searchable_alchemy_resource_attributes,
+      :set_attachment_name?,
+      to: :adapter
+    )
+
+    def initialize(name)
+      @name = name.to_sym
+      @adapter = adapter_class
+    end
+
+    def ==(other)
+      name == other.to_sym
+    end
+
+    def active_storage?
+      name == :active_storage
+    end
+
+    def dragonfly?
+      name == :dragonfly
+    end
+
+    def picture_class_methods
+      adapter::PictureClassMethods
+    end
+
+    def attachment_class_methods
+      adapter::AttachmentClassMethods
+    end
+
+    private
+
+    def adapter_class
+      case name
+      when :active_storage
+        ActiveStorage
+      when :dragonfly
+        Dragonfly
+      else
+        raise UnknownAdapterError,
+          "Unknown storage adapter: #{name}. Please use either 'active_storage' or 'dragonfly'."
+      end
+    end
+  end
+end

data/app/models/concerns/alchemy/picture_thumbnails.rb

@@ -28,7 +28,7 @@ module Alchemy
     #
     # @option options format [String]
     #   The format the picture should be rendered in.
-    #   Defaults to the +image_output_format+ from the +Alchemy::Config+.
+    #   Defaults to the +image_output_format+ from the +Alchemy.config+.
     #
     # @option options crop [Boolean]
     #   If set to true the picture will be cropped to fit the size value.
@@ -84,7 +84,7 @@ module Alchemy
         crop_from: crop && crop_from.presence || default_crop_from&.join("x"),
         crop_size: crop && crop_size.presence || default_crop_size&.join("x"),
         flatten: true,
-        format: picture&.image_file_format || "jpg"
+        format: picture&.image_file_extension || "jpg"
       }
     end
 
@@ -102,14 +102,27 @@ module Alchemy
 
     # Show image cropping link for ingredient
     def allow_image_cropping?
-      settings[:crop] && picture&.can_be_cropped_to?(
-        settings[:size],
-        settings[:upsample]
-      ) && !!picture.image_file
+      settings[:crop] && picture &&
+        Alchemy.storage_adapter.image_file_present?(picture) &&
+        can_be_cropped_to?
     end
 
     private
 
+    # An Image smaller than dimensions
+    # can not be cropped to given size - unless upsample is true.
+    #
+    def can_be_cropped_to?
+      return true if settings[:upsample]
+
+      dimensions = inferred_dimensions_from_string(settings[:size])
+      if dimensions
+        picture.image_file_width > dimensions[0] && picture.image_file_height > dimensions[1]
+      else
+        false
+      end
+    end
+
     def default_crop_size
       return nil unless settings[:crop] && settings[:size]
 

data/app/serializers/alchemy/element_serializer.rb

@@ -10,7 +10,6 @@ module Alchemy
       :tag_list,
       :created_at,
       :updated_at,
-      :dom_id,
       :display_name
 
     has_many :nested_elements

data/app/services/alchemy/dragonfly_to_image_processing.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Alchemy
+  module DragonflyToImageProcessing
+    RESIZE_TO_LIMIT = />$/
+    RESIZE_TO_FILL = /\#$/
+    RESIZE_TO_FIT = /\^$/
+    NOSHARPEN = {sharpen: false}.freeze
+
+    class << self
+      def call(options = {})
+        opts = crop_options(options).presence || resize_options(options)
+        opts.merge!(format_options(options))
+        opts.merge!(quality_options(options))
+        opts
+      end
+
+      private
+
+      def crop_options(options)
+        return {} unless options[:crop] && options[:crop_from] && options[:crop_size] && options[:size]
+
+        crop_from = options[:crop_from].split("x", 2).map(&:to_i)
+        crop_size = options[:crop_size].split("x", 2).map(&:to_i)
+        {
+          crop: crop_from + crop_size
+        }.merge(resize_options(options.except(:crop)))
+      end
+
+      def resize_options(options)
+        return {} unless options[:size]
+
+        size_string = image_magick_string(options)
+        width, height = size_string.split("x", 2).map(&:to_i)
+        case size_string
+        when RESIZE_TO_FIT
+          resize_to_fit_options(width, height)
+        when RESIZE_TO_FILL
+          resize_to_fill_options(width, height)
+        else
+          resize_to_limit_options(width, height)
+        end.transform_values! do |value|
+          value.push(sharpen_option(options))
+        end
+      end
+
+      def quality_options(options)
+        quality = options[:quality] || Alchemy.config.get(:output_image_quality)
+        {saver: {quality: quality}}
+      end
+
+      def format_options(options)
+        format = options[:format] || default_output_format
+        return {} if format.nil?
+
+        {format: format}
+      end
+
+      def image_magick_string(options)
+        if options[:crop] == true
+          "#{options[:size]}#"
+        else
+          options[:size]
+        end
+      end
+
+      def resize_to_fit_options(width, height)
+        {
+          resize_to_fit: [width, height]
+        }
+      end
+
+      def resize_to_fill_options(width, height)
+        {
+          resize_to_fill: [width, height]
+        }
+      end
+
+      def resize_to_limit_options(width, height)
+        {
+          resize_to_limit: [width, height]
+        }
+      end
+
+      def sharpen_option(options)
+        sharpen_value(options) ? {} : NOSHARPEN
+      end
+
+      def sharpen_value(options)
+        options.key?(:sharpen) ? options[:sharpen] : Alchemy.config.get(:sharpen_images)
+      end
+
+      def default_output_format
+        return nil if Alchemy.config.image_output_format == "original"
+
+        Alchemy.config.image_output_format
+      end
+    end
+  end
+end

data/app/stylesheets/alchemy/_defaults.scss

@@ -0,0 +1,3 @@
+@use "variables";
+@use "mixins";
+@use "extends";

data/app/stylesheets/alchemy/_extends.scss

@@ -0,0 +1,69 @@
+@use "sass:color";
+@use "mixins";
+
+%text-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  -ms-text-overflow: ellipsis;
+  -moz-text-overflow: ellipsis;
+}
+
+%field-with-error {
+  border-color: var(--notice-error-border-color);
+  color: var(--notice-error-text-color);
+  background-color: var(--form-field-error-bg-color);
+  box-shadow: var(--form-field-error-box-shadow);
+}
+
+%default-input-style {
+  border-radius: var(--border-radius_medium);
+  box-shadow: var(--form-field-box-shadow);
+  font: var(--font-default);
+  color: var(--form-field-text-color);
+  padding: var(--form-field-padding);
+  margin: var(--form-field-margin);
+  background: var(--form-field-background-color);
+  border-width: var(--form-field-border-width);
+  border-style: var(--form-field-border-style);
+  border-color: var(--form-field-border-color);
+  height: var(--form-field-height);
+  width: 100%;
+  font-size: var(--form-field-font-size);
+  line-height: var(--form-field-line-height);
+  transition: var(--transition-duration);
+
+  &:focus:not(.readonly) {
+    @include mixins.default-focus-style(
+      $box-shadow: 0 0 0 1px var(--focus-color)
+    );
+  }
+
+  &[disabled],
+  &.disabled,
+  &:not(.flatpickr-input)[readonly],
+  &:not(.flatpickr-input).readonly {
+    color: var(--form-field-disabled-text-color);
+    background-color: var(--form-field-disabled-bg-color);
+    cursor: default;
+  }
+
+  &[disabled],
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  &:not(.flatpickr-input)[readonly],
+  &:not(.flatpickr-input).readonly {
+    pointer-events: none;
+  }
+}
+
+%gradiated-toolbar {
+  display: flex;
+  background: var(--toolbar-bg-color);
+  padding: var(--toolbar-padding);
+  height: var(--toolbar-height);
+  border-bottom: var(--toolbar-border-bottom);
+}

data/app/{assets/stylesheets → stylesheets}/alchemy/_mixins.scss

@@ -1,7 +1,7 @@
 @mixin default-focus-style(
-  $border-color: $focus-color,
-  $box-shadow: 0 0 0 2px $focus-color,
-  $border-radius: $default-border-radius
+  $border-color: var(--focus-color),
+  $box-shadow: 0 0 0 2px var(--focus-color),
+  $border-radius: var(--border-radius_medium)
 ) {
   border-color: $border-color;
   border-radius: $border-radius;
@@ -15,26 +15,26 @@
 }
 
 @mixin button-defaults(
-  $background-color: $button-bg-color,
-  $hover-color: $button-hover-bg-color,
-  $hover-border-color: $button-hover-border-color,
-  $border-radius: $button-border-radius,
-  $border: $button-border-width solid $button-border-color,
-  $box-shadow: $button-box-shadow,
-  $padding: $button-padding,
-  $margin: $button-margin,
-  $color: $button-text-color,
-  $line-height: $form-field-line-height,
-  $focus-border-color: $button-focus-border-color,
-  $focus-box-shadow: $button-focus-box-shadow
+  $background-color: var(--button-bg-color),
+  $hover-color: var(--button-hover-bg-color),
+  $hover-border-color: var(--button-hover-border-color),
+  $border-radius: var(--button-border-radius),
+  $border: var(--button-border),
+  $box-shadow: var(--button-box-shadow),
+  $padding: var(--button-padding),
+  $margin: var(--button-margin),
+  $color: var(--button-text-color),
+  $line-height: var(--button-line-height),
+  $focus-border-color: var(--button-focus-border-color),
+  $focus-box-shadow: var(--button-focus-box-shadow)
 ) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-family: $default-font-family;
-  font-size: $default-font-size;
-  font-weight: $button-font-weight;
-  height: 30px;
+  font-family: var(--font-sans);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  height: var(--button-height);
   padding: $padding;
   cursor: pointer;
   border-radius: $border-radius;
@@ -44,7 +44,7 @@
   color: $color;
   margin: $margin;
   -webkit-appearance: none;
-  transition: all $transition-duration;
+  transition: all var(--transition-duration);
   @include antialiased-font-smoothing;
 
   &:hover {
@@ -55,7 +55,7 @@
 
   &:active,
   &.active {
-    box-shadow: inset $button-box-shadow;
+    box-shadow: inset var(--button-box-shadow);
   }
 
   &:focus {
@@ -69,11 +69,14 @@
   &[disabled],
   &.disabled:active,
   &[disabled]:active,
+  &.disabled:focus,
+  &[disabled]:focus,
   &.disabled:hover,
   &[disabled]:hover {
     background-color: hsla(0deg, 0%, 100%, 0.5);
     cursor: not-allowed;
     box-shadow: none;
+    outline: none;
   }
 
   &::-moz-focus-inner {
@@ -83,7 +86,7 @@
 }
 
 @mixin form-label {
-  width: $form-left-width;
+  width: var(--form-left-column-width);
   padding-right: var(--spacing-2);
   padding-top: 0.6em;
   margin-top: var(--spacing-1);
@@ -91,18 +94,18 @@
   word-break: normal;
   float: left;
   text-align: right;
-  font-size: $default-font-size;
+  font-size: var(--font-size_medium);
 }
 
 @mixin form-value-display {
   float: right;
-  width: $form-right-width;
-  margin: $form-field-margin;
+  width: var(--form-right-column-width);
+  margin: var(--form-field-margin);
   padding: var(--spacing-1) var(--spacing-2);
   line-height: 21px;
-  min-height: $form-field-height;
+  min-height: var(--form-field-height);
   background: white;
-  border-radius: $default-border-radius;
+  border-radius: var(--border-radius_medium);
 }
 
 @mixin form-hint(
@@ -116,7 +119,7 @@
   border: 1px solid $border-color;
   display: block;
   clear: both;
-  border-radius: $default-border-radius;
+  border-radius: var(--border-radius_medium);
 }
 
 @mixin animate-left {
@@ -159,8 +162,8 @@
   background-color: var(--color-grey_light);
   overflow: hidden;
   position: relative;
-  border-radius: $default-border-radius;
-  color: var(--color-text);
+  border-radius: var(--border-radius_medium);
+  color: var(--text-color);
 }
 
 @mixin tag-base($margin: var(--spacing-2) 0, $padding: var(--spacing-2)) {
@@ -179,28 +182,12 @@
   }
 
   &:focus {
-    @include default-focus-style($box-shadow: inset 0 0 0 2px $focus-color);
+    @include default-focus-style(
+      $box-shadow: inset 0 0 0 2px var(--focus-color)
+    );
   }
 }
 
-@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,
-    $box-shadow: none,
-    $padding: $padding,
-    $margin: 0
-  );
-}
-
 @mixin zoom-in {
   cursor: pointer;
   cursor: -webkit-zoom-in;

data/app/stylesheets/alchemy/_variables.scss

@@ -0,0 +1,5 @@
+$small-screen-break-point: 500px;
+$medium-screen-break-point: 700px;
+$large-screen-break-point: 1000px;
+$xlarge-screen-break-point: 1440px;
+$xxlarge-screen-break-point: 1680px;

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/archive.scss

@@ -1,21 +1,10 @@
+@use "../extends";
+@use "../mixins";
+
 .resources-header {
   padding: 0 var(--spacing-2);
 }
 
-.applied-filter {
-  display: inline-block;
-  padding: 2px 6px;
-  border-radius: $default-border-radius;
-  border: 1px solid $default-border-color;
-  white-space: nowrap;
-  font-weight: normal;
-
-  .dismiss-filter {
-    position: relative;
-    top: -1px;
-  }
-}
-
 .resources-table-wrapper {
   padding-bottom: 60px;
 
@@ -27,7 +16,7 @@
 
 .selected_item_tools {
   margin: calc(-1 * var(--spacing-2));
-  border-bottom: 1px solid $default-border-color;
+  border-bottom: 1px solid var(--border-color);
   margin-bottom: var(--spacing-4);
   padding: var(--spacing-4);
 
@@ -41,7 +30,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 0 1px 1px $default-border-color;
+  box-shadow: 0 0 1px 1px var(--border-color);
 
   &:hover {
     text-decoration: none;
@@ -59,7 +48,7 @@
   border-radius: var(--picture-thumbnail-border-radius);
   padding: var(--spacing-2);
   padding-bottom: 2.5em;
-  transition: all $transition-duration;
+  transition: all var(--transition-duration);
 
   img,
   .thumbnail_background {
@@ -71,7 +60,7 @@
     max-height: 100%;
 
     &:not([src*="alchemy/missing-image"]) {
-      background: $thumbnail-background;
+      background: var(--thumbnail-background);
     }
 
     &[src*=".svg"]:not([src*="alchemy/missing-image"]) {
@@ -105,7 +94,7 @@
   &:hover,
   &:focus-within,
   &.active {
-    box-shadow: 0 0 4px 2px $default-border-color;
+    box-shadow: 0 0 4px 2px var(--border-color);
 
     .picture_tool.select {
       visibility: visible;
@@ -149,7 +138,7 @@
 
 #pictures {
   .thumbnail_background {
-    @include zoom-in;
+    @include mixins.zoom-in;
   }
 }
 
@@ -174,7 +163,7 @@ div.assign_image_list_image {
   top: var(--spacing-1);
   padding: var(--spacing-0);
   z-index: 10;
-  border-radius: $default-border-radius;
+  border-radius: var(--border-radius_medium);
   box-shadow: 0 0 1px var(--color-grey_dark);
 
   &:hover {
@@ -230,7 +219,7 @@ div.assign_image_list_image {
   pointer-events: none;
 
   .tag {
-    box-shadow: 0 0 2px 2px $default-border-color;
+    box-shadow: 0 0 2px 2px var(--border-color);
   }
 }
 
@@ -238,20 +227,20 @@ div.assign_image_list_image {
 .picture_tool {
   visibility: hidden;
   opacity: 0;
-  transition: opacity $transition-duration;
+  transition: opacity var(--transition-duration);
 }
 
 div#library_sidebar {
   display: flex;
   flex-direction: column;
   position: fixed;
-  border-left: 1px solid $default-border-color;
+  border-left: 1px solid var(--border-color);
   top: 0;
   right: 0;
-  width: 232px;
+  width: var(--sidebar-width);
 
-  padding: calc(#{$top-menu-height} + var(--spacing-2)) var(--spacing-4)
-    calc(#{$pagination-height} + var(--spacing-2)) var(--spacing-4);
+  padding: calc(var(--top-menu-height) + var(--spacing-2)) var(--spacing-4)
+    calc(var(--pagination-height) + var(--spacing-2)) var(--spacing-4);
   height: 100%;
   z-index: 3;
   background-color: var(--color-grey_very_light);
@@ -261,7 +250,7 @@ div#library_sidebar {
   }
 
   h3 {
-    margin: 2em 0 1em;
+    margin: 1.5em 0 1em;
   }
 }
 
@@ -269,12 +258,6 @@ div#library_sidebar {
   position: absolute;
 }
 
-div#filter_bar {
-  .selectboxit {
-    width: 194px;
-  }
-}
-
 .alchemy-dialog-body {
   #library_sidebar {
     padding: 0 var(--spacing-4);
@@ -300,7 +283,7 @@ div#filter_bar {
     box-shadow: none;
 
     .thumbnail_background {
-      box-shadow: 0 0 4px 4px $default-border-color;
+      box-shadow: 0 0 4px 4px var(--border-color);
     }
   }
 }
@@ -308,7 +291,7 @@ div#filter_bar {
 #overlay_file_list {
   max-height: 100%;
   overflow-y: auto;
-  padding-bottom: $pagination-height;
+  padding-bottom: var(--pagination-height);
 
   .assign_file_file {
     display: block;
@@ -341,5 +324,5 @@ div#filter_bar {
 }
 
 #all_files td.name a {
-  @include zoom-in;
+  @include mixins.zoom-in;
 }