alchemy_cms 7.4.10 → 8.0.0.b

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

@@ -0,0 +1,28 @@
+module Alchemy
+  module RelatableResource
+    extend ActiveSupport::Concern
+
+    included do
+      scope :deletable, -> do
+        where(
+          "#{table_name}.id NOT IN (SELECT related_object_id FROM alchemy_ingredients WHERE related_object_id IS NOT NULL AND related_object_type = ?)",
+          name
+        )
+      end
+
+      has_many :related_ingredients,
+        class_name: "Alchemy::Ingredient",
+        foreign_key: "related_object_id",
+        as: :related_object
+
+      has_many :elements, through: :related_ingredients
+      has_many :pages, through: :elements
+    end
+
+    # Returns true if object is not assigned to any ingredient.
+    #
+    def deletable?
+      related_ingredients.none?
+    end
+  end
+end

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/_custom-properties.scss

@@ -0,0 +1,162 @@
+:root {
+  /* Dark Colors */
+  --a-lightest-grey: hsl(200deg, 5%, 90%);
+  --a-lighter-grey: hsl(200deg, 5%, 70%);
+  --a-light-grey: hsl(200deg, 5%, 35%);
+  --a-grey: hsl(200deg, 5%, 22.5%);
+  --a-dark-grey: hsl(200deg, 5%, 17.5%);
+  --a-darker-grey: hsl(200deg, 5%, 15%);
+  --a-darkest-grey: hsl(200deg, 5%, 12.5%);
+
+  /* Light Colors */
+  --color-blue_very_light: hsl(203deg, 32%, 97%);
+  --color-blue_light: hsl(203deg, 32%, 85%);
+  --color-blue_medium: hsl(212deg, 52%, 36%);
+  --color-blue_dark: hsl(212deg, 52%, 26%);
+
+  --color-green_very_light: hsl(88deg, 47%, 88%);
+  --color-green_light: hsl(127deg, 25%, 69%);
+  --color-green_medium: hsl(127deg, 25%, 48%);
+  --color-green_dark: hsl(128deg, 32%, 26%);
+
+  --color-yellow_light: hsl(60deg, 81%, 92%);
+  --color-yellow_medium: hsl(56deg, 68%, 85%);
+  --color-yellow_dark: hsl(56deg, 53%, 29%);
+
+  --color-orange_medium: hsl(42deg, 100%, 74%);
+  --color-orange_dark: hsl(28deg, 77%, 68%);
+  --color-orange_very_dark: hsl(28deg, 77%, 48%);
+
+  --color-red_very_light: hsl(0deg, 47%, 88%);
+  --color-red_light: hsl(0deg, 25%, 69%);
+  --color-red_medium: hsl(0deg, 51%, 42%);
+  --color-red_dark: hsl(0deg, 51%, 25%);
+
+  --color-grey_very_light: hsl(0deg, 0%, 97%);
+  --color-grey_light: hsl(0deg, 0%, 94%);
+  --color-grey_medium: hsl(0deg, 0%, 78%);
+  --color-grey_dark: hsl(0deg, 0%, 40%);
+  --color-grey_very_dark: hsl(0deg, 0%, 20%);
+
+  --color-white: hsl(0deg, 0%, 100%);
+
+  /* Sizes */
+  --spacing-0: 2px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+
+  /* Font Families */
+  --font-mono:
+    Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal,
+    monospace;
+  --font-sans:
+    "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana,
+    Tahoma, sans-serif;
+
+  /* Font Size - at the moment only in Pixel, because the base font size is 12px */
+  --font-size_small: 10px; /* 0.875rem */
+  --font-size_medium: 12px; /* 1rem */
+  --font-size_large: 16px; /* 1.25 rem */
+
+  --font-weight_normal: 500;
+  --font-weight_bold: 700;
+
+  --font-default: var(--font-size_medium) var(--font-sans);
+
+  /* Borders */
+  --border-radius_medium: 3px;
+  --border-width_small: 1px;
+  --border-style: solid;
+  --border-default: var(--border-width_small) var(--border-style)
+    var(--border-color);
+
+  /* Transitions */
+  --transition-duration: 250ms;
+  --transition-easing: linear;
+
+  /* Button */
+  --button-border-radius: var(--border-radius_medium);
+  --button-border-style: var(--border-style);
+  --button-border-width: var(--border-width_small);
+  --button-border: var(--button-border-width) var(--button-border-style)
+    var(--button-border-color);
+  --button-font-size: var(--font-size_medium);
+  --button-font-weight: var(--font-weight_bold);
+  --button-height: 30px;
+  --button-line-height: var(--form-field-line-height);
+  --button-margin: var(--form-field-margin);
+  --button-padding: var(--spacing-1) var(--spacing-5);
+  --button-small-padding: 0.4em 0.8em;
+
+  /* Date Picker */
+  --datepicker-font-size: var(--font-size_medium);
+
+  /* Dialog */
+  --dialog-header-height: 36px;
+  --dialog-header-font-size: var(--font-size_medium);
+  --dialog-header-padding: 0 var(--spacing-2);
+  --dialog-transition-duration: 150ms;
+
+  /* Elements */
+  --elements-window-width: 0px;
+  --elements-window-min-width: 400px;
+
+  /* Form */
+  --form-left-column-width: 35%;
+  --form-right-column-width: 65%;
+
+  /* Form Field */
+  --form-field-margin: var(--spacing-1) 0;
+  --form-field-height: 31px;
+  --form-field-addon-width: 30px;
+  --form-field-border-width: var(--border-width_small);
+  --form-field-border-style: var(--border-style);
+  --form-field-padding: var(--spacing-1) var(--spacing-2);
+  --form-field-font-size: var(--font-size_medium);
+  --form-field-line-height: 1.25;
+
+  /* Header */
+  --header-height: 29px;
+  --header-border-bottom: var(--border-default);
+
+  /* Icon Button */
+  --icon-button-height: 30px;
+  --icon-button-width: 30px;
+  --icon-button-medium-height: 26px;
+  --icon-button-medium-width: 26px;
+  --icon-button-small-height: 15px;
+  --icon-button-small-width: 15px;
+
+  /* Icons */
+  --icon-size-xs: 0.75rem;
+  --icon-size-sm: 0.875rem;
+  --icon-size-1x: 1rem;
+  --icon-size-md: 1.3rem;
+  --icon-size-xl: 1.5rem;
+  --icon-size-xxl: 1.6rem;
+
+  /* Navigation */
+  --main-menu-width: 150px;
+  --top-menu-height: 75px;
+  --main-menu-entry-max-width: 110px;
+
+  /* Pagination */
+  --pagination-height: 52px;
+
+  /* Select */
+  --select-medium-width: 90px;
+  --select-large-width: 120px;
+
+  /* Sidebar */
+  --sidebar-width: 232px;
+
+  /* Toolbar */
+  --toolbar-height: 46px;
+  --toolbar-padding: var(--spacing-2) var(--spacing-1);
+}

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,27 @@
 }
 
 @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),
+  $height: var(--button-height),
+  $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: $height;
   padding: $padding;
   cursor: pointer;
   border-radius: $border-radius;
@@ -44,7 +45,7 @@
   color: $color;
   margin: $margin;
   -webkit-appearance: none;
-  transition: all $transition-duration;
+  transition: all var(--transition-duration);
   @include antialiased-font-smoothing;
 
   &:hover {
@@ -55,7 +56,7 @@
 
   &:active,
   &.active {
-    box-shadow: inset $button-box-shadow;
+    box-shadow: inset var(--button-box-shadow);
   }
 
   &:focus {
@@ -66,14 +67,9 @@
   }
 
   &.disabled,
-  &[disabled],
-  &.disabled:active,
-  &[disabled]:active,
-  &.disabled:focus,
-  &[disabled]:focus,
-  &.disabled:hover,
-  &[disabled]:hover {
-    background-color: hsla(0deg, 0%, 100%, 0.5);
+  &[disabled] {
+    background-color: var(--button-disabled-bg-color);
+    border-color: var(--button-border-color);
     cursor: not-allowed;
     box-shadow: none;
     outline: none;
@@ -86,7 +82,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);
@@ -94,32 +90,24 @@
   word-break: normal;
   float: left;
   text-align: right;
-  font-size: $default-font-size;
-}
-
-@mixin form-value-display {
-  float: right;
-  width: $form-right-width;
-  margin: $form-field-margin;
-  padding: var(--spacing-1) var(--spacing-2);
-  line-height: 21px;
-  min-height: $form-field-height;
-  background: white;
-  border-radius: $default-border-radius;
+  font-size: var(--font-size_medium);
+  color: var(--form-field-label-color);
 }
 
 @mixin form-hint(
-  $background-color: var(--color-yellow_light),
-  $border-color: var(--color-grey_light)
+  $background-color: var(--hint-background-color),
+  $border-color: var(--hint-border-color),
+  $color: var(--hint-text-color)
 ) {
   font-size: var(--font-size_small);
   line-height: 1.5em;
   padding: var(--spacing-1);
   background-color: $background-color;
   border: 1px solid $border-color;
+  color: $color;
   display: block;
   clear: both;
-  border-radius: $default-border-radius;
+  border-radius: var(--border-radius_medium);
 }
 
 @mixin animate-left {
@@ -159,11 +147,11 @@
   vertical-align: middle;
   padding: $padding;
   margin: $margin;
-  background-color: var(--color-grey_light);
+  background-color: var(--tag-background-color);
   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)) {
@@ -175,35 +163,19 @@
     align-self: start;
     flex-shrink: 0;
     content: "";
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsla(224deg, 23%, 26%, 0.75)"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');
+    background-image: var(--tag-background-image);
     width: 12px;
     height: 12px;
     margin-top: var(--spacing-0);
   }
 
   &: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;