Merge pull request #9798 from EVAST9919/dashboard-news

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

@@ -0,0 +1,61 @@
+// 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;
+using osuTK;
+using System.Collections.Generic;
+
+namespace osu.Game.Tests.Visual.Online
+{
+    public class TestSceneHomeNewsPanel : OsuTestScene
+    {
+        [Cached]
+        private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Purple);
+
+        public TestSceneHomeNewsPanel()
+        {
+            Add(new FillFlowContainer
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                AutoSizeAxes = Axes.Y,
+                Width = 500,
+                Direction = FillDirection.Vertical,
+                Spacing = new Vector2(0, 5),
+                Children = new Drawable[]
+                {
+                    new FeaturedNewsItemPanel(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 NewsItemGroupPanel(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,
+                        }
+                    }),
+                    new ShowMoreNewsPanel()
+                }
+            });
+        }
+    }
+}

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

@@ -0,0 +1,55 @@
+// 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;
+
+        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(OverlayColourProvider colourProvider)
+        {
+            background.Colour = colourProvider.Background4;
+        }
+    }
+}

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

@@ -0,0 +1,195 @@
+// 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 FeaturedNewsItemPanel : HomePanel
+    {
+        private readonly APINewsPost post;
+
+        public FeaturedNewsItemPanel(APINewsPost post)
+        {
+            this.post = post;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            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,
+                            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[]
+                                {
+                                    new Date(post.PublishedAt),
+                                    new Container
+                                    {
+                                        RelativeSizeAxes = Axes.Both,
+                                        Padding = new MarginPadding { Vertical = 10 },
+                                        Child = new Box
+                                        {
+                                            Anchor = Anchor.TopCentre,
+                                            Origin = Anchor.TopRight,
+                                            Width = 1,
+                                            RelativeSizeAxes = Axes.Y,
+                                            Colour = colourProvider.Light1
+                                        }
+                                    },
+                                    new FillFlowContainer
+                                    {
+                                        RelativeSizeAxes = Axes.X,
+                                        AutoSizeAxes = Axes.Y,
+                                        Margin = new MarginPadding { Top = 5, Bottom = 10 },
+                                        Padding = new MarginPadding { Right = 10 },
+                                        Spacing = new Vector2(0, 10),
+                                        Direction = FillDirection.Vertical,
+                                        Children = new Drawable[]
+                                        {
+                                            new NewsTitleLink(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 Date : CompositeDrawable, IHasCustomTooltip
+        {
+            public ITooltip GetCustomTooltip() => new DateTooltip();
+
+            public object TooltipContent => date;
+
+            private readonly DateTimeOffset date;
+
+            public Date(DateTimeOffset date)
+            {
+                this.date = date;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                AutoSizeAxes = Axes.Both;
+                Anchor = Anchor.TopRight;
+                Origin = Anchor.TopRight;
+                Margin = new MarginPadding { Top = 10 };
+                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:dd}"
+                        },
+                        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/Dashboard/Home/News/NewsGroupItem.cs

@@ -0,0 +1,115 @@
+// 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.Game.Graphics;
+using osu.Game.Online.API.Requests.Responses;
+
+namespace osu.Game.Overlays.Dashboard.Home.News
+{
+    public class NewsGroupItem : CompositeDrawable
+    {
+        private readonly APINewsPost post;
+
+        public NewsGroupItem(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[]
+                    {
+                        new Date(post.PublishedAt),
+                        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 = new NewsTitleLink(post)
+                        }
+                    }
+                }
+            };
+        }
+
+        private class Date : CompositeDrawable, IHasCustomTooltip
+        {
+            public ITooltip GetCustomTooltip() => new DateTooltip();
+
+            public object TooltipContent => date;
+
+            private readonly DateTimeOffset date;
+
+            public Date(DateTimeOffset date)
+            {
+                this.date = date;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                TextFlowContainer textFlow;
+
+                AutoSizeAxes = Axes.Both;
+                Anchor = Anchor.TopRight;
+                Origin = Anchor.TopRight;
+                InternalChild = textFlow = new TextFlowContainer(t =>
+                {
+                    t.Colour = colourProvider.Light1;
+                })
+                {
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                    AutoSizeAxes = Axes.Both,
+                    Direction = FillDirection.Horizontal,
+                    Margin = new MarginPadding { Vertical = 5 }
+                };
+
+                textFlow.AddText($"{date:dd}", t =>
+                {
+                    t.Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold);
+                });
+
+                textFlow.AddText($"{date: MMM}", t =>
+                {
+                    t.Font = OsuFont.GetFont(size: 14, weight: FontWeight.Regular);
+                });
+            }
+        }
+    }
+}

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

@@ -0,0 +1,36 @@
+// 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.Collections.Generic;
+using System.Linq;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Online.API.Requests.Responses;
+
+namespace osu.Game.Overlays.Dashboard.Home.News
+{
+    public class NewsItemGroupPanel : HomePanel
+    {
+        private readonly List<APINewsPost> posts;
+
+        public NewsItemGroupPanel(List<APINewsPost> posts)
+        {
+            this.posts = posts;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Content.Padding = new MarginPadding { Vertical = 5 };
+
+            Child = new FillFlowContainer<NewsGroupItem>
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Vertical,
+                Children = posts.Select(p => new NewsGroupItem(p)).ToArray()
+            };
+        }
+    }
+}

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

@@ -0,0 +1,45 @@
+// 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, OverlayColourProvider colourProvider)
+        {
+            Child = new TextFlowContainer(t =>
+            {
+                t.Font = OsuFont.GetFont(weight: FontWeight.Bold);
+            })
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Text = post.Title
+            };
+
+            HoverColour = colourProvider.Light1;
+
+            TooltipText = "view in browser";
+            Action = () => host.OpenUrlExternally("https://osu.ppy.sh/home/news/" + post.Slug);
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+// 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.Collections.Generic;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osuTK.Graphics;
+
+namespace osu.Game.Overlays.Dashboard.Home.News
+{
+    public class ShowMoreNewsPanel : OsuHoverContainer
+    {
+        protected override IEnumerable<Drawable> EffectTargets => new[] { text };
+
+        [Resolved(canBeNull: true)]
+        private NewsOverlay overlay { get; set; }
+
+        private OsuSpriteText text;
+
+        public ShowMoreNewsPanel()
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            Child = new HomePanel
+            {
+                Child = text = new OsuSpriteText
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Margin = new MarginPadding { Vertical = 20 },
+                    Text = "see more"
+                }
+            };
+
+            IdleColour = colourProvider.Light1;
+            HoverColour = Color4.White;
+
+            Action = () =>
+            {
+                overlay?.ShowFrontPage();
+            };
+        }
+    }
+}

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;
+        }
+    }
+}