Merge pull request #29983 from bdach/directory-selector-redesign

Redesign directory & file selector

osu.Game.Tests/Visual/Settings/TestSceneDirectorySelector.cs

@@ -9,6 +9,11 @@ namespace osu.Game.Tests.Visual.Settings
 {
     public partial class TestSceneDirectorySelector : ThemeComparisonTestScene
     {
+        public TestSceneDirectorySelector()
+            : base(false)
+        {
+        }
+
         protected override Drawable CreateContent() => new OsuDirectorySelector
         {
             RelativeSizeAxes = Axes.Both

osu.Game.Tests/Visual/Settings/TestSceneFileSelector.cs

@@ -1,37 +1,49 @@
 // 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 System;
 using NUnit.Framework;
-using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Shapes;
-using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterfaceV2;
+using osu.Game.Overlays;
 using osu.Game.Tests.Visual.UserInterface;
 
 namespace osu.Game.Tests.Visual.Settings
 {
     public partial class TestSceneFileSelector : ThemeComparisonTestScene
     {
-        [Resolved]
+        public TestSceneFileSelector()
-        private OsuColour colours { get; set; } = null!;
+            : base(false)
+        {
+        }
 
         [Test]
         public void TestJpgFilesOnly()
         {
             AddStep("create", () =>
             {
-                ContentContainer.Children = new Drawable[]
+                var colourProvider = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
+
+                ContentContainer.Child = new DependencyProvidingContainer
                 {
-                    new Box
+                    RelativeSizeAxes = Axes.Both,
+                    CachedDependencies = new (Type, object)[]
                     {
-                        RelativeSizeAxes = Axes.Both,
+                        (typeof(OverlayColourProvider), colourProvider)
-                        Colour = colours.GreySeaFoam
                     },
-                    new OsuFileSelector(validFileExtensions: new[] { ".jpg" })
+                    Children = new Drawable[]
                     {
-                        RelativeSizeAxes = Axes.Both,
+                        new Box
-                    },
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Colour = colourProvider.Background3
+                        },
+                        new OsuFileSelector(validFileExtensions: new[] { ".jpg" })
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                    }
                 };
             });
         }

osu.Game.Tournament/Screens/Setup/StablePathSelectScreen.cs

@@ -27,6 +27,9 @@ namespace osu.Game.Tournament.Screens.Setup
         [Resolved]
         private MatchIPCInfo ipc { get; set; } = null!;
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
+
         private OsuDirectorySelector directorySelector = null!;
         private DialogOverlay? overlay;
 

osu.Game/Graphics/UserInterfaceV2/OsuDirectorySelector.cs

@@ -1,41 +1,72 @@
 // 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.
 
-#nullable disable
-
 using System.IO;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.Containers;
+using osu.Game.Overlays;
 
 namespace osu.Game.Graphics.UserInterfaceV2
 {
     public partial class OsuDirectorySelector : DirectorySelector
     {
-        public const float ITEM_HEIGHT = 20;
+        public const float ITEM_HEIGHT = 16;
 
-        public OsuDirectorySelector(string initialPath = null)
+        private Box hiddenToggleBackground = null!;
+
+        public OsuDirectorySelector(string? initialPath = null)
             : base(initialPath)
         {
         }
 
         [BackgroundDependencyLoader]
-        private void load()
+        private void load(OverlayColourProvider colourProvider)
         {
-            Padding = new MarginPadding(10);
+            AddInternal(new Box
+            {
+                RelativeSizeAxes = Axes.Both,
+                Colour = colourProvider.Background5,
+                Depth = float.MaxValue,
+            });
+
+            hiddenToggleBackground.Colour = colourProvider.Background4;
         }
 
-        protected override ScrollContainer<Drawable> CreateScrollContainer() => new OsuScrollContainer();
+        protected override ScrollContainer<Drawable> CreateScrollContainer() => new OsuScrollContainer
+        {
+            Padding = new MarginPadding
+            {
+                Horizontal = 20,
+                Vertical = 15,
+            }
+        };
 
         protected override DirectorySelectorBreadcrumbDisplay CreateBreadcrumb() => new OsuDirectorySelectorBreadcrumbDisplay();
 
-        protected override Drawable CreateHiddenToggleButton() => new OsuDirectorySelectorHiddenToggle { Current = { BindTarget = ShowHiddenItems } };
+        protected override Drawable CreateHiddenToggleButton() => new Container
+        {
+            RelativeSizeAxes = Axes.Y,
+            AutoSizeAxes = Axes.X,
+            Children = new Drawable[]
+            {
+                hiddenToggleBackground = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                },
+                new OsuDirectorySelectorHiddenToggle
+                {
+                    Current = { BindTarget = ShowHiddenItems },
+                },
+            }
+        };
 
         protected override DirectorySelectorDirectory CreateParentDirectoryItem(DirectoryInfo directory) => new OsuDirectorySelectorParentDirectory(directory);
 
-        protected override DirectorySelectorDirectory CreateDirectoryItem(DirectoryInfo directory, string displayName = null) => new OsuDirectorySelectorDirectory(directory, displayName);
+        protected override DirectorySelectorDirectory CreateDirectoryItem(DirectoryInfo directory, string? displayName = null) => new OsuDirectorySelectorDirectory(directory, displayName);
 
         protected override void NotifySelectionError() => this.FlashColour(Colour4.Red, 300);
     }

osu.Game/Graphics/UserInterfaceV2/OsuDirectorySelectorBreadcrumbDisplay.cs

@@ -1,33 +1,51 @@
 // 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.
 
-#nullable disable
-
 using System.IO;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
 using osuTK;
 
 namespace osu.Game.Graphics.UserInterfaceV2
 {
     internal partial class OsuDirectorySelectorBreadcrumbDisplay : DirectorySelectorBreadcrumbDisplay
     {
-        protected override Drawable CreateCaption() => new OsuSpriteText
+        public const float HEIGHT = 45;
+        public const float HORIZONTAL_PADDING = 20;
+
+        protected override Drawable CreateCaption() => Empty().With(d =>
         {
-            Text = "Current Directory: ",
+            d.Origin = Anchor.CentreLeft;
-            Font = OsuFont.Default.With(size: OsuDirectorySelector.ITEM_HEIGHT),
+            d.Anchor = Anchor.CentreLeft;
-        };
+            d.Alpha = 0;
+        });
 
         protected override DirectorySelectorDirectory CreateRootDirectoryItem() => new OsuBreadcrumbDisplayComputer();
 
-        protected override DirectorySelectorDirectory CreateDirectoryItem(DirectoryInfo directory, string displayName = null) => new OsuBreadcrumbDisplayDirectory(directory, displayName);
+        protected override DirectorySelectorDirectory CreateDirectoryItem(DirectoryInfo directory, string? displayName = null) => new OsuBreadcrumbDisplayDirectory(directory, displayName);
 
-        public OsuDirectorySelectorBreadcrumbDisplay()
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
         {
-            Padding = new MarginPadding(15);
+            ((FillFlowContainer)InternalChild).Padding = new MarginPadding
+            {
+                Horizontal = HORIZONTAL_PADDING,
+                Vertical = 10,
+            };
+
+            AddInternal(new Box
+            {
+                RelativeSizeAxes = Axes.Both,
+                Colour = colourProvider.Background4,
+                Depth = 1,
+            });
         }
 
         private partial class OsuBreadcrumbDisplayComputer : OsuBreadcrumbDisplayDirectory
@@ -40,26 +58,67 @@ namespace osu.Game.Graphics.UserInterfaceV2
             }
         }
 
-        private partial class OsuBreadcrumbDisplayDirectory : OsuDirectorySelectorDirectory
+        private partial class OsuBreadcrumbDisplayDirectory : DirectorySelectorDirectory
         {
-            public OsuBreadcrumbDisplayDirectory(DirectoryInfo directory, string displayName = null)
+            public OsuBreadcrumbDisplayDirectory(DirectoryInfo? directory, string? displayName = null)
                 : base(directory, displayName)
             {
             }
 
+            [Resolved]
+            private OverlayColourProvider colourProvider { get; set; } = null!;
+
             [BackgroundDependencyLoader]
             private void load()
             {
+                Anchor = Anchor.CentreLeft;
+                Origin = Anchor.CentreLeft;
+
+                Flow.AutoSizeAxes = Axes.X;
+                Flow.Height = 25;
+                Flow.Margin = new MarginPadding { Horizontal = 10, };
+
+                AddRangeInternal(new Drawable[]
+                {
+                    new Background
+                    {
+                        Depth = 1
+                    },
+                    new HoverClickSounds(),
+                });
+
                 Flow.Add(new SpriteIcon
                 {
                     Anchor = Anchor.CentreLeft,
                     Origin = Anchor.CentreLeft,
                     Icon = FontAwesome.Solid.ChevronRight,
-                    Size = new Vector2(FONT_SIZE / 2)
+                    Size = new Vector2(FONT_SIZE / 2),
+                    Margin = new MarginPadding { Left = 5, },
                 });
+                Flow.Colour = colourProvider.Light3;
             }
 
-            protected override IconUsage? Icon => Directory.Name.Contains(Path.DirectorySeparatorChar) ? base.Icon : null;
+            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/OsuDirectorySelectorDirectory.cs

@@ -1,66 +1,41 @@
 // 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.
 
-#nullable disable
-
 using System.IO;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
-using osu.Game.Overlays;
 
 namespace osu.Game.Graphics.UserInterfaceV2
 {
     internal partial class OsuDirectorySelectorDirectory : DirectorySelectorDirectory
     {
-        public OsuDirectorySelectorDirectory(DirectoryInfo directory, string displayName = null)
+        public OsuDirectorySelectorDirectory(DirectoryInfo directory, string? displayName = null)
             : base(directory, displayName)
         {
         }
 
         [BackgroundDependencyLoader]
-        private void load()
+        private void load(OsuColour colours)
         {
             Flow.AutoSizeAxes = Axes.X;
             Flow.Height = OsuDirectorySelector.ITEM_HEIGHT;
 
             AddRangeInternal(new Drawable[]
             {
-                new Background
-                {
-                    Depth = 1
-                },
                 new HoverClickSounds()
             });
+
+            Colour = colours.Orange1;
         }
 
-        protected override SpriteText CreateSpriteText() => new OsuSpriteText();
+        protected override SpriteText CreateSpriteText() => new OsuSpriteText().With(t => t.Font = OsuFont.Default.With(weight: FontWeight.Bold));
 
         protected override IconUsage? Icon => Directory.Name.Contains(Path.DirectorySeparatorChar)
             ? FontAwesome.Solid.Database
             : FontAwesome.Regular.Folder;
-
-        internal partial class Background : CompositeDrawable
-        {
-            [BackgroundDependencyLoader(true)]
-            private void load(OverlayColourProvider overlayColourProvider, OsuColour colours)
-            {
-                RelativeSizeAxes = Axes.Both;
-
-                Masking = true;
-                CornerRadius = 5;
-
-                InternalChild = new Box
-                {
-                    Colour = overlayColourProvider?.Background5 ?? colours.GreySeaFoamDarker,
-                    RelativeSizeAxes = Axes.Both,
-                };
-            }
-        }
     }
 }

osu.Game/Graphics/UserInterfaceV2/OsuDirectorySelectorHiddenToggle.cs

@@ -16,12 +16,15 @@ namespace osu.Game.Graphics.UserInterfaceV2
         {
             RelativeSizeAxes = Axes.None;
             AutoSizeAxes = Axes.None;
-            Size = new Vector2(100, 50);
+            Size = new Vector2(140, OsuDirectorySelectorBreadcrumbDisplay.HEIGHT);
+            Margin = new MarginPadding { Right = OsuDirectorySelectorBreadcrumbDisplay.HORIZONTAL_PADDING, };
             Anchor = Anchor.CentreLeft;
             Origin = Anchor.CentreLeft;
             LabelTextFlowContainer.Anchor = Anchor.CentreLeft;
             LabelTextFlowContainer.Origin = Anchor.CentreLeft;
             LabelText = @"Show hidden";
+
+            Scale = new Vector2(0.8f);
         }
 
         [BackgroundDependencyLoader(true)]

osu.Game/Graphics/UserInterfaceV2/OsuDirectorySelectorParentDirectory.cs

@@ -2,7 +2,9 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System.IO;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics.Sprites;
+using osu.Game.Overlays;
 
 namespace osu.Game.Graphics.UserInterfaceV2
 {
@@ -14,5 +16,11 @@ namespace osu.Game.Graphics.UserInterfaceV2
             : base(directory, "..")
         {
         }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            Colour = colourProvider.Content1;
+        }
     }
 }

osu.Game/Graphics/UserInterfaceV2/OsuFileSelector.cs

@@ -1,43 +1,74 @@
 // 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.
 
-#nullable disable
-
 using System.IO;
 using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 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.Overlays;
 
 namespace osu.Game.Graphics.UserInterfaceV2
 {
     public partial class OsuFileSelector : FileSelector
     {
-        public OsuFileSelector(string initialPath = null, string[] validFileExtensions = null)
+        private Box hiddenToggleBackground = null!;
+
+        public OsuFileSelector(string? initialPath = null, string[]? validFileExtensions = null)
             : base(initialPath, validFileExtensions)
         {
         }
 
         [BackgroundDependencyLoader]
-        private void load()
+        private void load(OverlayColourProvider colourProvider)
         {
-            Padding = new MarginPadding(10);
+            AddInternal(new Box
+            {
+                RelativeSizeAxes = Axes.Both,
+                Colour = colourProvider.Background5,
+                Depth = float.MaxValue,
+            });
+
+            hiddenToggleBackground.Colour = colourProvider.Background4;
         }
 
-        protected override ScrollContainer<Drawable> CreateScrollContainer() => new OsuScrollContainer();
+        protected override ScrollContainer<Drawable> CreateScrollContainer() => new OsuScrollContainer
+        {
+            Padding = new MarginPadding
+            {
+                Horizontal = 20,
+                Vertical = 15,
+            }
+        };
 
         protected override DirectorySelectorBreadcrumbDisplay CreateBreadcrumb() => new OsuDirectorySelectorBreadcrumbDisplay();
 
-        protected override Drawable CreateHiddenToggleButton() => new OsuDirectorySelectorHiddenToggle { Current = { BindTarget = ShowHiddenItems } };
+        protected override Drawable CreateHiddenToggleButton() => new Container
+        {
+            RelativeSizeAxes = Axes.Y,
+            AutoSizeAxes = Axes.X,
+            Children = new Drawable[]
+            {
+                hiddenToggleBackground = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                },
+                new OsuDirectorySelectorHiddenToggle
+                {
+                    Current = { BindTarget = ShowHiddenItems },
+                },
+            }
+        };
 
         protected override DirectorySelectorDirectory CreateParentDirectoryItem(DirectoryInfo directory) => new OsuDirectorySelectorParentDirectory(directory);
 
-        protected override DirectorySelectorDirectory CreateDirectoryItem(DirectoryInfo directory, string displayName = null) => new OsuDirectorySelectorDirectory(directory, displayName);
+        protected override DirectorySelectorDirectory CreateDirectoryItem(DirectoryInfo directory, string? displayName = null) => new OsuDirectorySelectorDirectory(directory, displayName);
 
         protected override DirectoryListingFile CreateFileItem(FileInfo file) => new OsuDirectoryListingFile(file);
 
@@ -51,19 +82,17 @@ namespace osu.Game.Graphics.UserInterfaceV2
             }
 
             [BackgroundDependencyLoader]
-            private void load()
+            private void load(OverlayColourProvider colourProvider)
             {
                 Flow.AutoSizeAxes = Axes.X;
                 Flow.Height = OsuDirectorySelector.ITEM_HEIGHT;
 
                 AddRangeInternal(new Drawable[]
                 {
-                    new OsuDirectorySelectorDirectory.Background
-                    {
-                        Depth = 1
-                    },
                     new HoverClickSounds()
                 });
+
+                Colour = colourProvider.Light3;
             }
 
             protected override IconUsage? Icon
@@ -91,7 +120,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
                 }
             }
 
-            protected override SpriteText CreateSpriteText() => new OsuSpriteText();
+            protected override SpriteText CreateSpriteText() => new OsuSpriteText().With(t => t.Font = OsuFont.Default.With(weight: FontWeight.SemiBold));
         }
     }
 }

osu.Game/Overlays/FirstRunSetup/ScreenImportFromStable.cs

@@ -314,6 +314,7 @@ namespace osu.Game.Overlays.FirstRunSetup
             private partial class DirectoryChooserPopover : OsuPopover
             {
                 public DirectoryChooserPopover(Bindable<DirectoryInfo?> currentDirectory)
+                    : base(false)
                 {
                     Child = new Container
                     {
@@ -325,6 +326,13 @@ namespace osu.Game.Overlays.FirstRunSetup
                         },
                     };
                 }
+
+                [BackgroundDependencyLoader]
+                private void load(OverlayColourProvider colourProvider)
+                {
+                    Body.BorderColour = colourProvider.Highlight1;
+                    Body.BorderThickness = 2;
+                }
             }
         }
     }

osu.Game/Overlays/Settings/Sections/Maintenance/DirectorySelectScreen.cs

@@ -48,8 +48,11 @@ namespace osu.Game.Overlays.Settings.Sections.Maintenance
         /// </summary>
         protected virtual DirectoryInfo InitialPath => null;
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
+
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load()
         {
             InternalChild = new Container
             {
@@ -64,7 +67,7 @@ namespace osu.Game.Overlays.Settings.Sections.Maintenance
                     new Box
                     {
                         RelativeSizeAxes = Axes.Both,
-                        Colour = colours.GreySeaFoamDark
+                        Colour = colourProvider.Background4,
                     },
                     new GridContainer
                     {

osu.Game/Screens/Edit/Setup/LabelledFileChooser.cs

@@ -18,6 +18,7 @@ using osu.Framework.Localisation;
 using osu.Framework.Platform;
 using osu.Game.Database;
 using osu.Game.Graphics.UserInterfaceV2;
+using osu.Game.Overlays;
 using osuTK;
 
 namespace osu.Game.Screens.Edit.Setup
@@ -118,6 +119,7 @@ namespace osu.Game.Screens.Edit.Setup
             protected override string PopOutSampleName => "UI/overlay-big-pop-out";
 
             public FileChooserPopover(string[] handledExtensions, Bindable<FileInfo?> currentFile, string? chooserPath)
+                : base(false)
             {
                 Child = new Container
                 {
@@ -129,6 +131,13 @@ namespace osu.Game.Screens.Edit.Setup
                     },
                 };
             }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                Body.BorderColour = colourProvider.Highlight1;
+                Body.BorderThickness = 2;
+            }
         }
     }
 }

osu.Game/Screens/Import/FileImportScreen.cs

@@ -15,6 +15,7 @@ using osu.Framework.Screens;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterfaceV2;
+using osu.Game.Overlays;
 using osuTK;
 
 namespace osu.Game.Screens.Import
@@ -36,8 +37,8 @@ namespace osu.Game.Screens.Import
         [Resolved]
         private OsuGameBase game { get; set; }
 
-        [Resolved]
+        [Cached]
-        private OsuColour colours { get; set; }
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
 
         [BackgroundDependencyLoader(true)]
         private void load()
@@ -52,11 +53,6 @@ namespace osu.Game.Screens.Import
                 Size = new Vector2(0.9f, 0.8f),
                 Children = new Drawable[]
                 {
-                    new Box
-                    {
-                        Colour = colours.GreySeaFoamDark,
-                        RelativeSizeAxes = Axes.Both,
-                    },
                     fileSelector = new OsuFileSelector(validFileExtensions: game.HandledExtensions.ToArray())
                     {
                         RelativeSizeAxes = Axes.Both,
@@ -72,7 +68,7 @@ namespace osu.Game.Screens.Import
                         {
                             new Box
                             {
-                                Colour = colours.GreySeaFoamDarker,
+                                Colour = colourProvider.Background4,
                                 RelativeSizeAxes = Axes.Both
                             },
                             new Container