Implement CommentsHeader component (#6457)

Implement CommentsHeader component

Co-authored-by: Dean Herbert <pe@ppy.sh>

osu.Game.Tests/Visual/Online/TestSceneCommentsHeader.cs

@@ -0,0 +1,39 @@
+// 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 System;
+using System.Collections.Generic;
+using NUnit.Framework;
+using osu.Framework.Bindables;
+using osu.Game.Overlays.Comments;
+
+namespace osu.Game.Tests.Visual.Online
+{
+    [TestFixture]
+    public class TestSceneCommentsHeader : OsuTestScene
+    {
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(CommentsHeader),
+            typeof(HeaderButton),
+            typeof(SortTabControl),
+        };
+
+        private readonly Bindable<CommentsSortCriteria> sort = new Bindable<CommentsSortCriteria>();
+        private readonly BindableBool showDeleted = new BindableBool();
+
+        public TestSceneCommentsHeader()
+        {
+            Add(new CommentsHeader
+            {
+                Sort = { BindTarget = sort },
+                ShowDeleted = { BindTarget = showDeleted }
+            });
+
+            AddStep("Trigger ShowDeleted", () => showDeleted.Value = !showDeleted.Value);
+            AddStep("Select old", () => sort.Value = CommentsSortCriteria.Old);
+            AddStep("Select new", () => sort.Value = CommentsSortCriteria.New);
+            AddStep("Select top", () => sort.Value = CommentsSortCriteria.Top);
+        }
+    }
+}

osu.Game/Overlays/Comments/CommentsHeader.cs

@@ -0,0 +1,128 @@
+// 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.Graphics.Containers;
+using osu.Framework.Graphics;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osu.Framework.Graphics.Sprites;
+using osuTK;
+using osu.Framework.Input.Events;
+
+namespace osu.Game.Overlays.Comments
+{
+    public class CommentsHeader : CompositeDrawable
+    {
+        private const int font_size = 14;
+
+        public readonly Bindable<CommentsSortCriteria> Sort = new Bindable<CommentsSortCriteria>();
+        public readonly BindableBool ShowDeleted = new BindableBool();
+
+        private readonly Box background;
+
+        public CommentsHeader()
+        {
+            RelativeSizeAxes = Axes.X;
+            Height = 40;
+
+            AddRangeInternal(new Drawable[]
+            {
+                background = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Padding = new MarginPadding { Horizontal = 50 },
+                    Children = new Drawable[]
+                    {
+                        new FillFlowContainer
+                        {
+                            AutoSizeAxes = Axes.Both,
+                            Direction = FillDirection.Horizontal,
+                            Spacing = new Vector2(10, 0),
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Children = new Drawable[]
+                            {
+                                new SpriteText
+                                {
+                                    Anchor = Anchor.CentreLeft,
+                                    Origin = Anchor.CentreLeft,
+                                    Font = OsuFont.GetFont(size: font_size),
+                                    Text = @"Sort by"
+                                },
+                                new SortTabControl
+                                {
+                                    Anchor = Anchor.CentreLeft,
+                                    Origin = Anchor.CentreLeft,
+                                    Current = Sort
+                                }
+                            }
+                        },
+                        new ShowDeletedButton
+                        {
+                            Anchor = Anchor.CentreRight,
+                            Origin = Anchor.CentreRight,
+                            Checked = { BindTarget = ShowDeleted }
+                        }
+                    }
+                }
+            });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            background.Colour = colours.Gray3;
+        }
+
+        private class ShowDeletedButton : HeaderButton
+        {
+            public readonly BindableBool Checked = new BindableBool();
+
+            private readonly SpriteIcon checkboxIcon;
+
+            public ShowDeletedButton()
+            {
+                Add(new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Direction = FillDirection.Horizontal,
+                    Spacing = new Vector2(5, 0),
+                    Children = new Drawable[]
+                    {
+                        checkboxIcon = new SpriteIcon
+                        {
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Size = new Vector2(10),
+                        },
+                        new SpriteText
+                        {
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Font = OsuFont.GetFont(size: font_size),
+                            Text = @"Show deleted"
+                        }
+                    },
+                });
+            }
+
+            protected override void LoadComplete()
+            {
+                Checked.BindValueChanged(isChecked => checkboxIcon.Icon = isChecked.NewValue ? FontAwesome.Solid.CheckSquare : FontAwesome.Regular.Square, true);
+                base.LoadComplete();
+            }
+
+            protected override bool OnClick(ClickEvent e)
+            {
+                Checked.Value = !Checked.Value;
+                return true;
+            }
+        }
+    }
+}

osu.Game/Overlays/Comments/HeaderButton.cs

@@ -0,0 +1,69 @@
+// 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.Graphics.Containers;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osu.Framework.Input.Events;
+using osu.Game.Graphics.UserInterface;
+
+namespace osu.Game.Overlays.Comments
+{
+    public class HeaderButton : Container
+    {
+        private const int transition_duration = 200;
+
+        protected override Container<Drawable> Content => content;
+
+        private readonly Box background;
+        private readonly Container content;
+
+        public HeaderButton()
+        {
+            AutoSizeAxes = Axes.X;
+            Height = 20;
+            Masking = true;
+            CornerRadius = 3;
+            AddRangeInternal(new Drawable[]
+            {
+                background = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Alpha = 0,
+                },
+                content = new Container
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Margin = new MarginPadding { Horizontal = 10 }
+                },
+                new HoverClickSounds(),
+            });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            background.Colour = colours.Gray4;
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            ShowBackground();
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            base.OnHoverLost(e);
+            HideBackground();
+        }
+
+        protected void ShowBackground() => background.FadeIn(transition_duration, Easing.OutQuint);
+
+        protected void HideBackground() => background.FadeOut(transition_duration, Easing.OutQuint);
+    }
+}

osu.Game/Overlays/Comments/SortTabControl.cs

@@ -0,0 +1,109 @@
+// 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.Graphics.Containers;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+using osuTK;
+using osu.Game.Graphics.UserInterface;
+using osu.Framework.Input.Events;
+using osu.Framework.Bindables;
+using osu.Framework.Allocation;
+using osuTK.Graphics;
+
+namespace osu.Game.Overlays.Comments
+{
+    public class SortTabControl : OsuTabControl<CommentsSortCriteria>
+    {
+        protected override Dropdown<CommentsSortCriteria> CreateDropdown() => null;
+
+        protected override TabItem<CommentsSortCriteria> CreateTabItem(CommentsSortCriteria value) => new SortTabItem(value);
+
+        protected override TabFillFlowContainer CreateTabFlow() => new TabFillFlowContainer
+        {
+            AutoSizeAxes = Axes.Both,
+            Direction = FillDirection.Horizontal,
+            Spacing = new Vector2(5, 0),
+        };
+
+        public SortTabControl()
+        {
+            AutoSizeAxes = Axes.Both;
+        }
+
+        private class SortTabItem : TabItem<CommentsSortCriteria>
+        {
+            public SortTabItem(CommentsSortCriteria value)
+                : base(value)
+            {
+                AutoSizeAxes = Axes.Both;
+                Child = new TabButton(value) { Active = { BindTarget = Active } };
+            }
+
+            protected override void OnActivated()
+            {
+            }
+
+            protected override void OnDeactivated()
+            {
+            }
+
+            private class TabButton : HeaderButton
+            {
+                public readonly BindableBool Active = new BindableBool();
+
+                [Resolved]
+                private OsuColour colours { get; set; }
+
+                private readonly SpriteText text;
+
+                public TabButton(CommentsSortCriteria value)
+                {
+                    Add(text = new SpriteText
+                    {
+                        Font = OsuFont.GetFont(size: 14),
+                        Text = value.ToString()
+                    });
+                }
+
+                protected override void LoadComplete()
+                {
+                    base.LoadComplete();
+
+                    Active.BindValueChanged(active =>
+                    {
+                        updateBackgroundState();
+
+                        text.Font = text.Font.With(weight: active.NewValue ? FontWeight.Bold : FontWeight.Medium);
+                        text.Colour = active.NewValue ? colours.BlueLighter : Color4.White;
+                    }, true);
+                }
+
+                protected override bool OnHover(HoverEvent e)
+                {
+                    updateBackgroundState();
+                    return true;
+                }
+
+                protected override void OnHoverLost(HoverLostEvent e) => updateBackgroundState();
+
+                private void updateBackgroundState()
+                {
+                    if (Active.Value || IsHovered)
+                        ShowBackground();
+                    else
+                        HideBackground();
+                }
+            }
+        }
+    }
+
+    public enum CommentsSortCriteria
+    {
+        New,
+        Old,
+        Top
+    }
+}