Use buffered container to eliminate gaps near foreground border

This commit is contained in:
Bartłomiej Dach 2021-10-22 22:03:37 +02:00
parent a59f2d7b83
commit f671ee28c5
No known key found for this signature in database
GPG Key ID: BCECCD4FA41F6497
2 changed files with 133 additions and 17 deletions

View File

@ -2,9 +2,7 @@
// 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.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
@ -26,19 +24,19 @@ namespace osu.Game.Beatmaps.Drawables.Cards
{
public class BeatmapCard : OsuClickableContainer
{
public const float TRANSITION_DURATION = 400;
private const float width = 408;
private const float height = 100;
private const float corner_radius = 10;
private const float transition_duration = 400;
private readonly APIBeatmapSet beatmapSet;
private UpdateableOnlineBeatmapSetCover leftCover;
private FillFlowContainer iconArea;
private Container mainContent;
private Box foregroundGradient;
private BeatmapCardContentBackground mainContentBackground;
private GridContainer titleContainer;
private GridContainer artistContainer;
@ -96,14 +94,10 @@ namespace osu.Game.Beatmaps.Drawables.Cards
Masking = true,
Children = new Drawable[]
{
new UpdateableOnlineBeatmapSetCover
{
RelativeSizeAxes = Axes.Both,
OnlineInfo = beatmapSet,
},
foregroundGradient = new Box
mainContentBackground = new BeatmapCardContentBackground
{
RelativeSizeAxes = Axes.Both,
BeatmapSet = beatmapSet,
},
new FillFlowContainer
{
@ -278,13 +272,10 @@ namespace osu.Game.Beatmaps.Drawables.Cards
if (IsHovered)
targetWidth -= 20;
mainContent.ResizeWidthTo(targetWidth, transition_duration, Easing.OutQuint);
mainContent.ResizeWidthTo(targetWidth, TRANSITION_DURATION, Easing.OutQuint);
mainContentBackground.Dimmed.Value = IsHovered;
var foregroundColour = IsHovered ? colourProvider.Background4 : colourProvider.Background2;
var foregroundGradientColour = ColourInfo.GradientHorizontal(foregroundColour, foregroundColour.Opacity(0.8f));
foregroundGradient.FadeColour(foregroundGradientColour, transition_duration, Easing.OutQuint);
leftCover.FadeColour(IsHovered ? OsuColour.Gray(0.2f) : Color4.White, transition_duration, Easing.OutQuint);
leftCover.FadeColour(IsHovered ? OsuColour.Gray(0.2f) : Color4.White, TRANSITION_DURATION, Easing.OutQuint);
}
}
}

View File

@ -0,0 +1,125 @@
// 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.
#nullable enable
using System;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Overlays;
namespace osu.Game.Beatmaps.Drawables.Cards
{
public class BeatmapCardContentBackground : ModelBackedDrawable<IBeatmapSetOnlineInfo>
{
public IBeatmapSetOnlineInfo BeatmapSet
{
get => Model;
set => Model = value;
}
public new bool Masking
{
get => base.Masking;
set => base.Masking = value;
}
public BindableBool Dimmed { get; private set; } = new BindableBool();
protected override double LoadDelay => 500;
protected override double TransformDuration => 400;
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
InternalChild = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background2
};
}
protected override DelayedLoadWrapper CreateDelayedLoadWrapper(Func<Drawable> createContentFunc, double timeBeforeLoad)
=> new DelayedLoadUnloadWrapper(createContentFunc, timeBeforeLoad);
protected override Drawable? CreateDrawable(IBeatmapSetOnlineInfo? model)
{
if (model == null)
return null;
return new BufferedBackground(model)
{
RelativeSizeAxes = Axes.Both,
Dimmed = { BindTarget = Dimmed }
};
}
private class BufferedBackground : BufferedContainer
{
public BindableBool Dimmed { get; } = new BindableBool();
private readonly IBeatmapSetOnlineInfo onlineInfo;
private readonly Box background;
private OnlineBeatmapSetCover? cover;
[Resolved]
private OverlayColourProvider colourProvider { get; set; } = null!;
public BufferedBackground(IBeatmapSetOnlineInfo onlineInfo)
{
this.onlineInfo = onlineInfo;
RelativeSizeAxes = Axes.Both;
InternalChild = background = new Box
{
RelativeSizeAxes = Axes.Both,
};
}
[BackgroundDependencyLoader]
private void load()
{
background.Colour = colourProvider.Background2;
LoadComponentAsync(new OnlineBeatmapSetCover(onlineInfo)
{
RelativeSizeAxes = Axes.Both,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
FillMode = FillMode.Fill
}, loaded =>
{
cover = loaded;
cover.Colour = Colour4.Transparent;
AddInternal(cover);
FinishTransforms(true);
updateState();
});
}
protected override void LoadComplete()
{
base.LoadComplete();
Dimmed.BindValueChanged(_ => updateState(), true);
FinishTransforms(true);
}
private void updateState()
{
if (cover == null)
return;
background.FadeColour(Dimmed.Value ? colourProvider.Background4 : colourProvider.Background2, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
var gradient = ColourInfo.GradientHorizontal(Colour4.White.Opacity(0), Colour4.White.Opacity(0.2f));
cover.FadeColour(gradient, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
}
}
}
}