From 8848fa8b1b0f8065972327d8d1bafc9d8637b721 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 18 Jan 2019 12:04:49 +0900 Subject: [PATCH] Improve UX of download buttons on beatmap set overlay --- .../BeatmapSet/Buttons/DownloadButton.cs | 49 +++++++++----- osu.Game/Overlays/BeatmapSet/Header.cs | 64 +++++++++---------- 2 files changed, 63 insertions(+), 50 deletions(-) diff --git a/osu.Game/Overlays/BeatmapSet/Buttons/DownloadButton.cs b/osu.Game/Overlays/BeatmapSet/Buttons/DownloadButton.cs index 9d9f71a7fa..a44e2c7fab 100644 --- a/osu.Game/Overlays/BeatmapSet/Buttons/DownloadButton.cs +++ b/osu.Game/Overlays/BeatmapSet/Buttons/DownloadButton.cs @@ -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] diff --git a/osu.Game/Overlays/BeatmapSet/Header.cs b/osu.Game/Overlays/BeatmapSet/Header.cs index d353522d8d..c702c7cb87 100644 --- a/osu.Game/Overlays/BeatmapSet/Header.cs +++ b/osu.Game/Overlays/BeatmapSet/Header.cs @@ -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), - }; - - videoButtons.FadeIn(transition_duration); - noVideoButtons.FadeOut(transition_duration); - } - else - { - noVideoButtons.Child = new DownloadButton(BeatmapSet); - - noVideoButtons.FadeIn(transition_duration); - videoButtons.FadeOut(transition_duration); - } + 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 + }; + 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, - }, - }, + Spacing = new Vector2(buttons_spacing), }, }, },