Merge pull request #22494 from peppy/skin-editor-ux-impovements

Improve transition and "non-skinnable screen" display in skin editor

osu.Game/Overlays/SkinEditor/SkinBlueprintContainer.cs

@@ -8,11 +8,15 @@ using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
 using osu.Framework.Input.Events;
-using osu.Framework.Screens;
 using osu.Framework.Testing;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.UserInterfaceV2;
 using osu.Game.Rulesets.Edit;
-using osu.Game.Screens;
 using osu.Game.Screens.Edit.Compose.Components;
 using osu.Game.Skinning;
 using osuTK;
@@ -45,9 +49,7 @@ namespace osu.Game.Overlays.SkinEditor
 
             if (targetContainers.Length == 0)
             {
-                string targetScreen = target.ChildrenOfType<Screen>().LastOrDefault()?.GetType().Name ?? "this screen";
+                AddInternal(new NonSkinnableScreenPlaceholder());
-
-                AddInternal(new ScreenWhiteBox.UnderConstructionMessage(targetScreen, "doesn't support skin customisation just yet."));
                 return;
             }
 
@@ -158,5 +160,65 @@ namespace osu.Game.Overlays.SkinEditor
             foreach (var list in targetComponents)
                 list.UnbindAll();
         }
+
+        public partial class NonSkinnableScreenPlaceholder : CompositeDrawable
+        {
+            [Resolved]
+            private SkinEditorOverlay? skinEditorOverlay { get; set; }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                RelativeSizeAxes = Axes.Both;
+
+                InternalChildren = new Drawable[]
+                {
+                    new Box
+                    {
+                        Colour = colourProvider.Dark6,
+                        RelativeSizeAxes = Axes.Both,
+                        Alpha = 0.95f,
+                    },
+                    new FillFlowContainer
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Spacing = new Vector2(0, 5),
+                        Direction = FillDirection.Vertical,
+                        Children = new Drawable[]
+                        {
+                            new SpriteIcon
+                            {
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
+                                Icon = FontAwesome.Solid.ExclamationCircle,
+                                Size = new Vector2(24),
+                                Y = -5,
+                            },
+                            new OsuTextFlowContainer(t => t.Font = OsuFont.Default.With(weight: FontWeight.SemiBold, size: 18))
+                            {
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
+                                TextAnchor = Anchor.Centre,
+                                RelativeSizeAxes = Axes.X,
+                                AutoSizeAxes = Axes.Y,
+                                Text = "Please navigate to a skinnable screen using the scene library",
+                            },
+                            new RoundedButton
+                            {
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
+                                Width = 200,
+                                Margin = new MarginPadding { Top = 20 },
+                                Action = () => skinEditorOverlay?.Hide(),
+                                Text = "Return to game"
+                            }
+                        }
+                    },
+                };
+            }
+        }
     }
 }

osu.Game/Overlays/SkinEditor/SkinEditor.cs

@@ -33,7 +33,7 @@ namespace osu.Game.Overlays.SkinEditor
     [Cached(typeof(SkinEditor))]
     public partial class SkinEditor : VisibilityContainer, ICanAcceptFiles, IKeyBindingHandler<PlatformAction>
     {
-        public const double TRANSITION_DURATION = 500;
+        public const double TRANSITION_DURATION = 300;
 
         public const float MENU_HEIGHT = 40;
 
@@ -359,10 +359,7 @@ namespace osu.Game.Overlays.SkinEditor
 
         protected override void PopIn()
         {
-            this
+            this.FadeIn(TRANSITION_DURATION, Easing.OutQuint);
-                // align animation to happen after the majority of the ScalingContainer animation completes.
-                .Delay(ScalingContainer.TRANSITION_DURATION * 0.3f)
-                .FadeIn(TRANSITION_DURATION, Easing.OutQuint);
         }
 
         protected override void PopOut()