@robotical/martyblocksjr 4.2.9 → 4.2.10

package/editions/free/src/css/editor.css

@@ -168,8 +168,39 @@ div.frame {
     cursor: default;
 }
 
-.pageactionrow.delete-mode .duplicatepage {
-    visibility: hidden;
+.deletepage {
+    appearance: none;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: ${24 * scaleMultiplier}px;
+    height: ${24 * scaleMultiplier}px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: url('../assets/ui/closeit.svg') no-repeat center;
+    background-size: 100.5%;
+    cursor: pointer;
+    opacity: 0.55;
+    pointer-events: auto;
+    transition: opacity 0.15s ease, transform 0.1s ease;
+    -webkit-user-select: none;
+}
+
+.deletepage:hover:not(:disabled),
+.deletepage:focus-visible:not(:disabled) {
+    filter: brightness(1.08);
+    opacity: 1;
+}
+
+.deletepage:active:not(:disabled) {
+    opacity: 1;
+    transform: scale(0.94);
+}
+
+.deletepage:disabled {
+    opacity: 0.24;
+    cursor: default;
 }
 
 .duplicatepageicon,
@@ -301,22 +332,6 @@ div.frame {
     background-size: 65%;
 }
 
-.deletethumb {
-    position: relative;
-    margin: ${css_vh(-3.9)} ${css_vh(0)} ${css_vh(0)};
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
-    background-size: 100.5%; /* webview pixelates the image unless we do this */
-    visibility: hidden;
-    z-index: 5;
-    -webkit-user-select: none;
-}
-
-.deletethumb.on {visibility: visible; }
-
-.deletethumb.off {visibility: hidden; }
-
 .circle {
     position: absolute;
     width: ${css_vh(2.6)};
@@ -487,52 +502,65 @@ div.frame {
 
 /* Palette animations */
 
-.deleteasset {
+.delete-recorded-sound {
+    appearance: none;
     position: absolute;
-    /* margin: ${css_vh(-13.02)} ${css_vh(0)} ${css_vh(0)}; */
-    top: 0; /* top: 0 seems to work better than negative margin as it's not affected by the height of the image which can be variable */
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
+    width: ${css_vh(4.69)};
+    height: ${css_vh(4.69)};
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: url('../assets/ui/closeit.svg') no-repeat center;
     background-size: 100.5%; /* webview pixelates the image unless we do this */
     z-index: 5;
+    cursor: pointer;
+    opacity: 0.55;
+    transition: opacity 0.15s ease, transform 0.1s ease;
     -webkit-user-select: none;
 }
 
-/* Palette animations */
+.delete-recorded-sound:hover,
+.delete-recorded-sound:focus-visible {
+    filter: brightness(1.08);
+    opacity: 1;
+}
 
-.deletesound {
-    position: absolute;
-    margin: ${css_vh(-0.78)} ${css_vh(-0.78)} ${css_vh(0)};
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
-    background-size: 100.5%; /* webview pixelates the image unless we do this */
-    z-index: 5;
-    zoom: 75%;
-    -webkit-user-select: none;
+.delete-recorded-sound:active {
+    opacity: 1;
+    transform: scale(0.94);
 }
 
-.deletesprite {
+.textsprite-delete-button {
+    appearance: none;
     position: absolute;
-    margin: ${css_vh(0)} ${css_vh(0)} ${css_vh(0)};
-    width: 45px;
-    height: 44px;
-    background: url('../assets/ui/closeit.svg');
+    top: -18px;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: url('../assets/ui/closeit.svg') no-repeat center;
     background-size: 100.5%; /* webview pixelates the image unless we do this */
     z-index: 5;
+    cursor: pointer;
+    opacity: 0.55;
+    transition: opacity 0.15s ease, transform 0.1s ease;
     -webkit-user-select: none;
 }
 
-.deletetext {
-    position: absolute;
-    margin: ${css_vh(-2.08)} ${css_vh(-4.17)} ${css_vh(0)};
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
-    background-size: 100.5%; /* webview pixelates the image unless we do this */
-z-index: 5;
-    -webkit-user-select: none;
+.textsprite-delete-button:hover,
+.textsprite-delete-button:focus-visible {
+    filter: brightness(1.08);
+    opacity: 1;
+}
+
+.textsprite-delete-button:active {
+    opacity: 1;
+    transform: scale(0.94);
+}
+
+.stage.fullscreen .textsprite-delete-button {
+    display: none;
 }
 
 .shakeme{

package/editions/free/src/css/editorleftpanel.css

@@ -287,7 +287,7 @@
     top: 0px;
     right: 0;
     width: ${css_vh(1.04)};
-    height: ${css_vh(25.63)};
+    height: ${css_vh(39.58)};
     background: rgba(255,255,255,0.5);
     touch-action: none;
     z-index: 8;
@@ -319,7 +319,7 @@
     padding: 0px;
     top: ${css_vh(14.75)};
     left: ${css_vh(7.55)};
-    width: ${css_vh(33.85)};
+    width: ${css_vh(27.34)};
     overflow-x: hidden;
 }
 
@@ -330,8 +330,8 @@
     display: block;
     overflow-y: scroll;
     overflow-x: hidden;
-    width: ${css_vh(33.85)};
-    max-height: ${css_vh(25.63)};
+    width: ${css_vh(27.34)};
+    max-height: ${css_vh(39.58)};
 }
 
 .spritethumbs::-webkit-scrollbar {
@@ -345,6 +345,23 @@
     width:  ${css_vh(29.95)};
 }
 
+#library .spritethumbs .spriteactions {
+    position: absolute;
+    top: 0;
+    left: ${css_vh(2.34)};
+    width: ${css_vh(29.95)};
+    z-index: 7;
+    pointer-events: none;
+}
+
+.spriteactionrow {
+    position: relative;
+    width: ${css_vh(23.18)};
+    height: ${css_vh(10.16)};
+    margin: 0 0 ${css_vh(-0.39)};
+    pointer-events: none;
+}
+
 #library .addsprite {
     position: relative;
     display: inline-block;
@@ -461,28 +478,34 @@
     background-size: 100% 100%;
 }
 
-.spritethumb.on .deletespritethumb {
+.deletespritethumb {
+    appearance: none;
     position: absolute;
-    margin: 0px 0px 0px;
-    left: 0px;
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
+    top: ${css_vh(0.39)};
+    right: ${css_vh(0.52)};
+    width: ${css_vh(3.13)};
+    height: ${css_vh(3.13)};
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: url('../assets/ui/closeit.svg') no-repeat center;
     background-size: 100.5%; /* webview pixelates the image unless we do this */
-    z-index: 5;
+    cursor: pointer;
+    opacity: 0.55;
+    pointer-events: auto;
+    transition: opacity 0.15s ease, transform 0.1s ease;
     -webkit-user-select: none;
 }
 
-.spritethumb.off .deletespritethumb {
-    position: absolute;
-    margin: 0px 0px 0px;
-    left: 0px;
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background: url('../assets/ui/closeit.svg');
-    background-size: 100.5%; /* webview pixelates the image unless we do this */
-    z-index: 5;
-    -webkit-user-select: none;
+.deletespritethumb:hover,
+.deletespritethumb:focus-visible {
+    filter: brightness(1.08);
+    opacity: 1;
+}
+
+.deletespritethumb:active {
+    opacity: 1;
+    transform: scale(0.94);
 }
 
 .spritethumb .icon{

package/editions/free/src/css/librarymodal.css

@@ -200,6 +200,7 @@ hr.bigdivide{
 }
 
 .assetbox {
+    position: relative;
     display: inline-block;
     vertical-align: top;
     width: ${css_vh(17.84)};
@@ -208,6 +209,37 @@ hr.bigdivide{
     padding: ${css_vh(0.65)};
 }
 
+.asset-delete-button {
+    appearance: none;
+    position: absolute;
+    top: ${css_vh(0.39)};
+    right: ${css_vh(0.39)};
+    width: ${css_vh(3.13)};
+    height: ${css_vh(3.13)};
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: url('../assets/ui/closeit.svg') no-repeat center;
+    background-size: 100.5%;
+    cursor: pointer;
+    opacity: 0.55;
+    pointer-events: auto;
+    transition: opacity 0.15s ease, transform 0.1s ease;
+    z-index: 20;
+    -webkit-user-select: none;
+}
+
+.asset-delete-button:hover,
+.asset-delete-button:focus-visible {
+    filter: brightness(1.08);
+    opacity: 1;
+}
+
+.asset-delete-button:active {
+    opacity: 1;
+    transform: scale(0.94);
+}
+
 .assetbox.off {
     background: url('../assets/paint/thumbOff.png') no-repeat center top;
     background-size: 100%;

package/editions/free/src/css/thumbs.css

@@ -3,7 +3,7 @@
     position: relative;
     margin: 0px;
     padding: 0px;
-    width: ${css_vw(21.68)};
+    width: ${css_vh(28.91)};
     height: ${css_vh(26.04)};
     vertical-align: top;
 }
@@ -159,94 +159,43 @@
     left: 8px;
 }
 
-.card-action-delete {
-    left: auto;
-    right: 8px;
-}
-
-.project-options-button {
+.project-delete-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: absolute;
     top: ${css_vh(1.1)};
     right: ${css_vh(0.8)};
     z-index: 8;
     width: ${css_vh(5.2)};
     height: ${css_vh(5.2)};
-    padding: 0 0 ${css_vh(1.1)};
-    border: 2px solid #315F7B;
+    padding: 0 0 ${css_vh(0.3)};
+    border: 2px solid #fff;
     border-radius: 50%;
-    background: rgba(255, 255, 255, 0.94);
-    box-shadow: 0 ${css_vh(0.25)} ${css_vh(0.55)} rgba(27, 62, 78, 0.35);
-    color: #315F7B;
+    background: #E43D44;
+    box-shadow: 0 0 0 2px #9E1F28, 0 ${css_vh(0.25)} ${css_vh(0.55)} rgba(27, 62, 78, 0.35);
+    color: #fff;
     cursor: pointer;
     font-family: 'Lato Regular';
-    font-size: ${css_vh(4.2)};
+    font-size: ${css_vh(3.8)};
     font-weight: bold;
     line-height: 1;
+    opacity: 0.55;
+    transition: opacity 0.15s ease, transform 0.1s ease;
     -webkit-tap-highlight-color: transparent;
 }
 
-.project-options-button:hover,
-.project-options-button:focus-visible,
-.project-options-button[aria-expanded="true"] {
-    background: #EAF7FF;
+.project-delete-button:hover,
+.project-delete-button:focus-visible {
+    background: #C92F37;
+    opacity: 1;
     outline: 3px solid #133C46;
-    outline-offset: 2px;
-}
-
-.project-options-menu {
-    position: absolute;
-    top: ${css_vh(6.7)};
-    right: ${css_vh(0.8)};
-    z-index: 20;
-    min-width: ${css_vh(18)};
-    padding: ${css_vh(0.7)};
-    border: 2px solid #315F7B;
-    border-radius: 12px;
-    background: #FFFDF7;
-    box-shadow: 0 ${css_vh(0.45)} ${css_vh(1.1)} rgba(27, 62, 78, 0.4);
-}
-
-.project-options-menu[hidden] {
-    display: none;
-}
-
-.project-options-delete {
-    display: flex;
-    align-items: center;
-    gap: ${css_vh(0.8)};
-    width: 100%;
-    min-height: ${css_vh(4.8)};
-    padding: ${css_vh(0.7)} ${css_vh(1)};
-    border: 0;
-    border-radius: 8px;
-    background: transparent;
-    color: #9E1F28;
-    cursor: pointer;
-    font-family: 'Lato Regular';
-    font-size: ${css_vh(1.8)};
-    font-weight: bold;
-    text-align: left;
-    white-space: nowrap;
-}
-
-.project-options-delete:hover,
-.project-options-delete:focus-visible {
-    background: #FCE5E5;
-    outline: 3px solid #9E1F28;
-    outline-offset: -1px;
+    outline-offset: 3px;
 }
 
-.project-options-delete-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: ${css_vh(2.6)};
-    height: ${css_vh(2.6)};
-    border-radius: 50%;
-    background: #E43D44;
-    color: #fff;
-    font-size: ${css_vh(1.8)};
-    line-height: 1;
+.project-delete-button:active {
+    opacity: 1;
+    transform: scale(0.94);
 }
 
 .project-delete-dialog-backdrop {
@@ -264,7 +213,9 @@
 }
 
 .project-delete-dialog {
-    width: min(${css_vh(52)}, 90vw);
+    box-sizing: border-box;
+    width: ${css_vh(52)};
+    max-width: 90vw;
     padding: ${css_vh(3)};
     border: ${css_vh(0.4)} solid #315F7B;
     border-radius: 18px;
@@ -325,18 +276,6 @@
     outline-offset: 3px;
 }
 
-.closex {
-    position: relative;
-    float: left;
-    top: ${css_vh(-54.17)};
-    z-index: 5;
-    visibility: hidden;
-    width: ${css_vh(5.86)};
-    height: ${css_vh(5.73)};
-    background:  url('../assets/ui/closeit.svg');
-    background-size: 101%;
-}
-
 .share {
     position: relative;
     top: ${css_vh(-22.14)};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robotical/martyblocksjr",
-  "version": "4.2.9",
+  "version": "4.2.10",
   "description": "ScratchJr",
   "repository": {
     "type": "git",

package/tests/e2e/duplicate-page.e2e.test.js

@@ -340,7 +340,7 @@ describe("duplicate page", () => {
   );
 
   it(
-    "always shows the duplicate glyph and hides the action during long-press delete mode",
+    "always shows duplicate and bottom-right delete actions without long-press mode",
     async () => {
       const { browser, page, errors } = await openPage("/editor.html?mode=edit");
 
@@ -353,6 +353,12 @@ describe("duplicate page", () => {
           const action = document.querySelector(
             `#pageactions .duplicatepage[data-owner="${currentPageId}"]`
           );
+          const deleteAction = document.querySelector(
+            `#pageactions .deletepage[data-owner="${currentPageId}"]`
+          );
+          const row = deleteAction.parentElement;
+          const deleteBounds = deleteAction.getBoundingClientRect();
+          const rowBounds = row.getBoundingClientRect();
           const icon = action.querySelector(".duplicatepageicon");
           const backSquare = window.getComputedStyle(icon, "::before");
           const frontSquare = window.getComputedStyle(icon, "::after");
@@ -362,6 +368,10 @@ describe("duplicate page", () => {
             frontContent: frontSquare.content,
             backZIndex: backSquare.zIndex,
             frontZIndex: frontSquare.zIndex,
+            deleteVisibility: window.getComputedStyle(deleteAction).visibility,
+            deleteEnabled: !deleteAction.disabled,
+            deleteAtBottomRight: Math.abs(deleteBounds.right - rowBounds.right) < 2
+              && Math.abs(deleteBounds.bottom - rowBounds.bottom) < 2,
           };
         }, pageId);
 
@@ -370,8 +380,11 @@ describe("duplicate page", () => {
         expect(restingState.frontContent).not.toBe("none");
         expect(restingState.backZIndex).not.toBe("-1");
         expect(restingState.frontZIndex).not.toBe("-1");
+        expect(restingState.deleteVisibility).toBe("visible");
+        expect(restingState.deleteEnabled).toBe(true);
+        expect(restingState.deleteAtBottomRight).toBe(true);
 
-        await page.evaluate((currentPageId) => new Promise((resolve) => {
+        const heldState = await page.evaluate((currentPageId) => new Promise((resolve) => {
           const thumb = document.querySelector(`.pagethumb[data-owner="${currentPageId}"]`);
           const bounds = thumb.getBoundingClientRect();
           thumb.dispatchEvent(new PointerEvent("pointerdown", {
@@ -383,27 +396,39 @@ describe("duplicate page", () => {
             pointerType: "mouse",
             isPrimary: true,
           }));
-          window.setTimeout(resolve, 600);
+          window.setTimeout(() => {
+            const duplicateAction = document.querySelector(
+              `#pageactions .duplicatepage[data-owner="${currentPageId}"]`
+            );
+            const deleteAction = document.querySelector(
+              `#pageactions .deletepage[data-owner="${currentPageId}"]`
+            );
+            const result = {
+              isShaking: thumb.classList.contains("shakeme"),
+              hasLegacyDeleteControl: Boolean(thumb.querySelector(".deletethumb")),
+              duplicateVisibility: window.getComputedStyle(duplicateAction).visibility,
+              deleteVisibility: window.getComputedStyle(deleteAction).visibility,
+            };
+            window.dispatchEvent(new PointerEvent("pointerup", {
+              bubbles: true,
+              cancelable: true,
+              clientX: bounds.left + (bounds.width / 2),
+              clientY: bounds.top + (bounds.height / 2),
+              pointerId: 1,
+              pointerType: "mouse",
+              isPrimary: true,
+            }));
+            resolve(result);
+          }, 600);
         }), pageId);
-        await page.waitForFunction((currentPageId) => {
-          const thumb = document.querySelector(`.pagethumb[data-owner="${currentPageId}"]`);
-          const action = document.querySelector(
-            `#pageactions .duplicatepage[data-owner="${currentPageId}"]`
-          );
-          return thumb.classList.contains("shakeme")
-            && window.getComputedStyle(action).visibility === "hidden"
-            && window.getComputedStyle(thumb.querySelector(".deletethumb")).visibility === "visible";
-        }, { timeout: 5_000 }, pageId);
 
-        await page.evaluate(() => window.ScratchJr.clearSelection());
-        await page.waitForFunction((currentPageId) => {
-          const thumb = document.querySelector(`.pagethumb[data-owner="${currentPageId}"]`);
-          const action = document.querySelector(
-            `#pageactions .duplicatepage[data-owner="${currentPageId}"]`
-          );
-          return !thumb.classList.contains("shakeme")
-            && window.getComputedStyle(action).visibility === "visible";
-        }, { timeout: 5_000 }, pageId);
+        expect(heldState.isShaking).toBe(false);
+        expect(heldState.hasLegacyDeleteControl).toBe(false);
+        expect(heldState.duplicateVisibility).toBe("visible");
+        expect(heldState.deleteVisibility).toBe("visible");
+
+        await page.click(`#pageactions .deletepage[data-owner="${pageId}"]`);
+        await page.waitForFunction(() => window.ScratchJr.stage.pages.length === 1);
         expect(errors).toEqual([]);
       } finally {
         await browser.close();