Tidy up button hierarchy

osu.Game.Tests/Visual/TestCaseIconButton.cs

@@ -25,11 +25,7 @@ namespace osu.Game.Tests.Visual
                 Children = new[]
                 {
                     new NamedIconButton("No change", new IconButton()),
-                    new NamedIconButton("Background colours", new IconButton
+                    new NamedIconButton("Background colours", new ColouredIconButton()),
-                    {
-                        FlashColour = Color4.DarkGreen,
-                        HoverColour = Color4.Green,
-                    }),
                     new NamedIconButton("Full-width", new IconButton { ButtonSize = new Vector2(200, 30) }),
                     new NamedIconButton("Unchanging size", new IconButton(), false),
                     new NamedIconButton("Icon colours", new IconButton
@@ -41,6 +37,15 @@ namespace osu.Game.Tests.Visual
             };
         }
 
+        private class ColouredIconButton : IconButton
+        {
+            public ColouredIconButton()
+            {
+                FlashColour = Color4.DarkGreen;
+                HoverColour = Color4.Green;
+            }
+        }
+
         private class NamedIconButton : Container
         {
             public NamedIconButton(string name, IconButton button, bool allowSizeChange = true)

osu.Game/Graphics/UserInterface/IconButton.cs

@@ -3,31 +3,17 @@
 
 using OpenTK;
 using OpenTK.Graphics;
-using osu.Framework.Allocation;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input;
-using osu.Game.Graphics.Containers;
 
 namespace osu.Game.Graphics.UserInterface
 {
-    public class IconButton : OsuClickableContainer
+    public class IconButton : OsuAnimatedButton
     {
         public const float BUTTON_SIZE = 30;
 
-        private Color4? flashColour;
-        /// <summary>
-        /// The colour that should be flashed when the <see cref="IconButton"/> is clicked.
-        /// </summary>
-        public Color4 FlashColour
-        {
-            get { return flashColour ?? Color4.White; }
-            set { flashColour = value; }
-        }
-
         private Color4? iconColour;
+
         /// <summary>
         /// The icon colour. This does not affect <see cref="IconButton.Colour"/>.
         /// </summary>
@@ -42,6 +28,7 @@ namespace osu.Game.Graphics.UserInterface
         }
 
         private Color4? iconHoverColour;
+
         /// <summary>
         /// The icon colour while the <see cref="IconButton"/> is hovered.
         /// </summary>
@@ -51,20 +38,6 @@ namespace osu.Game.Graphics.UserInterface
             set { iconHoverColour = value; }
         }
 
-        private Color4? hoverColour;
-        /// <summary>
-        /// The background colour of the <see cref="IconButton"/> while it is hovered.
-        /// </summary>
-        public Color4 HoverColour
-        {
-            get { return hoverColour ?? Color4.White; }
-            set
-            {
-                hoverColour = value;
-                hover.Colour = value;
-            }
-        }
-
         /// <summary>
         /// The icon.
         /// </summary>
@@ -88,93 +61,39 @@ namespace osu.Game.Graphics.UserInterface
         /// </summary>
         public Vector2 ButtonSize
         {
-            get { return content.Size; }
+            get => Content.Size;
-            set { content.Size = value; }
+            set
+            {
+                Content.RelativeSizeAxes = Axes.None;
+                Content.Size = value;
+            }
         }
 
-        private readonly Container content;
         private readonly SpriteIcon icon;
-        private readonly Box hover;
 
         public IconButton()
         {
             AutoSizeAxes = Axes.Both;
+            ButtonSize = new Vector2(BUTTON_SIZE);
 
-            Children = new Drawable[]
+            Add(icon = new SpriteIcon
-            {
-                content = new Container
-                {
-                    Origin = Anchor.Centre,
-                    Anchor = Anchor.Centre,
-                    Size = new Vector2(BUTTON_SIZE),
-                    CornerRadius = 5,
-                    Masking = true,
-                    EdgeEffect = new EdgeEffectParameters
-                    {
-                        Colour = Color4.Black.Opacity(0.04f),
-                        Type = EdgeEffectType.Shadow,
-                        Radius = 5,
-                    },
-                    Children = new Drawable[]
-                    {
-                        hover = new Box
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                            Alpha = 0,
-                        },
-                        icon = new SpriteIcon
             {
                 Origin = Anchor.Centre,
                 Anchor = Anchor.Centre,
                 Size = new Vector2(18),
-                        }
+            });
-                    }
-                }
-            };
-        }
-
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            if (hoverColour == null)
-                HoverColour = colours.Yellow.Opacity(0.6f);
-
-            if (flashColour == null)
-                FlashColour = colours.Yellow;
-
-            Enabled.ValueChanged += enabled => this.FadeColour(enabled ? Color4.White : colours.Gray9, 200, Easing.OutQuint);
         }
 
         protected override bool OnHover(InputState state)
         {
-            hover.FadeIn(500, Easing.OutQuint);
             icon.FadeColour(IconHoverColour, 500, Easing.OutQuint);
             return base.OnHover(state);
         }
 
         protected override void OnHoverLost(InputState state)
         {
-            hover.FadeOut(500, Easing.OutQuint);
             icon.FadeColour(IconColour, 500, Easing.OutQuint);
             base.OnHoverLost(state);
         }
-
-        protected override bool OnClick(InputState state)
-        {
-            hover.FlashColour(FlashColour, 800, Easing.OutQuint);
-            return base.OnClick(state);
-        }
-
-        protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
-        {
-            content.ScaleTo(0.75f, 2000, Easing.OutQuint);
-            return base.OnMouseDown(state, args);
-        }
-
-        protected override bool OnMouseUp(InputState state, MouseUpEventArgs args)
-        {
-            content.ScaleTo(1, 1000, Easing.OutElastic);
-            return base.OnMouseUp(state, args);
-        }
     }
 }

osu.Game/Graphics/UserInterface/OsuAnimatedButton.cs

@@ -0,0 +1,109 @@
+// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Input;
+using osu.Game.Graphics.Containers;
+using OpenTK.Graphics;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    /// <summary>
+    /// Highlight on hover, bounce on click.
+    /// </summary>
+    public class OsuAnimatedButton : OsuClickableContainer
+    {
+        /// <summary>
+        /// The colour that should be flashed when the <see cref="IconButton"/> is clicked.
+        /// </summary>
+        protected Color4 FlashColour = Color4.White.Opacity(0.3f);
+
+        private Color4 hoverColour = Color4.White.Opacity(0.1f);
+
+        /// <summary>
+        /// The background colour of the <see cref="IconButton"/> while it is hovered.
+        /// </summary>
+        protected Color4 HoverColour
+        {
+            get => hoverColour;
+            set
+            {
+                hoverColour = value;
+                hover.Colour = value;
+            }
+        }
+
+        protected override Container<Drawable> Content => content;
+
+        private readonly Container content;
+        private readonly Box hover;
+
+        public OsuAnimatedButton()
+        {
+            base.Content.Add(content = new Container
+            {
+                Origin = Anchor.Centre,
+                Anchor = Anchor.Centre,
+                RelativeSizeAxes = Axes.Both,
+                CornerRadius = 5,
+                Masking = true,
+                EdgeEffect = new EdgeEffectParameters
+                {
+                    Colour = Color4.Black.Opacity(0.04f),
+                    Type = EdgeEffectType.Shadow,
+                    Radius = 5,
+                },
+                Children = new Drawable[]
+                {
+                    hover = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = HoverColour,
+                        Blending = BlendingMode.Additive,
+                        Alpha = 0,
+                    },
+                }
+            });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            Enabled.BindValueChanged(enabled => this.FadeColour(enabled ? Color4.White : colours.Gray9, 200, Easing.OutQuint), true);
+        }
+
+        protected override bool OnHover(InputState state)
+        {
+            hover.FadeIn(500, Easing.OutQuint);
+            return base.OnHover(state);
+        }
+
+        protected override void OnHoverLost(InputState state)
+        {
+            hover.FadeOut(500, Easing.OutQuint);
+            base.OnHoverLost(state);
+        }
+
+        protected override bool OnClick(InputState state)
+        {
+            hover.FlashColour(FlashColour, 800, Easing.OutQuint);
+            return base.OnClick(state);
+        }
+
+        protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
+        {
+            Content.ScaleTo(0.75f, 2000, Easing.OutQuint);
+            return base.OnMouseDown(state, args);
+        }
+
+        protected override bool OnMouseUp(InputState state, MouseUpEventArgs args)
+        {
+            Content.ScaleTo(1, 1000, Easing.OutElastic);
+            return base.OnMouseUp(state, args);
+        }
+    }
+}

osu.Game/Overlays/Direct/DownloadButton.cs

@@ -3,19 +3,16 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
-using osu.Framework.Input;
 using osu.Game.Beatmaps;
 using osu.Game.Beatmaps.Drawables;
 using osu.Game.Graphics;
-using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.UserInterface;
 using OpenTK;
-using OpenTK.Graphics;
 
 namespace osu.Game.Overlays.Direct
 {
-    public class DownloadButton : OsuClickableContainer
+    public class DownloadButton : OsuAnimatedButton
     {
         private readonly SpriteIcon icon;
         private readonly SpriteIcon checkmark;
@@ -26,17 +23,13 @@ namespace osu.Game.Overlays.Direct
 
         public DownloadButton(BeatmapSetInfo set, bool noVideo = false)
         {
-            Children = new Drawable[]
+            AddRange(new Drawable[]
             {
                 downloader = new BeatmapSetDownloader(set, noVideo),
-                new CircularContainer
+                background = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Masking = true,
+                    Depth = float.MaxValue
-                    Child = background = new Box
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                    },
                 },
                 icon = new SpriteIcon
                 {
@@ -53,18 +46,19 @@ namespace osu.Game.Overlays.Direct
                     Size = Vector2.Zero,
                     Icon = FontAwesome.fa_check,
                 }
-            };
+            });
 
             Action = () =>
             {
-                if (downloader.DownloadState.Value == BeatmapSetDownloader.DownloadStatus.Downloading)
+                if (downloader.DownloadState == BeatmapSetDownloader.DownloadStatus.Downloading)
                 {
+                    // todo: replace with ShakeContainer after https://github.com/ppy/osu/pull/2909 is merged.
                     Content.MoveToX(-5, 50, Easing.OutSine).Then()
                            .MoveToX(5, 100, Easing.InOutSine).Then()
                            .MoveToX(-5, 100, Easing.InOutSine).Then()
                            .MoveToX(0, 50, Easing.InSine);
                 }
-                else if (downloader.DownloadState.Value == BeatmapSetDownloader.DownloadStatus.Downloaded)
+                else if (downloader.DownloadState == BeatmapSetDownloader.DownloadStatus.Downloaded)
                 {
                     // TODO: Jump to song select with this set when the capability is implemented
                 }
@@ -73,54 +67,24 @@ namespace osu.Game.Overlays.Direct
                     downloader.Download();
                 }
             };
-
-            downloader.DownloadState.ValueChanged += _ => updateState();
-
-            Colour = Color4.White;
         }
 
         protected override void LoadComplete()
         {
             base.LoadComplete();
 
-            updateState();
+            downloader.DownloadState.BindValueChanged(updateState, true);
         }
 
-        [BackgroundDependencyLoader(permitNulls:true)]
+        [BackgroundDependencyLoader(permitNulls: true)]
         private void load(OsuColour colours)
         {
             this.colours = colours;
         }
 
-        protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
+        private void updateState(BeatmapSetDownloader.DownloadStatus state)
         {
-            Content.ScaleTo(0.9f, 1000, Easing.Out);
+            switch (state)
-            return base.OnMouseDown(state, args);
-        }
-
-        protected override bool OnMouseUp(InputState state, MouseUpEventArgs args)
-        {
-            Content.ScaleTo(1f, 500, Easing.OutElastic);
-            return base.OnMouseUp(state, args);
-        }
-
-        protected override bool OnHover(InputState state)
-        {
-            Content.ScaleTo(1.1f, 500, Easing.OutElastic);
-            return base.OnHover(state);
-        }
-
-        protected override void OnHoverLost(InputState state)
-        {
-            Content.ScaleTo(1f, 500, Easing.OutElastic);
-        }
-
-        private void updateState()
-        {
-            if (!IsLoaded)
-                return;
-
-            switch (downloader.DownloadState.Value)
             {
                 case BeatmapSetDownloader.DownloadStatus.NotDownloaded:
                     background.FadeColour(colours.Gray4, 500, Easing.InOutExpo);

osu.Game/Overlays/MusicController.cs

@@ -142,14 +142,14 @@ namespace osu.Game.Overlays
                                             Anchor = Anchor.Centre,
                                             Children = new[]
                                             {
-                                                prevButton = new IconButton
+                                                prevButton = new MusicIconButton
                                                 {
                                                     Anchor = Anchor.Centre,
                                                     Origin = Anchor.Centre,
                                                     Action = prev,
                                                     Icon = FontAwesome.fa_step_backward,
                                                 },
-                                                playButton = new IconButton
+                                                playButton = new MusicIconButton
                                                 {
                                                     Anchor = Anchor.Centre,
                                                     Origin = Anchor.Centre,
@@ -158,7 +158,7 @@ namespace osu.Game.Overlays
                                                     Action = play,
                                                     Icon = FontAwesome.fa_play_circle_o,
                                                 },
-                                                nextButton = new IconButton
+                                                nextButton = new MusicIconButton
                                                 {
                                                     Anchor = Anchor.Centre,
                                                     Origin = Anchor.Centre,
@@ -167,7 +167,7 @@ namespace osu.Game.Overlays
                                                 },
                                             }
                                         },
-                                        playlistButton = new IconButton
+                                        playlistButton = new MusicIconButton
                                         {
                                             Origin = Anchor.Centre,
                                             Anchor = Anchor.CentreRight,
@@ -405,6 +405,16 @@ namespace osu.Game.Overlays
             Prev
         }
 
+        private class MusicIconButton : IconButton
+        {
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                HoverColour = colours.YellowDark.Opacity(0.6f);
+                FlashColour = colours.Yellow;
+            }
+        }
+
         private class Background : BufferedContainer
         {
             private readonly Sprite sprite;

osu.Game/Screens/Edit/Screens/Compose/Timeline/TimelineButton.cs

@@ -27,16 +27,7 @@ namespace osu.Game.Screens.Edit.Screens.Compose.Timeline
 
         public TimelineButton()
         {
-            InternalChild = button = new IconButton
+            InternalChild = button = new TimelineIconButton { Action = () => Action?.Invoke() };
-            {
-                Anchor = Anchor.Centre,
-                Origin = Anchor.Centre,
-                IconColour = OsuColour.Gray(0.35f),
-                IconHoverColour = Color4.White,
-                HoverColour = OsuColour.Gray(0.25f),
-                FlashColour = OsuColour.Gray(0.5f),
-                Action = () => Action?.Invoke()
-            };
 
             button.Enabled.BindTo(Enabled);
             Width = button.ButtonSize.X;
@@ -48,5 +39,18 @@ namespace osu.Game.Screens.Edit.Screens.Compose.Timeline
 
             button.ButtonSize = new Vector2(button.ButtonSize.X, DrawHeight);
         }
+
+        private class TimelineIconButton : IconButton
+        {
+            public TimelineIconButton()
+            {
+                Anchor = Anchor.Centre;
+                Origin = Anchor.Centre;
+                IconColour = OsuColour.Gray(0.35f);
+                IconHoverColour = Color4.White;
+                HoverColour = OsuColour.Gray(0.25f);
+                FlashColour = OsuColour.Gray(0.5f);
+            }
+        }
     }
 }