Merge pull request #853 from Masaabu/stage-in-spritepane

Add Feature "stage-in-spritepane"

Author: rgantzos

features/features.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": 2,
+    "id": "stage-in-spritepane",
+    "versionAdded": "v3.9.0"
+  },
   {
     "version": 2,
     "id": "better-cloud-history",

features/stage-in-spritepane/data.json

@@ -0,0 +1,12 @@
+{
+    "title": "Stage In Sprite Pane",
+    "description": "Move the stage button to the sprite pane to widen the sprite field.",
+    "credits": [
+      { "username": "Masaabu-YT", "url": "https://scratch.mit.edu/users/Masaabu-YT/" }
+    ],
+    "type": ["Editor"],
+    "tags": ["New", "Featured"],
+    "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
+    "styles": [{ "file": "style.css", "runOn": "/projects/*" }],
+    "dynamic": true
+}

features/stage-in-spritepane/script.js

@@ -0,0 +1,34 @@
+export default async function ({ feature, console }) {
+  let activeStage;
+  ScratchTools.waitForElements(
+    "div[class*='target-pane_stage-selector-wrapper_']",
+    function (stage) {
+      activeStage = stage;
+
+      if (!feature.self.enabled) return;
+
+      stage.classList.add("ste-stage_in_spritepane");
+      document
+        .querySelector("div[class^='sprite-info_sprite-info_']")
+        .appendChild(stage);
+    }
+  );
+
+  feature.addEventListener("disabled", function () {
+    if (activeStage) {
+      activeStage.classList.remove("ste-stage_in_spritepane");
+      document
+        .querySelector("div[class^='target-pane_target-pane_']")
+        .appendChild(activeStage);
+    }
+  });
+
+  feature.addEventListener("enabled", function () {
+    if (activeStage) {
+      activeStage.classList.add("ste-stage_in_spritepane");
+      document
+        .querySelector("div[class^='sprite-info_sprite-info_']")
+        .appendChild(activeStage);
+    }
+  });
+}

features/stage-in-spritepane/style.css

@@ -0,0 +1,61 @@
+[class*='sprite-info_sprite-info_'] {
+    height: auto;
+}
+
+.ste-stage_in_spritepane [class*='stage-selector_stage-selector_'] {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: initial;
+    border: 1.333px solid #00000026;
+    border-radius: 0.5rem;
+}
+
+.ste-stage_in_spritepane [class*='stage-selector_header_'] {
+    border: none;
+    background: none;
+    width: auto;
+    margin-right: 8px;
+}
+
+[class*='stage-selector_stage-selector_'][class*='stage-selector_is-selected_'] [class*='stage-selector_header_'] {
+    background: none;
+}
+
+.ste-stage_in_spritepane [class*='stage-selector_header_'] span {
+    color: #575e75;
+}
+
+.ste-stage_in_spritepane [class*='stage-selector_costume-canvas_'] {
+    margin: 2px;
+}
+
+.ste-stage_in_spritepane [class*='stage-selector_label_'] {
+    margin: 0;
+}
+
+.ste-stage_in_spritepane [class*='action-menu_menu-container_'] {
+    right: 0;
+    bottom: 7%;
+}
+
+div[class^='stage-selector_stage-selector_'] > div[class^='action-menu_menu-container_'] {
+    transform: scale(.8) rotate(-90deg);
+    margin-right: .3rem;
+}
+
+div[class^='stage-selector_stage-selector_'] > div[class^='action-menu_menu-container_'] img {
+    transform: rotate(90deg);
+}
+
+div[class^='stage-selector_stage-selector_'] > div[class^='action-menu_menu-container_'] div[class^='__react_component_tooltip'] {
+    display: none;
+}
+
+div[class^='stage-selector_header-title_'] {
+    display: none;
+}
+
+body div[class^='target-pane_stage-selector-wrapper_'] {
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+}