Implement HomeNewsGroupPanel

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

@@ -8,6 +8,8 @@ using osu.Framework.Allocation;
 using osu.Game.Overlays;
 using System;
 using osu.Game.Overlays.Dashboard.Home.News;
+using osuTK;
+using System.Collections.Generic;
 
 namespace osu.Game.Tests.Visual.Online
 {
@@ -18,20 +20,40 @@ namespace osu.Game.Tests.Visual.Online
 
         public TestSceneHomeNewsPanel()
         {
-            Add(new Container
+            Add(new FillFlowContainer
             {
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,
                 AutoSizeAxes = Axes.Y,
                 Width = 500,
-                Child = new HomeNewsPanel(new APINewsPost
+                Direction = FillDirection.Vertical,
+                Spacing = new Vector2(0, 5),
+                Children = new Drawable[]
+                {
+                    new HomeNewsPanel(new APINewsPost
                     {
                         Title = "This post has an image which starts with \"/\" and has many authors!",
                         Preview = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                         FirstImage = "/help/wiki/shared/news/banners/monthly-beatmapping-contest.png",
                         PublishedAt = DateTimeOffset.Now,
                         Slug = "2020-07-16-summer-theme-park-2020-voting-open"
+                    }),
+                    new HomeNewsGroupPanel(new List<APINewsPost>
+                    {
+                        new APINewsPost
+                        {
+                            Title = "Title 1",
+                            Slug = "2020-07-16-summer-theme-park-2020-voting-open",
+                            PublishedAt = DateTimeOffset.Now,
+                        },
+                        new APINewsPost
+                        {
+                            Title = "Title of this post is Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                            Slug = "2020-07-16-summer-theme-park-2020-voting-open",
+                            PublishedAt = DateTimeOffset.Now,
+                        }
                     })
+                }
             });
         }
     }

osu.Game/Overlays/Dashboard/Home/HomePanel.cs

@@ -16,9 +16,6 @@ namespace osu.Game.Overlays.Dashboard.Home
     {
         protected override Container<Drawable> Content => content;
 
-        [Resolved]
-        protected OverlayColourProvider ColourProvider { get; private set; }
-
         private readonly Container content;
         private readonly Box background;
 
@@ -50,9 +47,9 @@ namespace osu.Game.Overlays.Dashboard.Home
         }
 
         [BackgroundDependencyLoader]
-        private void load()
+        private void load(OverlayColourProvider colourProvider)
         {
-            background.Colour = ColourProvider.Background4;
+            background.Colour = colourProvider.Background4;
         }
     }
 }

osu.Game/Overlays/Dashboard/Home/News/HomeNewsGroupPanel.cs

@@ -0,0 +1,85 @@
+// 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 System.Linq;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Graphics;
+using osu.Game.Online.API.Requests.Responses;
+
+namespace osu.Game.Overlays.Dashboard.Home.News
+{
+    public class HomeNewsGroupPanel : HomePanel
+    {
+        private readonly List<APINewsPost> posts;
+
+        public HomeNewsGroupPanel(List<APINewsPost> posts)
+        {
+            this.posts = posts;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Content.Padding = new MarginPadding { Vertical = 5 };
+
+            Child = new FillFlowContainer<CollapsedNewsPanel>
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Vertical,
+                Children = posts.Select(p => new CollapsedNewsPanel(p)).ToArray()
+            };
+        }
+
+        private class CollapsedNewsPanel : HomeNewsPanelFooter
+        {
+            public CollapsedNewsPanel(APINewsPost post)
+                : base(post)
+            {
+            }
+
+            protected override Drawable CreateContent(APINewsPost post) => new NewsTitleLink(post);
+
+            protected override NewsPostDrawableDate CreateDate(DateTimeOffset date) => new Date(date);
+
+            private class Date : NewsPostDrawableDate
+            {
+                public Date(DateTimeOffset date)
+                    : base(date)
+                {
+                }
+
+                protected override Drawable CreateDate(DateTimeOffset date, OverlayColourProvider colourProvider)
+                {
+                    var drawableDate = new TextFlowContainer(t =>
+                    {
+                        t.Colour = colourProvider.Light1;
+                    })
+                    {
+                        Anchor = Anchor.TopRight,
+                        Origin = Anchor.TopRight,
+                        AutoSizeAxes = Axes.Both,
+                        Direction = FillDirection.Horizontal,
+                        Margin = new MarginPadding { Vertical = 5 }
+                    };
+
+                    drawableDate.AddText($"{date:dd} ", t =>
+                    {
+                        t.Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold);
+                    });
+
+                    drawableDate.AddText($"{date:MMM}", t =>
+                    {
+                        t.Font = OsuFont.GetFont(size: 14, weight: FontWeight.Regular);
+                    });
+
+                    return drawableDate;
+                }
+            }
+        }
+    }
+}

osu.Game/Overlays/Dashboard/Home/News/HomeNewsPanel.cs

@@ -5,8 +5,6 @@ using System;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Cursor;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Platform;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
@@ -40,81 +38,7 @@ namespace osu.Game.Overlays.Dashboard.Home.News
                     Children = new Drawable[]
                     {
                         new ClickableNewsBackground(post),
-                        new GridContainer
+                        new Footer(post)
-                        {
-                            RelativeSizeAxes = Axes.X,
-                            AutoSizeAxes = Axes.Y,
-                            ColumnDimensions = new[]
-                            {
-                                new Dimension(GridSizeMode.AutoSize),
-                                new Dimension()
-                            },
-                            RowDimensions = new[]
-                            {
-                                new Dimension(GridSizeMode.AutoSize)
-                            },
-                            Content = new[]
-                            {
-                                new Drawable[]
-                                {
-                                    new Container
-                                    {
-                                        RelativeSizeAxes = Axes.Y,
-                                        Width = 80,
-                                        Padding = new MarginPadding(10),
-                                        Children = new Drawable[]
-                                        {
-                                            new Box
-                                            {
-                                                Anchor = Anchor.TopRight,
-                                                Origin = Anchor.TopRight,
-                                                RelativeSizeAxes = Axes.Y,
-                                                Width = 1,
-                                                Colour = ColourProvider.Light1
-                                            },
-                                            new Container
-                                            {
-                                                Anchor = Anchor.TopRight,
-                                                Origin = Anchor.TopRight,
-                                                AutoSizeAxes = Axes.Both,
-                                                Padding = new MarginPadding { Right = 11 },
-                                                Child = new DateContainer(post.PublishedAt)
-                                            }
-                                        }
-                                    },
-                                    new Container
-                                    {
-                                        RelativeSizeAxes = Axes.X,
-                                        AutoSizeAxes = Axes.Y,
-                                        Padding = new MarginPadding { Right = 10 },
-                                        Children = new Drawable[]
-                                        {
-                                            new FillFlowContainer
-                                            {
-                                                RelativeSizeAxes = Axes.X,
-                                                AutoSizeAxes = Axes.Y,
-                                                Margin = new MarginPadding { Top = 5, Bottom = 10 },
-                                                Spacing = new Vector2(0, 10),
-                                                Direction = FillDirection.Vertical,
-                                                Children = new Drawable[]
-                                                {
-                                                    new TitleLink(post),
-                                                    new TextFlowContainer(f =>
-                                                    {
-                                                        f.Font = OsuFont.GetFont(size: 12, weight: FontWeight.Regular);
-                                                    })
-                                                    {
-                                                        RelativeSizeAxes = Axes.X,
-                                                        AutoSizeAxes = Axes.Y,
-                                                        Text = post.Preview
-                                                    }
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
                     }
                 }
             };
@@ -158,54 +82,48 @@ namespace osu.Game.Overlays.Dashboard.Home.News
             }
         }
 
-        private class TitleLink : OsuHoverContainer
+        private class Footer : HomeNewsPanelFooter
         {
-            private readonly APINewsPost post;
+            protected override float BarPading => 10;
 
-            public TitleLink(APINewsPost post)
+            public Footer(APINewsPost post)
+                : base(post)
             {
-                this.post = post;
-
-                RelativeSizeAxes = Axes.X;
-                AutoSizeAxes = Axes.Y;
             }
 
-            [BackgroundDependencyLoader]
+            protected override NewsPostDrawableDate CreateDate(DateTimeOffset date) => new Date(date);
-            private void load(GameHost host)
+
+            protected override Drawable CreateContent(APINewsPost post) => new FillFlowContainer
             {
-                Child = new TextFlowContainer(t =>
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Margin = new MarginPadding { Top = 5, Bottom = 10 },
+                Spacing = new Vector2(0, 10),
+                Direction = FillDirection.Vertical,
+                Children = new Drawable[]
                 {
-                    t.Font = OsuFont.GetFont(weight: FontWeight.Bold);
+                    new NewsTitleLink(post),
+                    new TextFlowContainer(f =>
+                    {
+                        f.Font = OsuFont.GetFont(size: 12, weight: FontWeight.Regular);
                     })
                     {
                         RelativeSizeAxes = Axes.X,
                         AutoSizeAxes = Axes.Y,
-                    Text = post.Title
+                        Text = post.Preview
+                    }
+                }
             };
 
-                TooltipText = "view in browser";
+            private class Date : NewsPostDrawableDate
-                Action = () => host.OpenUrlExternally("https://osu.ppy.sh/home/news/" + post.Slug);
+            {
-            }
+                public Date(DateTimeOffset date)
+                    : base(date)
+                {
+                    Margin = new MarginPadding { Top = 10 };
                 }
 
-        private class DateContainer : CompositeDrawable, IHasCustomTooltip
+                protected override Drawable CreateDate(DateTimeOffset date, OverlayColourProvider colourProvider) => new FillFlowContainer
-        {
-            public ITooltip GetCustomTooltip() => new DateTooltip();
-
-            public object TooltipContent => date;
-
-            private readonly DateTimeOffset date;
-
-            public DateContainer(DateTimeOffset date)
-            {
-                this.date = date;
-            }
-
-            [BackgroundDependencyLoader]
-            private void load(OverlayColourProvider colourProvider)
-            {
-                AutoSizeAxes = Axes.Both;
-                InternalChild = new FillFlowContainer
                 {
                     AutoSizeAxes = Axes.Both,
                     Direction = FillDirection.Vertical,
@@ -219,7 +137,7 @@ namespace osu.Game.Overlays.Dashboard.Home.News
                             Origin = Anchor.TopRight,
                             Font = OsuFont.GetFont(weight: FontWeight.Bold), // using Bold since there is no 800 weight alternative
                             Colour = colourProvider.Light1,
-                            Text = date.Day.ToString()
+                            Text = $"{date: dd}"
                         },
                         new TextFlowContainer(f =>
                         {

osu.Game/Overlays/Dashboard/Home/News/HomeNewsPanelFooter.cs

@@ -0,0 +1,79 @@
+// 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.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Online.API.Requests.Responses;
+
+namespace osu.Game.Overlays.Dashboard.Home.News
+{
+    public abstract class HomeNewsPanelFooter : CompositeDrawable
+    {
+        protected virtual float BarPading { get; } = 0;
+
+        private readonly APINewsPost post;
+
+        protected HomeNewsPanelFooter(APINewsPost post)
+        {
+            this.post = post;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+            InternalChild = new GridContainer
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                RowDimensions = new[]
+                {
+                    new Dimension(GridSizeMode.AutoSize)
+                },
+                ColumnDimensions = new[]
+                {
+                    new Dimension(GridSizeMode.Absolute, size: 60),
+                    new Dimension(GridSizeMode.Absolute, size: 20),
+                    new Dimension()
+                },
+                Content = new[]
+                {
+                    new Drawable[]
+                    {
+                        CreateDate(post.PublishedAt),
+                        new Container
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Padding = new MarginPadding { Vertical = BarPading },
+                            Child = new Box
+                            {
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopRight,
+                                Width = 1,
+                                RelativeSizeAxes = Axes.Y,
+                                Colour = colourProvider.Light1
+                            }
+                        },
+                        new Container
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Padding = new MarginPadding { Right = 10 },
+                            Child = CreateContent(post)
+                        }
+                    }
+                }
+            };
+        }
+
+        protected abstract NewsPostDrawableDate CreateDate(DateTimeOffset date);
+
+        protected abstract Drawable CreateContent(APINewsPost post);
+    }
+}

osu.Game/Overlays/Dashboard/Home/News/NewsPostDrawableDate.cs

@@ -0,0 +1,37 @@
+// 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.Allocation;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Cursor;
+using osu.Game.Graphics;
+using osu.Framework.Graphics;
+
+namespace osu.Game.Overlays.Dashboard.Home.News
+{
+    public abstract class NewsPostDrawableDate : CompositeDrawable, IHasCustomTooltip
+    {
+        public ITooltip GetCustomTooltip() => new DateTooltip();
+
+        public object TooltipContent => date;
+
+        private readonly DateTimeOffset date;
+
+        protected NewsPostDrawableDate(DateTimeOffset date)
+        {
+            this.date = date;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            AutoSizeAxes = Axes.Both;
+            Anchor = Anchor.TopRight;
+            Origin = Anchor.TopRight;
+            InternalChild = CreateDate(date, colourProvider);
+        }
+
+        protected abstract Drawable CreateDate(DateTimeOffset date, OverlayColourProvider colourProvider);
+    }
+}

osu.Game/Overlays/Dashboard/Home/News/NewsTitleLink.cs

@@ -0,0 +1,43 @@
+// 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;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Platform;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Online.API.Requests.Responses;
+
+namespace osu.Game.Overlays.Dashboard.Home.News
+{
+    public class NewsTitleLink : OsuHoverContainer
+    {
+        private readonly APINewsPost post;
+
+        public NewsTitleLink(APINewsPost post)
+        {
+            this.post = post;
+
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(GameHost host)
+        {
+            Child = new TextFlowContainer(t =>
+            {
+                t.Font = OsuFont.GetFont(weight: FontWeight.Bold);
+            })
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Text = post.Title
+            };
+
+            TooltipText = "view in browser";
+            Action = () => host.OpenUrlExternally("https://osu.ppy.sh/home/news/" + post.Slug);
+        }
+    }
+}