h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2024-09-22 00:47:24 +08:00
Code Issues Releases Wiki Activity

Implement NewsCard

Browse Source
This commit is contained in:
Andrei Zavatski 2020-07-06 07:27:53 +03:00
parent c18ca19c9d
commit 7550097eb6
3 changed files with 250 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
osu.Game.Tests/Visual/Online/TestSceneNewsCard.cs Normal file
View File

@ -0,0 +1,52 @@
// 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.Overlays.News;
using osu.Game.Online.API.Requests.Responses;
using osu.Framework.Allocation;
using osu.Game.Overlays;
using osuTK;
using System;
namespace osu.Game.Tests.Visual.Online
{
public class TestSceneNewsCard : OsuTestScene
{
[Cached]
private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Purple);
public TestSceneNewsCard()
{
Add(new FillFlowContainer<NewsCard>
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Direction = FillDirection.Vertical,
Width = 500,
AutoSizeAxes = Axes.Y,
Spacing = new Vector2(0, 20),
Children = new[]
{
new NewsCard(new NewsPost
{
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.",
Author = "someone, someone1, someone2, someone3, someone4",
FirstImage = "/help/wiki/shared/news/banners/monthly-beatmapping-contest.png",
PublishedAt = DateTime.Now
}),
new NewsCard(new NewsPost
{
Title = "This post has a full-url image!",
Preview = "boom",
Author = "user",
FirstImage = "https://assets.ppy.sh/artists/88/header.jpg",
PublishedAt = DateTime.Now
})
}
});
}
}
}

4
osu.Game/Online/API/Requests/Responses/NewsPost.cs
View File

@ -21,10 +21,10 @@ namespace osu.Game.Online.API.Requests.Responses
public string FirstImage { get; set; }
[JsonProperty(@"published_at")]
public DateTimeOffset PublishedAt { get; set; }
public DateTime PublishedAt { get; set; }
[JsonProperty(@"updated_at")]
public DateTimeOffset UpdatedAt { get; set; }
public DateTime UpdatedAt { get; set; }
[JsonProperty(@"slug")]
public string Slug { get; set; }

196
osu.Game/Overlays/News/NewsCard.cs Normal file
View File

@ -0,0 +1,196 @@
// 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.Extensions.Color4Extensions;
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.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterface;
using osu.Game.Online.API.Requests.Responses;
namespace osu.Game.Overlays.News
{
public class NewsCard : CompositeDrawable
{
[Resolved]
private OverlayColourProvider colourProvider { get; set; }
private readonly NewsPost post;
private Box background;
private TextFlowContainer main;
public NewsCard(NewsPost post)
{
this.post = post;
}
[BackgroundDependencyLoader]
private void load()
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
Masking = true;
CornerRadius = 6;
NewsBackground bg;
InternalChildren = new Drawable[]
{
background = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background4
},
new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
new Container
{
RelativeSizeAxes = Axes.X,
Height = 160,
Masking = true,
CornerRadius = 6,
Children = new Drawable[]
{
new DelayedLoadWrapper(bg = new NewsBackground(post.FirstImage)
{
RelativeSizeAxes = Axes.Both,
FillMode = FillMode.Fill,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Alpha = 0
})
{
RelativeSizeAxes = Axes.Both
},
new DateContainer(post.PublishedAt)
{
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
Margin = new MarginPadding
{
Top = 10,
Right = 15
}
}
}
},
new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding
{
Horizontal = 15,
Vertical = 10
},
Child = main = new TextFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y
}
}
}
},
new HoverClickSounds()
};
bg.OnLoadComplete += d => d.FadeIn(250, Easing.In);
main.AddParagraph(post.Title, t => t.Font = OsuFont.GetFont(size: 20, weight: FontWeight.SemiBold));
main.AddParagraph(post.Preview, t => t.Font = OsuFont.GetFont(size: 12)); // Should use sans-serif font
main.AddParagraph("by ", t => t.Font = OsuFont.GetFont(size: 12));
main.AddText(post.Author, t => t.Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold));
}
protected override bool OnHover(HoverEvent e)
{
background.FadeColour(colourProvider.Background3, 200, Easing.OutQuint);
return true;
}
protected override void OnHoverLost(HoverLostEvent e)
{
background.FadeColour(colourProvider.Background4, 200, Easing.OutQuint);
base.OnHoverLost(e);
}
[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, IHasTooltip
{
public string TooltipText => date.ToString("d MMMM yyyy hh:mm:ss UTCz");
private readonly DateTime date;
public DateContainer(DateTime date)
{
this.date = date;
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
AutoSizeAxes = Axes.Both;
Masking = true;
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background6.Opacity(0.5f)
},
new OsuSpriteText
{
Text = date.ToString("d MMM yyyy").ToUpper(),
Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold),
Margin = new MarginPadding
{
Horizontal = 20,
Vertical = 5
}
}
};
}
}
}
}