Implement mode selector highlight line.

osu.Game/Overlays/Toolbar.cs

@@ -17,17 +17,17 @@ using osu.Framework.Extensions;
 
 namespace osu.Game.Overlays
 {
-    public class Toolbar : Container
+    public partial class Toolbar : Container
     {
         const float height = 50;
         private FlowContainer leftFlow;
         private FlowContainer rightFlow;
-        private FlowContainer modeButtons;
 
         public Action OnSettings;
         public Action OnHome;
         public Action<PlayMode> OnPlayModeChange;
 
+        private ToolbarModeSelector modeSelector;
 
         public override void Load()
         {
@@ -36,51 +36,35 @@ namespace osu.Game.Overlays
             RelativeSizeAxes = Axes.X;
             Size = new Vector2(1, height);
 
-            modeButtons = new FlowContainer
-            {
-                RelativeSizeAxes = Axes.Y,
-                Direction = FlowDirection.HorizontalOnly
-            };
-
-            foreach (PlayMode m in Enum.GetValues(typeof(PlayMode)))
-            {
-                var localMode = m;
-                modeButtons.Add(new ToolbarModeButton
-                {
-                    Mode = m,
-                    Action = delegate
-                    {
-                        SetGameMode(localMode);
-                        OnPlayModeChange?.Invoke(localMode);
-                    }
-                });
-            }
-
-
             Children = new Drawable[]
             {
                 new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = new Color4(0.1f, 0.1f, 0.1f, 0.9f)
+                    Colour = new Color4(0.1f, 0.1f, 0.1f, 0.4f)
                 },
                 leftFlow = new FlowContainer
                 {
                     Direction = FlowDirection.HorizontalOnly,
                     RelativeSizeAxes = Axes.Y,
-                    Children = new []
+                    Children = new Drawable[]
                     {
                         new ToolbarButton
                         {
                             Icon = FontAwesome.gear,
-                            Action = OnSettings
+                            Action = OnSettings,
+                            TooltipMain = "Settings"
                         },
                         new ToolbarButton
                         {
                             Icon = FontAwesome.home,
+                            TooltipMain = "Home",
                             Action = OnHome
                         },
-                        modeButtons
+                        modeSelector = new ToolbarModeSelector
+                        {
+                            OnPlayModeChange = this.OnPlayModeChange
+                        }
                     }
                 },
                 rightFlow = new FlowContainer
@@ -110,167 +94,6 @@ namespace osu.Game.Overlays
             };
         }
 
-        public void SetGameMode(PlayMode mode)
+        public void SetGameMode(PlayMode mode) => modeSelector.SetGameMode(mode);
-        {
-            foreach (var m in modeButtons.Children.Cast<ToolbarModeButton>())
-            {
-                m.Active = m.Mode == mode;
-            }
-        }
-
-        public class ToolbarModeButton : ToolbarButton
-        {
-            private PlayMode mode;
-            public PlayMode Mode
-            {
-                get { return mode; }
-                set
-                {
-                    mode = value;
-                    Text = mode.GetDescription();
-                    Icon = getModeIcon(mode);
-                }
-            }
-
-            public bool Active
-            {
-                set
-                {
-                    Background.Colour = value ? new Color4(100, 100, 100, 140) : new Color4(20, 20, 20, 140);
-                }
-            }
-
-            private FontAwesome getModeIcon(PlayMode mode)
-            {
-                switch (mode)
-                {
-                    default: return FontAwesome.fa_osu_osu_o;
-                    case PlayMode.Taiko: return FontAwesome.fa_osu_taiko_o;
-                    case PlayMode.Catch: return FontAwesome.fa_osu_fruits_o;
-                    case PlayMode.Mania: return FontAwesome.fa_osu_mania_o;
-                }
-            }
-
-            public override void Load()
-            {
-                base.Load();
-                DrawableIcon.TextSize = height * 0.7f;
-            }
-        }
-
-        public class ToolbarButton : FlowContainer
-        {
-            public FontAwesome Icon
-            {
-                get { return DrawableIcon.Icon; }
-                set { DrawableIcon.Icon = value; }
-            }
-
-            public string Text
-            {
-                get { return DrawableText.Text; }
-                set
-                {
-                    DrawableText.Text = value;
-                    paddingIcon.Alpha = string.IsNullOrEmpty(value) ? 0 : 1;
-                }
-            }
-
-            public Action Action;
-
-            protected TextAwesome DrawableIcon;
-            protected SpriteText DrawableText;
-            protected Box Background;
-            protected Box HoverBackground;
-            private Drawable paddingLeft;
-            private Drawable paddingRight;
-            private Drawable paddingIcon;
-
-            public new float Padding
-            {
-                get { return paddingLeft.Size.X; }
-                set
-                {
-                    paddingLeft.Size = new Vector2(value, 1);
-                    paddingRight.Size = new Vector2(value, 1);
-                }
-            }
-
-            public ToolbarButton()
-            {
-                Background = new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = new Color4(20, 20, 20, 140),
-                };
-
-                HoverBackground = new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Additive = true,
-                    Colour = new Color4(20, 20, 20, 0),
-                    Alpha = 0,
-                };
-
-                DrawableIcon = new TextAwesome()
-                {
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
-                };
-
-                DrawableText = new SpriteText
-                {
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
-                };
-
-                paddingLeft = new Container { RelativeSizeAxes = Axes.Y };
-                paddingRight = new Container { RelativeSizeAxes = Axes.Y };
-                paddingIcon = new Container
-                {
-                    Size = new Vector2(5, 0),
-                    Alpha = 0
-                };
-
-                Padding = 10;
-            }
-
-            protected override bool OnClick(InputState state)
-            {
-                Action?.Invoke();
-                return base.OnClick(state);
-            }
-
-            protected override bool OnHover(InputState state)
-            {
-                HoverBackground.FadeTo(0.4f, 200);
-                return base.OnHover(state);
-            }
-
-            protected override void OnHoverLost(InputState state)
-            {
-                HoverBackground.FadeTo(0, 200);
-                base.OnHoverLost(state);
-            }
-
-            public override void Load()
-            {
-                base.Load();
-
-                RelativeSizeAxes = Axes.Y;
-                Direction = FlowDirection.HorizontalOnly;
-
-                Children = new Drawable[]
-                {
-                    Background,
-                    HoverBackground,
-                    paddingLeft,
-                    DrawableIcon,
-                    paddingIcon,
-                    DrawableText,
-                    paddingRight,
-                };
-            }
-        }
     }
 }

osu.Game/Overlays/ToolbarButton.cs

@@ -0,0 +1,177 @@
+//Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
+//Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using System;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Drawables;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input;
+using osu.Game.Graphics;
+using OpenTK;
+using OpenTK.Graphics;
+
+namespace osu.Game.Overlays
+{
+    public class ToolbarButton : Container
+    {
+        public const float WIDTH = 60;
+
+        public FontAwesome Icon
+        {
+            get { return DrawableIcon.Icon; }
+            set { DrawableIcon.Icon = value; }
+        }
+
+        public string Text
+        {
+            get { return DrawableText.Text; }
+            set
+            {
+                DrawableText.Text = value;
+                paddingIcon.Alpha = string.IsNullOrEmpty(value) ? 0 : 1;
+            }
+        }
+
+        public string TooltipMain
+        {
+            get { return tooltip1.Text; }
+            set
+            {
+                tooltip1.Text = value;
+            }
+        }
+
+        public string TooltipSub
+        {
+            get { return tooltip2.Text; }
+            set
+            {
+                tooltip2.Text = value;
+            }
+        }
+
+        public Action Action;
+        protected TextAwesome DrawableIcon;
+        protected SpriteText DrawableText;
+        protected Box HoverBackground;
+        private Drawable paddingLeft;
+        private Drawable paddingRight;
+        private Drawable paddingIcon;
+        private FlowContainer tooltipContainer;
+        private SpriteText tooltip1;
+        private SpriteText tooltip2;
+
+        public new float Padding
+        {
+            get { return paddingLeft.Size.X; }
+            set
+            {
+                paddingLeft.Size = new Vector2(value, 1);
+                paddingRight.Size = new Vector2(value, 1);
+                tooltipContainer.Position = new Vector2(value, tooltipContainer.Position.Y);
+            }
+        }
+
+        public ToolbarButton()
+        {
+            HoverBackground = new Box
+            {
+                RelativeSizeAxes = Axes.Both,
+                Additive = true,
+                Colour = new Color4(60, 60, 60, 255),
+                Alpha = 0,
+            };
+
+            DrawableIcon = new TextAwesome
+            {
+                Anchor = Anchor.CentreLeft,
+                Origin = Anchor.CentreLeft,
+            };
+
+            DrawableText = new SpriteText
+            {
+                Anchor = Anchor.CentreLeft,
+                Origin = Anchor.CentreLeft,
+            };
+
+            tooltipContainer = new FlowContainer
+            {
+                Direction = FlowDirection.VerticalOnly,
+                Anchor = Anchor.BottomLeft,
+                Position = new Vector2(0, -5),
+                Alpha = 0,
+                Children = new[]
+                {
+                    tooltip1 = new SpriteText()
+                    {
+                        TextSize = 22,
+                    },
+                    tooltip2 = new SpriteText
+                    {
+                        TextSize = 15
+                    }
+                }
+            };
+
+            paddingLeft = new Container { RelativeSizeAxes = Axes.Y };
+            paddingRight = new Container { RelativeSizeAxes = Axes.Y };
+            paddingIcon = new Container
+            {
+                Size = new Vector2(5, 0),
+                Alpha = 0
+            };
+
+            Padding = 10;
+            RelativeSizeAxes = Axes.Y;
+            Size = new Vector2(WIDTH, 1);
+        }
+
+        public override void Load()
+        {
+            base.Load();
+
+            Children = new Drawable[]
+            {
+                    HoverBackground,
+                    new FlowContainer
+                    {
+                        Direction = FlowDirection.HorizontalOnly,
+                        Anchor = Anchor.TopCentre,
+                        Origin = Anchor.TopCentre,
+                        RelativeSizeAxes = Axes.Y,
+                        Children = new Drawable[]
+                        {
+                            paddingLeft,
+                            DrawableIcon,
+                            paddingIcon,
+                            DrawableText,
+                            paddingRight
+                        },
+                    },
+                    tooltipContainer
+            };
+        }
+
+        protected override bool OnClick(InputState state)
+        {
+            Action?.Invoke();
+            HoverBackground.FlashColour(Color4.White, 400);
+            return base.OnClick(state);
+        }
+
+        protected override bool OnHover(InputState state)
+        {
+            HoverBackground.FadeTo(0.4f, 200);
+            tooltipContainer.FadeIn(100);
+            return base.OnHover(state);
+        }
+
+        protected override void OnHoverLost(InputState state)
+        {
+            HoverBackground.FadeTo(0, 200);
+            tooltipContainer.FadeOut(100);
+            base.OnHoverLost(state);
+        }
+    }
+}

osu.Game/Overlays/ToolbarModeButton.cs

@@ -0,0 +1,51 @@
+//Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
+//Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Extensions;
+using osu.Game.GameModes.Play;
+using osu.Game.Graphics;
+using OpenTK.Graphics;
+
+namespace osu.Game.Overlays
+{
+    public class ToolbarModeButton : ToolbarButton
+    {
+        private PlayMode mode;
+        public PlayMode Mode
+        {
+            get { return mode; }
+            set
+            {
+                mode = value;
+                TooltipMain = mode.GetDescription();
+                TooltipSub = $"Play some {mode.GetDescription()}";
+                Icon = getModeIcon(mode);
+            }
+        }
+
+        public bool Active
+        {
+            set
+            {
+                //Background.Colour = value ? new Color4(100, 100, 100, 255) : new Color4(20, 20, 20, 255);
+            }
+        }
+
+        private FontAwesome getModeIcon(PlayMode mode)
+        {
+            switch (mode)
+            {
+                default: return FontAwesome.fa_osu_osu_o;
+                case PlayMode.Taiko: return FontAwesome.fa_osu_taiko_o;
+                case PlayMode.Catch: return FontAwesome.fa_osu_fruits_o;
+                case PlayMode.Mania: return FontAwesome.fa_osu_mania_o;
+            }
+        }
+
+        public override void Load()
+        {
+            base.Load();
+            DrawableIcon.TextSize *= 1.4f;
+        }
+    }
+}

osu.Game/Overlays/ToolbarModeSelector.cs

@@ -0,0 +1,105 @@
+//Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
+//Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using osu.Framework.Cached;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Drawables;
+using osu.Framework.Graphics.Transformations;
+using osu.Game.GameModes.Play;
+using OpenTK;
+using OpenTK.Graphics;
+
+namespace osu.Game.Overlays
+{
+    class ToolbarModeSelector : Container
+    {
+        const float padding = 10;
+
+        private FlowContainer modeButtons;
+        private Box modeButtonLine;
+        private ToolbarModeButton activeButton;
+
+        public Action<PlayMode> OnPlayModeChange;
+        
+
+        public ToolbarModeSelector()
+        {
+            RelativeSizeAxes = Axes.Y;
+        }
+
+        public override void Load()
+        {
+            base.Load();
+
+            Children = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = new Color4(20, 20, 20, 255)
+                },
+                modeButtons = new FlowContainer
+                {
+                    RelativeSizeAxes = Axes.Y,
+                    Direction = FlowDirection.HorizontalOnly,
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.TopCentre,
+                },
+                modeButtonLine = new Box
+                {
+                    RelativeSizeAxes = Axes.X,
+                    Size = new Vector2(0.3f, 3),
+                    Anchor = Anchor.BottomLeft,
+                    Origin = Anchor.TopCentre,
+                    Colour = Color4.White
+                }
+            };
+
+            foreach (PlayMode m in Enum.GetValues(typeof(PlayMode)))
+            {
+                var localMode = m;
+                modeButtons.Add(new ToolbarModeButton
+                {
+                    Mode = m,
+                    Action = delegate
+                    {
+                        SetGameMode(localMode);
+                        OnPlayModeChange?.Invoke(localMode);
+                    }
+                });
+            }
+
+            RelativeSizeAxes = Axes.Y;
+            Size = new Vector2(modeButtons.Children.Count() * ToolbarButton.WIDTH + padding * 2, 1);
+        }
+
+        public void SetGameMode(PlayMode mode)
+        {
+            foreach (ToolbarModeButton m in modeButtons.Children.Cast<ToolbarModeButton>())
+            {
+                bool isActive = m.Mode == mode;
+                m.Active = isActive;
+                if (isActive)
+                    activeButton = m;
+            }
+
+            activeMode.Invalidate();
+        }
+
+        Cached<Drawable> activeMode = new Cached<Drawable>();
+
+        protected override void UpdateLayout()
+        {
+            base.UpdateLayout();
+
+            if (!activeMode.EnsureValid())
+                activeMode.Refresh(() => modeButtonLine.MoveToX(activeButton.Position.X + activeButton.Size.X / 2 + padding, 200, EasingTypes.OutQuint));
+        }
+    }
+}

osu.Game/osu.Game.csproj

@@ -120,6 +120,9 @@
     <Compile Include="OsuGameBase.cs" />
     <Compile Include="Overlays\Options.cs" />
     <Compile Include="Overlays\Toolbar.cs" />
+    <Compile Include="Overlays\ToolbarButton.cs" />
+    <Compile Include="Overlays\ToolbarModeButton.cs" />
+    <Compile Include="Overlays\ToolbarModeSelector.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
     <Compile Include="Users\User.cs" />
   </ItemGroup>