mirror of
https://github.com/ppy/osu.git
synced 2024-12-14 12:33:01 +08:00
Implement HomeNewsPanel component
This commit is contained in:
Andrei Zavatski
parent
bb6e05404b
commit
2e0f567d5d
38
osu.Game.Tests/Visual/Online/TestSceneHomeNewsPanel.cs
Normal file
38
osu.Game.Tests/Visual/Online/TestSceneHomeNewsPanel.cs
Normal file
@ -0,0 +1,38 @@
|
||||
// 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;
|
||||
|
||||
namespace osu.Game.Tests.Visual.Online
|
||||
{
|
||||
public class TestSceneHomeNewsPanel : OsuTestScene
|
||||
{
|
||||
[Cached]
|
||||
private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Purple);
|
||||
|
||||
public TestSceneHomeNewsPanel()
|
||||
{
|
||||
Add(new Container
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Width = 500,
|
||||
Child = 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"
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
58
osu.Game/Overlays/Dashboard/Home/HomePanel.cs
Normal file
58
osu.Game/Overlays/Dashboard/Home/HomePanel.cs
Normal file
@ -0,0 +1,58 @@
|
||||
// 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;
|
||||
|
||||
[Resolved]
|
||||
protected OverlayColourProvider ColourProvider { get; private set; }
|
||||
|
||||
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()
|
||||
{
|
||||
background.Colour = ColourProvider.Background4;
|
||||
}
|
||||
}
|
||||
}
|
||||
240
osu.Game/Overlays/Dashboard/Home/News/HomeNewsPanel.cs
Normal file
240
osu.Game/Overlays/Dashboard/Home/News/HomeNewsPanel.cs
Normal file
@ -0,0 +1,240 @@
|
||||
// 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 HomeNewsPanel : HomePanel
|
||||
{
|
||||
private readonly APINewsPost post;
|
||||
|
||||
public HomeNewsPanel(APINewsPost post)
|
||||
{
|
||||
this.post = post;
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load()
|
||||
{
|
||||
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,
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
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 TitleLink : OsuHoverContainer
|
||||
{
|
||||
private readonly APINewsPost post;
|
||||
|
||||
public TitleLink(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);
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
{
|
||||
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.Day.ToString()
|
||||
},
|
||||
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}"
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
|
||||
37
osu.Game/Overlays/News/NewsPostBackground.cs
Normal file
37
osu.Game/Overlays/News/NewsPostBackground.cs
Normal 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 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user