Merge pull request #25567 from peppy/chat-drag-improvements

Add drag bar on chat overlay to better signal resize-ability
ppy · Nov 27, 2023 · d50aac8 · d50aac8
2 parents a6cf1e5 + 1388e49
commit d50aac8
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 18 deletions.
diff --git a/osu.Game.Tests/Visual/Online/TestSceneChatOverlay.cs b/osu.Game.Tests/Visual/Online/TestSceneChatOverlay.cs
@@ -180,11 +180,8 @@ public void TestChatHeight()
             });
             AddStep("Show overlay", () => chatOverlay.Show());
             AddAssert("Overlay uses config height", () => chatOverlay.Height == configChatHeight.Default);
-            AddStep("Click top bar", () =>
-            {
-                InputManager.MoveMouseTo(chatOverlayTopBar);
-                InputManager.PressButton(MouseButton.Left);
-            });
+            AddStep("Move mouse to drag bar", () => InputManager.MoveMouseTo(chatOverlayTopBar.DragBar));
+            AddStep("Click drag bar", () => InputManager.PressButton(MouseButton.Left));
             AddStep("Drag overlay to new height", () => InputManager.MoveMouseTo(chatOverlayTopBar, new Vector2(0, -300)));
             AddStep("Stop dragging", () => InputManager.ReleaseButton(MouseButton.Left));
             AddStep("Store new height", () => newHeight = chatOverlay.Height);

diff --git a/osu.Game/Overlays/Chat/ChatOverlayTopBar.cs b/osu.Game/Overlays/Chat/ChatOverlayTopBar.cs
@@ -1,8 +1,8 @@
 // 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;
 using osu.Framework.Allocation;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
@@ -13,25 +13,22 @@
 using osu.Game.Graphics.Sprites;
 using osu.Game.Resources.Localisation.Web;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays.Chat
 {
     public partial class ChatOverlayTopBar : Container
     {
-        private Box background = null!;
-
-        private Color4 backgroundColour;
+        public Drawable DragBar { get; private set; } = null!;
 
         [BackgroundDependencyLoader]
         private void load(OverlayColourProvider colourProvider, TextureStore textures)
         {
-            Children = new Drawable[]
+            Children = new[]
             {
-                background = new Box
+                new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = backgroundColour = colourProvider.Background3,
+                    Colour = colourProvider.Background3,
                 },
                 new GridContainer
                 {
@@ -50,7 +47,7 @@ private void load(OverlayColourProvider colourProvider, TextureStore textures)
                                 Anchor = Anchor.Centre,
                                 Origin = Anchor.Centre,
                                 Icon = HexaconsIcons.Social,
-                                Size = new Vector2(18),
+                                Size = new Vector2(24),
                             },
                             // Placeholder text
                             new OsuSpriteText
@@ -64,19 +61,92 @@ private void load(OverlayColourProvider colourProvider, TextureStore textures)
                         },
                     },
                 },
+                DragBar = new DragArea
+                {
+                    Alpha = RuntimeInfo.IsMobile ? 1 : 0,
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Colour = colourProvider.Background4,
+                }
             };
         }
 
         protected override bool OnHover(HoverEvent e)
         {
-            background.FadeColour(backgroundColour.Lighten(0.1f), 300, Easing.OutQuint);
+            if (!RuntimeInfo.IsMobile)
+                DragBar.FadeIn(100);
             return base.OnHover(e);
         }
 
         protected override void OnHoverLost(HoverLostEvent e)
         {
-            background.FadeColour(backgroundColour, 300, Easing.OutQuint);
+            if (!RuntimeInfo.IsMobile)
+                DragBar.FadeOut(100);
             base.OnHoverLost(e);
         }
+
+        private partial class DragArea : CompositeDrawable
+        {
+            private readonly Circle circle;
+
+            public DragArea()
+            {
+                AutoSizeAxes = Axes.Both;
+
+                InternalChildren = new Drawable[]
+                {
+                    circle = new Circle
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Size = new Vector2(150, 7),
+                        Margin = new MarginPadding(12),
+                    }
+                };
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                updateScale();
+                return base.OnHover(e);
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                updateScale();
+                base.OnHoverLost(e);
+            }
+
+            private bool dragging;
+
+            protected override bool OnMouseDown(MouseDownEvent e)
+            {
+                dragging = true;
+                updateScale();
+                return base.OnMouseDown(e);
+            }
+
+            protected override void OnMouseUp(MouseUpEvent e)
+            {
+                dragging = false;
+                updateScale();
+                base.OnMouseUp(e);
+            }
+
+            private void updateScale()
+            {
+                if (dragging || IsHovered)
+                    circle.FadeIn(100);
+                else
+                    circle.FadeTo(0.6f, 100);
+
+                if (dragging)
+                    circle.ScaleTo(1f, 400, Easing.OutQuint);
+                else if (IsHovered)
+                    circle.ScaleTo(1.05f, 400, Easing.OutElasticHalf);
+                else
+                    circle.ScaleTo(1f, 500, Easing.OutQuint);
+            }
+        }
     }
 }
diff --git a/osu.Game/Overlays/ChatOverlay.cs b/osu.Game/Overlays/ChatOverlay.cs
@@ -253,10 +253,14 @@ public void OnReleased(KeyBindingReleaseEvent<PlatformAction> e)
         {
         }
 
-        protected override bool OnDragStart(DragStartEvent e)
+        protected override bool OnMouseDown(MouseDownEvent e)
         {
-            isDraggingTopBar = topBar.IsHovered;
+            isDraggingTopBar = topBar.DragBar.IsHovered;
+            return base.OnMouseDown(e);
+        }
 
+        protected override bool OnDragStart(DragStartEvent e)
+        {
             if (!isDraggingTopBar)
                 return base.OnDragStart(e);