Implement designs for beatmap carousel v2 #31774
Conversation
| // - Update all Y positions. After a selection occurs, panels may have changed visibility state and therefore Y positions. | ||
| // - Link selected models to CarouselItems. If a selection changed, this is where we find the relevant CarouselItems for further use. | ||
| // - Update all Y positions. After a selection occurs, panels may have changed visibility state and therefore Y positions. | ||
|
|
There was a problem hiding this comment.
This change of order is necessary as the Y position now has a dependency on which beatmap is selected (see BeatmapCarousel.GetSpacingBetweenItems). Without that dependency, there's no way to make the expanded/selected beatmap set not overlap with the beatmap set above it, which looks broken to my eyes.
With overlap:
Without overlap:
There was a problem hiding this comment.
This undoes an important optimisation (you added back a second traversal of every item, which is costly), so will require scrutiny.
There was a problem hiding this comment.
For now please undo this one. Let's keep this PR as implementing the design and making minimal-to-no changes to the carousel code. You're welcome to force push away any changes if it will help with conflict avoidance with other carousel PRs.
d6d3aab to
9280e74
Compare
|
Going to provide an initial feedback pass on this. Let's ignore transitions / animations for now since I will do a pass on that after everything is implemented and stable. The set panel is showing difficulty information but has a difficulty underneath it. I guess a post step is to remove this and only show the set panel? This doesn't really mesh with how I set things up – I was hoping the For now shall we ignore these details and focus on the designs? If so, I think having a test scene which shows each of the panel designs in isolation could be handy to have if it's not more than 10 minutes of work. osu.Game.Tests.2025-02-04.at.06.30.47.mp4Why is the shade of the set header here different between these two beatmaps? One is bright white, the other is gray. I guess it's the expanded flag going wrong for one reason or another? osu.Game.Tests.2025-02-04.at.06.33.19.mp4Test scene doesn't seem to work I don't know where to cut off review feedback with this PR. Selection state feels bad and unintuitive: osu.Game.Tests.2025-02-04.at.06.40.45.mp4
|
Not yet, I'll look into that. |
9280e74 to
cb89684
Compare
|
I think you made the panels not wide enough: Also the keyboard selection colour change is not applied to the selected item: 2025-02-06.00.18.00.mp4 |
This part is kinda intentional, the entire carousel is shifted 20px to the right in |
|
I'm pretty sure that will cut off the scrollbar? |
|
Hmm, good point. |
080e8e9 to
04a3ee8
Compare
|
I've refactored the PR once more to appropriately share code between all panel classes (see |
osu.Game.Tests.2025-02-12.at.10.11.34.mp4
osu.Game.Tests.2025-02-12.at.10.11.34.mp4(This can probably be fixed in a separate PR because I can hardly load this fucking page on github and am ready to rage merge it) I'm going to ignore about 10 other UI/UX concerns and address in follow-up PRs because this PR thread is unmanageable atm. |
|
I feel like Also fixing the tests probably requires subclassing or moving the |
|
@frenzibyte heads up i'm going to take this one over since there's no movement from your end |
Feels better to me.
|
@frenzibyte I've done a clean-up pass on this to attempt to make the drawables bearable to work with. Please check my changes and see if you agree. I'll do a second review pass later today and then look to get this in. It's not perfect (and I have serious issues with the visual design language), but nothing that would impede merging this code for future adjustment. |
|
Changes look good. I've pushed one extra change to fix a minor issue with CleanShot.2025-02-19.at.10.22.51.mp4The following fixes the issue by finishing any transforms pending at diffdiff --git a/osu.Game/Screens/SelectV2/PanelBase.cs b/osu.Game/Screens/SelectV2/PanelBase.cs
index 805cbac8eb..255e40fdb9 100644
--- a/osu.Game/Screens/SelectV2/PanelBase.cs
+++ b/osu.Game/Screens/SelectV2/PanelBase.cs
@@ -27,7 +27,7 @@ public abstract partial class PanelBase : PoolableDrawable, ICarouselPanel
private const float keyboard_active_x_offset = 25f;
private const float active_x_offset = 50f;
- private const float duration = 500;
+ protected const float DURATION = 500;
protected float PanelXOffset { get; init; }
@@ -165,12 +165,6 @@ protected override void LoadComplete()
KeyboardSelected.BindValueChanged(_ => updateDisplay(), true);
}
- protected override void PrepareForUse()
- {
- base.PrepareForUse();
- this.FadeInFromZero(duration, Easing.OutQuint);
- }
-
[Resolved]
private BeatmapCarousel? carousel { get; set; }
@@ -183,15 +177,15 @@ protected override bool OnClick(ClickEvent e)
private void updateDisplay()
{
- backgroundLayer.TransformTo(nameof(Padding), backgroundLayer.Padding with { Vertical = Expanded.Value ? 2f : 0f }, duration, Easing.OutQuint);
+ backgroundLayer.TransformTo(nameof(Padding), backgroundLayer.Padding with { Vertical = Expanded.Value ? 2f : 0f }, DURATION, Easing.OutQuint);
var backgroundColour = accentColour ?? Color4.White;
var edgeEffectColour = accentColour ?? Color4Extensions.FromHex(@"4EBFFF");
- backgroundAccentGradient.FadeColour(ColourInfo.GradientHorizontal(backgroundColour.Opacity(0.25f), backgroundColour.Opacity(0f)), duration, Easing.OutQuint);
- backgroundBorder.FadeColour(backgroundColour, duration, Easing.OutQuint);
+ backgroundAccentGradient.FadeColour(ColourInfo.GradientHorizontal(backgroundColour.Opacity(0.25f), backgroundColour.Opacity(0f)), DURATION, Easing.OutQuint);
+ backgroundBorder.FadeColour(backgroundColour, DURATION, Easing.OutQuint);
- TopLevelContent.FadeEdgeEffectTo(Expanded.Value ? edgeEffectColour.Opacity(0.5f) : Color4.Black.Opacity(0.4f), duration, Easing.OutQuint);
+ TopLevelContent.FadeEdgeEffectTo(Expanded.Value ? edgeEffectColour.Opacity(0.5f) : Color4.Black.Opacity(0.4f), DURATION, Easing.OutQuint);
updateXOffset();
updateHover();
@@ -207,7 +201,7 @@ private void updateXOffset()
if (KeyboardSelected.Value)
x -= keyboard_active_x_offset;
- this.TransformTo(nameof(Padding), new MarginPadding { Left = x }, duration, Easing.OutQuint);
+ this.TransformTo(nameof(Padding), new MarginPadding { Left = x }, DURATION, Easing.OutQuint);
}
private void updateHover()
diff --git a/osu.Game/Screens/SelectV2/PanelBeatmap.cs b/osu.Game/Screens/SelectV2/PanelBeatmap.cs
index b27e5cae14..37c57987a8 100644
--- a/osu.Game/Screens/SelectV2/PanelBeatmap.cs
+++ b/osu.Game/Screens/SelectV2/PanelBeatmap.cs
@@ -182,6 +182,9 @@ protected override void PrepareForUse()
computeStarRating();
updateKeyCount();
+
+ FinishTransforms(true);
+ this.FadeInFromZero(DURATION, Easing.OutQuint);
}
protected override void FreeAfterUse()
diff --git a/osu.Game/Screens/SelectV2/PanelBeatmapSet.cs b/osu.Game/Screens/SelectV2/PanelBeatmapSet.cs
index 5c38fe8e04..e7b8995ae3 100644
--- a/osu.Game/Screens/SelectV2/PanelBeatmapSet.cs
+++ b/osu.Game/Screens/SelectV2/PanelBeatmapSet.cs
@@ -150,6 +150,9 @@ protected override void PrepareForUse()
updateButton.BeatmapSet = beatmapSet;
statusPill.Status = beatmapSet.Status;
difficultiesDisplay.BeatmapSet = beatmapSet;
+
+ FinishTransforms(true);
+ this.FadeInFromZero(DURATION, Easing.OutQuint);
}
protected override void FreeAfterUse()
diff --git a/osu.Game/Screens/SelectV2/PanelBeatmapStandalone.cs b/osu.Game/Screens/SelectV2/PanelBeatmapStandalone.cs
index 948311a86e..983ed1d550 100644
--- a/osu.Game/Screens/SelectV2/PanelBeatmapStandalone.cs
+++ b/osu.Game/Screens/SelectV2/PanelBeatmapStandalone.cs
@@ -220,6 +220,9 @@ protected override void PrepareForUse()
difficultyLine.Show();
computeStarRating();
+
+ FinishTransforms(true);
+ this.FadeInFromZero(DURATION, Easing.OutQuint);
}
protected override void FreeAfterUse()
diff --git a/osu.Game/Screens/SelectV2/PanelGroup.cs b/osu.Game/Screens/SelectV2/PanelGroup.cs
index ecb64f4797..d5f48774dc 100644
--- a/osu.Game/Screens/SelectV2/PanelGroup.cs
+++ b/osu.Game/Screens/SelectV2/PanelGroup.cs
@@ -103,6 +103,9 @@ protected override void PrepareForUse()
GroupDefinition group = (GroupDefinition)Item.Model;
titleText.Text = group.Title;
+
+ FinishTransforms(true);
+ this.FadeInFromZero(DURATION, Easing.OutQuint);
}
}
}
diff --git a/osu.Game/Screens/SelectV2/PanelGroupStarDifficulty.cs b/osu.Game/Screens/SelectV2/PanelGroupStarDifficulty.cs
index 0dc5a2f365..1a9c67bd06 100644
--- a/osu.Game/Screens/SelectV2/PanelGroupStarDifficulty.cs
+++ b/osu.Game/Screens/SelectV2/PanelGroupStarDifficulty.cs
@@ -129,6 +129,9 @@ protected override void PrepareForUse()
chevronIcon.Colour = contentColour;
starCounter.Colour = contentColour;
+
+ FinishTransforms(true);
+ this.FadeInFromZero(DURATION, Easing.OutQuint);
}
private void onExpanded() |
I intentionally removed this because it was not 100% of the way there and i don't want animations to never play (aka |
The implementation is rewritten from the original PR to be flat, organised, and simple. Things to note:
DifficultySpectrumDisplay,TopLocalRankV2,UpdateBeatmapSetButtonV2)V2-suffixed file as the intention (my intention) is to nuke the entireSelectfolder, so it doesn't make sense to reference or re-use components from that namespace. Also,StarsGroupDefinitionis added temporarily to be able to implement a group panel specific for stars grouping, whether it will remain or not is unknown.Preview: