1
0
mirror of https://github.com/ppy/osu.git synced 2024-11-15 11:47:24 +08:00

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

Redesign directory & file selector
This commit is contained in:
Bartłomiej Dach 2024-09-26 14:14:22 +02:00 committed by GitHub
commit f16f419928
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 229 additions and 88 deletions

View File

@ -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

View File

@ -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]
private OsuColour colours { get; set; } = null!;
public TestSceneFileSelector()
: 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,
Colour = colours.GreySeaFoam
(typeof(OverlayColourProvider), colourProvider)
},
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,
},
}
};
});
}

View File

@ -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;

View File

@ -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);
}

View File

@ -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: ",
Font = OsuFont.Default.With(size: OsuDirectorySelector.ITEM_HEIGHT),
};
d.Origin = Anchor.CentreLeft;
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,
};
}
}
}
}
}

View File

@ -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,
};
}
}
}
}

View File

@ -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)]

View File

@ -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;
}
}
}

View File

@ -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));
}
}
}

View File

@ -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;
}
}
}
}

View File

@ -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
{

View File

@ -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;
}
}
}
}

View File

@ -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]
private OsuColour colours { get; set; }
[Cached]
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