1
0
mirror of https://github.com/ppy/osu.git synced 2024-12-15 08:22:56 +08:00

Implement visual behaviour of expanded card state

This commit is contained in:
Bartłomiej Dach 2021-12-05 15:48:02 +01:00
parent a07f8c74dc
commit 3fea8d5e62
No known key found for this signature in database
GPG Key ID: BCECCD4FA41F6497
2 changed files with 40 additions and 8 deletions

View File

@ -359,7 +359,8 @@ namespace osu.Game.Beatmaps.Drawables.Cards
{ {
base.LoadComplete(); base.LoadComplete();
downloadTracker.State.BindValueChanged(_ => updateState(), true); downloadTracker.State.BindValueChanged(_ => updateState());
Expanded.BindValueChanged(_ => updateState(), true);
FinishTransforms(true); FinishTransforms(true);
} }
@ -401,19 +402,21 @@ namespace osu.Game.Beatmaps.Drawables.Cards
private void updateState() private void updateState()
{ {
bool showDetails = IsHovered || Expanded.Value;
float targetWidth = width - height; float targetWidth = width - height;
if (IsHovered) if (showDetails)
targetWidth = targetWidth - icon_area_width + CORNER_RADIUS; targetWidth = targetWidth - icon_area_width + CORNER_RADIUS;
thumbnail.Dimmed.Value = IsHovered; thumbnail.Dimmed.Value = showDetails;
mainContent.ResizeWidthTo(targetWidth, TRANSITION_DURATION, Easing.OutQuint); mainContent.ResizeWidthTo(targetWidth, TRANSITION_DURATION, Easing.OutQuint);
mainContentBackground.Dimmed.Value = IsHovered; mainContentBackground.Dimmed.Value = showDetails;
statisticsContainer.FadeTo(IsHovered ? 1 : 0, TRANSITION_DURATION, Easing.OutQuint); statisticsContainer.FadeTo(showDetails ? 1 : 0, TRANSITION_DURATION, Easing.OutQuint);
rightAreaBackground.FadeColour(downloadTracker.State.Value == DownloadState.LocallyAvailable ? colours.Lime0 : colourProvider.Background3, TRANSITION_DURATION, Easing.OutQuint); rightAreaBackground.FadeColour(downloadTracker.State.Value == DownloadState.LocallyAvailable ? colours.Lime0 : colourProvider.Background3, TRANSITION_DURATION, Easing.OutQuint);
rightAreaButtons.FadeTo(IsHovered ? 1 : 0, TRANSITION_DURATION, Easing.OutQuint); rightAreaButtons.FadeTo(showDetails ? 1 : 0, TRANSITION_DURATION, Easing.OutQuint);
foreach (var button in rightAreaButtons) foreach (var button in rightAreaButtons)
{ {

View File

@ -5,8 +5,10 @@ using osu.Framework.Allocation;
using osu.Framework.Bindables; using osu.Framework.Bindables;
using osu.Framework.Graphics; using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers; using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes; using osu.Framework.Graphics.Shapes;
using osu.Game.Overlays; using osu.Game.Overlays;
using osuTK;
namespace osu.Game.Beatmaps.Drawables.Cards namespace osu.Game.Beatmaps.Drawables.Cards
{ {
@ -25,15 +27,17 @@ namespace osu.Game.Beatmaps.Drawables.Cards
public Bindable<bool> Expanded { get; } = new BindableBool(); public Bindable<bool> Expanded { get; } = new BindableBool();
private readonly Box background; private readonly Box background;
private readonly Container content;
private readonly Container bodyContent; private readonly Container bodyContent;
private readonly Container dropdownContent; private readonly Container dropdownContent;
private readonly Container borderContainer;
public BeatmapCardDropdown(float height) public BeatmapCardDropdown(float height)
{ {
RelativeSizeAxes = Axes.X; RelativeSizeAxes = Axes.X;
Height = height; Height = height;
InternalChild = new Container InternalChild = content = new Container
{ {
RelativeSizeAxes = Axes.X, RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y, AutoSizeAxes = Axes.Y,
@ -59,6 +63,19 @@ namespace osu.Game.Beatmaps.Drawables.Cards
AutoSizeAxes = Axes.Y, AutoSizeAxes = Axes.Y,
Margin = new MarginPadding { Top = height }, Margin = new MarginPadding { Top = height },
Alpha = 0 Alpha = 0
},
borderContainer = new Container
{
RelativeSizeAxes = Axes.Both,
CornerRadius = BeatmapCard.CORNER_RADIUS,
Masking = true,
BorderThickness = 3,
Child = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0,
AlwaysPresent = true
}
} }
} }
}; };
@ -68,18 +85,30 @@ namespace osu.Game.Beatmaps.Drawables.Cards
private void load(OverlayColourProvider colourProvider) private void load(OverlayColourProvider colourProvider)
{ {
background.Colour = colourProvider.Background2; background.Colour = colourProvider.Background2;
borderContainer.BorderColour = colourProvider.Highlight1;
} }
protected override void LoadComplete() protected override void LoadComplete()
{ {
base.LoadComplete(); base.LoadComplete();
Expanded.BindValueChanged(_ => updateState()); Expanded.BindValueChanged(_ => updateState(), true);
FinishTransforms(true);
} }
private void updateState() private void updateState()
{ {
background.FadeTo(Expanded.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint); background.FadeTo(Expanded.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
dropdownContent.FadeTo(Expanded.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint); dropdownContent.FadeTo(Expanded.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
borderContainer.FadeTo(Expanded.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
content.TweenEdgeEffectTo(new EdgeEffectParameters
{
Type = EdgeEffectType.Shadow,
Offset = new Vector2(0, 2),
Radius = 10,
Colour = Colour4.Black.Opacity(Expanded.Value ? 0.3f : 0f),
Hollow = true,
}, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
} }
} }
} }