Merge pull request #2612 from jorolf/open-external

Add icon next to beatmap title/username to open in browser
ppy · May 25, 2018 · b474dca · b474dca
2 parents 78ca111 + cc69f07
commit b474dca
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 28 deletions.
diff --git a/osu.Game.Tests/Visual/TestCaseExternalLinkButton.cs b/osu.Game.Tests/Visual/TestCaseExternalLinkButton.cs
@@ -0,0 +1,23 @@
+// Copyright (c) 2007-2018 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 osu.Game.Graphics.UserInterface;
+using OpenTK;
+
+namespace osu.Game.Tests.Visual
+{
+    public class TestCaseExternalLinkButton : OsuTestCase
+    {
+        public override IReadOnlyList<Type> RequiredTypes => new[] { typeof(ExternalLinkButton) };
+
+        public TestCaseExternalLinkButton()
+        {
+            Child = new ExternalLinkButton("https://osu.ppy.sh/home")
+            {
+                Size = new Vector2(50)
+            };
+        }
+    }
+}
diff --git a/osu.Game/Graphics/UserInterface/ExternalLinkButton.cs b/osu.Game/Graphics/UserInterface/ExternalLinkButton.cs
@@ -0,0 +1,63 @@
+// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using System.Diagnostics;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Cursor;
+using osu.Framework.Input;
+using OpenTK;
+using OpenTK.Graphics;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    public class ExternalLinkButton : CompositeDrawable, IHasTooltip
+    {
+        public string Link { get; set; }
+
+        private Color4 hoverColour;
+
+        public ExternalLinkButton(string link = null)
+        {
+            Link = link;
+            Size = new Vector2(12);
+            InternalChild = new SpriteIcon
+            {
+                Icon = FontAwesome.fa_external_link,
+                RelativeSizeAxes = Axes.Both
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            hoverColour = colours.Yellow;
+        }
+
+        protected override bool OnHover(InputState state)
+        {
+            InternalChild.FadeColour(hoverColour, 500, Easing.OutQuint);
+            return base.OnHover(state);
+        }
+
+        protected override void OnHoverLost(InputState state)
+        {
+            InternalChild.FadeColour(Color4.White, 500, Easing.OutQuint);
+            base.OnHoverLost(state);
+        }
+
+        protected override bool OnClick(InputState state)
+        {
+            if(Link != null)
+                Process.Start(new ProcessStartInfo
+                {
+                    FileName = Link,
+                    UseShellExecute = true //see https://github.com/dotnet/corefx/issues/10361
+                });
+            return true;
+        }
+
+        public string TooltipText => "View in browser";
+    }
+}
diff --git a/osu.Game/Overlays/BeatmapSet/Header.cs b/osu.Game/Overlays/BeatmapSet/Header.cs
@@ -11,6 +11,7 @@
 using osu.Game.Beatmaps.Drawables;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays.BeatmapSet.Buttons;
 using OpenTK;
 using OpenTK.Graphics;
@@ -93,6 +94,7 @@ private void updateDisplay()
 
         public Header()
         {
+            ExternalLinkButton externalLink;
             RelativeSizeAxes = Axes.X;
             Height = 400;
             Masking = true;
@@ -160,10 +162,24 @@ public Header()
                                         Height = 113,
                                         Child = Picker = new BeatmapPicker(),
                                     },
-                                    title = new OsuSpriteText
+                                    new FillFlowContainer
                                     {
-                                        Font = @"Exo2.0-BoldItalic",
-                                        TextSize = 37,
+                                        Direction = FillDirection.Horizontal,
+                                        AutoSizeAxes = Axes.Both,
+                                        Children = new Drawable[]
+                                        {
+                                            title = new OsuSpriteText
+                                            {
+                                                Font = @"Exo2.0-BoldItalic",
+                                                TextSize = 37,
+                                            },
+                                            externalLink = new ExternalLinkButton
+                                            {
+                                                Anchor = Anchor.BottomLeft,
+                                                Origin = Anchor.BottomLeft,
+                                                Margin = new MarginPadding { Left = 3, Bottom = 4 }, //To better lineup with the font
+                                            },
+                                        }
                                     },
                                     artist = new OsuSpriteText
                                     {
@@ -247,6 +263,7 @@ public Header()
             };
 
             Picker.Beatmap.ValueChanged += b => Details.Beatmap = b;
+            Picker.Beatmap.ValueChanged += b => externalLink.Link = $@"https://osu.ppy.sh/beatmapsets/{BeatmapSet?.OnlineBeatmapSetID}#{b?.Ruleset.ShortName}/{b?.OnlineBeatmapID}";
         }
 
         [BackgroundDependencyLoader]

diff --git a/osu.Game/Overlays/Profile/ProfileHeader.cs b/osu.Game/Overlays/Profile/ProfileHeader.cs
@@ -2,21 +2,20 @@
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
 using System;
-using System.Diagnostics;
 using OpenTK;
 using OpenTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Colour;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Cursor;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.Textures;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays.Profile.Header;
 using osu.Game.Users;
 
@@ -105,11 +104,28 @@ public ProfileHeader(User user)
                                             Y = -75,
                                             Size = new Vector2(25, 25)
                                         },
-                                        new ProfileLink(user)
+                                        new FillFlowContainer
                                         {
+                                            Direction = FillDirection.Horizontal,
+                                            AutoSizeAxes = Axes.Both,
                                             Anchor = Anchor.BottomLeft,
                                             Origin = Anchor.BottomLeft,
                                             Y = -48,
+                                            Children = new Drawable[]
+                                            {
+                                                new OsuSpriteText
+                                                {
+                                                    Text = user.Username,
+                                                    Font = @"Exo2.0-RegularItalic",
+                                                    TextSize = 30,
+                                                },
+                                                new ExternalLinkButton($@"https://osu.ppy.sh/users/{user.Id}")
+                                                {
+                                                    Anchor = Anchor.BottomLeft,
+                                                    Origin = Anchor.BottomLeft,
+                                                    Margin = new MarginPadding { Left = 3, Bottom = 3 }, //To better lineup with the font
+                                                },
+                                            }
                                         },
                                         countryFlag = new DrawableFlag(user.Country)
                                         {
@@ -455,28 +471,6 @@ private void tryAddInfoRightLine(FontAwesome icon, string str, string url = null
             infoTextRight.NewLine();
         }
 
-        private class ProfileLink : OsuHoverContainer, IHasTooltip
-        {
-            public string TooltipText => "View Profile in Browser";
-
-            public override bool HandleMouseInput => true;
-
-            public ProfileLink(User user)
-            {
-                Action = () => Process.Start($@"https://osu.ppy.sh/users/{user.Id}");
-
-                AutoSizeAxes = Axes.Both;
-
-                Child = new OsuSpriteText
-                {
-                    Text = user.Username,
-                    Font = @"Exo2.0-RegularItalic",
-                    TextSize = 30,
-                };
-            }
-        }
-
-
         private class GradeBadge : Container
         {
             private const float width = 50;