diff --git a/osu.Game/Screens/Footer/ScreenFooter.cs b/osu.Game/Screens/Footer/ScreenFooter.cs index d299bf7362..9e0f657e8b 100644 --- a/osu.Game/Screens/Footer/ScreenFooter.cs +++ b/osu.Game/Screens/Footer/ScreenFooter.cs @@ -97,11 +97,9 @@ namespace osu.Game.Screens.Footer removedButtonsContainer.Add(oldButton); if (buttons.Count > 0) - fadeButtonToLeft(oldButton, i, oldButtons.Length); + makeButtonDisappearToRightAndExpire(oldButton, i, oldButtons.Length); else - fadeButtonToBottom(oldButton, i, oldButtons.Length); - - Scheduler.AddDelayed(() => oldButton.Expire(), oldButton.TopLevelContent.LatestTransformEndTime - Time.Current); + makeButtonDisappearToBottomAndExpire(oldButton, i, oldButtons.Length); } for (int i = 0; i < buttons.Count; i++) @@ -123,52 +121,24 @@ namespace osu.Game.Screens.Footer newButton.OnLoadComplete += _ => { if (oldButtons.Length > 0) - fadeButtonFromRight(newButton, index, buttons.Count, 240); + makeButtonAppearFromLeft(newButton, index, buttons.Count, 240); else - fadeButtonFromBottom(newButton, index); + makeButtonAppearFromBottom(newButton, index); }; } } - private void fadeButtonFromRight(ScreenFooterButton button, int index, int count, float startDelay) - { - button.TopLevelContent - .MoveToX(-300f) - .FadeOut(); + private void makeButtonAppearFromLeft(ScreenFooterButton button, int index, int count, float startDelay) + => button.AppearFromLeft(startDelay + (count - index) * delay_per_button); - button.TopLevelContent - .Delay(startDelay + (count - index) * delay_per_button) - .MoveToX(0f, 240, Easing.OutCubic) - .FadeIn(240, Easing.OutCubic); - } + private void makeButtonAppearFromBottom(ScreenFooterButton button, int index) + => button.AppearFromBottom(index * delay_per_button); - private void fadeButtonFromBottom(ScreenFooterButton button, int index) - { - button.TopLevelContent - .MoveToY(100f) - .FadeOut(); + private void makeButtonDisappearToRightAndExpire(ScreenFooterButton button, int index, int count) + => button.DisappearToRightAndExpire((count - index) * delay_per_button); - button.TopLevelContent - .Delay(index * delay_per_button) - .MoveToY(0f, 240, Easing.OutCubic) - .FadeIn(240, Easing.OutCubic); - } - - private void fadeButtonToLeft(ScreenFooterButton button, int index, int count) - { - button.TopLevelContent - .Delay((count - index) * delay_per_button) - .FadeOut(240, Easing.InOutCubic) - .MoveToX(300f, 360, Easing.InOutCubic); - } - - private void fadeButtonToBottom(ScreenFooterButton button, int index, int count) - { - button.TopLevelContent - .Delay((count - index) * delay_per_button) - .FadeOut(240, Easing.InOutCubic) - .MoveToY(100f, 240, Easing.InOutCubic); - } + private void makeButtonDisappearToBottomAndExpire(ScreenFooterButton button, int index, int count) + => button.DisappearToBottomAndExpire((count - index) * delay_per_button); private void showOverlay(OverlayContainer overlay) { diff --git a/osu.Game/Screens/Footer/ScreenFooterButton.cs b/osu.Game/Screens/Footer/ScreenFooterButton.cs index dda95d1d4c..1e5576e47a 100644 --- a/osu.Game/Screens/Footer/ScreenFooterButton.cs +++ b/osu.Game/Screens/Footer/ScreenFooterButton.cs @@ -69,7 +69,6 @@ namespace osu.Game.Screens.Footer private readonly Box glowBox; private readonly Box flashLayer; - public readonly Container TopLevelContent; public readonly OverlayContainer? Overlay; public ScreenFooterButton(OverlayContainer? overlay = null) @@ -78,89 +77,85 @@ namespace osu.Game.Screens.Footer Size = new Vector2(BUTTON_WIDTH, BUTTON_HEIGHT); - Child = TopLevelContent = new Container + Children = new Drawable[] { - RelativeSizeAxes = Axes.Both, - Children = new Drawable[] + new Container { - new Container + EdgeEffect = new EdgeEffectParameters { - EdgeEffect = new EdgeEffectParameters + Type = EdgeEffectType.Shadow, + Radius = 4, + // Figma says 50% opacity, but it does not match up visually if taken at face value, and looks bad. + Colour = Colour4.Black.Opacity(0.25f), + Offset = new Vector2(0, 2), + }, + Shear = BUTTON_SHEAR, + Masking = true, + CornerRadius = CORNER_RADIUS, + RelativeSizeAxes = Axes.Both, + Children = new Drawable[] + { + backgroundBox = new Box { - Type = EdgeEffectType.Shadow, - Radius = 4, - // Figma says 50% opacity, but it does not match up visually if taken at face value, and looks bad. - Colour = Colour4.Black.Opacity(0.25f), - Offset = new Vector2(0, 2), + RelativeSizeAxes = Axes.Both }, - Shear = BUTTON_SHEAR, - Masking = true, - CornerRadius = CORNER_RADIUS, - RelativeSizeAxes = Axes.Both, - Children = new Drawable[] + glowBox = new Box { - backgroundBox = new Box + RelativeSizeAxes = Axes.Both + }, + // For elements that should not be sheared. + new Container + { + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft, + Shear = -BUTTON_SHEAR, + RelativeSizeAxes = Axes.Both, + Children = new Drawable[] { - RelativeSizeAxes = Axes.Both - }, - glowBox = new Box - { - RelativeSizeAxes = Axes.Both - }, - // For elements that should not be sheared. - new Container - { - Anchor = Anchor.CentreLeft, - Origin = Anchor.CentreLeft, - Shear = -BUTTON_SHEAR, - RelativeSizeAxes = Axes.Both, - Children = new Drawable[] + TextContainer = new Container { - TextContainer = new Container + Anchor = Anchor.TopCentre, + Origin = Anchor.TopCentre, + Y = 42, + AutoSizeAxes = Axes.Both, + Child = text = new OsuSpriteText { - Anchor = Anchor.TopCentre, - Origin = Anchor.TopCentre, - Y = 42, - AutoSizeAxes = Axes.Both, - Child = text = new OsuSpriteText - { - // figma design says the size is 16, but due to the issues with font sizes 19 matches better - Font = OsuFont.TorusAlternate.With(size: 19), - AlwaysPresent = true - } - }, - icon = new SpriteIcon - { - Y = 12, - Size = new Vector2(20), - Anchor = Anchor.TopCentre, - Origin = Anchor.TopCentre - }, - } - }, - new Container - { - Shear = -BUTTON_SHEAR, - Anchor = Anchor.BottomCentre, - Origin = Anchor.Centre, - Y = -CORNER_RADIUS, - Size = new Vector2(120, 6), - Masking = true, - CornerRadius = 3, - Child = bar = new Box + // figma design says the size is 16, but due to the issues with font sizes 19 matches better + Font = OsuFont.TorusAlternate.With(size: 19), + AlwaysPresent = true + } + }, + icon = new SpriteIcon { - RelativeSizeAxes = Axes.Both, - } - }, - flashLayer = new Box + Y = 12, + Size = new Vector2(20), + Anchor = Anchor.TopCentre, + Origin = Anchor.TopCentre + }, + } + }, + new Container + { + Shear = -BUTTON_SHEAR, + Anchor = Anchor.BottomCentre, + Origin = Anchor.Centre, + Y = -CORNER_RADIUS, + Size = new Vector2(120, 6), + Masking = true, + CornerRadius = 3, + Child = bar = new Box { RelativeSizeAxes = Axes.Both, - Colour = Colour4.White.Opacity(0.9f), - Blending = BlendingParameters.Additive, - Alpha = 0, - }, + } }, - } + flashLayer = new Box + { + RelativeSizeAxes = Axes.Both, + Colour = Colour4.White.Opacity(0.9f), + Blending = BlendingParameters.Additive, + Alpha = 0, + }, + }, } }; } @@ -230,5 +225,41 @@ namespace osu.Game.Screens.Footer glowBox.FadeColour(ColourInfo.GradientVertical(buttonAccentColour.Opacity(0f), buttonAccentColour.Opacity(0.2f)), 150, Easing.OutQuint); } + + public void AppearFromLeft(double delay) + { + Content.MoveToX(-300f) + .FadeOut() + .Delay(delay) + .MoveToX(0f, 240, Easing.OutCubic) + .FadeIn(240, Easing.OutCubic); + } + + public void AppearFromBottom(double delay) + { + Content.MoveToY(100f) + .FadeOut() + .Delay(delay) + .MoveToY(0f, 240, Easing.OutCubic) + .FadeIn(240, Easing.OutCubic); + } + + public void DisappearToRightAndExpire(double delay) + { + Content.Delay(delay) + .FadeOut(240, Easing.InOutCubic) + .MoveToX(300f, 360, Easing.InOutCubic); + + this.Delay(Content.LatestTransformEndTime - Time.Current).Expire(); + } + + public void DisappearToBottomAndExpire(double delay) + { + Content.Delay(delay) + .FadeOut(240, Easing.InOutCubic) + .MoveToY(100f, 240, Easing.InOutCubic); + + this.Delay(Content.LatestTransformEndTime - Time.Current).Expire(); + } } } diff --git a/osu.Game/Screens/SelectV2/Footer/ScreenFooterButtonMods.cs b/osu.Game/Screens/SelectV2/Footer/ScreenFooterButtonMods.cs index 4df4116de1..841f0297e8 100644 --- a/osu.Game/Screens/SelectV2/Footer/ScreenFooterButtonMods.cs +++ b/osu.Game/Screens/SelectV2/Footer/ScreenFooterButtonMods.cs @@ -72,7 +72,7 @@ namespace osu.Game.Screens.SelectV2.Footer Icon = FontAwesome.Solid.ExchangeAlt; AccentColour = colours.Lime1; - TopLevelContent.AddRange(new[] + AddRange(new[] { unrankedBadge = new UnrankedBadge(), modDisplayBar = new Container