Implement HomeNewsPanel component

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

@@ -0,0 +1,38 @@
+// 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.Game.Online.API.Requests.Responses;
+using osu.Framework.Allocation;
+using osu.Game.Overlays;
+using System;
+using osu.Game.Overlays.Dashboard.Home.News;
+
+namespace osu.Game.Tests.Visual.Online
+{
+    public class TestSceneHomeNewsPanel : OsuTestScene
+    {
+        [Cached]
+        private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Purple);
+
+        public TestSceneHomeNewsPanel()
+        {
+            Add(new Container
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                AutoSizeAxes = Axes.Y,
+                Width = 500,
+                Child = 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"
+                })
+            });
+        }
+    }
+}

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

@@ -0,0 +1,58 @@
+// 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.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Effects;
+using osu.Framework.Graphics.Shapes;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Overlays.Dashboard.Home
+{
+    public class HomePanel : Container
+    {
+        protected override Container<Drawable> Content => content;
+
+        [Resolved]
+        protected OverlayColourProvider ColourProvider { get; private set; }
+
+        private readonly Container content;
+        private readonly Box background;
+
+        public HomePanel()
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+            Masking = true;
+            EdgeEffect = new EdgeEffectParameters
+            {
+                Colour = Color4.Black.Opacity(0.25f),
+                Type = EdgeEffectType.Shadow,
+                Radius = 3,
+                Offset = new Vector2(0, 1)
+            };
+
+            AddRangeInternal(new Drawable[]
+            {
+                background = new Box
+                {
+                    RelativeSizeAxes = Axes.Both
+                },
+                content = new Container
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y
+                }
+            });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            background.Colour = ColourProvider.Background4;
+        }
+    }
+}

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

@@ -0,0 +1,240 @@
+// 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.Cursor;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Platform;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Online.API.Requests.Responses;
+using osu.Game.Overlays.News;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Overlays.Dashboard.Home.News
+{
+    public class HomeNewsPanel : HomePanel
+    {
+        private readonly APINewsPost post;
+
+        public HomeNewsPanel(APINewsPost post)
+        {
+            this.post = post;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Children = new Drawable[]
+            {
+                new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Direction = FillDirection.Vertical,
+                    Children = new Drawable[]
+                    {
+                        new ClickableNewsBackground(post),
+                        new GridContainer
+                        {
+                            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
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            };
+        }
+
+        private class ClickableNewsBackground : OsuHoverContainer
+        {
+            private readonly APINewsPost post;
+
+            public ClickableNewsBackground(APINewsPost post)
+            {
+                this.post = post;
+
+                RelativeSizeAxes = Axes.X;
+                Height = 130;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(GameHost host)
+            {
+                NewsPostBackground bg;
+
+                Child = new DelayedLoadWrapper(bg = new NewsPostBackground(post.FirstImage)
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    FillMode = FillMode.Fill,
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Alpha = 0
+                })
+                {
+                    RelativeSizeAxes = Axes.Both
+                };
+
+                bg.OnLoadComplete += d => d.FadeIn(250, Easing.In);
+
+                TooltipText = "view in browser";
+                Action = () => host.OpenUrlExternally("https://osu.ppy.sh/home/news/" + post.Slug);
+
+                HoverColour = Color4.White;
+            }
+        }
+
+        private class TitleLink : OsuHoverContainer
+        {
+            private readonly APINewsPost post;
+
+            public TitleLink(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);
+            }
+        }
+
+        private class DateContainer : CompositeDrawable, IHasCustomTooltip
+        {
+            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,
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                    Children = new Drawable[]
+                    {
+                        new OsuSpriteText
+                        {
+                            Anchor = Anchor.TopRight,
+                            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()
+                        },
+                        new TextFlowContainer(f =>
+                        {
+                            f.Font = OsuFont.GetFont(size: 11, weight: FontWeight.Regular);
+                            f.Colour = colourProvider.Light1;
+                        })
+                        {
+                            Anchor = Anchor.TopRight,
+                            Origin = Anchor.TopRight,
+                            AutoSizeAxes = Axes.Both,
+                            Text = $"{date:MMM yyyy}"
+                        }
+                    }
+                };
+            }
+        }
+    }
+}

osu.Game/Overlays/News/NewsCard.cs

@@ -9,8 +9,6 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Cursor;
 using osu.Framework.Graphics.Shapes;
-using osu.Framework.Graphics.Sprites;
-using osu.Framework.Graphics.Textures;
 using osu.Framework.Input.Events;
 using osu.Framework.Platform;
 using osu.Game.Graphics;
@@ -48,7 +46,7 @@ namespace osu.Game.Overlays.News
                 Action = () => host.OpenUrlExternally("https://osu.ppy.sh/home/news/" + post.Slug);
             }
 
-            NewsBackground bg;
+            NewsPostBackground bg;
             AddRange(new Drawable[]
             {
                 background = new Box
@@ -70,7 +68,7 @@ namespace osu.Game.Overlays.News
                             CornerRadius = 6,
                             Children = new Drawable[]
                             {
-                                new DelayedLoadWrapper(bg = new NewsBackground(post.FirstImage)
+                                new DelayedLoadWrapper(bg = new NewsPostBackground(post.FirstImage)
                                 {
                                     RelativeSizeAxes = Axes.Both,
                                     FillMode = FillMode.Fill,
@@ -123,34 +121,6 @@ namespace osu.Game.Overlays.News
             main.AddText(post.Author, t => t.Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold));
         }
 
-        [LongRunningLoad]
-        private class NewsBackground : Sprite
-        {
-            private readonly string sourceUrl;
-
-            public NewsBackground(string sourceUrl)
-            {
-                this.sourceUrl = sourceUrl;
-            }
-
-            [BackgroundDependencyLoader]
-            private void load(LargeTextureStore store)
-            {
-                Texture = store.Get(createUrl(sourceUrl));
-            }
-
-            private string createUrl(string source)
-            {
-                if (string.IsNullOrEmpty(source))
-                    return "Headers/news";
-
-                if (source.StartsWith('/'))
-                    return "https://osu.ppy.sh" + source;
-
-                return source;
-            }
-        }
-
         private class DateContainer : CircularContainer, IHasCustomTooltip
         {
             public ITooltip GetCustomTooltip() => new DateTooltip();

osu.Game/Overlays/News/NewsPostBackground.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 osu.Framework.Allocation;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Textures;
+
+namespace osu.Game.Overlays.News
+{
+    [LongRunningLoad]
+    public class NewsPostBackground : Sprite
+    {
+        private readonly string sourceUrl;
+
+        public NewsPostBackground(string sourceUrl)
+        {
+            this.sourceUrl = sourceUrl;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(LargeTextureStore store)
+        {
+            Texture = store.Get(createUrl(sourceUrl));
+        }
+
+        private string createUrl(string source)
+        {
+            if (string.IsNullOrEmpty(source))
+                return "Headers/news";
+
+            if (source.StartsWith('/'))
+                return "https://osu.ppy.sh" + source;
+
+            return source;
+        }
+    }
+}