Merge pull request #13877 from bdach/osu-popover

Implement osu!-side popover

osu.Android.props

@@ -52,7 +52,7 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="ppy.osu.Game.Resources" Version="2021.706.0" />
-    <PackageReference Include="ppy.osu.Framework.Android" Version="2021.713.0" />
+    <PackageReference Include="ppy.osu.Framework.Android" Version="2021.714.0" />
   </ItemGroup>
   <ItemGroup Label="Transitive Dependencies">
     <!-- Realm needs to be directly referenced in all Xamarin projects, as it will not pull in its transitive dependencies otherwise. -->

osu.Game.Tests/Visual/UserInterface/TestSceneOsuPopover.cs

@@ -0,0 +1,103 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Cursor;
+using osu.Framework.Graphics.UserInterface;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Graphics.UserInterfaceV2;
+using osu.Game.Overlays;
+using osuTK;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    public class TestSceneOsuPopover : OsuGridTestScene
+    {
+        public TestSceneOsuPopover()
+            : base(1, 2)
+        {
+            Cell(0, 0).Child = new PopoverContainer
+            {
+                RelativeSizeAxes = Axes.Both,
+                Children = new Drawable[]
+                {
+                    new OsuSpriteText
+                    {
+                        Text = @"No OverlayColourProvider",
+                        Font = OsuFont.Default.With(size: 40)
+                    },
+                    new TriangleButtonWithPopover()
+                }
+            };
+
+            Cell(0, 1).Child = new ColourProvidingContainer(OverlayColourScheme.Orange)
+            {
+                RelativeSizeAxes = Axes.Both,
+                Child = new PopoverContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Children = new Drawable[]
+                    {
+                        new OsuSpriteText
+                        {
+                            Text = @"With OverlayColourProvider (orange)",
+                            Font = OsuFont.Default.With(size: 40)
+                        },
+                        new TriangleButtonWithPopover()
+                    }
+                }
+            };
+        }
+
+        private class TriangleButtonWithPopover : TriangleButton, IHasPopover
+        {
+            public TriangleButtonWithPopover()
+            {
+                Width = 100;
+                Height = 30;
+                Anchor = Anchor.Centre;
+                Origin = Anchor.Centre;
+                Text = @"open";
+                Action = this.ShowPopover;
+            }
+
+            public Popover GetPopover() => new OsuPopover
+            {
+                Child = new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Direction = FillDirection.Vertical,
+                    Spacing = new Vector2(10),
+                    Children = new Drawable[]
+                    {
+                        new OsuSpriteText
+                        {
+                            Text = @"sample text"
+                        },
+                        new OsuTextBox
+                        {
+                            Width = 150,
+                            Height = 30
+                        }
+                    }
+                }
+            };
+        }
+
+        private class ColourProvidingContainer : Container
+        {
+            [Cached]
+            private OverlayColourProvider provider { get; }
+
+            public ColourProvidingContainer(OverlayColourScheme colourScheme)
+            {
+                provider = new OverlayColourProvider(colourScheme);
+            }
+        }
+    }
+}

osu.Game/Graphics/UserInterfaceV2/OsuPopover.cs

@@ -0,0 +1,55 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using JetBrains.Annotations;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Effects;
+using osu.Framework.Graphics.UserInterface;
+using osu.Game.Overlays;
+using osuTK;
+
+namespace osu.Game.Graphics.UserInterfaceV2
+{
+    public class OsuPopover : Popover
+    {
+        private const float fade_duration = 250;
+        private const double scale_duration = 500;
+
+        public OsuPopover(bool withPadding = true)
+        {
+            Content.Padding = withPadding ? new MarginPadding(20) : new MarginPadding();
+
+            Body.Masking = true;
+            Body.CornerRadius = 10;
+            Body.Margin = new MarginPadding(10);
+            Body.EdgeEffect = new EdgeEffectParameters
+            {
+                Type = EdgeEffectType.Shadow,
+                Offset = new Vector2(0, 2),
+                Radius = 5,
+                Colour = Colour4.Black.Opacity(0.3f)
+            };
+        }
+
+        [BackgroundDependencyLoader(true)]
+        private void load([CanBeNull] OverlayColourProvider colourProvider, OsuColour colours)
+        {
+            Background.Colour = Arrow.Colour = colourProvider?.Background4 ?? colours.GreySeafoamDarker;
+        }
+
+        protected override Drawable CreateArrow() => Empty();
+
+        protected override void PopIn()
+        {
+            this.ScaleTo(1, scale_duration, Easing.OutElasticHalf);
+            this.FadeIn(fade_duration, Easing.OutQuint);
+        }
+
+        protected override void PopOut()
+        {
+            this.ScaleTo(0.7f, scale_duration, Easing.OutQuint);
+            this.FadeOut(fade_duration, Easing.OutQuint);
+        }
+    }
+}

osu.Game/osu.Game.csproj

@@ -36,7 +36,7 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Realm" Version="10.3.0" />
-    <PackageReference Include="ppy.osu.Framework" Version="2021.713.0" />
+    <PackageReference Include="ppy.osu.Framework" Version="2021.714.0" />
     <PackageReference Include="ppy.osu.Game.Resources" Version="2021.706.0" />
     <PackageReference Include="Sentry" Version="3.6.0" />
     <PackageReference Include="SharpCompress" Version="0.28.3" />

osu.iOS.props

@@ -70,7 +70,7 @@
     <Reference Include="System.Net.Http" />
   </ItemGroup>
   <ItemGroup Label="Package References">
-    <PackageReference Include="ppy.osu.Framework.iOS" Version="2021.713.0" />
+    <PackageReference Include="ppy.osu.Framework.iOS" Version="2021.714.0" />
     <PackageReference Include="ppy.osu.Game.Resources" Version="2021.706.0" />
   </ItemGroup>
   <!-- See https://github.com/dotnet/runtime/issues/35988 (can be removed after Xamarin uses net5.0 / net6.0) -->
@@ -93,7 +93,7 @@
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="2.2.6" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite.Core" Version="2.2.6" />
     <PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
-    <PackageReference Include="ppy.osu.Framework" Version="2021.713.0" />
+    <PackageReference Include="ppy.osu.Framework" Version="2021.714.0" />
     <PackageReference Include="SharpCompress" Version="0.28.3" />
     <PackageReference Include="NUnit" Version="3.13.2" />
     <PackageReference Include="SharpRaven" Version="2.4.0" />