From 02b950223c055aad3e192cdff99d56f2c5b2c83f Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 28 Feb 2025 16:06:12 +0900 Subject: [PATCH 1/9] Adjust x offsets to work again for keyboard selection --- osu.Game/Screens/SelectV2/PanelBase.cs | 13 ++++++------- osu.Game/Screens/SelectV2/PanelBeatmap.cs | 2 -- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/osu.Game/Screens/SelectV2/PanelBase.cs b/osu.Game/Screens/SelectV2/PanelBase.cs index 805cbac8eb..1e47401013 100644 --- a/osu.Game/Screens/SelectV2/PanelBase.cs +++ b/osu.Game/Screens/SelectV2/PanelBase.cs @@ -23,8 +23,6 @@ namespace osu.Game.Screens.SelectV2 { private const float corner_radius = 10; - private const float left_edge_x_offset = 20f; - private const float keyboard_active_x_offset = 25f; private const float active_x_offset = 50f; private const float duration = 500; @@ -162,6 +160,7 @@ namespace osu.Game.Screens.SelectV2 base.LoadComplete(); Expanded.BindValueChanged(_ => updateDisplay()); + Selected.BindValueChanged(_ => updateDisplay()); KeyboardSelected.BindValueChanged(_ => updateDisplay(), true); } @@ -199,13 +198,13 @@ namespace osu.Game.Screens.SelectV2 private void updateXOffset() { - float x = PanelXOffset + active_x_offset + keyboard_active_x_offset + left_edge_x_offset; + float x = PanelXOffset; - if (Expanded.Value) - x -= active_x_offset; + if (!Expanded.Value && !Selected.Value) + x += active_x_offset; - if (KeyboardSelected.Value) - x -= keyboard_active_x_offset; + if (!KeyboardSelected.Value) + x += active_x_offset * 0.5f; this.TransformTo(nameof(Padding), new MarginPadding { Left = x }, duration, Easing.OutQuint); } diff --git a/osu.Game/Screens/SelectV2/PanelBeatmap.cs b/osu.Game/Screens/SelectV2/PanelBeatmap.cs index b27e5cae14..0ce6b1a9a2 100644 --- a/osu.Game/Screens/SelectV2/PanelBeatmap.cs +++ b/osu.Game/Screens/SelectV2/PanelBeatmap.cs @@ -163,8 +163,6 @@ namespace osu.Game.Screens.SelectV2 computeStarRating(); updateKeyCount(); }, true); - - Selected.BindValueChanged(s => Expanded.Value = s.NewValue, true); } protected override void PrepareForUse() From a8fbac0f0dbf628ee284e9b3c27554d00697f1e8 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 28 Feb 2025 16:27:18 +0900 Subject: [PATCH 2/9] Add better selection visibility via another tint layer --- osu.Game/Screens/SelectV2/PanelBase.cs | 53 +++++++++++++++++++++----- 1 file changed, 44 insertions(+), 9 deletions(-) diff --git a/osu.Game/Screens/SelectV2/PanelBase.cs b/osu.Game/Screens/SelectV2/PanelBase.cs index 1e47401013..d3132a106e 100644 --- a/osu.Game/Screens/SelectV2/PanelBase.cs +++ b/osu.Game/Screens/SelectV2/PanelBase.cs @@ -38,6 +38,8 @@ namespace osu.Game.Screens.SelectV2 private Container iconContainer = null!; private Box activationFlash = null!; private Box hoverLayer = null!; + private Box keyboardSelectionLayer = null!; + private Box selectionLayer = null!; public Container TopLevelContent { get; private set; } = null!; @@ -137,6 +139,24 @@ namespace osu.Game.Screens.SelectV2 hoverLayer = new Box { Alpha = 0, + Colour = colours.Blue.Opacity(0.1f), + Blending = BlendingParameters.Additive, + RelativeSizeAxes = Axes.Both, + }, + selectionLayer = new Box + { + Alpha = 0, + Colour = ColourInfo.GradientHorizontal(colours.Yellow.Opacity(0), colours.Yellow.Opacity(0.5f)), + Blending = BlendingParameters.Additive, + RelativeSizeAxes = Axes.Both, + Width = 0.7f, + Anchor = Anchor.TopRight, + Origin = Anchor.TopRight, + }, + keyboardSelectionLayer = new Box + { + Alpha = 0, + Colour = colours.Yellow.Opacity(0.1f), Blending = BlendingParameters.Additive, RelativeSizeAxes = Axes.Both, }, @@ -151,7 +171,6 @@ namespace osu.Game.Screens.SelectV2 } }; - hoverLayer.Colour = colours.Blue.Opacity(0.1f); backgroundGradient.Colour = ColourInfo.GradientHorizontal(colourProvider.Background3, colourProvider.Background4); } @@ -159,9 +178,27 @@ namespace osu.Game.Screens.SelectV2 { base.LoadComplete(); - Expanded.BindValueChanged(_ => updateDisplay()); - Selected.BindValueChanged(_ => updateDisplay()); - KeyboardSelected.BindValueChanged(_ => updateDisplay(), true); + Expanded.BindValueChanged(_ => updateDisplay(), true); + + Selected.BindValueChanged(selected => + { + if (selected.NewValue) + selectionLayer.FadeIn(100, Easing.OutQuint); + else + selectionLayer.FadeOut(200, Easing.OutQuint); + + updateXOffset(); + }, true); + + KeyboardSelected.BindValueChanged(selected => + { + if (selected.NewValue) + keyboardSelectionLayer.FadeIn(100, Easing.OutQuint); + else + keyboardSelectionLayer.FadeOut(1000, Easing.OutQuint); + + updateXOffset(); + }, true); } protected override void PrepareForUse() @@ -211,9 +248,7 @@ namespace osu.Game.Screens.SelectV2 private void updateHover() { - bool hovered = IsHovered || KeyboardSelected.Value; - - if (hovered) + if (IsHovered) hoverLayer.FadeIn(100, Easing.OutQuint); else hoverLayer.FadeOut(1000, Easing.OutQuint); @@ -221,13 +256,13 @@ namespace osu.Game.Screens.SelectV2 protected override bool OnHover(HoverEvent e) { - updateDisplay(); + updateHover(); return true; } protected override void OnHoverLost(HoverLostEvent e) { - updateDisplay(); + updateHover(); base.OnHoverLost(e); } From 1e46dc6b0a23cf2fa9677104b9101d8f3f94a18d Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 28 Feb 2025 16:27:42 +0900 Subject: [PATCH 3/9] Adjust animation duration to roughly match scroll operations Previous value felt wrong when using keyboard selection for iteration. --- osu.Game/Screens/SelectV2/PanelBase.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/osu.Game/Screens/SelectV2/PanelBase.cs b/osu.Game/Screens/SelectV2/PanelBase.cs index d3132a106e..2a32b1a95f 100644 --- a/osu.Game/Screens/SelectV2/PanelBase.cs +++ b/osu.Game/Screens/SelectV2/PanelBase.cs @@ -25,7 +25,7 @@ namespace osu.Game.Screens.SelectV2 private const float active_x_offset = 50f; - private const float duration = 500; + private const float duration = 400; protected float PanelXOffset { get; init; } From 51cb0bea1ce61ffd3ca8b3bdb641f8f4840601d1 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 28 Feb 2025 16:45:49 +0900 Subject: [PATCH 4/9] Fix carousel taking up too much space on new song select implementation --- osu.Game/Screens/SelectV2/SongSelectV2.cs | 29 +++++++++++++++++------ 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/osu.Game/Screens/SelectV2/SongSelectV2.cs b/osu.Game/Screens/SelectV2/SongSelectV2.cs index 3943d059f9..23139c8742 100644 --- a/osu.Game/Screens/SelectV2/SongSelectV2.cs +++ b/osu.Game/Screens/SelectV2/SongSelectV2.cs @@ -39,17 +39,32 @@ namespace osu.Game.Screens.SelectV2 { AddRangeInternal(new Drawable[] { - new Container + new GridContainer // used for max width implementation { + Anchor = Anchor.TopRight, + Origin = Anchor.TopRight, RelativeSizeAxes = Axes.Both, - Padding = new MarginPadding { Bottom = ScreenFooter.HEIGHT }, - Child = new BeatmapCarousel + ColumnDimensions = new[] { - Anchor = Anchor.TopRight, - Origin = Anchor.TopRight, - RelativeSizeAxes = Axes.Both, - Width = 0.6f, + new Dimension(), + new Dimension(GridSizeMode.Relative, 0.5f, maxSize: 750), }, + Content = new[] + { + new[] + { + Empty(), + new Container + { + RelativeSizeAxes = Axes.Both, + Padding = new MarginPadding { Bottom = ScreenFooter.HEIGHT }, + Child = new BeatmapCarousel + { + RelativeSizeAxes = Axes.Both + }, + }, + } + } }, modSelectOverlay, }); From 0e257038e8b49400f5082570d5867c4c7ef23c3b Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 28 Feb 2025 16:47:57 +0900 Subject: [PATCH 5/9] Fix status pills displaying wrong --- osu.Game/Beatmaps/Drawables/BeatmapSetOnlineStatusPill.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/osu.Game/Beatmaps/Drawables/BeatmapSetOnlineStatusPill.cs b/osu.Game/Beatmaps/Drawables/BeatmapSetOnlineStatusPill.cs index 599d1b380a..7b99ad40de 100644 --- a/osu.Game/Beatmaps/Drawables/BeatmapSetOnlineStatusPill.cs +++ b/osu.Game/Beatmaps/Drawables/BeatmapSetOnlineStatusPill.cs @@ -101,7 +101,7 @@ namespace osu.Game.Beatmaps.Drawables { if (Status == BeatmapOnlineStatus.None) { - this.FadeOut(animation_duration, Easing.OutQuint); + Hide(); return; } From 8032b6893274a152a12226572e89a000262c5583 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 28 Feb 2025 16:59:39 +0900 Subject: [PATCH 6/9] Stop using padding for panel x offsets --- osu.Game/Screens/SelectV2/PanelBase.cs | 11 +++++++---- osu.Game/Screens/SelectV2/PanelBeatmap.cs | 4 ++-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/osu.Game/Screens/SelectV2/PanelBase.cs b/osu.Game/Screens/SelectV2/PanelBase.cs index 2a32b1a95f..1dc645ba53 100644 --- a/osu.Game/Screens/SelectV2/PanelBase.cs +++ b/osu.Game/Screens/SelectV2/PanelBase.cs @@ -61,6 +61,11 @@ namespace osu.Game.Screens.SelectV2 } } + // content is offset by PanelXOffset, make sure we only handle input at the actual visible + // offset region. + public override bool ReceivePositionalInputAt(Vector2 screenSpacePos) => + TopLevelContent.ReceivePositionalInputAt(screenSpacePos); + [BackgroundDependencyLoader] private void load(OverlayColourProvider colourProvider, OsuColour colours) { @@ -219,8 +224,6 @@ namespace osu.Game.Screens.SelectV2 private void updateDisplay() { - 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"); @@ -235,7 +238,7 @@ namespace osu.Game.Screens.SelectV2 private void updateXOffset() { - float x = PanelXOffset; + float x = PanelXOffset + corner_radius; if (!Expanded.Value && !Selected.Value) x += active_x_offset; @@ -243,7 +246,7 @@ namespace osu.Game.Screens.SelectV2 if (!KeyboardSelected.Value) x += active_x_offset * 0.5f; - this.TransformTo(nameof(Padding), new MarginPadding { Left = x }, duration, Easing.OutQuint); + TopLevelContent.MoveToX(x, duration, Easing.OutQuint); } private void updateHover() diff --git a/osu.Game/Screens/SelectV2/PanelBeatmap.cs b/osu.Game/Screens/SelectV2/PanelBeatmap.cs index 0ce6b1a9a2..d4bf3519fa 100644 --- a/osu.Game/Screens/SelectV2/PanelBeatmap.cs +++ b/osu.Game/Screens/SelectV2/PanelBeatmap.cs @@ -54,7 +54,7 @@ namespace osu.Game.Screens.SelectV2 public override bool ReceivePositionalInputAt(Vector2 screenSpacePos) { - var inputRectangle = DrawRectangle; + var inputRectangle = TopLevelContent.DrawRectangle; // Cover the gaps introduced by the spacing between BeatmapPanels so that clicks will not fall through the carousel. // @@ -62,7 +62,7 @@ namespace osu.Game.Screens.SelectV2 // larger hit target. inputRectangle = inputRectangle.Inflate(new MarginPadding { Vertical = BeatmapCarousel.SPACING }); - return inputRectangle.Contains(ToLocalSpace(screenSpacePos)); + return inputRectangle.Contains(TopLevelContent.ToLocalSpace(screenSpacePos)); } [BackgroundDependencyLoader] From 29c35529d27b730847d03896c04c03a9e95efd3b Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 28 Feb 2025 17:02:09 +0900 Subject: [PATCH 7/9] Fix activation flash being applied twice (and adjust duration) --- osu.Game/Screens/SelectV2/PanelBase.cs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/osu.Game/Screens/SelectV2/PanelBase.cs b/osu.Game/Screens/SelectV2/PanelBase.cs index 1dc645ba53..b9d9bbd20a 100644 --- a/osu.Game/Screens/SelectV2/PanelBase.cs +++ b/osu.Game/Screens/SelectV2/PanelBase.cs @@ -217,7 +217,6 @@ namespace osu.Game.Screens.SelectV2 protected override bool OnClick(ClickEvent e) { - activationFlash.FadeOutFromOne(500, Easing.OutQuint); carousel?.Activate(Item!); return true; } @@ -287,7 +286,7 @@ namespace osu.Game.Screens.SelectV2 public virtual void Activated() { - activationFlash.FadeOutFromOne(500, Easing.OutQuint); + activationFlash.FadeOutFromOne(1000, Easing.OutQuint); } #endregion From 4beac64bdb6c2dee8492ea8b113498b78ef5f36a Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 28 Feb 2025 17:19:30 +0900 Subject: [PATCH 8/9] Remove unused container level --- osu.Game/Screens/SelectV2/PanelBase.cs | 43 ++++++++++++-------------- 1 file changed, 19 insertions(+), 24 deletions(-) diff --git a/osu.Game/Screens/SelectV2/PanelBase.cs b/osu.Game/Screens/SelectV2/PanelBase.cs index b9d9bbd20a..36f4f13a3b 100644 --- a/osu.Game/Screens/SelectV2/PanelBase.cs +++ b/osu.Game/Screens/SelectV2/PanelBase.cs @@ -32,7 +32,6 @@ namespace osu.Game.Screens.SelectV2 private Box backgroundBorder = null!; private Box backgroundGradient = null!; private Box backgroundAccentGradient = null!; - private Container backgroundLayer = null!; private Container backgroundLayerHorizontalPadding = null!; private Container backgroundContainer = null!; private Container iconContainer = null!; @@ -66,6 +65,9 @@ namespace osu.Game.Screens.SelectV2 public override bool ReceivePositionalInputAt(Vector2 screenSpacePos) => TopLevelContent.ReceivePositionalInputAt(screenSpacePos); + [Resolved] + private BeatmapCarousel? carousel { get; set; } + [BackgroundDependencyLoader] private void load(OverlayColourProvider colourProvider, OsuColour colours) { @@ -102,30 +104,26 @@ namespace osu.Game.Screens.SelectV2 backgroundLayerHorizontalPadding = new Container { RelativeSizeAxes = Axes.Both, - Child = backgroundLayer = new Container + Child = new Container { RelativeSizeAxes = Axes.Both, - Child = new Container + Masking = true, + CornerRadius = corner_radius, + Children = new Drawable[] { - Masking = true, - CornerRadius = corner_radius, - RelativeSizeAxes = Axes.Both, - Children = new Drawable[] + backgroundGradient = new Box { - backgroundGradient = new Box - { - RelativeSizeAxes = Axes.Both, - }, - backgroundAccentGradient = new Box - { - RelativeSizeAxes = Axes.Both, - }, - backgroundContainer = new Container - { - RelativeSizeAxes = Axes.Both, - }, - } - }, + RelativeSizeAxes = Axes.Both, + }, + backgroundAccentGradient = new Box + { + RelativeSizeAxes = Axes.Both, + }, + backgroundContainer = new Container + { + RelativeSizeAxes = Axes.Both, + }, + } }, } }, @@ -212,9 +210,6 @@ namespace osu.Game.Screens.SelectV2 this.FadeInFromZero(duration, Easing.OutQuint); } - [Resolved] - private BeatmapCarousel? carousel { get; set; } - protected override bool OnClick(ClickEvent e) { carousel?.Activate(Item!); From 38de3566b14b4d08a17c806f2891fa85c82dfafd Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 28 Feb 2025 17:37:18 +0900 Subject: [PATCH 9/9] Adjust set panel display and animations slightly --- .../SelectV2/BeatmapSetPanelBackground.cs | 2 +- osu.Game/Screens/SelectV2/PanelBase.cs | 12 ++++++------ osu.Game/Screens/SelectV2/PanelBeatmapSet.cs | 16 +++++++++++----- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/osu.Game/Screens/SelectV2/BeatmapSetPanelBackground.cs b/osu.Game/Screens/SelectV2/BeatmapSetPanelBackground.cs index 435a0ad262..798acf62ee 100644 --- a/osu.Game/Screens/SelectV2/BeatmapSetPanelBackground.cs +++ b/osu.Game/Screens/SelectV2/BeatmapSetPanelBackground.cs @@ -16,7 +16,7 @@ namespace osu.Game.Screens.SelectV2 { public partial class BeatmapSetPanelBackground : ModelBackedDrawable { - protected override bool TransformImmediately => true; + protected override double TransformDuration => 400; public WorkingBeatmap? Beatmap { diff --git a/osu.Game/Screens/SelectV2/PanelBase.cs b/osu.Game/Screens/SelectV2/PanelBase.cs index 36f4f13a3b..05a1a55c03 100644 --- a/osu.Game/Screens/SelectV2/PanelBase.cs +++ b/osu.Game/Screens/SelectV2/PanelBase.cs @@ -25,7 +25,7 @@ namespace osu.Game.Screens.SelectV2 private const float active_x_offset = 50f; - private const float duration = 400; + protected const float DURATION = 400; protected float PanelXOffset { get; init; } @@ -207,7 +207,7 @@ namespace osu.Game.Screens.SelectV2 protected override void PrepareForUse() { base.PrepareForUse(); - this.FadeInFromZero(duration, Easing.OutQuint); + this.FadeInFromZero(DURATION, Easing.OutQuint); } protected override bool OnClick(ClickEvent e) @@ -221,10 +221,10 @@ namespace osu.Game.Screens.SelectV2 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(); @@ -240,7 +240,7 @@ namespace osu.Game.Screens.SelectV2 if (!KeyboardSelected.Value) x += active_x_offset * 0.5f; - TopLevelContent.MoveToX(x, duration, Easing.OutQuint); + TopLevelContent.MoveToX(x, DURATION, Easing.OutQuint); } private void updateHover() diff --git a/osu.Game/Screens/SelectV2/PanelBeatmapSet.cs b/osu.Game/Screens/SelectV2/PanelBeatmapSet.cs index 5c38fe8e04..512fbacec1 100644 --- a/osu.Game/Screens/SelectV2/PanelBeatmapSet.cs +++ b/osu.Game/Screens/SelectV2/PanelBeatmapSet.cs @@ -48,7 +48,7 @@ namespace osu.Game.Screens.SelectV2 Icon = chevronIcon = new Container { - Size = new Vector2(22), + Size = new Vector2(0, 22), Child = new SpriteIcon { Anchor = Anchor.Centre, @@ -128,10 +128,16 @@ namespace osu.Game.Screens.SelectV2 private void onExpanded() { - const float duration = 500; - - chevronIcon.ResizeWidthTo(Expanded.Value ? 22 : 0f, duration, Easing.OutQuint); - chevronIcon.FadeTo(Expanded.Value ? 1f : 0f, duration, Easing.OutQuint); + if (Expanded.Value) + { + chevronIcon.ResizeWidthTo(18, 600, Easing.OutElasticQuarter); + chevronIcon.FadeTo(1f, DURATION, Easing.OutQuint); + } + else + { + chevronIcon.ResizeWidthTo(0f, DURATION, Easing.OutQuint); + chevronIcon.FadeTo(0f, DURATION, Easing.OutQuint); + } } protected override void PrepareForUse()