Merge pull request #653 from Jorolf/tooltips

Tooltips

osu-framework

@@ -1 +1 @@
-Subproject commit ccf0ff40d1261ad328d0182467a1f0c1a858b099
+Subproject commit e24091cf7f5bf25602306c11146326079f2a98b0

osu.Desktop.VisualTests/Tests/TestCaseTooltip.cs

@@ -0,0 +1,92 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Testing;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osu.Framework.Configuration;
+using OpenTK;
+using osu.Game.Graphics;
+
+namespace osu.Desktop.VisualTests.Tests
+{
+    internal class TestCaseTooltip : TestCase
+    {
+        public override string Description => "tests tooltips on various elements";
+
+        public override void Reset()
+        {
+            base.Reset();
+            OsuSliderBar<int> slider;
+            OsuSliderBar<double> sliderDouble;
+
+            const float width = 400;
+
+            Children = new Drawable[]
+            {
+                new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Direction = FillDirection.Vertical,
+                    Spacing = new Vector2(0, 10),
+                    Children = new Drawable[]
+                    {
+                        new TooltipTextContainer("text with a tooltip"),
+                        new TooltipTextContainer("more text with another tooltip"),
+                        new TooltipTextbox
+                        {
+                            Text = "a textbox with a tooltip",
+                            Size = new Vector2(width,30),
+                        },
+                        slider = new OsuSliderBar<int>
+                        {
+                            Width = width,
+                        },
+                        sliderDouble = new OsuSliderBar<double>
+                        {
+                            Width = width,
+                        },
+                    },
+                },
+            };
+
+            slider.Current.BindTo(new BindableInt(5)
+            {
+                MaxValue = 10,
+                MinValue = 0
+            });
+
+            sliderDouble.Current.BindTo(new BindableDouble(0.5)
+            {
+                MaxValue = 1,
+                MinValue = 0
+            });
+        }
+
+        private class TooltipTextContainer : Container, IHasTooltip
+        {
+            private readonly OsuSpriteText text;
+
+            public string TooltipText => text.Text;
+
+            public TooltipTextContainer(string tooltipText)
+            {
+                AutoSizeAxes = Axes.Both;
+                Children = new[]
+                {
+                    text = new OsuSpriteText
+                    {
+                        Text = tooltipText,
+                    }
+                };
+            }
+        }
+
+        private class TooltipTextbox : OsuTextBox, IHasTooltip
+        {
+            public string TooltipText => Text;
+        }
+    }
+}

osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj

@@ -205,6 +205,7 @@
     <Compile Include="Tests\TestCaseTaikoPlayfield.cs" />
     <Compile Include="Tests\TestCaseTextAwesome.cs" />
     <Compile Include="Tests\TestCasePlaySongSelect.cs" />
+    <Compile Include="Tests\TestCaseTooltip.cs" />
     <Compile Include="Tests\TestCaseTwoLayerButton.cs" />
     <Compile Include="VisualTestGame.cs" />
     <Compile Include="Platform\TestStorage.cs" />

osu.Game/Graphics/Cursor/MenuCursor.cs

@@ -98,7 +98,7 @@ namespace osu.Game.Graphics.Cursor
 
             public Cursor()
             {
-                Size = new Vector2(42);
+                AutoSizeAxes = Axes.Both;
             }
 
             [BackgroundDependencyLoader]

osu.Game/Graphics/Cursor/TooltipContainer.cs

@@ -0,0 +1,158 @@
+// 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.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Cursor;
+using osu.Framework.Graphics.Primitives;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input;
+using osu.Framework.Threading;
+using osu.Game.Graphics.Sprites;
+using System.Linq;
+
+namespace osu.Game.Graphics.Cursor
+{
+    public class TooltipContainer : Container
+    {
+        private readonly CursorContainer cursor;
+        private readonly Tooltip tooltip;
+
+        private ScheduledDelegate findTooltipTask;
+        private UserInputManager inputManager;
+
+        private const int default_appear_delay = 220;
+
+        private IHasTooltip currentlyDisplayed;
+
+        public TooltipContainer(CursorContainer cursor)
+        {
+            this.cursor = cursor;
+            AlwaysPresent = true;
+            RelativeSizeAxes = Axes.Both;
+            Add(tooltip = new Tooltip { Alpha = 0 });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(UserInputManager input)
+        {
+            inputManager = input;
+        }
+
+        protected override void Update()
+        {
+            if (tooltip.IsPresent)
+            {
+                if (currentlyDisplayed != null)
+                    tooltip.TooltipText = currentlyDisplayed.TooltipText;
+
+                //update the position of the displayed tooltip.
+                tooltip.Position = ToLocalSpace(cursor.ActiveCursor.ScreenSpaceDrawQuad.Centre) + new Vector2(10);
+            }
+        }
+
+        protected override bool OnMouseUp(InputState state, MouseUpEventArgs args)
+        {
+            updateTooltipState(state);
+            return base.OnMouseUp(state, args);
+        }
+
+        protected override bool OnMouseMove(InputState state)
+        {
+            updateTooltipState(state);
+            return base.OnMouseMove(state);
+        }
+
+        private void updateTooltipState(InputState state)
+        {
+            if (currentlyDisplayed?.Hovering != true)
+            {
+                if (currentlyDisplayed != null && !state.Mouse.HasMainButtonPressed)
+                {
+                    tooltip.Delay(150);
+                    tooltip.FadeOut(500, EasingTypes.OutQuint);
+                    currentlyDisplayed = null;
+                }
+
+                findTooltipTask?.Cancel();
+                findTooltipTask = Scheduler.AddDelayed(delegate
+                {
+                    var tooltipTarget = inputManager.HoveredDrawables.OfType<IHasTooltip>().FirstOrDefault();
+
+                    if (tooltipTarget == null) return;
+
+                    tooltip.TooltipText = tooltipTarget.TooltipText;
+                    tooltip.FadeIn(500, EasingTypes.OutQuint);
+
+                    currentlyDisplayed = tooltipTarget;
+                }, (1 - tooltip.Alpha) * default_appear_delay);
+            }
+        }
+
+        public class Tooltip : Container
+        {
+            private readonly Box background;
+            private readonly OsuSpriteText text;
+
+            public string TooltipText
+            {
+                set
+                {
+                    if (value == text.Text) return;
+
+                    text.Text = value;
+                    if (Alpha > 0)
+                    {
+                        AutoSizeDuration = 250;
+                        background.FlashColour(OsuColour.Gray(0.4f), 1000, EasingTypes.OutQuint);
+                    }
+                    else
+                        AutoSizeDuration = 0;
+                }
+            }
+
+            public override bool HandleInput => false;
+
+            private const float text_size = 16;
+
+            public Tooltip()
+            {
+                AutoSizeEasing = EasingTypes.OutQuint;
+                AutoSizeAxes = Axes.Both;
+
+                CornerRadius = 5;
+                Masking = true;
+                EdgeEffect = new EdgeEffect
+                {
+                    Type = EdgeEffectType.Shadow,
+                    Colour = Color4.Black.Opacity(40),
+                    Radius = 5,
+                };
+                Children = new Drawable[]
+                {
+                    background = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Alpha = 0.9f,
+                    },
+                    text = new OsuSpriteText
+                    {
+                        TextSize = text_size,
+                        Padding = new MarginPadding(5),
+                        Font = @"Exo2.0-Regular",
+                    }
+                };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colour)
+            {
+                background.Colour = colour.Gray3;
+            }
+        }
+    }
+}

osu.Game/Graphics/IHasTooltip.cs

@@ -0,0 +1,15 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Graphics;
+
+namespace osu.Game.Graphics
+{
+    public interface IHasTooltip : IDrawable
+    {
+        /// <summary>
+        /// Tooltip that shows when hovering the drawable
+        /// </summary>
+        string TooltipText { get; }
+    }
+}

osu.Game/Graphics/UserInterface/OsuSliderBar.cs

@@ -5,6 +5,7 @@ using OpenTK;
 using osu.Framework.Allocation;
 using osu.Framework.Audio;
 using osu.Framework.Audio.Sample;
+using osu.Framework.Configuration;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.UserInterface;
@@ -12,7 +13,7 @@ using osu.Framework.Input;
 
 namespace osu.Game.Graphics.UserInterface
 {
-    public class OsuSliderBar<T> : SliderBar<T> where T : struct
+    public class OsuSliderBar<T> : SliderBar<T>, IHasTooltip where T : struct
     {
         private SampleChannel sample;
         private double lastSampleTime;
@@ -22,6 +23,26 @@ namespace osu.Game.Graphics.UserInterface
         private readonly Box leftBox;
         private readonly Box rightBox;
 
+        public string TooltipText
+        {
+            get
+            {
+                var bindableDouble = CurrentNumber as BindableNumber<double>;
+                if (bindableDouble != null)
+                {
+                    if (bindableDouble.MaxValue == 1 && bindableDouble.MinValue == 0)
+                        return bindableDouble.Value.ToString(@"P0");
+                    return bindableDouble.Value.ToString(@"n1");
+                }
+
+                var bindableInt = CurrentNumber as BindableNumber<int>;
+                if (bindableInt != null)
+                    return bindableInt.Value.ToString(@"n0");
+
+                return Current.Value.ToString();
+            }
+        }
+
         public OsuSliderBar()
         {
             Height = 12;

osu.Game/OsuGameBase.cs

@@ -145,9 +145,10 @@ namespace osu.Game
 
             AddInternal(ratioContainer = new RatioAdjust
             {
-                Children = new[]
+                Children = new Drawable[]
                 {
-                    Cursor = new MenuCursor { Depth = float.MinValue }
+                    Cursor = new MenuCursor { Depth = float.MinValue },
+                    new TooltipContainer(Cursor) { Depth = float.MinValue }
                 }
             });
         }

osu.Game/osu.Game.csproj

@@ -88,6 +88,7 @@
     <Compile Include="Graphics\Cursor\CursorTrail.cs" />
     <Compile Include="Graphics\Cursor\GameplayCursor.cs" />
     <Compile Include="Graphics\IHasAccentColour.cs" />
+    <Compile Include="Graphics\IHasTooltip.cs" />
     <Compile Include="Graphics\Sprites\OsuSpriteText.cs" />
     <Compile Include="Graphics\Transforms\TransformAccent.cs" />
     <Compile Include="Graphics\UserInterface\BackButton.cs" />
@@ -100,6 +101,7 @@
     <Compile Include="Graphics\UserInterface\OsuTextBox.cs" />
     <Compile Include="Graphics\UserInterface\SimpleComboCounter.cs" />
     <Compile Include="Graphics\UserInterface\TwoLayerButton.cs" />
+    <Compile Include="Graphics\Cursor\TooltipContainer.cs" />
     <Compile Include="Input\Handlers\ReplayInputHandler.cs" />
     <Compile Include="IO\Legacy\ILegacySerializable.cs" />
     <Compile Include="IO\Legacy\SerializationReader.cs" />