chore: allow user to resize modal window

penpot · Oct 7, 2024 · 7de4379 · 7de4379
1 parent 51625c3
commit 7de4379
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 12 deletions.
diff --git a/libs/plugins-runtime/src/lib/assets/resize.svg b/libs/plugins-runtime/src/lib/assets/resize.svg
diff --git a/libs/plugins-runtime/src/lib/create-modal.ts b/libs/plugins-runtime/src/lib/create-modal.ts
@@ -20,19 +20,21 @@ export function createModal(
 
   const initialPosition = {
     blockStart: 40,
-    inlineEnd: 320,
+    // To be able to resize the element as expected the position must be absolute from the right.
+    // This value is the length of the window minus the width of the element plus the width of the design tab.
+    inlineStart: window.innerWidth - defaultWidth - 270,
   };
 
   modal.style.setProperty(
     '--modal-block-start',
     `${initialPosition.blockStart}px`
   );
   modal.style.setProperty(
-    '--modal-inline-end',
-    `${initialPosition.inlineEnd}px`
+    '--modal-inline-start',
+    `${initialPosition.inlineStart}px`
   );
 
-  const maxWidth = window.innerWidth - initialPosition.inlineEnd;
+  const maxWidth = window.innerWidth - initialPosition.inlineStart;
   const maxHeight = window.innerHeight - initialPosition.blockStart;
   let width = Math.min(options?.width || defaultWidth, maxWidth);
   let height = Math.min(options?.height || defaultHeight, maxHeight);

diff --git a/libs/plugins-runtime/src/lib/drag-handler.ts b/libs/plugins-runtime/src/lib/drag-handler.ts
@@ -1,4 +1,4 @@
-export const dragHandler = (el: HTMLElement, move?: () => void) => {
+export const dragHandler = (el: HTMLElement, target: HTMLElement = el, move?: () => void) => {
   let currentTranslate = { x: 0, y: 0 };
   let initialTranslate = { x: 0, y: 0 };
   let initialClientPosition = { x: 0, y: 0 };
@@ -10,7 +10,7 @@ export const dragHandler = (el: HTMLElement, move?: () => void) => {
 
     currentTranslate = { x: deltaX, y: deltaY };
 
-    el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+    target.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
 
     move?.();
   };

diff --git a/libs/plugins-runtime/src/lib/modal/plugin-modal.ts b/libs/plugins-runtime/src/lib/modal/plugin-modal.ts
@@ -12,6 +12,7 @@ export class PluginModalElement extends HTMLElement {
   }
 
   #wrapper: HTMLElement | null = null;
+  #inner: HTMLElement | null = null;
   #dragEvents: ReturnType<typeof dragHandler> | null = null;
 
   setTheme(theme: Theme) {
@@ -54,12 +55,21 @@ export class PluginModalElement extends HTMLElement {
     }
 
     this.#wrapper = document.createElement('div');
+    this.#inner = document.createElement('div');
+
+    this.#inner.classList.add('inner');
+    this.#inner.style.blockSize = '100%';
+
     this.#wrapper.classList.add('wrapper');
     this.#wrapper.style.inlineSize = `${width}px`;
+    this.#wrapper.style.minInlineSize = `${width}px`;
     this.#wrapper.style.blockSize = `${height}px`;
+    this.#wrapper.style.minBlockSize = `${height}px`;
+    this.#wrapper.style.maxInlineSize = '90vw';
+    this.#wrapper.style.maxBlockSize = '90vh';
 
     // move modal to the top
-    this.#dragEvents = dragHandler(this.#wrapper, () => {
+    this.#dragEvents = dragHandler(this.#inner, this.#wrapper, () => {
       this.calculateZIndex();
     });
 
@@ -124,8 +134,9 @@ export class PluginModalElement extends HTMLElement {
 
     this.shadowRoot.appendChild(this.#wrapper);
 
-    this.#wrapper.appendChild(header);
-    this.#wrapper.appendChild(iframe);
+    this.#wrapper.appendChild(this.#inner);
+    this.#inner.appendChild(header);
+    this.#inner.appendChild(iframe);
 
     const style = document.createElement('style');
     style.textContent = modalCss;

diff --git a/libs/plugins-runtime/src/lib/modal/plugin.modal.css b/libs/plugins-runtime/src/lib/modal/plugin.modal.css
@@ -25,18 +25,43 @@
   color: var(--color-foreground-secondary);
 }
 
+::-webkit-resizer {
+  display: none;/
+}
+
 .wrapper {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  position: fixed;
+  position: absolute;
   inset-block-start: var(--modal-block-start);
-  inset-inline-end: var(--modal-inline-end);
+  inset-inline-start: var(--modal-inline-start);
   z-index: 1000;
-  padding: 25px;
+  padding: 10px;
   border-radius: 15px;
   border: 2px solid var(--color-background-quaternary);
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  min-inline-size: 25px;
+  min-block-size: 200px;
+  resize: both;
+  cursor: se-resize;
+  &:after {
+    content: '';
+    inline-size: 1rem;
+    block-size: 1rem;
+    background-image: url('../assets/resize.svg');
+    background-position: center;
+    right: 5px;
+    bottom: 5px;
+    pointer-events: none;
+    position: absolute;
+  }
+}
+
+.inner {
+  padding: 10px;
+  cursor: grab;
 }
 
 .header {