diff --git a/osu.Game.Tests/Visual/UserInterface/TestScenePopupScreenTitle.cs b/osu.Game.Tests/Visual/UserInterface/TestSceneShearedOverlayHeader.cs similarity index 76% rename from osu.Game.Tests/Visual/UserInterface/TestScenePopupScreenTitle.cs rename to osu.Game.Tests/Visual/UserInterface/TestSceneShearedOverlayHeader.cs index 22a8fa8a46..ef2b25cd92 100644 --- a/osu.Game.Tests/Visual/UserInterface/TestScenePopupScreenTitle.cs +++ b/osu.Game.Tests/Visual/UserInterface/TestSceneShearedOverlayHeader.cs @@ -10,19 +10,19 @@ using osu.Game.Overlays; namespace osu.Game.Tests.Visual.UserInterface { [TestFixture] - public class TestScenePopupScreenTitle : OsuTestScene + public class TestSceneShearedOverlayHeader : OsuTestScene { [Cached] private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Green); [Test] - public void TestPopupScreenTitle() + public void TestShearedOverlayHeader() { AddStep("create content", () => { - Child = new PopupScreenTitle + Child = new ShearedOverlayHeader { - Title = "Popup Screen Title", + Title = "Sheared overlay header", Description = string.Join(" ", Enumerable.Repeat("This is a description.", 20)), Close = () => { } }; @@ -34,9 +34,9 @@ namespace osu.Game.Tests.Visual.UserInterface { AddStep("create content", () => { - Child = new PopupScreenTitle + Child = new ShearedOverlayHeader { - Title = "Popup Screen Title", + Title = "Sheared overlay header", Description = "This is a description." }; }); diff --git a/osu.Game/Graphics/UserInterface/PopupScreenTitle.cs b/osu.Game/Graphics/UserInterface/ShearedOverlayHeader.cs similarity index 96% rename from osu.Game/Graphics/UserInterface/PopupScreenTitle.cs rename to osu.Game/Graphics/UserInterface/ShearedOverlayHeader.cs index 5b7db09e77..9ed7bb35de 100644 --- a/osu.Game/Graphics/UserInterface/PopupScreenTitle.cs +++ b/osu.Game/Graphics/UserInterface/ShearedOverlayHeader.cs @@ -19,8 +19,10 @@ using osuTK; namespace osu.Game.Graphics.UserInterface { - public class PopupScreenTitle : CompositeDrawable + public class ShearedOverlayHeader : CompositeDrawable { + public const float HEIGHT = main_area_height + 2 * corner_radius; + public LocalisableString Title { set => titleSpriteText.Text = value; @@ -48,7 +50,7 @@ namespace osu.Game.Graphics.UserInterface private readonly OsuTextFlowContainer descriptionText; private readonly IconButton closeButton; - public PopupScreenTitle() + public ShearedOverlayHeader() { RelativeSizeAxes = Axes.X; AutoSizeAxes = Axes.Y; @@ -67,7 +69,7 @@ namespace osu.Game.Graphics.UserInterface underlayContainer = new Container { RelativeSizeAxes = Axes.X, - Height = main_area_height + 2 * corner_radius, + Height = HEIGHT, CornerRadius = corner_radius, Masking = true, BorderThickness = 2, diff --git a/osu.Game/Overlays/Mods/DifficultyMultiplierDisplay.cs b/osu.Game/Overlays/Mods/DifficultyMultiplierDisplay.cs index 248d4f288e..66fd6a202d 100644 --- a/osu.Game/Overlays/Mods/DifficultyMultiplierDisplay.cs +++ b/osu.Game/Overlays/Mods/DifficultyMultiplierDisplay.cs @@ -58,7 +58,7 @@ namespace osu.Game.Overlays.Mods AutoSizeAxes = Axes.X, Masking = true, CornerRadius = ModPanel.CORNER_RADIUS, - Shear = new Vector2(ModPanel.SHEAR_X, 0), + Shear = new Vector2(ShearedOverlayContainer.SHEAR, 0), Children = new Drawable[] { underlayBackground = new Box @@ -98,7 +98,7 @@ namespace osu.Game.Overlays.Mods Anchor = Anchor.Centre, Origin = Anchor.Centre, Margin = new MarginPadding { Horizontal = 18 }, - Shear = new Vector2(-ModPanel.SHEAR_X, 0), + Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0), Text = "Difficulty Multiplier", Font = OsuFont.Default.With(size: 17, weight: FontWeight.SemiBold) } @@ -109,7 +109,7 @@ namespace osu.Game.Overlays.Mods AutoSizeAxes = Axes.Both, Anchor = Anchor.Centre, Origin = Anchor.Centre, - Shear = new Vector2(-ModPanel.SHEAR_X, 0), + Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0), Direction = FillDirection.Horizontal, Spacing = new Vector2(2, 0), Children = new Drawable[] diff --git a/osu.Game/Overlays/Mods/ModColumn.cs b/osu.Game/Overlays/Mods/ModColumn.cs index f84ae4ac8a..78b4e24a4e 100644 --- a/osu.Game/Overlays/Mods/ModColumn.cs +++ b/osu.Game/Overlays/Mods/ModColumn.cs @@ -79,7 +79,7 @@ namespace osu.Game.Overlays.Mods Width = 320; RelativeSizeAxes = Axes.Y; - Shear = new Vector2(ModPanel.SHEAR_X, 0); + Shear = new Vector2(ShearedOverlayContainer.SHEAR, 0); Container controlContainer; InternalChildren = new Drawable[] @@ -113,7 +113,7 @@ namespace osu.Game.Overlays.Mods AutoSizeAxes = Axes.Y, Anchor = Anchor.CentreLeft, Origin = Anchor.CentreLeft, - Shear = new Vector2(-ModPanel.SHEAR_X, 0), + Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0), Padding = new MarginPadding { Horizontal = 17, @@ -193,7 +193,7 @@ namespace osu.Game.Overlays.Mods Scale = new Vector2(0.8f), RelativeSizeAxes = Axes.X, LabelText = "Enable All", - Shear = new Vector2(-ModPanel.SHEAR_X, 0) + Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0) }); panelFlow.Padding = new MarginPadding { @@ -260,7 +260,7 @@ namespace osu.Game.Overlays.Mods var panels = newMods.Select(mod => new ModPanel(mod) { - Shear = new Vector2(-ModPanel.SHEAR_X, 0) + Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0) }); Task? loadTask; diff --git a/osu.Game/Overlays/Mods/ModPanel.cs b/osu.Game/Overlays/Mods/ModPanel.cs index 312171cf74..7c4f2dcb7e 100644 --- a/osu.Game/Overlays/Mods/ModPanel.cs +++ b/osu.Game/Overlays/Mods/ModPanel.cs @@ -42,7 +42,6 @@ namespace osu.Game.Overlays.Mods protected const double TRANSITION_DURATION = 150; - public const float SHEAR_X = 0.2f; public const float CORNER_RADIUS = 7; protected const float HEIGHT = 42; @@ -67,7 +66,7 @@ namespace osu.Game.Overlays.Mods Content.Masking = true; Content.CornerRadius = CORNER_RADIUS; Content.BorderThickness = 2; - Content.Shear = new Vector2(SHEAR_X, 0); + Content.Shear = new Vector2(ShearedOverlayContainer.SHEAR, 0); Children = new Drawable[] { @@ -83,7 +82,7 @@ namespace osu.Game.Overlays.Mods Anchor = Anchor.Centre, Origin = Anchor.Centre, Active = { BindTarget = Active }, - Shear = new Vector2(-SHEAR_X, 0), + Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0), Scale = new Vector2(HEIGHT / ModSwitchSmall.DEFAULT_SIZE) } }, @@ -116,10 +115,10 @@ namespace osu.Game.Overlays.Mods { Text = mod.Name, Font = OsuFont.TorusAlternate.With(size: 18, weight: FontWeight.SemiBold), - Shear = new Vector2(-SHEAR_X, 0), + Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0), Margin = new MarginPadding { - Left = -18 * SHEAR_X + Left = -18 * ShearedOverlayContainer.SHEAR } }, new OsuSpriteText @@ -128,7 +127,7 @@ namespace osu.Game.Overlays.Mods Font = OsuFont.Default.With(size: 12), RelativeSizeAxes = Axes.X, Truncate = true, - Shear = new Vector2(-SHEAR_X, 0) + Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0) } } } diff --git a/osu.Game/Overlays/Mods/ModSelectScreen.cs b/osu.Game/Overlays/Mods/ModSelectScreen.cs index 62080ec1b5..94f877a08c 100644 --- a/osu.Game/Overlays/Mods/ModSelectScreen.cs +++ b/osu.Game/Overlays/Mods/ModSelectScreen.cs @@ -9,7 +9,6 @@ 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.Input.Events; using osu.Framework.Layout; using osu.Game.Configuration; @@ -21,158 +20,32 @@ using osuTK.Input; namespace osu.Game.Overlays.Mods { - public class ModSelectScreen : OsuFocusedOverlayContainer + public class ModSelectScreen : ShearedOverlayContainer { - [Cached] - private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Green); + protected override OverlayColourScheme ColourScheme => OverlayColourScheme.Green; [Cached] public Bindable> SelectedMods { get; private set; } = new Bindable>(Array.Empty()); - protected override bool StartHidden => true; - private readonly BindableBool customisationVisible = new BindableBool(); private DifficultyMultiplierDisplay multiplierDisplay; private ModSettingsArea modSettingsArea; private FillFlowContainer columnFlow; - private GridContainer grid; - private Container mainContent; - - private PopupScreenTitle header; - private Container footer; [BackgroundDependencyLoader] private void load() { - RelativeSizeAxes = Axes.Both; - RelativePositionAxes = Axes.Both; + Header.Title = "Mod Select"; + Header.Description = "Mods provide different ways to enjoy gameplay. Some have an effect on the score you can achieve during ranked play. Others are just for fun."; - InternalChildren = new Drawable[] + AddRange(new Drawable[] { - mainContent = new Container + new ClickToReturnContainer { - Origin = Anchor.BottomCentre, - Anchor = Anchor.BottomCentre, RelativeSizeAxes = Axes.Both, - Children = new Drawable[] - { - grid = new GridContainer - { - RelativeSizeAxes = Axes.Both, - RowDimensions = new[] - { - new Dimension(GridSizeMode.AutoSize), - new Dimension(GridSizeMode.AutoSize), - new Dimension(), - new Dimension(GridSizeMode.Absolute, 75), - }, - Content = new[] - { - new Drawable[] - { - header = new PopupScreenTitle - { - Anchor = Anchor.TopCentre, - Origin = Anchor.TopCentre, - Title = "Mod Select", - Description = "Mods provide different ways to enjoy gameplay. Some have an effect on the score you can achieve during ranked play. Others are just for fun.", - Close = Hide - } - }, - new Drawable[] - { - new Container - { - Anchor = Anchor.Centre, - Origin = Anchor.Centre, - AutoSizeAxes = Axes.X, - RelativePositionAxes = Axes.X, - X = 0.3f, - Height = DifficultyMultiplierDisplay.HEIGHT, - Margin = new MarginPadding - { - Horizontal = 100, - Vertical = 10 - }, - Child = multiplierDisplay = new DifficultyMultiplierDisplay - { - Anchor = Anchor.Centre, - Origin = Anchor.Centre - } - } - }, - new Drawable[] - { - new Container - { - Depth = float.MaxValue, - RelativeSizeAxes = Axes.Both, - RelativePositionAxes = Axes.Both, - Children = new Drawable[] - { - new OsuScrollContainer(Direction.Horizontal) - { - RelativeSizeAxes = Axes.Both, - Masking = false, - ClampExtension = 100, - ScrollbarOverlapsContent = false, - Child = columnFlow = new ModColumnContainer - { - Direction = FillDirection.Horizontal, - RelativeSizeAxes = Axes.Y, - AutoSizeAxes = Axes.X, - Spacing = new Vector2(10, 0), - Margin = new MarginPadding { Right = 70 }, - Children = new[] - { - new ModColumn(ModType.DifficultyReduction, false, new[] { Key.Q, Key.W, Key.E, Key.R, Key.T, Key.Y, Key.U, Key.I, Key.O, Key.P }), - new ModColumn(ModType.DifficultyIncrease, false, new[] { Key.A, Key.S, Key.D, Key.F, Key.G, Key.H, Key.J, Key.K, Key.L }), - new ModColumn(ModType.Automation, false, new[] { Key.Z, Key.X, Key.C, Key.V, Key.B, Key.N, Key.M }), - new ModColumn(ModType.Conversion, false), - new ModColumn(ModType.Fun, false) - } - } - } - } - } - }, - new[] { Empty() } - } - }, - footer = new Container - { - RelativeSizeAxes = Axes.X, - AutoSizeAxes = Axes.Y, - Anchor = Anchor.BottomCentre, - Origin = Anchor.BottomCentre, - Children = new Drawable[] - { - new Box - { - RelativeSizeAxes = Axes.X, - Height = 50, - Anchor = Anchor.BottomCentre, - Origin = Anchor.BottomCentre, - Colour = colourProvider.Background5 - }, - new ShearedToggleButton(200) - { - Anchor = Anchor.BottomLeft, - Origin = Anchor.BottomLeft, - Margin = new MarginPadding { Vertical = 14, Left = 70 }, - Text = "Mod Customisation", - Active = { BindTarget = customisationVisible } - } - } - }, - new ClickToReturnContainer - { - RelativeSizeAxes = Axes.Both, - HandleMouse = { BindTarget = customisationVisible }, - OnClicked = () => customisationVisible.Value = false - } - } + HandleMouse = { BindTarget = customisationVisible }, + OnClicked = () => customisationVisible.Value = false }, modSettingsArea = new ModSettingsArea { @@ -180,9 +53,73 @@ namespace osu.Game.Overlays.Mods Origin = Anchor.BottomCentre, Height = 0 } - }; + }); - columnFlow.Shear = new Vector2(ModPanel.SHEAR_X, 0); + MainAreaContent.AddRange(new Drawable[] + { + new Container + { + Anchor = Anchor.TopRight, + Origin = Anchor.TopRight, + AutoSizeAxes = Axes.X, + Height = DifficultyMultiplierDisplay.HEIGHT, + Margin = new MarginPadding + { + Horizontal = 100, + }, + Child = multiplierDisplay = new DifficultyMultiplierDisplay + { + Anchor = Anchor.Centre, + Origin = Anchor.Centre + } + }, + new Container + { + Padding = new MarginPadding + { + Top = DifficultyMultiplierDisplay.HEIGHT + PADDING, + }, + Depth = float.MaxValue, + RelativeSizeAxes = Axes.Both, + RelativePositionAxes = Axes.Both, + Children = new Drawable[] + { + new OsuScrollContainer(Direction.Horizontal) + { + RelativeSizeAxes = Axes.Both, + Masking = false, + ClampExtension = 100, + ScrollbarOverlapsContent = false, + Child = columnFlow = new ModColumnContainer + { + Direction = FillDirection.Horizontal, + Shear = new Vector2(SHEAR, 0), + RelativeSizeAxes = Axes.Y, + AutoSizeAxes = Axes.X, + Spacing = new Vector2(10, 0), + Margin = new MarginPadding { Right = 70 }, + Children = new[] + { + new ModColumn(ModType.DifficultyReduction, false, new[] { Key.Q, Key.W, Key.E, Key.R, Key.T, Key.Y, Key.U, Key.I, Key.O, Key.P }), + new ModColumn(ModType.DifficultyIncrease, false, new[] { Key.A, Key.S, Key.D, Key.F, Key.G, Key.H, Key.J, Key.K, Key.L }), + new ModColumn(ModType.Automation, false, new[] { Key.Z, Key.X, Key.C, Key.V, Key.B, Key.N, Key.M }), + new ModColumn(ModType.Conversion, false), + new ModColumn(ModType.Fun, false) + } + } + } + } + } + }); + + Footer.Add(new ShearedToggleButton(200) + { + Anchor = Anchor.BottomLeft, + Origin = Anchor.BottomLeft, + Margin = new MarginPadding { Vertical = PADDING, Left = 70 }, + Text = "Mod Customisation", + Active = { BindTarget = customisationVisible } + }); } protected override void LoadComplete() @@ -247,12 +184,12 @@ namespace osu.Game.Overlays.Mods { const double transition_duration = 300; - grid.FadeColour(customisationVisible.Value ? Colour4.Gray : Colour4.White, transition_duration, Easing.InOutCubic); + MainAreaContent.FadeColour(customisationVisible.Value ? Colour4.Gray : Colour4.White, transition_duration, Easing.InOutCubic); float modAreaHeight = customisationVisible.Value ? ModSettingsArea.HEIGHT : 0; modSettingsArea.ResizeHeightTo(modAreaHeight, transition_duration, Easing.InOutCubic); - mainContent.TransformTo(nameof(Margin), new MarginPadding { Bottom = modAreaHeight }, transition_duration, Easing.InOutCubic); + TopLevelContent.MoveToY(-modAreaHeight, transition_duration, Easing.InOutCubic); } private bool selectionBindableSyncInProgress; @@ -287,10 +224,6 @@ namespace osu.Game.Overlays.Mods const double fade_in_duration = 400; base.PopIn(); - this.FadeIn(fade_in_duration, Easing.OutQuint); - - header.MoveToY(0, fade_in_duration, Easing.OutQuint); - footer.MoveToY(0, fade_in_duration, Easing.OutQuint); multiplierDisplay .Delay(fade_in_duration * 0.65f) @@ -311,15 +244,11 @@ namespace osu.Game.Overlays.Mods const double fade_out_duration = 500; base.PopOut(); - this.FadeOut(fade_out_duration, Easing.OutQuint); multiplierDisplay .FadeOut(fade_out_duration / 2, Easing.OutQuint) .ScaleTo(0.75f, fade_out_duration, Easing.OutQuint); - header.MoveToY(-header.DrawHeight, fade_out_duration, Easing.OutQuint); - footer.MoveToY(footer.DrawHeight, fade_out_duration, Easing.OutQuint); - for (int i = 0; i < columnFlow.Count; i++) { const float distance = 700; @@ -355,7 +284,7 @@ namespace osu.Game.Overlays.Mods { Padding = new MarginPadding { - Left = DrawHeight * ModPanel.SHEAR_X, + Left = DrawHeight * SHEAR, Bottom = 10 }; diff --git a/osu.Game/Overlays/Mods/ShearedOverlayContainer.cs b/osu.Game/Overlays/Mods/ShearedOverlayContainer.cs new file mode 100644 index 0000000000..62ed736dc2 --- /dev/null +++ b/osu.Game/Overlays/Mods/ShearedOverlayContainer.cs @@ -0,0 +1,138 @@ +// Copyright (c) ppy Pty Ltd . 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.Game.Graphics.Containers; +using osu.Game.Graphics.UserInterface; + +namespace osu.Game.Overlays.Mods +{ + /// + /// A sheared overlay which provides a header and footer and basic animations. + /// Exposes , and as valid targets for content. + /// + public abstract class ShearedOverlayContainer : OsuFocusedOverlayContainer + { + protected const float PADDING = 14; + + public const float SHEAR = 0.2f; + + [Cached] + protected readonly OverlayColourProvider ColourProvider; + + /// + /// The overlay's header. + /// + protected ShearedOverlayHeader Header { get; private set; } + + /// + /// The overlay's footer. + /// + protected Container Footer { get; private set; } + + /// + /// A container containing all content, including the header and footer. + /// May be used for overlay-wide animations. + /// + protected Container TopLevelContent { get; private set; } + + /// + /// A container for content that is to be displayed between the header and footer. + /// + protected Container MainAreaContent { get; private set; } + + /// + /// A container for content that is to be displayed inside the footer. + /// + protected Container FooterContent { get; private set; } + + protected abstract OverlayColourScheme ColourScheme { get; } + + protected override bool StartHidden => true; + + protected override bool BlockNonPositionalInput => true; + + protected ShearedOverlayContainer() + { + RelativeSizeAxes = Axes.Both; + + ColourProvider = new OverlayColourProvider(ColourScheme); + } + + [BackgroundDependencyLoader] + private void load() + { + const float footer_height = 50; + + Child = TopLevelContent = new Container + { + RelativeSizeAxes = Axes.Both, + Children = new Drawable[] + { + Header = new ShearedOverlayHeader + { + Anchor = Anchor.TopCentre, + Depth = float.MinValue, + Origin = Anchor.TopCentre, + Close = Hide + }, + MainAreaContent = new Container + { + RelativeSizeAxes = Axes.Both, + Padding = new MarginPadding + { + Top = ShearedOverlayHeader.HEIGHT, + Bottom = footer_height + PADDING, + } + }, + Footer = new Container + { + RelativeSizeAxes = Axes.X, + Depth = float.MinValue, + Height = footer_height, + Margin = new MarginPadding { Top = PADDING }, + Anchor = Anchor.BottomCentre, + Origin = Anchor.BottomCentre, + Children = new Drawable[] + { + new Box + { + RelativeSizeAxes = Axes.Both, + Colour = ColourProvider.Background5 + }, + FooterContent = new Container + { + RelativeSizeAxes = Axes.Both, + }, + } + } + } + }; + } + + protected override void PopIn() + { + const double fade_in_duration = 400; + + base.PopIn(); + this.FadeIn(fade_in_duration, Easing.OutQuint); + + Header.MoveToY(0, fade_in_duration, Easing.OutQuint); + Footer.MoveToY(0, fade_in_duration, Easing.OutQuint); + } + + protected override void PopOut() + { + const double fade_out_duration = 500; + + base.PopOut(); + this.FadeOut(fade_out_duration, Easing.OutQuint); + + Header.MoveToY(-Header.DrawHeight, fade_out_duration, Easing.OutQuint); + Footer.MoveToY(Footer.DrawHeight, fade_out_duration, Easing.OutQuint); + } + } +}