1
0
mirror of https://github.com/ppy/osu.git synced 2024-12-14 12:33:01 +08:00

Implement HomeNewsGroupPanel

This commit is contained in:
Andrei Zavatski 2020-08-07 12:59:45 +03:00
parent e56671a1f1
commit 76d35a7667
7 changed files with 311 additions and 130 deletions

View File

@ -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<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,
}
})
}
});
}
}

View File

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

View File

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

View File

@ -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 =>
{

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -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);
}
}
}