feat(gui): add mobile sprite management panel (Phase 2-F)#587
Merged
Conversation
issue #572 Phase 2-F: モバイル用スプライト管理パネルを追加。元の Issue 報告 (smalruby/smalruby3-develop#80, "I can't add sprites nor costumes on safari on iOS") の解消。 実装: - MobileSpritePanel (新規): bottom-tabs の「スプライト」タブが active の ときだけ表示する overlay。upstream の <TargetPane> を全幅で再描画して、 スプライト追加 (Choose / Paint / Surprise / Upload) / 削除 / 名前変更 / 位置変更、ステージ背景管理を全機能再利用する。 - MobileGui: spriteTabActive を useState で保持し、MobileBottomTabs と MobileSpritePanel に共有。 - MobileBottomTabs: スプライトタブの状態を親管理に変更 (controlled component に)。 upstream への影響 (Smalruby マーカー): - target-pane.jsx に hideSpriteLibrary prop を追加。MobileSpritePanel が 独立ツリーで TargetPane を再描画するため、SpriteLibrary モーダルが 二重表示されないよう mobile copy 側だけ抑止する。 CSS: - mobile-sprite-panel.css: TargetPane の flex-direction を column に上書き (元々右ペイン 270px 幅前提の row レイアウトを mobile 全幅に流し込むと stage-selector が右に張り付くので、スプライト一覧 → ステージ背景の縦並び に変更) - ReactModal__Overlay の z-index を 9999 に上げる。upstream のデフォルト 510 だと Smalruby のモバイル UI (z-index 9000+) で隠れて操作不能になるため。 Tests: - mobile-sprite-panel.test.jsx (新規, 2 件): active=false で何も描画されず、 active=true で TargetPane stub と panel testid が描画される。 - mobile-bottom-tabs.test.jsx: spriteActive を controlled prop ベースに 書き直し (8 件)。
|
🚀 Preview deployed: https://smalruby.jp/smalruby3-editor/fix/issue-572-phase-2f-sprite-panel/ |
… sprite panel stageSize="small" だと <SpriteInfo> が name/x/y のみに省略されるため、 モバイルでも全項目を編集できるよう "middle" に変更する。viewport が 390px 以上ある現状では full set がきちんと収まる。
github-actions Bot
pushed a commit
that referenced
this pull request
Apr 29, 2026
…-phase-2f-sprite-panel feat(gui): add mobile sprite management panel (Phase 2-F)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
issue #572 Phase 2-F: モバイル用スプライト管理パネルを追加します。元の Issue 報告 (smalruby/smalruby3-develop#80 "I can't add sprites nor costumes on safari on iOS") の核心症状の解消です。
bottom-tabs の「スプライト」タブをタップすると、上部バーと下部タブの間に full-width のオーバーレイが立ち上がり、upstream の
<TargetPane>がそのまま使えるレイアウトでスプライト追加 / 削除 / 名前変更 / ステージ背景管理が可能になります。実装
MobileSpritePanel(新規): スプライトタブが active のときだけ表示する portal オーバーレイ。upstream<TargetPane>を再利用して全機能 (Choose / Paint / Surprise / Upload + 削除 + 複製 + 名前変更 + ステージ背景) を流用。MobileGui:spriteTabActiveを useState で保持し、子コンポーネントに共有。MobileBottomTabs: スプライトタブの active 状態を親管理に変更 (controlled component 化)。MobileSpritePanelCSS:<TargetPane>の flex-direction を column に上書き (270px 右ペイン前提の row レイアウトを mobile 全幅に流すと stage-selector が右に張り付いて違和感があるため)ReactModal__Overlayの z-index を 9999 に引き上げ (upstream の 510 だとモバイル UI 9000+ に隠れて操作不能)upstream への影響 (Smalruby マーカー)
src/components/target-pane/target-pane.jsxにhideSpriteLibraryprop を追加。<TargetPane>を 2 つ描画すると<SpriteLibrary>モーダルが 2 重に portal されるため、mobile copy 側だけ抑止<TargetPane>がモーダル描画を担当 (single instance).claude/rules/scratch-gui/smalruby-markers.md一覧に追加済み。Test plan
npm exec jest test/unit/components/mobile-{sprite-panel,bottom-tabs}.test.jsx→ 12 件 pass?mobile_gui=1+ 390x844 viewport) で:+FAB) → SpriteLibrary モーダルが全画面で開く (二重表示なし)残タスク
PR-2F でブロッカー #1 (スプライト管理) は解消しますが、残タスクとして直前の整理に挙げた:
スプライト管理 (← issue bug: iOS Safari など狭幅画面でスプライト/コスチューム追加が画面外になり操作不能 (responsive 対応) #572 の元の症状)…
… が残っています。次は #2 を予定。
🤖 Generated with Claude Code