Merge pull request #30017 from peppy/file-picker-hover-states

Add basic hover states for file selector elements

osu.Game/Graphics/UserInterfaceV2/FileSelection/BackgroundLayer.cs

@@ -0,0 +1,59 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Input.Events;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
+
+namespace osu.Game.Graphics.UserInterfaceV2.FileSelection
+{
+    internal partial class BackgroundLayer : CompositeDrawable
+    {
+        private Box background = null!;
+
+        private readonly float defaultAlpha;
+
+        public BackgroundLayer(float defaultAlpha = 0f)
+        {
+            Depth = float.MaxValue;
+
+            this.defaultAlpha = defaultAlpha;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider overlayColourProvider)
+        {
+            RelativeSizeAxes = Axes.Both;
+
+            Masking = true;
+            CornerRadius = 5;
+
+            InternalChildren = new Drawable[]
+            {
+                new HoverClickSounds(),
+                background = new Box
+                {
+                    Alpha = defaultAlpha,
+                    Colour = overlayColourProvider.Background3,
+                    RelativeSizeAxes = Axes.Both,
+                },
+            };
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            background.FadeTo(1, 200, Easing.OutQuint);
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            base.OnHoverLost(e);
+            background.FadeTo(defaultAlpha, 500, Easing.OutQuint);
+        }
+    }
+}

osu.Game/Graphics/UserInterfaceV2/FileSelection/HiddenFilesToggleCheckbox.cs

@@ -8,11 +8,11 @@ using osu.Game.Overlays;
 using osuTK;
 using osuTK.Graphics;
 
-namespace osu.Game.Graphics.UserInterfaceV2
+namespace osu.Game.Graphics.UserInterfaceV2.FileSelection
 {
-    internal partial class OsuDirectorySelectorHiddenToggle : OsuCheckbox
+    internal partial class HiddenFilesToggleCheckbox : OsuCheckbox
     {
-        public OsuDirectorySelectorHiddenToggle()
+        public HiddenFilesToggleCheckbox()
         {
             RelativeSizeAxes = Axes.None;
             AutoSizeAxes = Axes.None;

osu.Game/Graphics/UserInterfaceV2/FileSelection/OsuDirectorySelectorBreadcrumbDisplay.cs

@@ -13,7 +13,7 @@ using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays;
 using osuTK;
 
-namespace osu.Game.Graphics.UserInterfaceV2
+namespace osu.Game.Graphics.UserInterfaceV2.FileSelection
 {
     internal partial class OsuDirectorySelectorBreadcrumbDisplay : DirectorySelectorBreadcrumbDisplay
     {
@@ -80,7 +80,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
 
                 AddRangeInternal(new Drawable[]
                 {
-                    new Background
+                    new BackgroundLayer(0.5f)
                     {
                         Depth = 1
                     },
@@ -101,24 +101,6 @@ namespace osu.Game.Graphics.UserInterfaceV2
             protected override SpriteText CreateSpriteText() => new OsuSpriteText().With(t => t.Font = OsuFont.Default.With(weight: FontWeight.SemiBold));
 
             protected override IconUsage? Icon => Directory.Name.Contains(Path.DirectorySeparatorChar) ? FontAwesome.Solid.Database : null;
-
-            internal partial class Background : CompositeDrawable
-            {
-                [BackgroundDependencyLoader]
-                private void load(OverlayColourProvider overlayColourProvider)
-                {
-                    RelativeSizeAxes = Axes.Both;
-
-                    Masking = true;
-                    CornerRadius = 5;
-
-                    InternalChild = new Box
-                    {
-                        Colour = overlayColourProvider.Background3,
-                        RelativeSizeAxes = Axes.Both,
-                    };
-                }
-            }
         }
     }
 }

osu.Game/Graphics/UserInterfaceV2/FileSelection/OsuDirectorySelectorDirectory.cs

@@ -7,9 +7,8 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
 
-namespace osu.Game.Graphics.UserInterfaceV2
+namespace osu.Game.Graphics.UserInterfaceV2.FileSelection
 {
     internal partial class OsuDirectorySelectorDirectory : DirectorySelectorDirectory
     {
@@ -24,10 +23,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
             Flow.AutoSizeAxes = Axes.X;
             Flow.Height = OsuDirectorySelector.ITEM_HEIGHT;
 
-            AddRangeInternal(new Drawable[]
+            AddInternal(new BackgroundLayer());
-            {
-                new HoverClickSounds()
-            });
 
             Colour = colours.Orange1;
         }

osu.Game/Graphics/UserInterfaceV2/FileSelection/OsuDirectorySelectorParentDirectory.cs

@@ -6,7 +6,7 @@ using osu.Framework.Allocation;
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Overlays;
 
-namespace osu.Game.Graphics.UserInterfaceV2
+namespace osu.Game.Graphics.UserInterfaceV2.FileSelection
 {
     internal partial class OsuDirectorySelectorParentDirectory : OsuDirectorySelectorDirectory
     {

osu.Game/Graphics/UserInterfaceV2/FormFileSelector.cs

@@ -24,6 +24,7 @@ using osu.Game.Database;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Overlays;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Graphics.UserInterfaceV2
 {
@@ -254,8 +255,22 @@ namespace osu.Game.Graphics.UserInterfaceV2
             [BackgroundDependencyLoader]
             private void load(OverlayColourProvider colourProvider)
             {
-                Body.BorderThickness = 2;
+                Add(new Container
-                Body.BorderColour = colourProvider.Highlight1;
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Masking = true,
+                    BorderThickness = 2,
+                    CornerRadius = 10,
+                    BorderColour = colourProvider.Highlight1,
+                    Children = new Drawable[]
+                    {
+                        new Box
+                        {
+                            Colour = Color4.Transparent,
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                    }
+                });
             }
         }
     }

osu.Game/Graphics/UserInterfaceV2/OsuDirectorySelector.cs

@@ -8,6 +8,7 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.UserInterfaceV2.FileSelection;
 using osu.Game.Overlays;
 
 namespace osu.Game.Graphics.UserInterfaceV2
@@ -57,7 +58,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
                 {
                     RelativeSizeAxes = Axes.Both,
                 },
-                new OsuDirectorySelectorHiddenToggle
+                new HiddenFilesToggleCheckbox
                 {
                     Current = { BindTarget = ShowHiddenItems },
                 },

osu.Game/Graphics/UserInterfaceV2/OsuFileSelector.cs

@@ -11,7 +11,7 @@ using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
+using osu.Game.Graphics.UserInterfaceV2.FileSelection;
 using osu.Game.Overlays;
 
 namespace osu.Game.Graphics.UserInterfaceV2
@@ -59,7 +59,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
                 {
                     RelativeSizeAxes = Axes.Both,
                 },
-                new OsuDirectorySelectorHiddenToggle
+                new HiddenFilesToggleCheckbox
                 {
                     Current = { BindTarget = ShowHiddenItems },
                 },
@@ -87,10 +87,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
                 Flow.AutoSizeAxes = Axes.X;
                 Flow.Height = OsuDirectorySelector.ITEM_HEIGHT;
 
-                AddRangeInternal(new Drawable[]
+                AddInternal(new BackgroundLayer());
-                {
-                    new HoverClickSounds()
-                });
 
                 Colour = colourProvider.Light3;
             }