Implement HeaderButton component

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

@@ -19,6 +19,7 @@ namespace osu.Game.Tests.Visual.Online
             typeof(CommentsContainer),
             typeof(CommentsHeader),
             typeof(DrawableComment),
+            typeof(HeaderButton),
         };
 
         protected override bool UseOnlineAPI => true;

osu.Game/Overlays/Comments/CommentsHeader.cs

@@ -10,6 +10,7 @@ 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
 {
@@ -18,8 +19,10 @@ namespace osu.Game.Overlays.Comments
         private const int height = 40;
         private const int spacing = 10;
         private const int padding = 50;
+        private const int text_size = 14;
 
         public readonly Bindable<SortCommentsBy> Sort = new Bindable<SortCommentsBy>();
+        public readonly BindableBool ShowDeleted = new BindableBool();
 
         private readonly Box background;
 
@@ -50,10 +53,16 @@ namespace osu.Game.Overlays.Comments
                             {
                                 new SpriteText
                                 {
-                                    Font = OsuFont.GetFont(size: 14),
+                                    Font = OsuFont.GetFont(size: text_size),
                                     Text = @"Sort by"
                                 }
                             }
+                        },
+                        new ShowDeletedButton
+                        {
+                            Anchor = Anchor.CentreRight,
+                            Origin = Anchor.CentreRight,
+                            Checked = { BindTarget = ShowDeleted }
                         }
                     }
                 }
@@ -65,5 +74,57 @@ namespace osu.Game.Overlays.Comments
         {
             background.Colour = colours.Gray4;
         }
+
+        private class ShowDeletedButton : HeaderButton
+        {
+            private const int spacing = 5;
+
+            public readonly BindableBool Checked = new BindableBool();
+
+            private readonly SpriteIcon checkboxIcon;
+
+            public ShowDeletedButton()
+            {
+                Add(new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Direction = FillDirection.Horizontal,
+                    Spacing = new Vector2(spacing, 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: text_size),
+                            Text = @"Show deleted"
+                        }
+                    },
+                });
+            }
+
+            protected override void LoadComplete()
+            {
+                Checked.BindValueChanged(onCheckedChanged, true);
+                base.LoadComplete();
+            }
+
+            private void onCheckedChanged(ValueChangedEvent<bool> isChecked)
+            {
+                checkboxIcon.Icon = isChecked.NewValue ? FontAwesome.Solid.CheckSquare : FontAwesome.Regular.Square;
+            }
+
+            protected override bool OnClick(ClickEvent e)
+            {
+                Checked.Value = !Checked.Value;
+                return base.OnClick(e);
+            }
+        }
     }
 }

osu.Game/Overlays/Comments/HeaderButton.cs

@@ -0,0 +1,68 @@
+// 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 height = 20;
+        private const int corner_radius = 3;
+        private const int margin = 10;
+        private const int duration = 200;
+
+        protected override Container<Drawable> Content => content;
+
+        private readonly Box background;
+        private readonly Container content;
+
+        public HeaderButton()
+        {
+            AutoSizeAxes = Axes.X;
+            Height = height;
+            Masking = true;
+            CornerRadius = corner_radius;
+            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 = margin }
+                },
+                new HoverClickSounds(),
+            });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            background.Colour = colours.Gray6;
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            background.FadeIn(duration, Easing.OutQuint);
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            base.OnHoverLost(e);
+            background.FadeOut(duration, Easing.OutQuint);
+        }
+    }
+}