Merge pull request #3187 from AlchemyCMS/backport/7.4-stable/pr-3097

[7.4-stable] Resizable elements window
AlchemyCMS · Feb 7, 2025 · 4e7ff81 · 4e7ff81
2 parents d5283f9 + 87fb348
commit 4e7ff81
Show file tree

Hide file tree

Showing 18 changed files with 192 additions and 39 deletions.
diff --git a/app/assets/builds/alchemy/admin.css b/app/assets/builds/alchemy/admin.css
diff --git a/app/assets/builds/alchemy/admin.css.map b/app/assets/builds/alchemy/admin.css.map
diff --git a/app/assets/builds/alchemy/custom-properties.css b/app/assets/builds/alchemy/custom-properties.css
diff --git a/app/assets/builds/alchemy/custom-properties.css.map b/app/assets/builds/alchemy/custom-properties.css.map
diff --git a/app/assets/builds/alchemy/welcome.css b/app/assets/builds/alchemy/welcome.css
diff --git a/app/assets/builds/alchemy/welcome.css.map b/app/assets/builds/alchemy/welcome.css.map
diff --git a/app/assets/builds/tinymce/skins/content/alchemy/content.min.css b/app/assets/builds/tinymce/skins/content/alchemy/content.min.css
diff --git a/app/assets/builds/tinymce/skins/content/alchemy/content.min.css.map b/app/assets/builds/tinymce/skins/content/alchemy/content.min.css.map
diff --git a/app/assets/stylesheets/alchemy/admin/elements.scss b/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)
-  .tox-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;
   }
 }
 

diff --git a/app/assets/stylesheets/alchemy/admin/navigation.scss b/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 {