h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2025-03-19 04:17:27 +08:00
Code Issues Releases Wiki Activity

Merge pull request #17894 from peppy/sheared-overlay-container

Browse Source 
Split out the base design of sheared overlay into its own abstract class
This commit is contained in:
Dan Balasescu 2022-04-20 18:54:33 +09:00 committed by GitHub
commit 0ad3fcb39d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 238 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
osu.Game.Tests/Visual/UserInterface/TestScenePopupScreenTitle.cs → osu.Game.Tests/Visual/UserInterface/TestSceneShearedOverlayHeader.cs
View File

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

8
osu.Game/Graphics/UserInterface/PopupScreenTitle.cs → osu.Game/Graphics/UserInterface/ShearedOverlayHeader.cs
View File

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

6
osu.Game/Overlays/Mods/DifficultyMultiplierDisplay.cs
View File

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

8
osu.Game/Overlays/Mods/ModColumn.cs
View File

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

11
osu.Game/Overlays/Mods/ModPanel.cs
View File

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

225
osu.Game/Overlays/Mods/ModSelectScreen.cs
View File

@ -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<IReadOnlyList<Mod>> SelectedMods { get; private set; } = new Bindable<IReadOnlyList<Mod>>(Array.Empty<Mod>());
protected override bool StartHidden => true;
private readonly BindableBool customisationVisible = new BindableBool();
private DifficultyMultiplierDisplay multiplierDisplay;
private ModSettingsArea modSettingsArea;
private FillFlowContainer<ModColumn> 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
};

138
osu.Game/Overlays/Mods/ShearedOverlayContainer.cs Normal file
View File

@ -0,0 +1,138 @@
// 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.Game.Graphics.Containers;
using osu.Game.Graphics.UserInterface;
namespace osu.Game.Overlays.Mods
{
/// <summary>
/// A sheared overlay which provides a header and footer and basic animations.
/// Exposes <see cref="TopLevelContent"/>, <see cref="MainAreaContent"/> and <see cref="Footer"/> as valid targets for content.
/// </summary>
public abstract class ShearedOverlayContainer : OsuFocusedOverlayContainer
{
protected const float PADDING = 14;
public const float SHEAR = 0.2f;
[Cached]
protected readonly OverlayColourProvider ColourProvider;
/// <summary>
/// The overlay's header.
/// </summary>
protected ShearedOverlayHeader Header { get; private set; }
/// <summary>
/// The overlay's footer.
/// </summary>
protected Container Footer { get; private set; }
/// <summary>
/// A container containing all content, including the header and footer.
/// May be used for overlay-wide animations.
/// </summary>
protected Container TopLevelContent { get; private set; }
/// <summary>
/// A container for content that is to be displayed between the header and footer.
/// </summary>
protected Container MainAreaContent { get; private set; }
/// <summary>
/// A container for content that is to be displayed inside the footer.
/// </summary>
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);
}
}
}