Implement MonthPanel component

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

@@ -0,0 +1,80 @@
+// 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 NUnit.Framework;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Online.API.Requests.Responses;
+using osu.Game.Overlays;
+using osu.Game.Overlays.News.Sidebar;
+
+namespace osu.Game.Tests.Visual.Online
+{
+    public class TestSceneNewsMonthPanel : OsuTestScene
+    {
+        [Cached]
+        private readonly OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
+
+        [Test]
+        public void CreateClosedMonthPanel()
+        {
+            AddStep("Create", () => Child = new Container
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.TopCentre,
+                AutoSizeAxes = Axes.Both,
+                Children = new Drawable[]
+                {
+                    new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = colourProvider.Background2,
+                    },
+                    new MonthPanel(DateTime.Now, posts),
+                }
+            });
+        }
+
+        [Test]
+        public void CreateOpenMonthPanel()
+        {
+            AddStep("Create", () => Child = new Container
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.TopCentre,
+                AutoSizeAxes = Axes.Both,
+                Children = new Drawable[]
+                {
+                    new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = colourProvider.Background2,
+                    },
+                    new MonthPanel(DateTime.Now, posts)
+                    {
+                        IsOpen = { Value = true }
+                    },
+                }
+            });
+        }
+
+        private static APINewsPost[] posts => new[]
+        {
+            new APINewsPost
+            {
+                Title = "Short title"
+            },
+            new APINewsPost
+            {
+                Title = "Oh boy that's a long post title I wonder if it will break anything"
+            },
+            new APINewsPost
+            {
+                Title = "Medium title, nothing to see here"
+            }
+        };
+    }
+}

osu.Game/Overlays/News/Sidebar/MonthPanel.cs

@@ -0,0 +1,155 @@
+// 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 osu.Framework.Bindables;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics;
+using osu.Game.Online.API.Requests.Responses;
+using osu.Game.Graphics.Containers;
+using osuTK;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics;
+using System.Linq;
+using System.Collections.Generic;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics.Sprites;
+
+namespace osu.Game.Overlays.News.Sidebar
+{
+    public class MonthPanel : CompositeDrawable
+    {
+        public readonly BindableBool IsOpen = new BindableBool();
+
+        private readonly FillFlowContainer postsFlow;
+
+        public MonthPanel(DateTime date, APINewsPost[] posts)
+        {
+            Width = 160;
+            AutoSizeDuration = 250;
+            AutoSizeEasing = Easing.OutQuint;
+            InternalChild = new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Vertical,
+                Spacing = new Vector2(0, 5),
+                Children = new Drawable[]
+                {
+                    new DropdownButton(date)
+                    {
+                        IsOpen = { BindTarget = IsOpen }
+                    },
+                    postsFlow = new FillFlowContainer
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Direction = FillDirection.Vertical,
+                        Spacing = new Vector2(0, 5),
+                        Children = posts.Select(p => new PostButton(p)).ToArray()
+                    }
+                }
+            };
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            IsOpen.BindValueChanged(open =>
+            {
+                ClearTransforms();
+
+                if (open.NewValue)
+                {
+                    AutoSizeAxes = Axes.Y;
+                    postsFlow.FadeIn(250, Easing.OutQuint);
+                }
+                else
+                {
+                    AutoSizeAxes = Axes.None;
+                    this.ResizeHeightTo(15, 250, Easing.OutQuint);
+
+                    postsFlow.FadeOut(250, Easing.OutQuint);
+                }
+            }, true);
+
+            // First state change should be instant.
+            FinishTransforms();
+            postsFlow.FinishTransforms();
+        }
+
+        private class DropdownButton : OsuHoverContainer
+        {
+            public readonly BindableBool IsOpen = new BindableBool();
+
+            protected override IEnumerable<Drawable> EffectTargets => null;
+
+            private readonly SpriteIcon icon;
+
+            public DropdownButton(DateTime date)
+            {
+                Size = new Vector2(160, 15);
+                Action = IsOpen.Toggle;
+                Children = new Drawable[]
+                {
+                    new OsuSpriteText
+                    {
+                        Anchor = Anchor.CentreLeft,
+                        Origin = Anchor.CentreLeft,
+                        Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
+                        Text = date.ToString("MMM yyyy")
+                    },
+                    icon = new SpriteIcon
+                    {
+                        Anchor = Anchor.CentreRight,
+                        Origin = Anchor.CentreRight,
+                        Size = new Vector2(10),
+                        Icon = FontAwesome.Solid.ChevronDown
+                    }
+                };
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                IsOpen.BindValueChanged(open =>
+                {
+                    icon.Scale = new Vector2(1, open.NewValue ? -1 : 1);
+                }, true);
+            }
+        }
+
+        private class PostButton : OsuHoverContainer
+        {
+            protected override IEnumerable<Drawable> EffectTargets => new[] { text };
+
+            private readonly APINewsPost post;
+            private readonly TextFlowContainer text;
+
+            public PostButton(APINewsPost post)
+            {
+                this.post = post;
+
+                RelativeSizeAxes = Axes.X;
+                AutoSizeAxes = Axes.Y;
+
+                Child = text = new TextFlowContainer(t => t.Font = OsuFont.GetFont(size: 12))
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Text = post.Title
+                };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                IdleColour = colourProvider.Light2;
+                HoverColour = colourProvider.Light1;
+                Action = () => { }; // TODO
+            }
+        }
+    }
+}