chore: increase modal size & refactor modal css & remove dialog api f…

…allback
uploadcare · Oct 25, 2024 · 481734f · 481734f
1 parent 2da8fde
commit 481734f
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 120 deletions.
diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js
@@ -66,8 +66,6 @@ export class CameraSource extends UploaderBlock {
    * @param {'granted' | 'denied' | 'prompt'} state
    */
   _setPermissionsState = debounce((state) => {
-    this.classList.toggle('uc-initialized', state === 'granted');
-
     if (state === 'granted') {
       this.set$({
         videoHidden: false,

diff --git a/blocks/CameraSource/camera-source.css b/blocks/CameraSource/camera-source.css
@@ -10,21 +10,9 @@ uc-camera-source {
   border-radius: var(--uc-radius);
 }
 
-[uc-modal] uc-camera-source {
-  width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
-  height: 100vh;
-  max-height: var(--modal-max-content-height);
-}
-
-uc-camera-source.uc-initialized {
-  height: max-content;
-}
-
-@media only screen and (max-width: 430px) {
-  uc-camera-source {
-    width: calc(100vw - var(--uc-padding) * 2);
-    height: var(--modal-content-height-fill, 100%);
-  }
+[uc-modal] > dialog:has(uc-camera-source[active]) {
+  width: 100%;
+  height: 100%;
 }
 
 uc-camera-source video {
@@ -52,6 +40,7 @@ uc-camera-source .uc-content {
   flex: 1;
   justify-content: center;
   width: 100%;
+  height: 100%;
   padding: var(--uc-padding);
   padding-top: 0;
   overflow: hidden;

diff --git a/blocks/CloudImageEditorActivity/index.css b/blocks/CloudImageEditorActivity/index.css
@@ -7,7 +7,7 @@ uc-cloud-image-editor-activity {
   background-color: var(--uc-background);
 }
 
-[uc-modal] uc-cloud-image-editor-activity {
-  width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
-  height: var(--modal-content-height-fill, 100%);
+[uc-modal] > dialog:has(uc-cloud-image-editor-activity[active]) {
+  width: 100%;
+  height: 100%;
 }
diff --git a/blocks/ExternalSource/external-source.css b/blocks/ExternalSource/external-source.css
@@ -8,10 +8,9 @@ uc-external-source {
   position: relative;
 }
 
-[uc-modal] uc-external-source {
-  width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
-  height: var(--modal-content-height-fill, 100%);
-  max-height: var(--modal-max-content-height);
+[uc-modal] > dialog:has(uc-external-source[active]) {
+  width: 100%;
+  height: 100%;
 }
 
 uc-external-source > .uc-content {
@@ -21,13 +20,6 @@ uc-external-source > .uc-content {
   grid-template-rows: 1fr min-content;
 }
 
-@media only screen and (max-width: 430px) {
-  uc-external-source {
-    width: calc(100vw - var(--uc-padding) * 2);
-    height: var(--modal-content-height-fill, 100%);
-  }
-}
-
 uc-external-source iframe {
   display: block;
   width: 100%;

diff --git a/blocks/Modal/Modal.js b/blocks/Modal/Modal.js
@@ -58,17 +58,10 @@ export class Modal extends Block {
 
   initCallback() {
     super.initCallback();
-    if (typeof HTMLDialogElement === 'function') {
-      this.ref.dialog.addEventListener('close', this._handleDialogClose);
-      this.ref.dialog.addEventListener('mousedown', this._handleDialogMouseDown);
-      this.ref.dialog.addEventListener('mouseup', this._handleDialogMouseUp);
-    } else {
-      this.setAttribute('dialog-fallback', '');
-      let backdrop = document.createElement('div');
-      backdrop.className = 'uc-backdrop';
-      this.appendChild(backdrop);
-      backdrop.addEventListener('click', this._handleBackdropClick);
-    }
+
+    this.ref.dialog.addEventListener('close', this._handleDialogClose);
+    this.ref.dialog.addEventListener('mousedown', this._handleDialogMouseDown);
+    this.ref.dialog.addEventListener('mouseup', this._handleDialogMouseUp);
 
     this.sub('*modalActive', (modalActive) => {
       if (this.$.isOpen !== modalActive) {

diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css
@@ -1,46 +1,3 @@
-:where([uc-modal]) {
-  --modal-max-content-height: calc(
-    var(--uploadcare-blocks-window-height, 100vh) - 4 * var(--uc-padding) - var(--uc-button-size)
-  );
-  --modal-content-height-fill: var(--uploadcare-blocks-window-height, 100vh);
-}
-
-:where([uc-modal])[dialog-fallback] {
-  --uc-z-max: 2147483647;
-
-  position: fixed;
-  z-index: var(--uc-z-max);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
-  inset: 0;
-}
-
-:where([uc-modal])[dialog-fallback] dialog[open] {
-  z-index: var(--uc-z-max);
-  pointer-events: auto;
-}
-
-:where([uc-modal])[dialog-fallback] dialog[open] + .uc-backdrop {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  z-index: calc(var(--uc-z-max) - 1);
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  background-color: oklch(0 0 0 / 0.1);
-  pointer-events: auto;
-}
-
-:where([uc-modal])[strokes][dialog-fallback] dialog[open] + .uc-backdrop {
-  background-image: var(--modal-backdrop-background-image);
-}
-
 @supports selector(dialog::backdrop) {
   :where([uc-modal]) > dialog::backdrop {
     /* backdrop don't inherit theme properties */
@@ -67,12 +24,10 @@
 :where([uc-modal]) > dialog {
   display: flex;
   flex-direction: column;
-
-  /* there was `fit-content` but it doesn't reduce width after activity change */
-  width: max-content;
-  max-width: min(calc(100% - var(--uc-padding) * 2), calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2));
+  width: min(var(--uc-dialog-width), 100%);
+  max-width: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-width));
   min-height: var(--uc-button-size);
-  max-height: calc(var(--uc-dialog-max-height) - var(--uc-padding) * 2);
+  max-height: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-height));
   margin: auto;
   padding: 0;
   overflow: hidden;
@@ -88,9 +43,3 @@
 :where(.uc-contrast) :where([uc-modal]) > dialog {
   outline: 1px solid var(--uc-border);
 }
-
-@media only screen and (max-width: 430px), only screen and (max-height: 600px) {
-  :where([uc-modal]) > dialog > .uc-content {
-    height: var(--modal-max-content-height);
-  }
-}
diff --git a/blocks/StartFrom/start-from.css b/blocks/StartFrom/start-from.css
@@ -13,12 +13,8 @@ uc-start-from .uc-content {
   background-color: var(--uc-background);
 }
 
-[uc-modal] uc-start-from {
-  width: min(
-    calc(var(--uc-dialog-width) - var(--uc-padding) * 2),
-    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
-    calc(100vw - var(--uc-padding) * 2)
-  );
+[uc-modal] > dialog:has(uc-start-from[active]) {
+  width: var(--uc-dialog-width);
 }
 
 [uc-modal] uc-start-from uc-drop-area {

diff --git a/blocks/UploadList/upload-list.css b/blocks/UploadList/upload-list.css
@@ -8,14 +8,8 @@ uc-upload-list {
   transition: opacity var(--uc-transition);
 }
 
-[uc-modal] uc-upload-list {
-  width: min(
-    calc(var(--uc-dialog-width) - var(--uc-padding) * 2),
-    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
-    calc(100vw - var(--uc-padding) * 2)
-  );
+[uc-modal] > dialog:has(uc-upload-list[active]) {
   height: max-content;
-  max-height: var(--modal-max-content-height);
 }
 
 uc-upload-list .uc-no-files {

diff --git a/blocks/UrlSource/url-source.css b/blocks/UrlSource/url-source.css
@@ -3,14 +3,6 @@ uc-url-source {
   background-color: var(--uc-background);
 }
 
-[uc-modal] uc-url-source {
-  width: min(
-    calc(var(--uc-dialog-width) - var(--uc-padding) * 2),
-    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
-    calc(100vw - var(--uc-padding) * 2)
-  );
-}
-
 uc-url-source > .uc-content {
   display: grid;
   grid-gap: 4px;

diff --git a/blocks/themes/uc-basic/theme.css b/blocks/themes/uc-basic/theme.css
@@ -13,8 +13,8 @@
   --uc-radius: 8px;
   --uc-transition: 0.2s ease;
   --uc-dialog-width: 430px;
-  --uc-dialog-max-width: 800px;
-  --uc-dialog-max-height: 600px;
+  --uc-dialog-max-width: 920px;
+  --uc-dialog-max-height: 675px;
   --uc-simple-btn-padding: 7px 14px;
 
   /* Default colors, in case of media query failure */
@@ -276,4 +276,4 @@
 
   --uc-background-dark: oklch(10% 0 0);
   --uc-foreground-dark: oklch(100% 0 0);
-}
+}