Merge pull request #1348 from smoogipoo/iconbutton-refactor

Refactor + improve IconButton

osu.Game/Graphics/UserInterface/IconButton.cs

@@ -15,32 +15,76 @@ namespace osu.Game.Graphics.UserInterface
 {
     public class IconButton : OsuClickableContainer
     {
-        private readonly SpriteIcon icon;
+        private const float button_size = 30;
-        private readonly Box hover;
-        private readonly Container content;
 
+        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; }
+        }
+
+        /// <summary>
+        /// The icon colour. This does not affect <see cref="IconButton.Colour"/>.
+        /// </summary>
+        public Color4 IconColour
+        {
+            get { return icon.Colour; }
+            set { icon.Colour = 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>
         public FontAwesome Icon
         {
             get { return icon.Icon; }
             set { icon.Icon = value; }
         }
 
-        private const float button_size = 30;
+        /// <summary>
-        private Color4 flashColour;
+        /// The icon scale. This does not affect <see cref="IconButton.Scale"/>.
-
+        /// </summary>
         public Vector2 IconScale
         {
             get { return icon.Scale; }
             set { icon.Scale = value; }
         }
 
+        /// <summary>
+        /// The size of the <see cref="IconButton"/> while it is not being pressed.
+        /// </summary>
+        public Vector2 ButtonSize
+        {
+            get { return content.Size; }
+            set { content.Size = value; }
+        }
+
+        private readonly Container content;
+        private readonly SpriteIcon icon;
+        private readonly Box hover;
+
         public IconButton()
         {
             AutoSizeAxes = Axes.Both;
 
-            Origin = Anchor.Centre;
-            Anchor = Anchor.Centre;
-
             Children = new Drawable[]
             {
                 content = new Container
@@ -48,7 +92,6 @@ namespace osu.Game.Graphics.UserInterface
                     Origin = Anchor.Centre,
                     Anchor = Anchor.Centre,
                     Size = new Vector2(button_size),
-
                     CornerRadius = 5,
                     Masking = true,
                     EdgeEffect = new EdgeEffectParameters
@@ -78,8 +121,11 @@ namespace osu.Game.Graphics.UserInterface
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            hover.Colour = colours.Yellow.Opacity(0.6f);
+            if (hoverColour == null)
-            flashColour = colours.Yellow;
+                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);
         }
@@ -98,7 +144,7 @@ namespace osu.Game.Graphics.UserInterface
 
         protected override bool OnClick(InputState state)
         {
-            hover.FlashColour(flashColour, 800, Easing.OutQuint);
+            hover.FlashColour(FlashColour, 800, Easing.OutQuint);
             return base.OnClick(state);
         }
 

osu.Game/Overlays/MusicController.cs

@@ -161,11 +161,15 @@ namespace osu.Game.Overlays
                                             {
                                                 prevButton = new IconButton
                                                 {
+                                                    Anchor = Anchor.Centre,
+                                                    Origin = Anchor.Centre,
                                                     Action = prev,
                                                     Icon = FontAwesome.fa_step_backward,
                                                 },
                                                 playButton = new IconButton
                                                 {
+                                                    Anchor = Anchor.Centre,
+                                                    Origin = Anchor.Centre,
                                                     Scale = new Vector2(1.4f),
                                                     IconScale = new Vector2(1.4f),
                                                     Action = play,
@@ -173,6 +177,8 @@ namespace osu.Game.Overlays
                                                 },
                                                 nextButton = new IconButton
                                                 {
+                                                    Anchor = Anchor.Centre,
+                                                    Origin = Anchor.Centre,
                                                     Action = next,
                                                     Icon = FontAwesome.fa_step_forward,
                                                 },

osu.Game/Tests/Visual/TestCaseIconButton.cs

@@ -0,0 +1,109 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using OpenTK;
+using OpenTK.Graphics;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+
+namespace osu.Game.Tests.Visual
+{
+    public class TestCaseIconButton : OsuTestCase
+    {
+        public override string Description => "Various display modes of icon buttons";
+
+        public TestCaseIconButton()
+        {
+            Child = new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.Both,
+                Spacing = new Vector2(10, 10),
+                Children = new[]
+                {
+                    new NamedIconButton("No change", new IconButton()),
+                    new NamedIconButton("Green colours", new IconButton
+                    {
+                        IconColour = Color4.LightGreen,
+                        FlashColour = Color4.DarkGreen,
+                        HoverColour = Color4.Green
+                    }),
+                    new NamedIconButton("Full-width", new IconButton { ButtonSize = new Vector2(200, 30) }),
+                    new NamedIconButton("Unchanging size", new IconButton(), false)
+                }
+            };
+        }
+
+        private class NamedIconButton : Container
+        {
+            public NamedIconButton(string name, IconButton button, bool allowSizeChange = true)
+            {
+                AutoSizeAxes = Axes.Y;
+                Width = 200;
+
+                Container iconContainer;
+                Children = new Drawable[]
+                {
+                    new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = Color4.Black,
+                        Alpha = 0.5f,
+                    },
+                    new FillFlowContainer
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Direction = FillDirection.Vertical,
+                        Spacing = new Vector2(0, 10),
+                        Children = new Drawable[]
+                        {
+                            new OsuSpriteText
+                            {
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
+                                Text = name
+                            },
+                            new Container
+                            {
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
+                                RelativeSizeAxes = Axes.X,
+                                AutoSizeAxes = Axes.Y,
+                                Children = new Drawable[]
+                                {
+                                    new Box
+                                    {
+                                        RelativeSizeAxes = Axes.Both,
+                                        Alpha = 0.1f,
+                                    },
+                                    iconContainer = new Container
+                                    {
+                                        Anchor = Anchor.Centre,
+                                        Origin = Anchor.Centre,
+                                        Child = button
+                                    }
+                                }
+                            }
+                        }
+                    }
+                };
+
+                if (allowSizeChange)
+                    iconContainer.AutoSizeAxes = Axes.Both;
+                else
+                {
+                    iconContainer.RelativeSizeAxes = Axes.X;
+                    iconContainer.Height = 30;
+                }
+
+                button.Anchor = Anchor.Centre;
+                button.Origin = Anchor.Centre;
+                button.Icon = FontAwesome.fa_osu_osu_o;
+            }
+        }
+    }
+}

osu.Game/osu.Game.csproj

@@ -759,6 +759,7 @@
     <Compile Include="Tests\Visual\TestCaseEditorSummaryTimeline.cs" />
     <Compile Include="Tests\Visual\TestCaseGamefield.cs" />
     <Compile Include="Tests\Visual\TestCaseGraph.cs" />
+    <Compile Include="Tests\Visual\TestCaseIconButton.cs" />
     <Compile Include="Tests\Visual\TestCaseKeyConfiguration.cs" />
     <Compile Include="Tests\Visual\TestCaseKeyCounter.cs" />
     <Compile Include="Tests\Visual\TestCaseLeaderboard.cs" />