Update ShowMoreButton in line with web

osu.Game.Tests/Visual/Online/TestSceneShowMoreButton.cs

@@ -4,19 +4,22 @@
 using osu.Framework.Graphics;
 using osu.Game.Graphics.UserInterface;
 using osu.Framework.Allocation;
-using osu.Game.Graphics;
+using osu.Game.Overlays;
 
 namespace osu.Game.Tests.Visual.Online
 {
     public class TestSceneShowMoreButton : OsuTestScene
     {
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Green);
+
         public TestSceneShowMoreButton()
         {
-            TestButton button = null;
+            ShowMoreButton button = null;
 
             int fireCount = 0;
 
-            Add(button = new TestButton
+            Add(button = new ShowMoreButton
             {
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,
@@ -46,16 +49,5 @@ namespace osu.Game.Tests.Visual.Online
             AddAssert("action fired twice", () => fireCount == 2);
             AddAssert("is in loading state", () => button.IsLoading);
         }
-
-        private class TestButton : ShowMoreButton
-        {
-            [BackgroundDependencyLoader]
-            private void load(OsuColour colors)
-            {
-                IdleColour = colors.YellowDark;
-                HoverColour = colors.Yellow;
-                ChevronIconColour = colors.Red;
-            }
-        }
     }
 }

osu.Game/Graphics/UserInterface/ShowMoreButton.cs

@@ -1,13 +1,15 @@
 // 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.Allocation;
 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.Sprites;
+using osu.Game.Overlays;
 using osuTK;
-using osuTK.Graphics;
 using System.Collections.Generic;
 
 namespace osu.Game.Graphics.UserInterface
@@ -16,14 +18,6 @@ namespace osu.Game.Graphics.UserInterface
     {
         private const int duration = 200;
 
-        private Color4 chevronIconColour;
-
-        protected Color4 ChevronIconColour
-        {
-            get => chevronIconColour;
-            set => chevronIconColour = leftChevron.Colour = rightChevron.Colour = value;
-        }
-
         public string Text
         {
             get => text.Text;
@@ -32,22 +26,28 @@ namespace osu.Game.Graphics.UserInterface
 
         protected override IEnumerable<Drawable> EffectTargets => new[] { background };
 
-        private ChevronIcon leftChevron;
+        private ChevronIcon leftIcon;
-        private ChevronIcon rightChevron;
+        private ChevronIcon rightIcon;
         private SpriteText text;
         private Box background;
         private FillFlowContainer textContainer;
 
         public ShowMoreButton()
         {
-            Height = 30;
+            AutoSizeAxes = Axes.Both;
-            Width = 140;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            IdleColour = colourProvider.Background2;
+            HoverColour = colourProvider.Background1;
         }
 
         protected override Drawable CreateContent() => new CircularContainer
         {
             Masking = true,
-            RelativeSizeAxes = Axes.Both,
+            AutoSizeAxes = Axes.Both,
             Children = new Drawable[]
             {
                 background = new Box
@@ -56,22 +56,36 @@ namespace osu.Game.Graphics.UserInterface
                 },
                 textContainer = new FillFlowContainer
                 {
+                    AlwaysPresent = true,
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
                     AutoSizeAxes = Axes.Both,
                     Direction = FillDirection.Horizontal,
-                    Spacing = new Vector2(7),
+                    Spacing = new Vector2(10),
+                    Margin = new MarginPadding
+                    {
+                        Horizontal = 20,
+                        Vertical = 5
+                    },
                     Children = new Drawable[]
                     {
-                        leftChevron = new ChevronIcon(),
+                        leftIcon = new ChevronIcon
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                        },
                         text = new OsuSpriteText
                         {
                             Anchor = Anchor.Centre,
                             Origin = Anchor.Centre,
-                            Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
+                            Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold),
                             Text = "show more".ToUpper(),
                         },
-                        rightChevron = new ChevronIcon(),
+                        rightIcon = new ChevronIcon
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                        }
                     }
                 }
             }
@@ -81,17 +95,41 @@ namespace osu.Game.Graphics.UserInterface
 
         protected override void OnLoadFinished() => textContainer.FadeIn(duration, Easing.OutQuint);
 
-        private class ChevronIcon : SpriteIcon
+        protected override bool OnHover(HoverEvent e)
         {
-            private const int icon_size = 8;
+            base.OnHover(e);
+            leftIcon.FadeHoverColour();
+            rightIcon.FadeHoverColour();
+            return true;
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            base.OnHoverLost(e);
+            leftIcon.FadeIdleColour();
+            rightIcon.FadeIdleColour();
+        }
+
+        public class ChevronIcon : SpriteIcon
+        {
+            [Resolved]
+            private OverlayColourProvider colourProvider { get; set; }
 
             public ChevronIcon()
             {
-                Anchor = Anchor.Centre;
+                Size = new Vector2(7.5f);
-                Origin = Anchor.Centre;
-                Size = new Vector2(icon_size);
                 Icon = FontAwesome.Solid.ChevronDown;
             }
+
+            [BackgroundDependencyLoader]
+            private void load()
+            {
+                Colour = colourProvider.Foreground1;
+            }
+
+            public void FadeHoverColour() => this.FadeColour(colourProvider.Light1, 200, Easing.OutQuint);
+
+            public void FadeIdleColour() => this.FadeColour(colourProvider.Foreground1, 200, Easing.OutQuint);
         }
     }
 }

osu.Game/Overlays/Comments/Buttons/CommentRepliesButton.cs

@@ -5,12 +5,12 @@ using osu.Framework.Allocation;
 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;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
 using osuTK;
+using static osu.Game.Graphics.UserInterface.ShowMoreButton;
 
 namespace osu.Game.Overlays.Comments.Buttons
 {
@@ -25,7 +25,7 @@ namespace osu.Game.Overlays.Comments.Buttons
         [Resolved]
         private OverlayColourProvider colourProvider { get; set; }
 
-        private readonly SpriteIcon icon;
+        private readonly ChevronIcon icon;
         private readonly Box background;
         private readonly OsuSpriteText text;
 
@@ -68,12 +68,10 @@ namespace osu.Game.Overlays.Comments.Buttons
                                         AlwaysPresent = true,
                                         Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold)
                                     },
-                                    icon = new SpriteIcon
+                                    icon = new ChevronIcon
                                     {
                                         Anchor = Anchor.CentreLeft,
-                                        Origin = Anchor.CentreLeft,
+                                        Origin = Anchor.CentreLeft
-                                        Size = new Vector2(7.5f),
-                                        Icon = FontAwesome.Solid.ChevronDown
                                     }
                                 }
                             }
@@ -88,7 +86,6 @@ namespace osu.Game.Overlays.Comments.Buttons
         private void load()
         {
             background.Colour = colourProvider.Background2;
-            icon.Colour = colourProvider.Foreground1;
         }
 
         protected void SetIconDirection(bool upwards) => icon.ScaleTo(new Vector2(1, upwards ? -1 : 1));
@@ -99,7 +96,7 @@ namespace osu.Game.Overlays.Comments.Buttons
         {
             base.OnHover(e);
             background.FadeColour(colourProvider.Background1, 200, Easing.OutQuint);
-            icon.FadeColour(colourProvider.Light1, 200, Easing.OutQuint);
+            icon.FadeHoverColour();
             return true;
         }
 
@@ -107,7 +104,7 @@ namespace osu.Game.Overlays.Comments.Buttons
         {
             base.OnHoverLost(e);
             background.FadeColour(colourProvider.Background2, 200, Easing.OutQuint);
-            icon.FadeColour(colourProvider.Foreground1, 200, Easing.OutQuint);
+            icon.FadeIdleColour();
         }
     }
 }

osu.Game/Overlays/Comments/CommentsShowMoreButton.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.Allocation;
 using osu.Framework.Bindables;
 using osu.Game.Graphics.UserInterface;
 
@@ -11,16 +10,6 @@ namespace osu.Game.Overlays.Comments
     {
         public readonly BindableInt Current = new BindableInt();
 
-        [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider colourProvider)
-        {
-            Height = 20;
-
-            IdleColour = colourProvider.Background2;
-            HoverColour = colourProvider.Background1;
-            ChevronIconColour = colourProvider.Foreground1;
-        }
-
         protected override void LoadComplete()
         {
             Current.BindValueChanged(onCurrentChanged, true);

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

@@ -14,12 +14,13 @@ using osu.Game.Users;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading;
+using osu.Game.Graphics.UserInterface;
 
 namespace osu.Game.Overlays.Profile.Sections
 {
     public abstract class PaginatedContainer<TModel> : FillFlowContainer
     {
-        private readonly ProfileShowMoreButton moreButton;
+        private readonly ShowMoreButton moreButton;
         private readonly OsuSpriteText missingText;
         private APIRequest<List<TModel>> retrievalRequest;
         private CancellationTokenSource loadCancellation;
@@ -74,7 +75,7 @@ namespace osu.Game.Overlays.Profile.Sections
                     RelativeSizeAxes = Axes.X,
                     Spacing = new Vector2(0, 2),
                 },
-                moreButton = new ProfileShowMoreButton
+                moreButton = new ShowMoreButton
                 {
                     Anchor = Anchor.TopCentre,
                     Origin = Anchor.TopCentre,

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

@@ -1,19 +0,0 @@
-// 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.Allocation;
-using osu.Game.Graphics.UserInterface;
-
-namespace osu.Game.Overlays.Profile.Sections
-{
-    public class ProfileShowMoreButton : ShowMoreButton
-    {
-        [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider colourProvider)
-        {
-            IdleColour = colourProvider.Background2;
-            HoverColour = colourProvider.Background1;
-            ChevronIconColour = colourProvider.Foreground1;
-        }
-    }
-}