h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2024-09-21 15:27:24 +08:00
Code Issues Releases Wiki Activity

Merge pull request #28183 from frenzibyte/footer-v2-back-button

Browse Source 
Add new footer back button and fix shearing being different between components
This commit is contained in:
Dean Herbert 2024-05-28 18:49:24 +09:00 committed by GitHub
commit 182ca145c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 172 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
osu.Game.Tests/Visual/UserInterface/TestSceneShearedButtons.cs
View File

@ -7,11 +7,13 @@ using System.Linq;
using NUnit.Framework;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Testing;
using osu.Framework.Utils;
using osu.Game.Graphics.UserInterface;
using osu.Game.Overlays;
using osuTK;
using osuTK.Input;
namespace osu.Game.Tests.Visual.UserInterface
@ -35,7 +37,7 @@ namespace osu.Game.Tests.Visual.UserInterface
if (bigButton)
{
Child = button = new ShearedButton(400)
Child = button = new ShearedButton(400, 80)
{
LighterColour = Colour4.FromHex("#FFFFFF"),
DarkerColour = Colour4.FromHex("#FFCC22"),
@ -44,13 +46,12 @@ namespace osu.Game.Tests.Visual.UserInterface
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Text = "Let's GO!",
Height = 80,
Action = () => actionFired = true,
};
}
else
{
Child = button = new ShearedButton(200)
Child = button = new ShearedButton(200, 80)
{
LighterColour = Colour4.FromHex("#FF86DD"),
DarkerColour = Colour4.FromHex("#DE31AE"),
@ -58,7 +59,6 @@ namespace osu.Game.Tests.Visual.UserInterface
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Text = "Press me",
Height = 80,
Action = () => actionFired = true,
};
}
@ -171,5 +171,48 @@ namespace osu.Game.Tests.Visual.UserInterface
void setToggleDisabledState(bool disabled) => AddStep($"{(disabled ? "disable" : "enable")} toggle", () => button.Active.Disabled = disabled);
}
[Test]
public void TestButtons()
{
AddStep("create buttons", () => Children = new[]
{
new FillFlowContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Direction = FillDirection.Horizontal,
AutoSizeAxes = Axes.Both,
Scale = new Vector2(2.5f),
Children = new Drawable[]
{
new ShearedButton(120)
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Text = "Test",
Action = () => { },
Padding = new MarginPadding(),
},
new ShearedButton(120, 40)
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Text = "Test",
Action = () => { },
Padding = new MarginPadding { Left = -1f },
},
new ShearedButton(120, 70)
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Text = "Test",
Action = () => { },
Padding = new MarginPadding { Left = 3f },
},
}
}
});
}
}
}

29
osu.Game/Graphics/UserInterface/ShearedButton.cs
View File

@ -17,7 +17,7 @@ namespace osu.Game.Graphics.UserInterface
{
public partial class ShearedButton : OsuClickableContainer
{
public const float HEIGHT = 50;
public const float DEFAULT_HEIGHT = 50;
public const float CORNER_RADIUS = 7;
public const float BORDER_THICKNESS = 2;
@ -66,7 +66,7 @@ namespace osu.Game.Graphics.UserInterface
private readonly Box background;
private readonly OsuSpriteText text;
private const float shear = 0.2f;
private const float shear = OsuGame.SHEAR;
private Colour4? darkerColour;
private Colour4? lighterColour;
@ -75,6 +75,8 @@ namespace osu.Game.Graphics.UserInterface
private readonly Container backgroundLayer;
private readonly Box flashLayer;
protected readonly Container ButtonContent;
/// <summary>
/// Creates a new <see cref="ShearedToggleButton"/>
/// </summary>
@ -85,10 +87,11 @@ namespace osu.Game.Graphics.UserInterface
/// <item>If a <see langword="null"/> value is provided (or the argument is omitted entirely), the button will autosize in width to fit the text.</item>
/// </list>
/// </param>
public ShearedButton(float? width = null)
/// <param name="height">The height of the button.</param>
public ShearedButton(float? width = null, float height = DEFAULT_HEIGHT)
{
Height = HEIGHT;
Padding = new MarginPadding { Horizontal = shear * 50 };
Height = height;
Padding = new MarginPadding { Horizontal = shear * height };
Content.CornerRadius = CORNER_RADIUS;
Content.Shear = new Vector2(shear, 0);
@ -109,12 +112,16 @@ namespace osu.Game.Graphics.UserInterface
{
RelativeSizeAxes = Axes.Both
},
text = new OsuSpriteText
ButtonContent = new Container
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Font = OsuFont.TorusAlternate.With(size: 17),
Shear = new Vector2(-shear, 0)
AutoSizeAxes = Axes.Both,
Shear = new Vector2(-shear, 0),
Child = text = new OsuSpriteText
{
Font = OsuFont.TorusAlternate.With(size: 17),
}
},
}
},
@ -188,7 +195,7 @@ namespace osu.Game.Graphics.UserInterface
{
var colourDark = darkerColour ?? ColourProvider.Background3;
var colourLight = lighterColour ?? ColourProvider.Background1;
var colourText = textColour ?? ColourProvider.Content1;
var colourContent = textColour ?? ColourProvider.Content1;
if (!Enabled.Value)
{
@ -205,9 +212,9 @@ namespace osu.Game.Graphics.UserInterface
backgroundLayer.TransformTo(nameof(BorderColour), ColourInfo.GradientVertical(colourDark, colourLight), 150, Easing.OutQuint);
if (!Enabled.Value)
colourText = colourText.Opacity(0.6f);
colourContent = colourContent.Opacity(0.6f);
text.FadeColour(colourText, 150, Easing.OutQuint);
ButtonContent.FadeColour(colourContent, 150, Easing.OutQuint);
}
}
}

5
osu.Game/Graphics/UserInterface/ShearedSearchTextBox.cs
View File

@ -11,7 +11,6 @@ using osu.Framework.Graphics.UserInterface;
using osu.Framework.Localisation;
using osu.Game.Graphics.Sprites;
using osu.Game.Overlays;
using osu.Game.Overlays.Mods;
using osu.Game.Resources.Localisation.Web;
using osuTK;
@ -53,7 +52,7 @@ namespace osu.Game.Graphics.UserInterface
public ShearedSearchTextBox()
{
Height = 42;
Shear = new Vector2(ShearedOverlayContainer.SHEAR, 0);
Shear = new Vector2(OsuGame.SHEAR, 0);
Masking = true;
CornerRadius = corner_radius;
@ -116,7 +115,7 @@ namespace osu.Game.Graphics.UserInterface
PlaceholderText = CommonStrings.InputSearch;
CornerRadius = corner_radius;
TextContainer.Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0);
TextContainer.Shear = new Vector2(-OsuGame.SHEAR, 0);
}
protected override SpriteText CreatePlaceholder() => new SearchPlaceholder();

5
osu.Game/OsuGame.cs
View File

@ -91,6 +91,11 @@ namespace osu.Game
/// </summary>
protected const float SIDE_OVERLAY_OFFSET_RATIO = 0.05f;
/// <summary>
/// A common shear factor applied to most components of the game.
/// </summary>
public const float SHEAR = 0.2f;
public Toolbar Toolbar { get; private set; }
private ChatOverlay chatOverlay;

2
osu.Game/Overlays/Mods/BeatmapAttributesDisplay.cs
View File

@ -66,7 +66,7 @@ namespace osu.Game.Overlays.Mods
[BackgroundDependencyLoader]
private void load()
{
const float shear = ShearedOverlayContainer.SHEAR;
const float shear = OsuGame.SHEAR;
LeftContent.AddRange(new Drawable[]
{

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

@ -106,7 +106,7 @@ namespace osu.Game.Overlays.Mods
Origin = Anchor.CentreLeft,
Scale = new Vector2(0.8f),
RelativeSizeAxes = Axes.X,
Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0)
Shear = new Vector2(-OsuGame.SHEAR, 0)
});
ItemsFlow.Padding = new MarginPadding
{

4
osu.Game/Overlays/Mods/ModFooterInformationDisplay.cs
View File

@ -36,8 +36,8 @@ namespace osu.Game.Overlays.Mods
Origin = Anchor.BottomRight,
Anchor = Anchor.BottomRight,
AutoSizeAxes = Axes.X,
Height = ShearedButton.HEIGHT,
Shear = new Vector2(ShearedOverlayContainer.SHEAR, 0),
Height = ShearedButton.DEFAULT_HEIGHT,
Shear = new Vector2(OsuGame.SHEAR, 0),
CornerRadius = ShearedButton.CORNER_RADIUS,
BorderThickness = ShearedButton.BORDER_THICKNESS,
Masking = true,

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

@ -36,7 +36,7 @@ namespace osu.Game.Overlays.Mods
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Active = { BindTarget = Active },
Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
Shear = new Vector2(-OsuGame.SHEAR, 0),
Scale = new Vector2(HEIGHT / ModSwitchSmall.DEFAULT_SIZE)
};
}

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

@ -70,7 +70,7 @@ namespace osu.Game.Overlays.Mods
{
Width = WIDTH;
RelativeSizeAxes = Axes.Y;
Shear = new Vector2(ShearedOverlayContainer.SHEAR, 0);
Shear = new Vector2(OsuGame.SHEAR, 0);
InternalChildren = new Drawable[]
{
@ -96,7 +96,7 @@ namespace osu.Game.Overlays.Mods
{
RelativeSizeAxes = Axes.X,
Height = header_height,
Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
Shear = new Vector2(-OsuGame.SHEAR, 0),
Velocity = 0.7f,
ClampAxes = Axes.Y
},
@ -111,7 +111,7 @@ namespace osu.Game.Overlays.Mods
AutoSizeAxes = Axes.Y,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
Shear = new Vector2(-OsuGame.SHEAR, 0),
Padding = new MarginPadding
{
Horizontal = 17,

4
osu.Game/Overlays/Mods/ModSelectOverlay.cs
View File

@ -227,7 +227,7 @@ namespace osu.Game.Overlays.Mods
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Direction = FillDirection.Horizontal,
Shear = new Vector2(SHEAR, 0),
Shear = new Vector2(OsuGame.SHEAR, 0),
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
Margin = new MarginPadding { Horizontal = 70 },
@ -847,7 +847,7 @@ namespace osu.Game.Overlays.Mods
// DrawWidth/DrawPosition do not include shear effects, and we want to know the full extents of the columns post-shear,
// so we have to manually compensate.
var topLeft = column.ToSpaceOfOtherDrawable(Vector2.Zero, ScrollContent);
var bottomRight = column.ToSpaceOfOtherDrawable(new Vector2(column.DrawWidth - column.DrawHeight * SHEAR, 0), ScrollContent);
var bottomRight = column.ToSpaceOfOtherDrawable(new Vector2(column.DrawWidth - column.DrawHeight * OsuGame.SHEAR, 0), ScrollContent);
bool isCurrentlyVisible = Precision.AlmostBigger(topLeft.X, leftVisibleBound)
&& Precision.DefinitelyBigger(rightVisibleBound, bottomRight.X);

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

@ -87,7 +87,7 @@ namespace osu.Game.Overlays.Mods
Content.CornerRadius = CORNER_RADIUS;
Content.BorderThickness = 2;
Shear = new Vector2(ShearedOverlayContainer.SHEAR, 0);
Shear = new Vector2(OsuGame.SHEAR, 0);
Children = new Drawable[]
{
@ -128,10 +128,10 @@ namespace osu.Game.Overlays.Mods
{
Font = OsuFont.TorusAlternate.With(size: 18, weight: FontWeight.SemiBold),
RelativeSizeAxes = Axes.X,
Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
Shear = new Vector2(-OsuGame.SHEAR, 0),
Margin = new MarginPadding
{
Left = -18 * ShearedOverlayContainer.SHEAR
Left = -18 * OsuGame.SHEAR
},
ShowTooltip = false, // Tooltip is handled by `IncompatibilityDisplayingModPanel`.
},
@ -139,7 +139,7 @@ namespace osu.Game.Overlays.Mods
{
Font = OsuFont.Default.With(size: 12),
RelativeSizeAxes = Axes.X,
Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
Shear = new Vector2(-OsuGame.SHEAR, 0),
ShowTooltip = false, // Tooltip is handled by `IncompatibilityDisplayingModPanel`.
}
}

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

@ -52,7 +52,7 @@ namespace osu.Game.Overlays.Mods
Anchor = Anchor.BottomRight,
Origin = Anchor.BottomRight,
RelativeSizeAxes = Axes.Both,
Shear = new Vector2(ShearedOverlayContainer.SHEAR, 0),
Shear = new Vector2(OsuGame.SHEAR, 0),
CornerRadius = ShearedButton.CORNER_RADIUS,
Masking = true,
Children = new Drawable[]
@ -79,7 +79,7 @@ namespace osu.Game.Overlays.Mods
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
Shear = new Vector2(-OsuGame.SHEAR, 0),
Font = OsuFont.Default.With(size: 17, weight: FontWeight.SemiBold)
}
}
@ -94,7 +94,7 @@ namespace osu.Game.Overlays.Mods
Origin = Anchor.Centre,
Child = counter = new EffectCounter
{
Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
Shear = new Vector2(-OsuGame.SHEAR, 0),
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Current = { BindTarget = ModMultiplier }

2
osu.Game/Overlays/Mods/ShearedOverlayContainer.cs
View File

@ -22,8 +22,6 @@ namespace osu.Game.Overlays.Mods
{
protected const float PADDING = 14;
public const float SHEAR = 0.2f;
[Cached]
protected readonly OverlayColourProvider ColourProvider;

64
osu.Game/Screens/Footer/ScreenBackButton.cs Normal file
View File

@ -0,0 +1,64 @@
// 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.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterface;
using osu.Game.Localisation;
using osuTK;
using osuTK.Graphics;
namespace osu.Game.Screens.Footer
{
public partial class ScreenBackButton : ShearedButton
{
// todo: see https://github.com/ppy/osu-framework/issues/3271
private const float torus_scale_factor = 1.2f;
public const float BUTTON_WIDTH = 240;
public ScreenBackButton()
: base(BUTTON_WIDTH, 70)
{
}
[BackgroundDependencyLoader]
private void load()
{
ButtonContent.Child = new FillFlowContainer
{
X = -10f,
RelativeSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(20f, 0f),
Children = new Drawable[]
{
new SpriteIcon
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(20f),
Icon = FontAwesome.Solid.ChevronLeft,
},
new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Font = OsuFont.TorusAlternate.With(size: 20 * torus_scale_factor),
Text = CommonStrings.Back,
UseFullGlyphHeight = false,
}
}
};
DarkerColour = Color4Extensions.FromHex("#DE31AE");
LighterColour = Color4Extensions.FromHex("#FF86DD");
TextColour = Color4.White;
}
}
}

17
osu.Game/Screens/Footer/ScreenFooter.cs
View File

@ -7,7 +7,6 @@ using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
using osu.Game.Graphics.UserInterface;
using osu.Game.Overlays;
using osuTK;
@ -15,9 +14,8 @@ namespace osu.Game.Screens.Footer
{
public partial class ScreenFooter : InputBlockingContainer
{
//Should be 60, setting to 50 for now for the sake of matching the current BackButton height.
private const int height = 50;
private const int padding = 80;
private const int height = 60;
private const int padding = 60;
private readonly List<OverlayContainer> overlays = new List<OverlayContainer>();
@ -68,13 +66,20 @@ namespace osu.Game.Screens.Footer
},
buttons = new FillFlowContainer<ScreenFooterButton>
{
Position = new Vector2(TwoLayerButton.SIZE_EXTENDED.X + padding, 10),
Position = new Vector2(ScreenBackButton.BUTTON_WIDTH + padding, 10),
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(7, 0),
AutoSizeAxes = Axes.Both
}
},
new ScreenBackButton
{
Margin = new MarginPadding { Bottom = 10f, Left = 12f },
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Action = () => { },
},
};
}
}

5
osu.Game/Screens/Footer/ScreenFooterButton.cs
View File

@ -25,8 +25,7 @@ namespace osu.Game.Screens.Footer
{
public partial class ScreenFooterButton : OsuClickableContainer, IKeyBindingHandler<GlobalAction>
{
// This should be 12 by design, but an extra allowance is added due to the corner radius specification.
private const float shear_width = 13.5f;
private const float shear = OsuGame.SHEAR;
protected const int CORNER_RADIUS = 10;
protected const int BUTTON_HEIGHT = 90;
@ -34,7 +33,7 @@ namespace osu.Game.Screens.Footer
public Bindable<Visibility> OverlayState = new Bindable<Visibility>();
protected static readonly Vector2 BUTTON_SHEAR = new Vector2(shear_width / BUTTON_HEIGHT, 0);
protected static readonly Vector2 BUTTON_SHEAR = new Vector2(shear, 0);
[Resolved]
private OverlayColourProvider colourProvider { get; set; } = null!;

15
osu.Game/Screens/SelectV2/Footer/ScreenFooterButtonMods.cs
View File

@ -33,12 +33,9 @@ namespace osu.Game.Screens.SelectV2.Footer
{
// todo: see https://github.com/ppy/osu-framework/issues/3271
private const float torus_scale_factor = 1.2f;
private const float bar_shear_width = 7f;
private const float bar_height = 37f;
private const float mod_display_portion = 0.65f;
private static readonly Vector2 bar_shear = new Vector2(bar_shear_width / bar_height, 0);
private readonly BindableWithCurrent<IReadOnlyList<Mod>> current = new BindableWithCurrent<IReadOnlyList<Mod>>(Array.Empty<Mod>());
public Bindable<IReadOnlyList<Mod>> Current
@ -77,7 +74,7 @@ namespace osu.Game.Screens.SelectV2.Footer
Y = -5f,
Depth = float.MaxValue,
Origin = Anchor.BottomLeft,
Shear = bar_shear,
Shear = BUTTON_SHEAR,
CornerRadius = CORNER_RADIUS,
Size = new Vector2(BUTTON_WIDTH, bar_height),
Masking = true,
@ -107,7 +104,7 @@ namespace osu.Game.Screens.SelectV2.Footer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Shear = -bar_shear,
Shear = -BUTTON_SHEAR,
UseFullGlyphHeight = false,
Font = OsuFont.Torus.With(size: 14 * torus_scale_factor, weight: FontWeight.Bold)
}
@ -129,7 +126,7 @@ namespace osu.Game.Screens.SelectV2.Footer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Shear = -bar_shear,
Shear = -BUTTON_SHEAR,
Scale = new Vector2(0.6f),
Current = { BindTarget = Current },
ExpansionMode = ExpansionMode.AlwaysContracted,
@ -138,7 +135,7 @@ namespace osu.Game.Screens.SelectV2.Footer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Shear = -bar_shear,
Shear = -BUTTON_SHEAR,
Font = OsuFont.Torus.With(size: 14 * torus_scale_factor, weight: FontWeight.Bold),
Mods = { BindTarget = Current },
}
@ -304,7 +301,7 @@ namespace osu.Game.Screens.SelectV2.Footer
Y = -5f;
Depth = float.MaxValue;
Origin = Anchor.BottomLeft;
Shear = bar_shear;
Shear = BUTTON_SHEAR;
CornerRadius = CORNER_RADIUS;
AutoSizeAxes = Axes.X;
Height = bar_height;
@ -328,7 +325,7 @@ namespace osu.Game.Screens.SelectV2.Footer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Shear = -bar_shear,
Shear = -BUTTON_SHEAR,
Text = ModSelectOverlayStrings.Unranked.ToUpper(),
Margin = new MarginPadding { Horizontal = 15 },
UseFullGlyphHeight = false,