alchemy_cms 7.3.4 → 7.4.0

data/app/assets/builds/alchemy/welcome.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../stylesheets/alchemy/custom-properties.css","../../stylesheets/alchemy/_fonts.scss","../../stylesheets/alchemy/welcome.scss","../../stylesheets/alchemy/_variables.scss"],"names":[],"mappings":"AAAA,MAEE,iBACA,iBACA,iBACA,kBACA,kBACA,kBACA,kBACA,kBACA,kBAGA,wBACA,yBACA,qBACA,uBACA,uBACA,wBAGA,8FAEA,6GAIA,wBACA,yBACA,wBAEA,0BACA,wBAGA,4BAGA,+CACA,0CACA,2CACA,yCAEA,+CACA,2CACA,4CACA,0CAEA,2CACA,4CACA,0CAEA,6CACA,0CACA,+CAEA,4CACA,uCACA,wCACA,sCAEA,4CACA,uCACA,wCACA,sCACA,2CAEA,mCAEA,0CACA,gDACA,2CAGF,eACE,0CAEA,6CACA,wCAEA,iDACA,4CACA,0CAEA,yDACA,sEACA,iEACA,+DAEA,0EACA,uEACA,wEACA,6EACA,iFC7FF,WACE,wBACA,ylxFACA,gBACA,kBAGF,WACE,wBACA,i7wFACA,gBACA,kBCPF,KACE,iBCgImB,uBD/HnB,yBACA,YCiBoB,0FDhBpB,mBACA,eACA,iBAGF,GACE,iBACA,eACA,gBACA,mBACA,iBAGF,WACE,kBACA,QACA,SACA,YACA,iBACA,8CAGF,GACE,gBACA,mBACA,UACA,kBACA,WACA,4BAEA,MACE,yBACA,mBACA,sBACA,qBACA,iBAIJ,EACE,yBACA,0BACA,+BAEA,QACE,yBACA","file":"welcome.css"}
+{"version":3,"sourceRoot":"","sources":["../../stylesheets/alchemy/custom-properties.css","../../stylesheets/alchemy/_fonts.scss","../../stylesheets/alchemy/welcome.scss","../../stylesheets/alchemy/_variables.scss"],"names":[],"mappings":"AAAA,MAEE,iBACA,iBACA,iBACA,kBACA,kBACA,kBACA,kBACA,kBACA,kBAGA,wBACA,yBACA,qBACA,uBACA,uBACA,wBAGA,8FAEA,6GAIA,wBACA,yBACA,wBAEA,0BACA,wBAGA,4BACA,0BAGA,+CACA,0CACA,2CACA,yCAEA,+CACA,2CACA,4CACA,0CAEA,2CACA,4CACA,0CAEA,6CACA,0CACA,+CAEA,4CACA,uCACA,wCACA,sCAEA,4CACA,uCACA,wCACA,sCACA,2CAEA,mCAEA,0CACA,gDACA,2CAGF,eACE,0CAEA,6CACA,wCAEA,iDACA,4CACA,0CAEA,yDACA,sEACA,iEACA,+DAEA,0EACA,uEACA,wEACA,6EACA,iFC9FF,WACE,wBACA,ylxFACA,gBACA,kBAGF,WACE,wBACA,i7wFACA,gBACA,kBCPF,KACE,iBCgImB,uBD/HnB,yBACA,YCiBoB,0FDhBpB,mBACA,eACA,iBAGF,GACE,iBACA,eACA,gBACA,mBACA,iBAGF,WACE,kBACA,QACA,SACA,YACA,iBACA,8CAGF,GACE,gBACA,mBACA,UACA,kBACA,WACA,4BAEA,MACE,yBACA,mBACA,sBACA,qBACA,iBAIJ,EACE,yBACA,0BACA,+BAEA,QACE,yBACA","file":"welcome.css"}

data/app/assets/builds/tinymce/skins/content/alchemy/content.min.css

@@ -1 +1 @@
-:root{--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;--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;--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_small: 10px;--font-size_medium: 12px;--font-size_large: 16px;--font-weigth_normal: 500;--font-weigth_bold: 700;--border-radius_medium: 3px;--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%);--color-text: hsla(224deg, 23%, 26%, 0.8);--color-text_muted: hsla(224deg, 23%, 26%, 0.5);--color-icon: hsla(224deg, 23%, 26%, 0.75)}.alchemy-light{--outline-color: var(--color-orange_dark);--font-color_failed: var(--color-red_medium);--font-color_default: var(--color-text);--tabs_indicator-color: var(--color-orange_dark);--tabs_track-color: var(--color-grey_light);--sl-input-label-color: var(--color-text);--file-upload_background-color: hsla(0deg, 0%, 80%, 0.8);--file-upload_single-upload-background-color: var(--color-grey_light);--file-upload_progress-track-color: var(--color-blue_very_light);--file-upload_progress-indicator-color: var(--color-blue_dark);--file-upload_progress-indicator-color-canceled: hsla(0deg, 0%, 60%, 0.8);--file-upload_progress-indicator-color-failed: var(--color-red_medium);--file-upload_progress-indicator-color-invalid: var(--color-red_medium);--file-upload_progress-indicator-color-successful: var(--color-green_medium);--file-upload_progress-indicator-color-upload-finished: var( --color-blue_dark )}html{font-size:13px}body{font-family:"Open Sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Tahoma,sans-serif;line-height:1.4;margin:1em;color:var(--color-text)}a{color:var(--color-blue_dark)}table{border-collapse:collapse}table td,table th{border:1px solid rgba(176,176,176,.5);padding:.4rem}figure{display:table;margin:1rem auto}figure figcaption{color:var(--color-grey_dark);display:block;margin-top:.25rem;text-align:center}hr{border-color:rgba(176,176,176,.5);border-style:solid;border-width:1px 0 0 0}code{background-color:var(--color-grey_very_light);border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid rgba(176,176,176,.5);margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid rgba(176,176,176,.5);margin-right:1.5rem;padding-right:1rem}/*# sourceMappingURL=content.min.css.map */
+:root{--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;--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;--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_small: 10px;--font-size_medium: 12px;--font-size_large: 16px;--font-weigth_normal: 500;--font-weigth_bold: 700;--border-radius_medium: 3px;--border-width_small: 1px;--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%);--color-text: hsla(224deg, 23%, 26%, 0.8);--color-text_muted: hsla(224deg, 23%, 26%, 0.5);--color-icon: hsla(224deg, 23%, 26%, 0.75)}.alchemy-light{--outline-color: var(--color-orange_dark);--font-color_failed: var(--color-red_medium);--font-color_default: var(--color-text);--tabs_indicator-color: var(--color-orange_dark);--tabs_track-color: var(--color-grey_light);--sl-input-label-color: var(--color-text);--file-upload_background-color: hsla(0deg, 0%, 80%, 0.8);--file-upload_single-upload-background-color: var(--color-grey_light);--file-upload_progress-track-color: var(--color-blue_very_light);--file-upload_progress-indicator-color: var(--color-blue_dark);--file-upload_progress-indicator-color-canceled: hsla(0deg, 0%, 60%, 0.8);--file-upload_progress-indicator-color-failed: var(--color-red_medium);--file-upload_progress-indicator-color-invalid: var(--color-red_medium);--file-upload_progress-indicator-color-successful: var(--color-green_medium);--file-upload_progress-indicator-color-upload-finished: var( --color-blue_dark )}html{font-size:13px}body{font-family:"Open Sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Tahoma,sans-serif;line-height:1.4;margin:1em;color:var(--color-text)}a{color:var(--color-blue_dark)}table{border-collapse:collapse}table td,table th{border:1px solid rgba(176,176,176,.5);padding:.4rem}figure{display:table;margin:1rem auto}figure figcaption{color:var(--color-grey_dark);display:block;margin-top:.25rem;text-align:center}hr{border-color:rgba(176,176,176,.5);border-style:solid;border-width:1px 0 0 0}code{background-color:var(--color-grey_very_light);border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid rgba(176,176,176,.5);margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid rgba(176,176,176,.5);margin-right:1.5rem;padding-right:1rem}/*# sourceMappingURL=content.min.css.map */

data/app/assets/builds/tinymce/skins/content/alchemy/content.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../stylesheets/alchemy/custom-properties.css","../../../../../stylesheets/tinymce/skins/content/alchemy/content.scss","../../../../../stylesheets/alchemy/_variables.scss"],"names":[],"mappings":"AAAA,MAEE,iBACA,iBACA,iBACA,kBACA,kBACA,kBACA,kBACA,kBACA,kBAGA,wBACA,yBACA,qBACA,uBACA,uBACA,wBAGA,8FAEA,6GAIA,wBACA,yBACA,wBAEA,0BACA,wBAGA,4BAGA,+CACA,0CACA,2CACA,yCAEA,+CACA,2CACA,4CACA,0CAEA,2CACA,4CACA,0CAEA,6CACA,0CACA,+CAEA,4CACA,uCACA,wCACA,sCAEA,4CACA,uCACA,wCACA,sCACA,2CAEA,mCAEA,0CACA,gDACA,2CAGF,eACE,0CAEA,6CACA,wCAEA,iDACA,4CACA,0CAEA,yDACA,sEACA,iEACA,+DAEA,0EACA,uEACA,wEACA,6EACA,iFCnFF,KACE,eAGF,KACE,YCSoB,0FDRpB,gBACA,WACA,wBAGF,EACE,6BAGF,MACE,yBAGF,kBAEE,sCACA,cAGF,OACE,cACA,iBAGF,kBACE,6BACA,cACA,kBACA,kBAGF,GACE,aCFqB,qBDGrB,mBACA,uBAGF,KACE,8CACA,cCHsB,IDItB,oBAGF,4CACE,2CACA,mBACA,kBAGF,sCACE,4CACA,oBACA","file":"content.min.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../stylesheets/alchemy/custom-properties.css","../../../../../stylesheets/tinymce/skins/content/alchemy/content.scss","../../../../../stylesheets/alchemy/_variables.scss"],"names":[],"mappings":"AAAA,MAEE,iBACA,iBACA,iBACA,kBACA,kBACA,kBACA,kBACA,kBACA,kBAGA,wBACA,yBACA,qBACA,uBACA,uBACA,wBAGA,8FAEA,6GAIA,wBACA,yBACA,wBAEA,0BACA,wBAGA,4BACA,0BAGA,+CACA,0CACA,2CACA,yCAEA,+CACA,2CACA,4CACA,0CAEA,2CACA,4CACA,0CAEA,6CACA,0CACA,+CAEA,4CACA,uCACA,wCACA,sCAEA,4CACA,uCACA,wCACA,sCACA,2CAEA,mCAEA,0CACA,gDACA,2CAGF,eACE,0CAEA,6CACA,wCAEA,iDACA,4CACA,0CAEA,yDACA,sEACA,iEACA,+DAEA,0EACA,uEACA,wEACA,6EACA,iFCpFF,KACE,eAGF,KACE,YCSoB,0FDRpB,gBACA,WACA,wBAGF,EACE,6BAGF,MACE,yBAGF,kBAEE,sCACA,cAGF,OACE,cACA,iBAGF,kBACE,6BACA,cACA,kBACA,kBAGF,GACE,aCFqB,qBDGrB,mBACA,uBAGF,KACE,8CACA,cCHsB,IDItB,oBAGF,4CACE,2CACA,mBACA,kBAGF,sCACE,4CACA,oBACA","file":"content.min.css"}

data/app/assets/config/alchemy_manifest.js

@@ -1,11 +1,7 @@
 //= link alchemy/admin/all.js
-//= link alchemy/preview.js
-//= link tinymce/plugins/alchemy_link/plugin.min.js
-//= link tinymce/icons/remixicons/icons.js
 //= link_tree ../builds/alchemy/
 //= link_tree ../builds/tinymce/
 //= link_tree ../images/alchemy/
-//= link_tree ../../../vendor/assets/fonts/
 //= link_tree ../../../vendor/assets/images/
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js

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

@@ -1,8 +1,10 @@
 // Alchemy CMS Sprockets Manifest
 // ------------------------------
-//= require jquery3
-//= require_tree ../../../../vendor/assets/javascripts/jquery_plugins/
-//= require handlebars
-//= require alchemy/templates
-//= require alchemy/alchemy.dialog
-//= require alchemy/alchemy.image_overlay
+//
+// This manifest file is deprecated and will be removed in Alchemy 8.0.
+//
+
+console.warn(
+  "The 'alchemy/admin' Sprockets manifest is deprecated and will be removed in 8.0. " +
+    "Please remove 'require alchemy/admin' from your 'vendor/assets/javascripts/alchemy/admin/all.js' file."
+)

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

@@ -1,10 +1,20 @@
+:root {
+  --elements-window-width: 0px;
+  --elements-window-min-width: #{$elements-window-min-width};
+}
+
 #alchemy_elements_window {
+  --width: var(--elements-window-width, 100vw);
   position: absolute;
   right: 0;
   top: $top-menu-height;
   z-index: 20;
   display: block;
-  width: calc(100vw - #{$collapsed-main-menu-width});
+  width: var(--width);
+  min-width: var(--elements-window-min-width);
+  max-width: calc(
+    100vw - var(--main-menu-width) - var(--preview-window-min-width)
+  );
   height: calc(100vh - #{$top-menu-height});
   border-left: $default-border;
   background-color: var(--color-grey_very_light);
@@ -14,15 +24,41 @@
   .elements-window-visible & {
     transform: translate3d(0, 0, 0);
   }
+}
 
-  // Fix for Tinymce fullscreen window positioning issues (GH#1511)
-  .mce-fullscreen & {
-    width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width});
-  }
+.elements-window-visible {
+  --elements-window-width: calc(100vw - var(--main-menu-width));
 
   @media screen and (min-width: $large-screen-break-point) {
-    width: $elements-window-width;
-    min-width: $elements-window-min-width;
+    --elements-window-width: var(--elements-window-min-width);
+  }
+
+  @media screen and (min-width: $xlarge-screen-break-point) {
+    --elements-window-min-width: 475px;
+  }
+
+  // 1778px * 0.225 = 400px (the min width of the elements window)
+  @media screen and (min-width: 1778px) {
+    --elements-window-width: #{$elements-window-width};
+  }
+}
+
+alchemy-elements-window-handle {
+  --width: var(--spacing-1);
+  position: absolute;
+  left: calc(-1 * var(--width) / 2);
+  top: 0;
+  z-index: 1500; // tinymce .tox-fullscreen has 1200
+  height: inherit;
+  width: var(--width);
+  transition-duration: $transition-duration;
+  transition-property: background-color width left;
+  transition-timing-function: ease-in-out;
+
+  &:hover,
+  &.is-dragged {
+    background: var(--color-blue_dark);
+    cursor: ew-resize;
   }
 }
 

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

@@ -43,6 +43,10 @@ form {
       float: right;
     }
 
+    textarea {
+      padding-top: 7px;
+    }
+
     .input > select,
     .input > .select2-container {
       width: 100%;

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

@@ -1,8 +1,3 @@
-$picture-overlay-handle-width: 24px;
-$image-overlay-form-width: 350px - $picture-overlay-handle-width;
-$image-overlay-transition-duration: $transition-duration;
-$image-overlay-transition-easing: ease-in;
-
 .alchemy-image-overlay {
   &.open {
     background-color: rgba(0, 0, 0, 0.6);
@@ -17,10 +12,21 @@ $image-overlay-transition-easing: ease-in;
   max-width: 100%;
 }
 
+.alchemy-image-overlay-container {
+  --picture-overlay-handle-width: 24px;
+  --image-overlay-form-width: calc(350px - var(--picture-overlay-handle-width));
+  --image-overlay-transition-duration: 250ms;
+  --image-overlay-transition-easing: ease-in;
+
+  &.open {
+    overflow: hidden;
+  }
+}
+
 .alchemy-image-overlay-dialog {
   &.hide-form {
     .picture-details-overlay {
-      right: -$image-overlay-form-width;
+      right: calc(-1 * var(--image-overlay-form-width));
     }
 
     .zoomed-picture-background {
@@ -28,11 +34,11 @@ $image-overlay-transition-easing: ease-in;
     }
 
     .alchemy-image-overlay-close {
-      right: $picture-overlay-handle-width + var(--spacing-2);
+      right: calc(var(--picture-overlay-handle-width) + var(--spacing-2));
     }
 
     .next-picture {
-      right: $picture-overlay-handle-width;
+      right: var(--picture-overlay-handle-width);
     }
 
     .picture-overlay-handle {
@@ -64,17 +70,18 @@ $image-overlay-transition-easing: ease-in;
   height: 32px;
   top: var(--spacing-2);
   right: calc(
-    var(--spacing-2) + #{$picture-overlay-handle-width} + #{$image-overlay-form-width}
+    var(--spacing-2) + var(--picture-overlay-handle-width) +
+      var(--image-overlay-form-width)
   );
   cursor: pointer;
-  transition: right $image-overlay-transition-duration
-    $image-overlay-transition-easing;
+  transition: right var(--image-overlay-transition-duration)
+    var(--image-overlay-transition-easing);
 
   .icon {
     font-size: 2em;
     color: var(--color-grey_light);
     text-shadow: 0 0 4px var(--color-text);
-    transition: color $image-overlay-transition-duration linear;
+    transition: color var(--image-overlay-transition-duration) linear;
 
     &:hover {
       color: var(--color-white);
@@ -88,13 +95,13 @@ $image-overlay-transition-easing: ease-in;
   top: 0;
   background-color: var(--color-grey_light);
   box-shadow: -2px 0 4px -2px var(--color-text);
-  transition: right $image-overlay-transition-duration
-    $image-overlay-transition-easing;
+  transition: right var(--image-overlay-transition-duration)
+    var(--image-overlay-transition-easing);
 }
 
 .picture-details-overlay {
   right: 0;
-  width: $image-overlay-form-width;
+  width: var(--image-overlay-form-width);
   height: 100%;
   padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-1);
   overflow: auto;
@@ -117,9 +124,9 @@ $image-overlay-transition-easing: ease-in;
 }
 
 .picture-overlay-handle {
-  width: $picture-overlay-handle-width;
+  width: var(--picture-overlay-handle-width);
   height: 100%;
-  right: $image-overlay-form-width;
+  right: var(--image-overlay-form-width);
   cursor: pointer;
 
   .icon {
@@ -129,8 +136,8 @@ $image-overlay-transition-easing: ease-in;
     transform: translate(-50%, -50%);
     font-size: 1.2em;
     color: var(--color-icon);
-    transition: transform $image-overlay-transition-duration
-      $image-overlay-transition-easing;
+    transition: transform var(--image-overlay-transition-duration)
+      var(--image-overlay-transition-easing);
   }
 
   &:hover {
@@ -143,15 +150,16 @@ $image-overlay-transition-easing: ease-in;
   height: 100%;
   padding-top: var(--spacing-2);
   padding-right: calc(
-    #{$image-overlay-form-width} + var(--spacing-2) + #{$picture-overlay-handle-width}
+    var(--image-overlay-form-width) + var(--spacing-2) +
+      var(--picture-overlay-handle-width)
   );
   padding-bottom: var(--spacing-2);
   padding-left: var(--spacing-2);
   margin: 0 auto;
   text-align: center;
   cursor: pointer;
-  transition: padding-right $image-overlay-transition-duration
-    $image-overlay-transition-easing;
+  transition: padding-right var(--image-overlay-transition-duration)
+    var(--image-overlay-transition-easing);
 
   &:before {
     content: "";
@@ -233,7 +241,7 @@ $image-overlay-transition-easing: ease-in;
     justify-content: center;
     align-items: center;
     text-decoration: none;
-    transition: background-color $image-overlay-transition-duration linear;
+    transition: background-color var(--image-overlay-transition-duration) linear;
 
     .icon {
       width: 32px;
@@ -246,16 +254,20 @@ $image-overlay-transition-easing: ease-in;
       background-color: rgba(0, 0, 0, 0.3);
 
       .icon {
-        transition: fill $image-overlay-transition-duration linear;
+        transition: fill var(--image-overlay-transition-duration) linear;
       }
     }
   }
 
+  .next-picture {
+    transition-property: background-color, right;
+  }
+
   .icon {
     --icon-size: 4em;
     fill: var(--color-grey_light);
     filter: drop-shadow(0 0 4px var(--color-icon));
-    transition: all $image-overlay-transition-duration linear;
+    transition: all var(--image-overlay-transition-duration) linear;
     vertical-align: middle;
   }
 
@@ -265,7 +277,9 @@ $image-overlay-transition-easing: ease-in;
   }
 
   .next-picture {
-    right: $image-overlay-form-width + $picture-overlay-handle-width;
+    right: calc(
+      var(--image-overlay-form-width) + var(--picture-overlay-handle-width)
+    );
     @include border-left-radius($default-border-radius);
   }
 }

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

@@ -193,6 +193,14 @@
   }
 }
 
+:root {
+  --main-menu-width: #{$main-menu-width};
+}
+
+.collapsed-menu {
+  --main-menu-width: #{$collapsed-main-menu-width};
+}
+
 @media screen and (min-width: $large-screen-break-point) {
   body:not(.collapsed-menu) {
     .sub_navigation {
@@ -222,7 +230,7 @@
   display: flex;
   flex-grow: 1;
   flex-wrap: nowrap;
-  height: $header-height;
+  height: $header-height + 1px;
 
   label {
     float: left;

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

@@ -1,28 +1,33 @@
+:root {
+  --preview-window-min-width: 0px;
+
+  @media screen and (min-width: $large-screen-break-point) {
+    --preview-window-min-width: 240px;
+  }
+}
+
 #alchemy_preview_window {
   position: absolute;
-  left: $main-menu-width;
+  left: var(--main-menu-width);
   top: 75px;
-  width: calc(100vw - #{$main-menu-width - $default-border-width});
+  width: calc(
+    100vw - var(--main-menu-width) - var(--elements-window-width) +
+      var(--border-width_small)
+  );
+  min-width: var(--preview-window-min-width);
+  max-width: calc(100vw - var(--main-menu-width));
   height: calc(100vh - #{$top-menu-height});
   border: 0 none;
   background: #fff;
   border-right: $default-border;
-  transition: width $transition-duration ease-in-out;
+  transition-duration: $transition-duration;
+  transition-timing-function: ease-in-out;
+  transition-property: width max-width;
 
-  .collapsed-menu & {
-    left: $collapsed-main-menu-width;
-    width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width});
-  }
-
-  .collapsed-menu.elements-window-visible & {
-    width: calc(
-      100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-min-width}
+  .elements-window-visible & {
+    max-width: calc(
+      100vw - var(--main-menu-width) - var(--elements-window-min-width) +
+        var(--border-width_small)
     );
-
-    @media screen and (min-width: 1777px) {
-      width: calc(
-        100vw - #{$collapsed-main-menu-width - $default-border-width} - #{$elements-window-width}
-      );
-    }
   }
 }

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

@@ -39,4 +39,4 @@
 @import "alchemy/admin/toolbar";
 @import "alchemy/admin/typography";
 @import "alchemy/admin/upload";
-@import "jquery.Jcrop.min";
+@import "cropper.min";

data/app/assets/stylesheets/alchemy/custom-properties.css

@@ -32,8 +32,9 @@
   --font-weigth_normal: 500;
   --font-weigth_bold: 700;
 
-  /* border-radius */
+  /* Borders */
   --border-radius_medium: 3px;
+  --border-width_small: 1px;
 
   /* Colors */
   --color-blue_very_light: hsl(203deg, 32%, 97%);

data/app/components/alchemy/ingredients/link_view.rb

@@ -1,6 +1,8 @@
 module Alchemy
   module Ingredients
     class LinkView < BaseView
+      include LinkTarget
+
       attr_reader :link_text
 
       # @param ingredient [Alchemy::Ingredient]
@@ -12,7 +14,11 @@ module Alchemy
       end
 
       def call
-        link_to(link_text, value, {target: ingredient.link_target.presence}.merge(html_options)).html_safe
+        target = ingredient.link_target.presence
+        link_to(link_text, value, {
+          target: link_target_value(target),
+          rel: link_rel_value(target)
+        }.merge(html_options)).html_safe
       end
     end
   end

data/app/components/alchemy/ingredients/picture_view.rb

@@ -4,6 +4,8 @@ module Alchemy
   module Ingredients
     # Renders a picture ingredient view
     class PictureView < BaseView
+      include LinkTarget
+
       attr_reader :ingredient,
         :show_caption,
         :disable_link,
@@ -46,10 +48,11 @@ module Alchemy
         output = caption ? img_tag + caption : img_tag
 
         if is_linked?
+          target = ingredient.link_target.presence
           output = link_to(output, url_for(ingredient.link), {
             title: ingredient.link_title.presence,
-            target: (ingredient.link_target == "blank") ? "_blank" : nil,
-            data: {link_target: ingredient.link_target.presence}
+            rel: link_rel_value(target),
+            target: link_target_value(target)
           })
         end
 

data/app/components/alchemy/ingredients/text_view.rb

@@ -1,6 +1,8 @@
 module Alchemy
   module Ingredients
     class TextView < BaseView
+      include LinkTarget
+
       attr_reader :disable_link
 
       delegate :dom_id, :link, :link_title, :link_target,
@@ -21,7 +23,8 @@ module Alchemy
           link_to(value, url_for(link), {
             id: dom_id.presence,
             title: link_title,
-            target: link_target
+            target: link_target_value(link_target),
+            rel: link_rel_value(link_target)
           }.merge(html_options))
         end.html_safe
       end

data/app/components/concerns/alchemy/ingredients/link_target.rb

@@ -0,0 +1,18 @@
+module Alchemy
+  module Ingredients
+    module LinkTarget
+      BLANK_VALUE = "_blank"
+      REL_VALUE = "noopener noreferrer"
+
+      def link_rel_value(target)
+        if link_target_value(target) == BLANK_VALUE
+          REL_VALUE
+        end
+      end
+
+      def link_target_value(target)
+        (target == "blank") ? BLANK_VALUE : target
+      end
+    end
+  end
+end

data/app/controllers/alchemy/admin/base_controller.rb

@@ -31,6 +31,27 @@ module Alchemy
 
       private
 
+      def safe_redirect_path(path = params[:redirect_to], fallback: admin_path)
+        if is_safe_redirect_path?(path)
+          path
+        elsif is_safe_redirect_path?(fallback)
+          fallback
+        else
+          admin_path
+        end
+      end
+
+      def is_safe_redirect_path?(path)
+        mount_path = alchemy.root_path
+        path.to_s.match? %r{^#{mount_path}admin/}
+      end
+
+      def relative_referer_path(referer = request.referer)
+        return unless referer
+
+        URI(referer).path
+      end
+
       # Disable layout rendering for xhr requests.
       def set_layout
         (request.xhr? || turbo_frame_request?) ? false : "alchemy/admin"
@@ -105,15 +126,23 @@ module Alchemy
         end
       end
 
-      # Does redirects for html and js requests
+      # Does redirects for html, turbo_stream and js requests
+      #
+      # Makes sure that the redirect path is safe.
       #
       def do_redirect_to(url_or_path)
+        redirect_path = safe_redirect_path(url_or_path)
         respond_to do |format|
-          format.js {
-            @redirect_url = url_or_path
+          format.js do
+            @redirect_url = redirect_path
             render :redirect
-          }
-          format.html { redirect_to url_or_path }
+          end
+          format.turbo_stream do
+            redirect_to(redirect_path, allow_other_host: false)
+          end
+          format.html do
+            redirect_to(redirect_path, allow_other_host: false)
+          end
         end
       end
 

data/app/controllers/alchemy/admin/elements_controller.rb

@@ -41,12 +41,12 @@ module Alchemy
           end
         end
         if @element.save
-          render :create
+          render :create, status: :created
         else
           @element.page_version = @page_version
           @elements = @page.available_element_definitions
           load_clipboard_items
-          render :new
+          render :new, status: :unprocessable_entity
         end
       end
 

data/app/controllers/alchemy/admin/languages_controller.rb

@@ -40,7 +40,7 @@ module Alchemy
       def switch
         @language = set_alchemy_language(params[:language_id])
         session[:alchemy_language_id] = @language.id
-        do_redirect_to request.referer || alchemy.admin_dashboard_path
+        do_redirect_to relative_referer_path || alchemy.admin_dashboard_path
       end
 
       private

data/app/controllers/alchemy/admin/layoutpages_controller.rb

@@ -22,6 +22,7 @@ module Alchemy
         @page = Page.find(params[:id])
         if @page.update(page_params)
           @notice = Alchemy.t("Page saved", name: @page.name)
+          @while_page_edit = request.referer.include?("edit")
           render "alchemy/admin/pages/update"
         else
           render :edit, status: :unprocessable_entity

data/app/controllers/alchemy/admin/pages_controller.rb

@@ -29,7 +29,7 @@ module Alchemy
         unless: -> { @page_root },
         only: [:index]
 
-      before_action :set_view, only: [:index]
+      before_action :set_view, only: [:index, :update]
 
       before_action :set_page_version, only: [:show, :edit]
 
@@ -131,6 +131,10 @@ module Alchemy
           @notice = Alchemy.t("Page saved", name: @page.name)
           @while_page_edit = request.referer.include?("edit")
 
+          if @view == "list"
+            flash[:notice] = @notice
+          end
+
           unless @while_page_edit
             @tree = serialized_page_tree
           end
@@ -189,11 +193,7 @@ module Alchemy
       end
 
       def unlock_redirect_path
-        if params[:redirect_to].to_s.match?(/\A\/admin\/(layout_)?pages/)
-          params[:redirect_to]
-        else
-          admin_pages_path
-        end
+        safe_redirect_path(fallback: admin_pages_path)
       end
 
       # Sets the page public and updates the published_at attribute that is used as cache_key

data/app/controllers/alchemy/admin/resources_controller.rb

@@ -78,7 +78,7 @@ module Alchemy
           flash[:error] = resource_instance_variable.errors.full_messages.join(", ")
         end
         flash_notice_for_resource_action
-        do_redirect_to resource_url_proxy.url_for(search_filter_params.merge(action: "index"))
+        do_redirect_to resource_url_proxy.url_for(search_filter_params.merge(action: "index", only_path: true))
       end
 
       def resource_handler

data/app/controllers/alchemy/elements_controller.rb

@@ -16,7 +16,10 @@ module Alchemy
     # * html
     # * js (Tries to replace a given +container_id+ with the elements view partial content via jQuery.)
     #
+    # @deprecated This controller action will be removed in Alchemy 8.0.
     def show
+      Alchemy::Deprecation.warn "The elements#show controller action is deprecated and will be removed in Alchemy 8.0."
+
       @page = @element.page
       @options = params[:options]
 

data/app/helpers/alchemy/admin/form_helper.rb

@@ -16,7 +16,7 @@ module Alchemy
       def alchemy_form_for(object, *args, &block)
         options = args.extract_options!
         options[:builder] = Alchemy::Forms::Builder
-        options[:remote] = request.xhr?
+        options.key?(:remote) || options[:remote] = request.xhr?
         options[:html] = {
           id: options.delete(:id),
           class: ["alchemy", options.delete(:class)].compact.join(" ")