Merge pull request #34 from cbcode1/mobile-fixes

Release 1.7.3

Author: cbcode1

API.md

@@ -1,5 +1,5 @@
-# Block Based Code (`@webwriter/block-based-code@1.7.2`)
-[License: MIT](LICENSE) | Version: 1.7.2
+# Block Based Code (`@webwriter/block-based-code@1.7.3`)
+[License: MIT](LICENSE) | Version: 1.7.3
 
 Write block-based code (e.g. Scratch) and run it.
 

components/editor/editor.component.ts

@@ -38,6 +38,8 @@ export class Editor extends LitElementWw {
   @query("#alert")
   private accessor alertDialog!: SlDialog;
 
+  private dialogOpenedAt = 0;
+
   public static get scopedElements(): Record<string, typeof LitElement> {
     return {
       "webwriter-blocks-toolbar": Toolbar,
@@ -78,7 +80,7 @@ export class Editor extends LitElementWw {
 
   public render(): TemplateResult {
     return html`
-        <sl-dialog id="prompt" no-header>
+        <sl-dialog id="prompt" no-header @sl-request-close=${this.handleDialogRequestClose}>
             <span></span>
             <sl-input autofocus placeholder=""></sl-input>
             <sl-button slot="footer" @click="${() => this.promptDialog.hide()}">Cancel</sl-button>
@@ -143,9 +145,18 @@ export class Editor extends LitElementWw {
       this.promptDialog.hide().catch();
     });
     button.parentNode.replaceChild(clonedButton, button);
+    this.dialogOpenedAt = Date.now();
     this.promptDialog.show().catch();
   }
 
+  private handleDialogRequestClose(event: CustomEvent): void {
+    // Prevent dialog from closing by the same event that opened it
+    // (affected change value pop-up on mobile devices)
+    if (event.detail.source === "overlay" && Date.now() - this.dialogOpenedAt < 100) {
+      event.preventDefault();
+    }
+  }
+
   private handleConfirm(message: string, callback: (confirmed: boolean) => void): void {
     Logger.log(this, message, callback);
     const titleSpan = this.confirmDialog.querySelector("span");

components/editor/editor.styles.ts

@@ -30,7 +30,8 @@ export const styles = css`
         background-color: var(--sl-color-neutral-0);
         border-right: 1px solid var(--sl-color-gray-300);
 
-        overflow-y: visible;
+        overflow-y: auto;
+        overflow-x: hidden;
     }
 
     .blocklyTreeRow {

components/stage/stage.component.ts

@@ -233,7 +233,7 @@ export class Stage extends LitElementWw {
                 </webwriter-blocks-toolbar-button>
             </div>
         </webwriter-blocks-toolbar>
-        <sl-tab-group placement="bottom">
+        <sl-tab-group placement="bottom" @sl-tab-show=${this.handleTabShow}>
             <sl-tab slot="nav" panel="stage" active>${msg(`OPTIONS.STAGE_TYPES.${this.stageType.toUpperCase() as Uppercase<StageType>}`)}
             </sl-tab>
             <sl-tab slot="nav" panel="code">${msg("OPTIONS.STAGE_TYPES.CODE")}</sl-tab>
@@ -300,6 +300,17 @@ export class Stage extends LitElementWw {
     this.stageApplication.resize();
   }
 
+  /**
+   * Handles the tab show event.
+   * Resizes the stage when its tab is shown to ensure it is visible if the width has changed.
+   * @private
+   */
+  private handleTabShow(event: CustomEvent): void {
+    if (event.detail.name === "stage") {
+      requestAnimationFrame(() => this.stageApplication.resize());
+    }
+  }
+
   /**
    * Handles the VM options click event.
    * @private

components/stage/stage.styles.ts

@@ -41,16 +41,19 @@ export const styles = css`
     }
     
     sl-tab-group {
-        height: 100%;
+        flex: 1;
+        min-height: 0;
     }
     
     sl-tab-group::part(base) {
         height: 100%;
     }
     
     sl-tab-group::part(body) {
-        height: 100%;
+        flex: 1;
+        min-height: 0;
         position: relative;
+        overflow: hidden;
     }
     
     sl-tab::part(base) {