From 76d35a7667eb082d6917e1e032ab3d9f418b905d Mon Sep 17 00:00:00 2001 From: Andrei Zavatski Date: Fri, 7 Aug 2020 12:59:45 +0300 Subject: [PATCH] Implement HomeNewsGroupPanel --- .../Visual/Online/TestSceneHomeNewsPanel.cs | 38 ++++- osu.Game/Overlays/Dashboard/Home/HomePanel.cs | 7 +- .../Dashboard/Home/News/HomeNewsGroupPanel.cs | 85 ++++++++++ .../Dashboard/Home/News/HomeNewsPanel.cs | 152 ++++-------------- .../Home/News/HomeNewsPanelFooter.cs | 79 +++++++++ .../Home/News/NewsPostDrawableDate.cs | 37 +++++ .../Dashboard/Home/News/NewsTitleLink.cs | 43 +++++ 7 files changed, 311 insertions(+), 130 deletions(-) create mode 100644 osu.Game/Overlays/Dashboard/Home/News/HomeNewsGroupPanel.cs create mode 100644 osu.Game/Overlays/Dashboard/Home/News/HomeNewsPanelFooter.cs create mode 100644 osu.Game/Overlays/Dashboard/Home/News/NewsPostDrawableDate.cs create mode 100644 osu.Game/Overlays/Dashboard/Home/News/NewsTitleLink.cs diff --git a/osu.Game.Tests/Visual/Online/TestSceneHomeNewsPanel.cs b/osu.Game.Tests/Visual/Online/TestSceneHomeNewsPanel.cs index 262bc51cd8..78d77c9e97 100644 --- a/osu.Game.Tests/Visual/Online/TestSceneHomeNewsPanel.cs +++ b/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[] { - 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 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 + { + 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, + } + }) + } }); } } diff --git a/osu.Game/Overlays/Dashboard/Home/HomePanel.cs b/osu.Game/Overlays/Dashboard/Home/HomePanel.cs index bbe7e411fd..ce053cd4ec 100644 --- a/osu.Game/Overlays/Dashboard/Home/HomePanel.cs +++ b/osu.Game/Overlays/Dashboard/Home/HomePanel.cs @@ -16,9 +16,6 @@ namespace osu.Game.Overlays.Dashboard.Home { protected override Container 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; } } } diff --git a/osu.Game/Overlays/Dashboard/Home/News/HomeNewsGroupPanel.cs b/osu.Game/Overlays/Dashboard/Home/News/HomeNewsGroupPanel.cs new file mode 100644 index 0000000000..cd1c5393c5 --- /dev/null +++ b/osu.Game/Overlays/Dashboard/Home/News/HomeNewsGroupPanel.cs @@ -0,0 +1,85 @@ +// Copyright (c) ppy Pty Ltd . 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 posts; + + public HomeNewsGroupPanel(List posts) + { + this.posts = posts; + } + + [BackgroundDependencyLoader] + private void load() + { + Content.Padding = new MarginPadding { Vertical = 5 }; + + Child = new FillFlowContainer + { + 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; + } + } + } + } +} diff --git a/osu.Game/Overlays/Dashboard/Home/News/HomeNewsPanel.cs b/osu.Game/Overlays/Dashboard/Home/News/HomeNewsPanel.cs index 85e31b3034..3548b7c88d 100644 --- a/osu.Game/Overlays/Dashboard/Home/News/HomeNewsPanel.cs +++ b/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 - { - 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 - } - } - } - } - } - } - } - } + new Footer(post) } } }; @@ -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] - private void load(GameHost host) + protected override NewsPostDrawableDate CreateDate(DateTimeOffset date) => new Date(date); + + 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.Preview + } + } + }; + + private class Date : NewsPostDrawableDate + { + public Date(DateTimeOffset date) + : base(date) { - RelativeSizeAxes = Axes.X, - AutoSizeAxes = Axes.Y, - Text = post.Title - }; + Margin = new MarginPadding { Top = 10 }; + } - 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 + protected override Drawable CreateDate(DateTimeOffset date, OverlayColourProvider colourProvider) => 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 => { diff --git a/osu.Game/Overlays/Dashboard/Home/News/HomeNewsPanelFooter.cs b/osu.Game/Overlays/Dashboard/Home/News/HomeNewsPanelFooter.cs new file mode 100644 index 0000000000..591f53ac4a --- /dev/null +++ b/osu.Game/Overlays/Dashboard/Home/News/HomeNewsPanelFooter.cs @@ -0,0 +1,79 @@ +// Copyright (c) ppy Pty Ltd . 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); + } +} diff --git a/osu.Game/Overlays/Dashboard/Home/News/NewsPostDrawableDate.cs b/osu.Game/Overlays/Dashboard/Home/News/NewsPostDrawableDate.cs new file mode 100644 index 0000000000..8ba58e27a7 --- /dev/null +++ b/osu.Game/Overlays/Dashboard/Home/News/NewsPostDrawableDate.cs @@ -0,0 +1,37 @@ +// Copyright (c) ppy Pty Ltd . 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); + } +} diff --git a/osu.Game/Overlays/Dashboard/Home/News/NewsTitleLink.cs b/osu.Game/Overlays/Dashboard/Home/News/NewsTitleLink.cs new file mode 100644 index 0000000000..da98c92bbe --- /dev/null +++ b/osu.Game/Overlays/Dashboard/Home/News/NewsTitleLink.cs @@ -0,0 +1,43 @@ +// Copyright (c) ppy Pty Ltd . 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); + } + } +}