Improve UX of download buttons on beatmap set overlay

This commit is contained in:
Dean Herbert 2019-01-18 12:04:49 +09:00
parent b62630ecd2
commit 8848fa8b1b
2 changed files with 63 additions and 50 deletions

View File

@ -29,6 +29,8 @@ namespace osu.Game.Overlays.BeatmapSet.Buttons
Width = 120;
BeatmapSetDownloader downloader;
FillFlowContainer textSprites;
AddRange(new Drawable[]
{
new Container
@ -39,27 +41,14 @@ namespace osu.Game.Overlays.BeatmapSet.Buttons
Children = new Drawable[]
{
downloader = new BeatmapSetDownloader(set, noVideo),
new FillFlowContainer
textSprites = new FillFlowContainer
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
AutoSizeAxes = Axes.Both,
AutoSizeDuration = 500,
AutoSizeEasing = Easing.OutQuint,
Direction = FillDirection.Vertical,
Children = new[]
{
new OsuSpriteText
{
Text = "Download",
TextSize = 13,
Font = @"Exo2.0-Bold",
},
new OsuSpriteText
{
Text = set.OnlineInfo.HasVideo && noVideo ? "without Video" : string.Empty,
TextSize = 11,
Font = @"Exo2.0-Bold",
},
},
},
new SpriteIcon
{
@ -97,14 +86,42 @@ namespace osu.Game.Overlays.BeatmapSet.Buttons
{
switch (state)
{
case BeatmapSetDownloader.DownloadStatus.Downloading:
textSprites.Children = new Drawable[]
{
new OsuSpriteText
{
Text = "Downloading...",
TextSize = 13,
Font = @"Exo2.0-Bold",
},
};
break;
case BeatmapSetDownloader.DownloadStatus.Downloaded:
this.FadeOut(200);
break;
case BeatmapSetDownloader.DownloadStatus.NotDownloaded:
textSprites.Children = new Drawable[]
{
new OsuSpriteText
{
Text = "Download",
TextSize = 13,
Font = @"Exo2.0-Bold",
},
new OsuSpriteText
{
Text = set.OnlineInfo.HasVideo && noVideo ? "without Video" : string.Empty,
TextSize = 11,
Font = @"Exo2.0-Bold",
},
};
this.FadeIn(200);
break;
}
};
downloader.DownloadState.TriggerChange();
}
[BackgroundDependencyLoader]

View File

@ -28,10 +28,8 @@ namespace osu.Game.Overlays.BeatmapSet
private readonly Box tabsBg;
private readonly UpdateableBeatmapSetCover cover;
private readonly OsuSpriteText title, artist;
private readonly Container noVideoButtons;
private readonly FillFlowContainer videoButtons;
private readonly AuthorInfo author;
private readonly Container downloadButtonsContainer;
private readonly FillFlowContainer downloadButtonsContainer;
private readonly BeatmapSetOnlineStatusPill onlineStatusPill;
public Details Details;
@ -54,8 +52,13 @@ namespace osu.Game.Overlays.BeatmapSet
}
}
private BeatmapSetDownloader downloader;
private void updateDisplay()
{
downloader?.Expire();
title.Text = BeatmapSet?.Metadata.Title ?? string.Empty;
artist.Text = BeatmapSet?.Metadata.Artist ?? string.Empty;
onlineStatusPill.Status = BeatmapSet?.OnlineInfo.Status ?? BeatmapSetOnlineStatus.None;
@ -66,24 +69,30 @@ namespace osu.Game.Overlays.BeatmapSet
downloadButtonsContainer.FadeIn(transition_duration);
favouriteButton.FadeIn(transition_duration);
if (BeatmapSet.OnlineInfo.HasVideo)
Add(downloader = new BeatmapSetDownloader(BeatmapSet));
downloader.DownloadState.BindValueChanged(state =>
{
videoButtons.Children = new[]
switch (state)
{
new DownloadButton(BeatmapSet),
new DownloadButton(BeatmapSet, true),
case BeatmapSetDownloader.DownloadStatus.Downloaded:
// temporary for UX until new design is implemented.
downloadButtonsContainer.Child = new osu.Game.Overlays.Direct.DownloadButton(BeatmapSet)
{
Width = 50,
RelativeSizeAxes = Axes.Y
};
videoButtons.FadeIn(transition_duration);
noVideoButtons.FadeOut(transition_duration);
}
else
{
noVideoButtons.Child = new DownloadButton(BeatmapSet);
noVideoButtons.FadeIn(transition_duration);
videoButtons.FadeOut(transition_duration);
break;
case BeatmapSetDownloader.DownloadStatus.Downloading:
// temporary to avoid showing two buttons for maps with novideo. will be fixed in new beatmap overlay design.
downloadButtonsContainer.Child = new DownloadButton(BeatmapSet);
break;
default:
downloadButtonsContainer.Child = new DownloadButton(BeatmapSet);
if (BeatmapSet.OnlineInfo.HasVideo)
downloadButtonsContainer.Add(new DownloadButton(BeatmapSet, true));
break;
}
}, true);
}
else
{
@ -196,24 +205,11 @@ namespace osu.Game.Overlays.BeatmapSet
Children = new Drawable[]
{
favouriteButton = new FavouriteButton(),
downloadButtonsContainer = new Container
downloadButtonsContainer = new FillFlowContainer
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Left = buttons_height + buttons_spacing },
Children = new Drawable[]
{
noVideoButtons = new Container
{
RelativeSizeAxes = Axes.Both,
Alpha = 0f,
},
videoButtons = new FillFlowContainer
{
RelativeSizeAxes = Axes.Both,
Spacing = new Vector2(buttons_spacing),
Alpha = 0f,
},
},
},
},
},