ShowMore button update

osu.Game/Overlays/Profile/Sections/Beatmaps/PaginatedBeatmapContainer.cs

@@ -34,8 +34,8 @@ namespace osu.Game.Overlays.Profile.Sections.Beatmaps
             request = new GetUserBeatmapsRequest(User.Value.Id, type, VisiblePages++ * ItemsPerPage);
             request.Success += sets => Schedule(() =>
             {
-                ShowMoreButton.FadeTo(sets.Count == ItemsPerPage ? 1 : 0);
+                MoreButton.FadeTo(sets.Count == ItemsPerPage ? 1 : 0);
-                ShowMoreLoading.Hide();
+                MoreButton.IsLoading = false;
 
                 if (!sets.Any() && VisiblePages == 1)
                 {

osu.Game/Overlays/Profile/Sections/Historical/PaginatedMostPlayedBeatmapContainer.cs

@@ -29,8 +29,8 @@ namespace osu.Game.Overlays.Profile.Sections.Historical
             request = new GetUserMostPlayedBeatmapsRequest(User.Value.Id, VisiblePages++ * ItemsPerPage);
             request.Success += beatmaps => Schedule(() =>
             {
-                ShowMoreButton.FadeTo(beatmaps.Count == ItemsPerPage ? 1 : 0);
+                MoreButton.FadeTo(beatmaps.Count == ItemsPerPage ? 1 : 0);
-                ShowMoreLoading.Hide();
+                MoreButton.IsLoading = false;
 
                 if (!beatmaps.Any() && VisiblePages == 1)
                 {

osu.Game/Overlays/Profile/Sections/PaginatedContainer.cs

@@ -7,11 +7,15 @@ using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Graphics;
-using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Online.API;
 using osu.Game.Rulesets;
+using osu.Framework.Input.Events;
+using System;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osuTK.Graphics;
 using osu.Game.Users;
 
 namespace osu.Game.Overlays.Profile.Sections
@@ -19,8 +23,7 @@ namespace osu.Game.Overlays.Profile.Sections
     public class PaginatedContainer : FillFlowContainer
     {
         protected readonly FillFlowContainer ItemsContainer;
-        protected readonly OsuHoverContainer ShowMoreButton;
+        protected readonly ShowMoreButton MoreButton;
-        protected readonly LoadingAnimation ShowMoreLoading;
         protected readonly OsuSpriteText MissingText;
 
         protected int VisiblePages;
@@ -45,38 +48,25 @@ namespace osu.Game.Overlays.Profile.Sections
                 new OsuSpriteText
                 {
                     Text = header,
-                    Font = OsuFont.GetFont(size: 15, weight: FontWeight.Regular, italics: true),
+                    Font = OsuFont.GetFont(size: 20, weight: FontWeight.Bold),
                     Margin = new MarginPadding { Top = 10, Bottom = 10 },
                 },
                 ItemsContainer = new FillFlowContainer
                 {
                     AutoSizeAxes = Axes.Y,
                     RelativeSizeAxes = Axes.X,
-                    Margin = new MarginPadding { Bottom = 10 }
+                    Direction = FillDirection.Vertical,
+                    Spacing = new Vector2(0, 2),
                 },
-                ShowMoreButton = new OsuHoverContainer
+                MoreButton = new ShowMoreButton
                 {
                     Alpha = 0,
+                    Margin = new MarginPadding { Top = 10 },
                     Action = ShowMore,
-                    AutoSizeAxes = Axes.Both,
-                    Anchor = Anchor.TopCentre,
-                    Origin = Anchor.TopCentre,
-                    Child = new OsuSpriteText
-                    {
-                        Font = OsuFont.GetFont(size: 14),
-                        Text = "show more",
-                        Padding = new MarginPadding { Vertical = 10, Horizontal = 15 },
-                    }
-                },
-                ShowMoreLoading = new LoadingAnimation
-                {
-                    Anchor = Anchor.TopCentre,
-                    Origin = Anchor.TopCentre,
-                    Size = new Vector2(14),
                 },
                 MissingText = new OsuSpriteText
                 {
-                    Font = OsuFont.GetFont(size: 14),
+                    Font = OsuFont.GetFont(size: 15),
                     Text = missing,
                     Alpha = 0,
                 },
@@ -97,16 +87,135 @@ namespace osu.Game.Overlays.Profile.Sections
         {
             VisiblePages = 0;
             ItemsContainer.Clear();
-            ShowMoreButton.Hide();
 
             if (e.NewValue != null)
                 ShowMore();
         }
 
-        protected virtual void ShowMore()
+        protected virtual void ShowMore() => MoreButton.IsLoading = true;
+
+        protected class ShowMoreButton : CircularContainer
         {
-            ShowMoreLoading.Show();
+            private const int duration = 300;
-            ShowMoreButton.Hide();
+            private Color4 idleColour;
+            private Color4 hoveredColour;
+
+            public Action Action;
+            private readonly Box background;
+            private readonly LoadingAnimation loading;
+            private readonly FillFlowContainer content;
+
+            private bool isLoading;
+            public bool IsLoading
+            {
+                set
+                {
+                    isLoading = value;
+
+                    if (value)
+                    {
+                        loading.FadeIn(duration, Easing.OutQuint);
+                        content.FadeOut(duration, Easing.OutQuint);
+                    }
+                    else
+                    {
+                        loading.FadeOut(duration, Easing.OutQuint);
+                        content.FadeIn(duration, Easing.OutQuint);
+                    }
+                }
+                get
+                {
+                    return isLoading;
+                }
+            }
+
+            public ShowMoreButton()
+            {
+                Anchor = Anchor.TopCentre;
+                Origin = Anchor.TopCentre;
+                Masking = true;
+                Size = new Vector2(140, 30);
+                Children = new Drawable[]
+                {
+                    background = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    content = new FillFlowContainer
+                    {
+                        Alpha = 0,
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        AutoSizeAxes = Axes.Both,
+                        Direction = FillDirection.Horizontal,
+                        Spacing = new Vector2(7),
+                        Children = new Drawable[]
+                        {
+                            new ChevronIcon(),
+                            new OsuSpriteText
+                            {
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold),
+                                Text = "show more".ToUpper(),
+                            },
+                            new ChevronIcon(),
+                        }
+                    },
+                    loading = new LoadingAnimation
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Size = new Vector2(20)
+                    },
+                };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colors)
+            {
+                background.Colour = idleColour = colors.GreySeafoam;
+                hoveredColour = colors.GreySeafoamLight;
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                background.FadeColour(hoveredColour, duration, Easing.OutQuint);
+                return base.OnHover(e);
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                background.FadeColour(idleColour, duration, Easing.OutQuint);
+                base.OnHoverLost(e);
+            }
+
+            protected override bool OnClick(ClickEvent e)
+            {
+                Action.Invoke();
+                return base.OnClick(e);
+            }
+
+            private class ChevronIcon : SpriteIcon
+            {
+                private const int bottom_margin = 2;
+                private const int icon_size = 8;
+
+                public ChevronIcon()
+                {
+                    Anchor = Anchor.Centre;
+                    Origin = Anchor.Centre;
+                    Margin = new MarginPadding { Bottom = bottom_margin };
+                    Size = new Vector2(icon_size);
+                    Icon = FontAwesome.Solid.ChevronDown;
+                }
+
+                [BackgroundDependencyLoader]
+                private void load(OsuColour colors)
+                {
+                    Colour = colors.Yellow;
+                }
+            }
         }
     }
 }

osu.Game/Overlays/Profile/Sections/Ranks/PaginatedScoreContainer.cs

@@ -1,7 +1,6 @@
 // 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.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Online.API.Requests;
 using osu.Game.Users;
@@ -9,6 +8,7 @@ using System;
 using System.Collections.Generic;
 using System.Linq;
 using osu.Framework.Bindables;
+using osu.Framework.Graphics;
 
 namespace osu.Game.Overlays.Profile.Sections.Ranks
 {
@@ -41,8 +41,8 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
 
                 if (!scores.Any() && VisiblePages == 1)
                 {
-                    ShowMoreButton.Hide();
+                    MoreButton.Hide();
-                    ShowMoreLoading.Hide();
+                    MoreButton.IsLoading = false;
                     MissingText.Show();
                     return;
                 }
@@ -63,8 +63,8 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
                 LoadComponentsAsync(drawableScores, s =>
                 {
                     MissingText.Hide();
-                    ShowMoreButton.FadeTo(scores.Count == ItemsPerPage ? 1 : 0);
+                    MoreButton.FadeTo(scores.Count == ItemsPerPage ? 1 : 0);
-                    ShowMoreLoading.Hide();
+                    MoreButton.IsLoading = false;
 
                     ItemsContainer.AddRange(s);
                 });

osu.Game/Overlays/Profile/Sections/Recent/PaginatedRecentActivityContainer.cs

@@ -27,8 +27,8 @@ namespace osu.Game.Overlays.Profile.Sections.Recent
             request = new GetUserRecentActivitiesRequest(User.Value.Id, VisiblePages++ * ItemsPerPage);
             request.Success += activities => Schedule(() =>
             {
-                ShowMoreButton.FadeTo(activities.Count == ItemsPerPage ? 1 : 0);
+                MoreButton.FadeTo(activities.Count == ItemsPerPage ? 1 : 0);
-                ShowMoreLoading.Hide();
+                MoreButton.IsLoading = false;
 
                 if (!activities.Any() && VisiblePages == 1)
                 {