diff --git a/features/features.json b/features/features.json index 10686be0..68ca9199 100644 --- a/features/features.json +++ b/features/features.json @@ -1,4 +1,9 @@ [ + { + "version": 2, + "id": "stage-in-spritepane", + "versionAdded": "v3.9.0" + }, { "version": 2, "id": "better-cloud-history", diff --git a/features/stage-in-spritepane/data.json b/features/stage-in-spritepane/data.json new file mode 100644 index 00000000..7e2de202 --- /dev/null +++ b/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 +} diff --git a/features/stage-in-spritepane/script.js b/features/stage-in-spritepane/script.js new file mode 100644 index 00000000..cd7f6611 --- /dev/null +++ b/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); + } + }); +} diff --git a/features/stage-in-spritepane/style.css b/features/stage-in-spritepane/style.css new file mode 100644 index 00000000..f552d555 --- /dev/null +++ b/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; +} \ No newline at end of file