1
0
mirror of https://github.com/ppy/osu.git synced 2024-12-14 07:42:57 +08:00

Merge pull request #20743 from frenzibyte/improve-beatmap-card-buttons

Improve clickable area of beatmap card icon buttons
This commit is contained in:
Dean Herbert 2022-11-03 15:47:08 +09:00 committed by GitHub
commit c48c9ecb6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 42 additions and 22 deletions

View File

@ -59,8 +59,9 @@ namespace osu.Game.Tests.Visual.Beatmaps
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(25f, 50f),
Scale = new Vector2(2f),
State = { Value = DownloadState.NotDownloaded },
Scale = new Vector2(2)
};
});
}

View File

@ -37,7 +37,11 @@ namespace osu.Game.Tests.Visual.Beatmaps
beatmapSetInfo = CreateAPIBeatmapSet(Ruleset.Value);
beatmapSetInfo.HasFavourited = favourited;
});
AddStep("create button", () => Child = button = new FavouriteButton(beatmapSetInfo) { Scale = new Vector2(2) });
AddStep("create button", () => Child = button = new FavouriteButton(beatmapSetInfo)
{
Size = new Vector2(25f, 50f),
Scale = new Vector2(2f),
});
assertCorrectIcon(favourited);
AddAssert("correct tooltip text", () => button.TooltipText == (favourited ? BeatmapsetsStrings.ShowDetailsUnfavourite : BeatmapsetsStrings.ShowDetailsFavourite));
@ -51,7 +55,11 @@ namespace osu.Game.Tests.Visual.Beatmaps
BeatmapFavouriteAction? lastRequestAction = null;
AddStep("create beatmap set", () => beatmapSetInfo = CreateAPIBeatmapSet(Ruleset.Value));
AddStep("create button", () => Child = button = new FavouriteButton(beatmapSetInfo) { Scale = new Vector2(2) });
AddStep("create button", () => Child = button = new FavouriteButton(beatmapSetInfo)
{
Size = new Vector2(25f, 50f),
Scale = new Vector2(2f),
});
assertCorrectIcon(false);

View File

@ -81,7 +81,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
FavouriteState = { BindTarget = FavouriteState },
ButtonsCollapsedWidth = CORNER_RADIUS,
ButtonsExpandedWidth = 30,
ButtonsPadding = new MarginPadding { Vertical = 35 },
Children = new Drawable[]
{
new FillFlowContainer

View File

@ -82,7 +82,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
FavouriteState = { BindTarget = FavouriteState },
ButtonsCollapsedWidth = CORNER_RADIUS,
ButtonsExpandedWidth = 30,
ButtonsPadding = new MarginPadding { Vertical = 17.5f },
Children = new Drawable[]
{
new FillFlowContainer

View File

@ -4,13 +4,16 @@
#nullable disable
using osu.Framework.Allocation;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Input.Events;
using osu.Game.Graphics.Containers;
using osu.Game.Overlays;
using osuTK;
using osuTK.Graphics;
namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
{
@ -59,6 +62,7 @@ namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
protected override Container<Drawable> Content => content;
private readonly Container content;
private readonly Box hover;
protected BeatmapCardIconButton()
{
@ -69,19 +73,27 @@ namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
{
RelativeSizeAxes = Axes.Both,
Masking = true,
CornerRadius = BeatmapCard.CORNER_RADIUS,
Scale = new Vector2(0.8f),
Origin = Anchor.Centre,
Anchor = Anchor.Centre,
Children = new Drawable[]
{
hover = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.White.Opacity(0.1f),
Blending = BlendingParameters.Additive,
},
Icon = new SpriteIcon
{
Origin = Anchor.Centre,
Anchor = Anchor.Centre
}
Anchor = Anchor.Centre,
Scale = new Vector2(1.2f),
},
}
});
Size = new Vector2(24);
IconSize = 12;
}
@ -116,8 +128,9 @@ namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
{
bool isHovered = IsHovered && Enabled.Value;
content.ScaleTo(isHovered ? 1.2f : 1, 500, Easing.OutQuint);
content.FadeColour(isHovered ? HoverColour : IdleColour, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
hover.FadeTo(isHovered ? 1f : 0f, 500, Easing.OutQuint);
content.ScaleTo(isHovered ? 1 : 0.8f, 500, Easing.OutQuint);
Icon.FadeColour(isHovered ? HoverColour : IdleColour, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
}
}
}

View File

@ -48,12 +48,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
}
}
public MarginPadding ButtonsPadding
{
get => buttons.Padding;
set => buttons.Padding = value;
}
protected override Container<Drawable> Content => mainContent;
private readonly Container background;
@ -86,9 +80,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
RelativeSizeAxes = Axes.Both,
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
// workaround for masking artifacts at the top & bottom of card,
// which become especially visible on downloaded beatmaps (when the icon area has a lime background).
Padding = new MarginPadding { Vertical = 1 },
Child = new Box
{
RelativeSizeAxes = Axes.Both,
@ -104,25 +95,34 @@ namespace osu.Game.Beatmaps.Drawables.Cards
Child = buttons = new Container<BeatmapCardIconButton>
{
RelativeSizeAxes = Axes.Both,
// Padding of 4 avoids touching the card borders when in the expanded (ie. showing difficulties) state.
// Left override allows the buttons to visually be wider and look better.
Padding = new MarginPadding(4) { Left = 2 },
Children = new BeatmapCardIconButton[]
{
new FavouriteButton(beatmapSet)
{
Current = FavouriteState,
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre
Origin = Anchor.TopCentre,
RelativeSizeAxes = Axes.Both,
Height = 0.48f,
},
new DownloadButton(beatmapSet)
{
Anchor = Anchor.BottomCentre,
Origin = Anchor.BottomCentre,
State = { BindTarget = downloadTracker.State }
State = { BindTarget = downloadTracker.State },
RelativeSizeAxes = Axes.Both,
Height = 0.48f,
},
new GoToBeatmapButton(beatmapSet)
{
Anchor = Anchor.BottomCentre,
Origin = Anchor.BottomCentre,
State = { BindTarget = downloadTracker.State }
State = { BindTarget = downloadTracker.State },
RelativeSizeAxes = Axes.Both,
Height = 0.48f,
}
}
}