1
0
mirror of https://github.com/ppy/osu.git synced 2024-11-11 13:37:25 +08:00

Initial clean-up pass of breadcrumb and header

This commit is contained in:
Dean Herbert 2019-05-15 17:55:26 +09:00
parent d7098e2066
commit f49b0dc16d
7 changed files with 89 additions and 123 deletions

View File

@ -2,6 +2,7 @@
// See the LICENCE file in the repository root for full licence text.
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Overlays.Changelog.Header;
@ -13,7 +14,7 @@ namespace osu.Game.Tests.Visual
{
public TestCaseTextBadgePair()
{
TextBadgePair textBadgePair;
Breadcrumb breadcrumb;
Add(new Container
{
@ -29,7 +30,7 @@ namespace osu.Game.Tests.Visual
Alpha = 0.5f,
RelativeSizeAxes = Axes.Both,
},
textBadgePair = new TextBadgePair(Color4.DeepSkyBlue, "Test")
breadcrumb = new TestBadgePair(Color4.DeepSkyBlue, "Test")
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
@ -37,12 +38,20 @@ namespace osu.Game.Tests.Visual
}
});
AddStep(@"Deactivate", textBadgePair.Deactivate);
AddStep(@"Activate", textBadgePair.Activate);
AddStep(@"Hide text", () => textBadgePair.HideText(200));
AddStep(@"Show text", () => textBadgePair.ShowText(200));
AddStep(@"Different text", () => textBadgePair.ChangeText(200, "This one's a little bit wider"));
AddStep(@"Different text", () => textBadgePair.ChangeText(200, "Ok?.."));
AddStep(@"Deactivate", breadcrumb.Deactivate);
AddStep(@"Activate", breadcrumb.Activate);
AddStep(@"Hide text", () => breadcrumb.HideText(200));
AddStep(@"Show text", () => breadcrumb.ShowText(200));
AddStep(@"Different text", () => breadcrumb.ShowText(200, "This one's a little bit wider"));
AddStep(@"Different text", () => breadcrumb.ShowText(200, "Ok?.."));
}
private class TestBadgePair : Breadcrumb
{
public TestBadgePair(ColourInfo badgeColour, string displayText = "Listing", bool startCollapsed = true)
: base(badgeColour, displayText, startCollapsed)
{
}
}
}
}

View File

@ -12,9 +12,8 @@ using osuTK.Graphics;
namespace osu.Game.Overlays.Changelog
{
public class ChangelogBadges : Container
public class BadgeDisplay : CompositeDrawable
{
private const float container_height = 106.5f;
private const float vertical_padding = 20;
private const float horizontal_padding = 85;
@ -25,11 +24,11 @@ namespace osu.Game.Overlays.Changelog
private readonly FillFlowContainer<StreamBadge> badgesContainer;
private long selectedStreamId = -1;
public ChangelogBadges()
public BadgeDisplay()
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
Children = new Drawable[]
InternalChildren = new Drawable[]
{
new Box
{

View File

@ -9,7 +9,6 @@ using osu.Framework.Graphics.Sprites;
using osu.Framework.Graphics.Textures;
using osu.Game.Graphics.Sprites;
using osu.Game.Overlays.Changelog.Header;
using System;
using osu.Game.Graphics;
using osuTK;
using osuTK.Graphics;
@ -19,9 +18,9 @@ namespace osu.Game.Overlays.Changelog
public class ChangelogHeader : Container
{
private OsuSpriteText titleStream;
private TextBadgePairListing listing;
private BreadcrumbListing listing;
private SpriteIcon chevron;
private TextBadgePairRelease releaseStream;
private BreadcrumbRelease releaseStream;
public delegate void ListingSelectedEventHandler();
@ -130,7 +129,10 @@ namespace osu.Game.Overlays.Changelog
Direction = FillDirection.Horizontal,
Children = new Drawable[]
{
listing = new TextBadgePairListing(colours.Violet),
listing = new BreadcrumbListing(colours.Violet)
{
Action = () => ListingSelected?.Invoke()
},
new Container // without a container, moving the chevron wont work
{
Anchor = Anchor.CentreLeft,
@ -156,7 +158,10 @@ namespace osu.Game.Overlays.Changelog
},
},
},
releaseStream = new TextBadgePairRelease(colours.Violet, "Lazer")
releaseStream = new BreadcrumbRelease(colours.Violet, "Lazer")
{
Action = () => titleStream.FlashColour(Color4.White, 500, Easing.OutQuad)
}
},
},
new Box
@ -168,15 +173,12 @@ namespace osu.Game.Overlays.Changelog
Origin = Anchor.CentreLeft,
},
};
listing.Activated += OnListingSelected;
releaseStream.Activated += OnReleaseSelected;
}
public void ShowBuild(string displayName, string displayVersion)
{
listing.Deactivate();
releaseStream.Activate($"{displayName} {displayVersion}");
releaseStream.ShowBuild($"{displayName} {displayVersion}");
titleStream.Text = displayName;
titleStream.FlashColour(Color4.White, 500, Easing.OutQuad);
chevron.MoveToX(0, 100).FadeIn(100);
@ -190,15 +192,5 @@ namespace osu.Game.Overlays.Changelog
titleStream.FlashColour(Color4.White, 500, Easing.OutQuad);
chevron.MoveToX(-20, 100).FadeOut(100);
}
protected virtual void OnListingSelected(object source, EventArgs e)
{
ListingSelected?.Invoke();
}
protected virtual void OnReleaseSelected(object source, EventArgs e)
{
titleStream.FlashColour(Color4.White, 500, Easing.OutQuad);
}
}
}

View File

@ -15,20 +15,19 @@ using osu.Game.Graphics;
namespace osu.Game.Overlays.Changelog.Header
{
public class TextBadgePair : Container
public abstract class Breadcrumb : Container
{
protected SpriteText Text;
protected LineBadge LineBadge;
public bool IsActivated { get; protected set; }
public delegate void ActivatedEventHandler(object source, EventArgs args);
public event ActivatedEventHandler Activated;
public Action Action;
private SampleChannel sampleHover;
private SampleChannel sampleActivate;
public TextBadgePair(ColourInfo badgeColour, string displayText = "Listing", bool startCollapsed = true)
protected Breadcrumb(ColourInfo badgeColour, string displayText = "Listing", bool startCollapsed = true)
{
AutoSizeAxes = Axes.X;
RelativeSizeAxes = Axes.Y;
@ -53,42 +52,24 @@ namespace osu.Game.Overlays.Changelog.Header
};
}
/// <param name="duration">
/// The duration of popping in and popping out not combined.
/// Full change takes double this time.</param>
/// <param name="displayText"></param>
/// <param name="easing"></param>
public void ChangeText(double duration = 0, string displayText = null, Easing easing = Easing.InOutCubic)
{
LineBadge.Collapse();
Text.MoveToY(20, duration, easing)
.FadeOut(duration, easing)
.Then()
.MoveToY(0, duration, easing)
.FadeIn(duration, easing);
// since using .finally/.oncomplete after first fadeout made the badge not hide
// sometimes in visual tests (https://streamable.com/0qssq), I'm using a scheduler here
Scheduler.AddDelayed(() =>
{
if (!string.IsNullOrEmpty(displayText))
Text.Text = displayText;
LineBadge.Uncollapse();
}, duration);
}
public virtual void Deactivate()
{
if (!IsActivated)
return;
IsActivated = false;
LineBadge.Collapse();
Text.Font = "Exo2.0-Regular";
Text.Font = Text.Font.With(weight: FontWeight.Regular);
}
public virtual void Activate()
{
if (IsActivated)
return;
IsActivated = true;
LineBadge.Uncollapse();
Text.Font = "Exo2.0-Bold";
Text.Font = Text.Font.With(weight: FontWeight.Bold);
}
public void SetTextColour(ColourInfo newColour, double duration = 0, Easing easing = Easing.None)
@ -96,11 +77,6 @@ namespace osu.Game.Overlays.Changelog.Header
Text.FadeColour(newColour, duration, easing);
}
public void SetBadgeColour(ColourInfo newColour, double duration = 0, Easing easing = Easing.None)
{
LineBadge.FadeColour(newColour, duration, easing);
}
public void HideText(double duration = 0, Easing easing = Easing.InOutCubic)
{
LineBadge.Collapse();
@ -110,11 +86,18 @@ namespace osu.Game.Overlays.Changelog.Header
public void ShowText(double duration = 0, string displayText = null, Easing easing = Easing.InOutCubic)
{
LineBadge.Uncollapse();
if (!string.IsNullOrEmpty(displayText))
Text.Text = displayText;
Text.MoveToY(0, duration, easing)
LineBadge.Collapse();
Text.MoveToY(20, duration, easing)
.FadeOut(duration, easing)
.Then()
.MoveToY(0, duration, easing)
.FadeIn(duration, easing);
Scheduler.AddDelayed(() =>
{
Text.Text = displayText;
LineBadge.Uncollapse();
}, duration);
}
protected override bool OnHover(HoverEvent e)
@ -126,14 +109,11 @@ namespace osu.Game.Overlays.Changelog.Header
protected override bool OnClick(ClickEvent e)
{
OnActivated();
Action?.Invoke();
Activate();
sampleActivate?.Play();
return base.OnClick(e);
}
protected virtual void OnActivated()
{
Activated?.Invoke(this, EventArgs.Empty);
return true;
}
[BackgroundDependencyLoader]

View File

@ -4,31 +4,32 @@
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Input.Events;
using osu.Game.Graphics;
using osuTK.Graphics;
namespace osu.Game.Overlays.Changelog.Header
{
public class TextBadgePairListing : TextBadgePair
public class BreadcrumbListing : Breadcrumb
{
private readonly ColourInfo badgeColour;
public TextBadgePairListing(ColourInfo badgeColour)
public BreadcrumbListing(ColourInfo badgeColour)
: base(badgeColour, "Listing", false)
{
IsActivated = true;
this.badgeColour = badgeColour;
Text.Font = "Exo2.0-Bold";
Text.Font = Text.Font.With(weight: FontWeight.Bold);
Text.Anchor = Anchor.TopCentre;
Text.Origin = Anchor.TopCentre;
// I'm using this for constant badge width here, so that the whole
// thing doesn't jump left/right when listing's size changes
// due to different font weight (and thus width)
LineBadge.RelativeSizeAxes = Axes.None;
AutoSizeAxes = Axes.None;
}
// this doesn't work without the scheduler
// (because the text isn't yet fully drawn when it's loaded?)
Text.OnLoadComplete += d => Scheduler.Add(UpdateBadgeWidth);
protected override void LoadComplete()
{
base.LoadComplete();
Activate();
Width = Text.DrawWidth;
}
public override void Activate()
@ -36,24 +37,17 @@ namespace osu.Game.Overlays.Changelog.Header
if (IsActivated)
return;
IsActivated = true;
LineBadge.Uncollapse();
Text.Font = "Exo2.0-Bold";
base.Activate();
SetTextColour(Color4.White, 100);
}
public override void Deactivate()
{
IsActivated = false;
LineBadge.Collapse();
Text.Font = "Exo2.0-Regular";
SetTextColour(badgeColour, 100);
}
if (!IsActivated)
return;
protected override bool OnClick(ClickEvent e)
{
Activate();
return base.OnClick(e);
base.Deactivate();
SetTextColour(badgeColour, 100);
}
protected override bool OnHover(HoverEvent e)
@ -68,7 +62,5 @@ namespace osu.Game.Overlays.Changelog.Header
LineBadge.Collapse();
base.OnHoverLost(e);
}
public void UpdateBadgeWidth() => LineBadge.ResizeWidthTo(Text.DrawWidth);
}
}

View File

@ -5,11 +5,11 @@ using osu.Framework.Graphics.Colour;
namespace osu.Game.Overlays.Changelog.Header
{
public class TextBadgePairRelease : TextBadgePair
public class BreadcrumbRelease : Breadcrumb
{
private const float transition_duration = 125;
public TextBadgePairRelease(ColourInfo badgeColour, string displayText)
public BreadcrumbRelease(ColourInfo badgeColour, string displayText)
: base(badgeColour, displayText)
{
Text.Font = "Exo2.0-Bold";
@ -17,24 +17,17 @@ namespace osu.Game.Overlays.Changelog.Header
Text.Alpha = 0;
}
public void SetText(string displayText) => Text.Text = displayText;
public void Activate(string displayText = null)
public void ShowBuild(string displayText = null)
{
if (IsActivated)
{
if (displayText != Text.Text)
ChangeText(transition_duration, displayText);
}
else
ShowText(transition_duration, displayText);
ShowText(transition_duration, displayText);
IsActivated = true;
}
public override void Deactivate()
{
IsActivated = false;
if (!IsActivated)
return;
HideText(transition_duration);
}
}

View File

@ -23,7 +23,7 @@ namespace osu.Game.Overlays
{
private ChangelogHeader header;
private ChangelogBadges badges;
private BadgeDisplay badgeDisplay;
private ChangelogContent listing;
private ChangelogContent content;
@ -66,15 +66,16 @@ namespace osu.Game.Overlays
Children = new Drawable[]
{
header = new ChangelogHeader(),
badges = new ChangelogBadges(),
badgeDisplay = new BadgeDisplay(),
listing = new ChangelogContent(),
content = new ChangelogContent()
},
},
},
};
header.ListingSelected += ShowListing;
badges.Selected += onBuildSelected;
badgeDisplay.Selected += onBuildSelected;
listing.BuildSelected += onBuildSelected;
content.BuildSelected += onBuildSelected;
@ -137,11 +138,11 @@ namespace osu.Game.Overlays
isAtListing = true;
var req = new GetChangelogRequest();
badges.SelectNone();
badgeDisplay.SelectNone();
req.Success += res =>
{
listing.ShowListing(res.Builds);
badges.Populate(res.Streams);
badgeDisplay.Populate(res.Streams);
};
API.Queue(req);
@ -157,7 +158,7 @@ namespace osu.Game.Overlays
isAtListing = true;
content.Hide();
listing.Show();
badges.SelectNone();
badgeDisplay.SelectNone();
listing.Show();
scroll.ScrollTo(savedScrollPosition);
}
@ -180,7 +181,7 @@ namespace osu.Game.Overlays
req.Success += res => header.ShowBuild(res.UpdateStream.DisplayName, res.DisplayVersion);
if (updateBadges)
badges.SelectUpdateStream(build.UpdateStream.Name);
badgeDisplay.SelectUpdateStream(build.UpdateStream.Name);
req.Success += apiChangelog =>
{