Initial implementation of NewsArticleCover class

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

@@ -1,6 +1,9 @@
 // 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.Graphics;
+using osu.Framework.Graphics.Containers;
 using osu.Game.Overlays;
 using osu.Game.Overlays.News;
 
@@ -19,11 +22,46 @@ namespace osu.Game.Tests.Visual.Online
 
             AddStep(@"Show front page", () => news.ShowFrontPage());
             AddStep(@"Custom article", () => news.Current.Value = "Test Article 101");
+
+            AddStep(@"Article covers", () => news.LoadAndShowChild(new NewsCoverTest()));
         }
 
         private class TestNewsOverlay : NewsOverlay
         {
             public new void LoadAndShowChild(NewsContent content) => base.LoadAndShowChild(content);
         }
+
+        private class NewsCoverTest : NewsContent
+        {
+            public NewsCoverTest()
+            {
+                Spacing = new osuTK.Vector2(0, 10);
+
+                var article = new NewsArticleCover.ArticleInfo()
+                {
+                    Author = "Ephemeral",
+                    CoverURL = "https://assets.ppy.sh/artists/58/header.jpg",
+                    Time = new DateTime(2019, 12, 4),
+                    Title = "New Featured Artist: Kurokotei"
+                };
+
+                Children = new Drawable[]
+                {
+                    new NewsArticleCover(article)
+                    {
+                        Height = 200
+                    },
+                    new NewsArticleCover(article)
+                    {
+                        Height = 120
+                    },
+                    new NewsArticleCover(article)
+                    {
+                        RelativeSizeAxes = Axes.None,
+                        Size = new osuTK.Vector2(400, 200),
+                    }
+                };
+            }
+        }
     }
 }

osu.Game/Overlays/News/NewsArticleCover.cs

@@ -0,0 +1,156 @@
+using System;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Colour;
+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.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osuTK.Graphics;
+
+namespace osu.Game.Overlays.News
+{
+    public class NewsArticleCover : Container
+    {
+        public NewsArticleCover(ArticleInfo info)
+        {
+            RelativeSizeAxes = Axes.X;
+            Masking = true;
+            CornerRadius = 4;
+
+            NewsBackground bg;
+
+            Children = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = ColourInfo.GradientVertical(OsuColour.Gray(0.2f), OsuColour.Gray(0.1f))
+                },
+                new DelayedLoadWrapper(bg = new NewsBackground(info.CoverURL)
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    RelativeSizeAxes = Axes.Both,
+                    FillMode = FillMode.Fill,
+                    Alpha = 0
+                })
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    RelativeSizeAxes = Axes.Both,
+                },
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = ColourInfo.GradientVertical(Color4.Black.Opacity(0.1f), Color4.Black.Opacity(0.6f)),
+                    Alpha = 1f,
+                },
+                new DateContainer(info.Time)
+                {
+                    Margin = new MarginPadding()
+                    {
+                        Right = 20,
+                        Top = 20,
+                    }
+                },
+                new OsuSpriteText
+                {
+                    Anchor = Anchor.BottomLeft,
+                    Origin = Anchor.BottomLeft,
+                    Margin = new MarginPadding()
+                    {
+                        Left = 25,
+                        Bottom = 50,
+                    },
+                    Font = OsuFont.GetFont(Typeface.Exo, 24, FontWeight.Bold),
+                    Text = info.Title,
+                },
+                new OsuSpriteText
+                {
+                    Anchor = Anchor.BottomLeft,
+                    Origin = Anchor.BottomLeft,
+                    Margin = new MarginPadding()
+                    {
+                        Left = 25,
+                        Bottom = 30,
+                    },
+                    Font = OsuFont.GetFont(Typeface.Exo, 16, FontWeight.Bold),
+                    Text = "by " + info.Author
+                }
+            };
+
+            bg.OnLoadComplete += d => d.FadeIn(250, Easing.In);
+        }
+
+        //news article cover background
+        [LongRunningLoad]
+        private class NewsBackground : Sprite
+        {
+            private readonly string url;
+
+            public NewsBackground(string coverUrl)
+            {
+                url = coverUrl ?? "Headers/news";
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(LargeTextureStore store)
+            {
+                Texture = store.Get(url);
+            }
+        }
+
+        //date container
+        private class DateContainer : Container, IHasTooltip
+        {
+            private readonly DateTime date;
+
+            public DateContainer(DateTime date)
+            {
+                this.date = date;
+
+                Anchor = Anchor.TopRight;
+                Origin = Anchor.TopRight;
+                Masking = true;
+                CornerRadius = 4;
+                AutoSizeAxes = Axes.Both;
+                Children = new Drawable[]
+                {
+                    new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = Color4.Black.Opacity(0.5f),
+                    },
+                    new OsuSpriteText
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Font = OsuFont.GetFont(Typeface.Exo, 12, FontWeight.Black, false, false),
+                        Text = date.ToString("dd MMM yyy"),
+                        Margin = new MarginPadding()
+                        {
+                            Vertical = 4,
+                            Horizontal = 8,
+                        }
+                    }
+                };
+            }
+
+            public string TooltipText => date.ToString("dddd dd MMMM yyyy hh:mm:ss UTCz");
+        }
+
+        //fake API data struct to use for now as a skeleton for data, as there is no API struct for news article info for now
+        public class ArticleInfo
+        {
+            public string Title { get; set; }
+            public string CoverURL { get; set; }
+            public DateTime Time { get; set; }
+            public string Author { get; set; }
+        }
+    }
+}