1
0
mirror of https://github.com/ppy/osu.git synced 2024-09-22 04:07:25 +08:00
This commit is contained in:
HoutarouOreki 2018-07-16 23:50:22 +02:00
parent 8e5c93e3ca
commit be977e2541
8 changed files with 635 additions and 0 deletions

View File

@ -0,0 +1,34 @@
// Copyright(c) 2007-2018 ppy Pty Ltd<contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using NUnit.Framework;
using osu.Game.Overlays;
namespace osu.Game.Tests.Visual
{
[TestFixture]
public class TestCaseChangelog : OsuTestCase
{
private ChangelogOverlay changelog;
protected override void LoadComplete()
{
base.LoadComplete();
Add(changelog = new ChangelogOverlay());
changelog.ToggleVisibility();
//AddStep(@"toggle", changelog.ToggleVisibility);
AddStep(@"toggle text 1", () => changelog.header.ActivateRelease("Release 20180626.1"));
AddStep(@"toggle text 2", () => changelog.header.ActivateRelease("Lazer 2018.713.1"));
AddStep(@"toggle text 3", () => changelog.header.ActivateRelease("Beta 20180626"));
AddStep(@"go to listing", changelog.header.ActivateListing);
}
public TestCaseChangelog()
{
}
}
}

View File

@ -0,0 +1,76 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using NUnit.Framework;
using OpenTK.Graphics;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
using osu.Game.Overlays.Changelog.Header;
namespace osu.Game.Tests.Visual
{
[TestFixture]
public class TestCaseTextBadgePair : OsuTestCase
{
private readonly Container container;
private readonly Box bottomLine;
private readonly TextBadgePair textBadgePair;
public TestCaseTextBadgePair()
{
Add(container = new Container
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new OpenTK.Vector2(300, 40),
Children = new Drawable[]
{
new Box
{
Colour = Color4.Gray,
RelativeSizeAxes = Axes.Both,
},
bottomLine = new Box // purple line
{
Colour = Color4.Purple,
RelativeSizeAxes = Axes.X,
Height = 3,
Anchor = Anchor.BottomLeft,
Origin = Anchor.CentreLeft,
},
textBadgePair = new TextBadgePair(Color4.White, "testing")
{
Anchor = Anchor.BottomCentre,
Origin = Anchor.BottomCentre,
}
},
});
AddStep(@"deactivate", () => textBadgePair.Deactivate());
AddStep(@"activate", () => textBadgePair.Activate());
AddStep(@"purple text", () => textBadgePair.SetTextColor(Color4.Purple, 100));
AddStep(@"white text", () => textBadgePair.SetTextColor(Color4.White, 100));
AddStep(@"purple badge", () => textBadgePair.SetBadgeColor(Color4.Purple, 100));
AddStep(@"white badge", () => textBadgePair.SetBadgeColor(Color4.White, 100));
AddStep(@"hide text", () => textBadgePair.HideText(250));
AddStep(@"show text", () => textBadgePair.ShowText(250));
}
//[BackgroundDependencyLoader]
//private void load(OsuColour colours)
//{
//}
//private enum BreadcrumbTab
//{
// Click,
// The,
// Circles,
//}
}
}

View File

@ -0,0 +1,190 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using OpenTK.Graphics;
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;
using osu.Framework.Graphics.Textures;
using osu.Game.Graphics.Backgrounds;
using osu.Game.Graphics.Sprites;
using osu.Game.Overlays.Changelog.Header;
using System;
using System.Collections.Generic;
using System.Text;
namespace osu.Game.Overlays.Changelog
{
public class ChangelogHeader : Container
{
private readonly Container coverContainer;
private Color4 purple = new Color4(191, 4, 255, 255);
private readonly Sprite coverImage;
private readonly Sprite headerBadge; //50x50, margin-right: 20
private readonly FillFlowContainer headerTextContainer;
private readonly OsuSpriteText title, titleStream;
private readonly TextBadgePairListing listing;
private readonly TextBadgePairRelease releaseStream;
private readonly FillFlowContainer breadcrumbContainer;
private const float cover_height = 310;
private const float title_height = 50;
private const float icon_size = 50;
private const float icon_margin = 20;
private const float version_height = 40;
public ChangelogHeader()
{
RelativeSizeAxes = Axes.X;
Height = cover_height + 5; // 5 is for the "badge" that sticks a bit out of the bottom
Masking = true; // is masking necessary? since I see it nearly everywhere
Children = new Drawable[]
{
coverContainer = new Container
{
RelativeSizeAxes = Axes.X,
Height = cover_height,
Children = new Drawable[]
{
coverImage = new Sprite
{
RelativeSizeAxes = Axes.Both,
Size = new OpenTK.Vector2(1),
},
new Container // cover
{
RelativeSizeAxes = Axes.X,
Height = cover_height,
Children = new Drawable[]
{
new Container // this is the line badge-Changelog-Stream
{
Height = title_height,
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Y = -version_height,
Children = new Drawable[]
{
new CircularContainer // a purple circle
{
X = icon_margin,
Masking = true,
BorderColour = purple,
BorderThickness = 3,
MaskingSmoothness = 1,
Size = new OpenTK.Vector2(50),
Children = new Drawable[]
{
headerBadge = new Sprite
{
Size = new OpenTK.Vector2(0.8f),
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Both,
},
new Box // this ensures the purple circle doesn't disappear..?
{
RelativeSizeAxes = Axes.Both,
Size = new OpenTK.Vector2(1),
AlwaysPresent = true,
Colour = Color4.Transparent,
}
}
},
headerTextContainer = new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
X = icon_size + icon_margin * 2,
Children = new Drawable[]
{
title = new OsuSpriteText
{
Text = "Changelog ",
TextSize = 30,
},
titleStream = new OsuSpriteText
{
Text = "Listing",
TextSize = 30,
Colour = purple,
},
}
}
}
},
breadcrumbContainer = new FillFlowContainer // Listing > Lazer 2018.713.1
{
X = 2 * icon_margin + icon_size - 10,
Height = version_height,
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Direction = FillDirection.Horizontal,
Children = new Drawable[]
{
listing = new TextBadgePairListing(purple),
releaseStream = new TextBadgePairRelease(purple, "Lazer")
},
},
new Box // purple line
{
Colour = purple,
RelativeSizeAxes = Axes.X,
Height = 3,
Anchor = Anchor.BottomLeft,
Origin = Anchor.CentreLeft,
},
}
}
}
}
};
breadcrumbContainer.OnLoadComplete = d =>
{
releaseStream.OnActivation = listing.Deactivate;
listing.OnActivation = releaseStream.Deactivate;
};
listing.text.OnUpdate = d =>
{
listing.lineBadge.ResizeWidthTo(listing.text.DrawWidth);
};
}
public void ListingActivation()
{
releaseStream.Deactivate();
}
public void ReleaseActivation()
{
listing.Deactivate();
}
public void ActivateRelease(string displayText)
{
releaseStream.Activate(displayText);
titleStream.Text = displayText;
}
public void ActivateListing()
{
listing.Activate();
}
[BackgroundDependencyLoader]
private void load(TextureStore textures)
{
// should be added to osu-resources?
// headerBadge.Texture = textures.Get(@"https://osu.ppy.sh/images/icons/changelog.svg"); // this is not working
headerBadge.Texture = textures.Get(@"https://i.imgur.com/HQM3Vhp.png");
coverImage.Texture = textures.Get(@"https://osu.ppy.sh/images/headers/changelog.jpg");
}
}
}

View File

@ -0,0 +1,35 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using osu.Framework.Graphics;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Input;
using osu.Game.Graphics.Containers;
namespace osu.Game.Overlays.Changelog.Header
{
public class LineBadge : Circle
{
private const float transition_duration = 100;
private const float uncollapsed_height = 10;
public float UncollapsedHeight => uncollapsed_height;
public float TransitionDuration => transition_duration;
private bool isCollapsed;
public bool IsCollapsed
{
get { return isCollapsed; }
set
{
isCollapsed = value;
this.ResizeHeightTo(value ? 1 : 10, transition_duration);
}
}
public LineBadge(bool startCollapsed = false)
{
IsCollapsed = startCollapsed;
Anchor = Anchor.BottomCentre;
Origin = Anchor.Centre;
}
}
}

View File

@ -0,0 +1,113 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using OpenTK.Graphics;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Input;
using osu.Game.Overlays.Changelog;
using System;
namespace osu.Game.Overlays.Changelog.Header
{
public class TextBadgePair : ClickableContainer
{
// When in listing, "Listing" is white and doesn't change on mouseover
// when release stream is chosen, "Listing" turns purple, and lighter font
// on mouseover, the badge scales up
// Version name steals "Listing"'s styling
public SpriteText text;
public LineBadge lineBadge;
public Action OnActivation;
public Action OnDeactivation;
public void SetTextColor(ColourInfo newColour, double duration = 0, Easing easing = Easing.None)
{
text.FadeColour(newColour, duration, easing);
}
public void SetBadgeColor(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.IsCollapsed = true;
text.MoveToY(20, duration, easing)
.FadeOut(duration, easing);
}
public void ShowText(double duration = 0, Easing easing = Easing.InOutCubic)
{
lineBadge.IsCollapsed = false;
text.MoveToY(0, duration, easing)
.FadeIn(duration, easing)
.Finally(d => lineBadge.ResizeWidthTo(text.DrawWidth, 250));
}
public void ChangeText(double duration = 0, string displayText = null, Easing easing = Easing.InOutCubic)
{
lineBadge.IsCollapsed = true;
text.MoveToY(20, duration, easing)
.FadeOut(duration, easing)
.Finally(d =>
{
lineBadge.ResizeWidthTo(0);
if (!string.IsNullOrEmpty(displayText)) text.Text = displayText;
text.MoveToY(0, duration, easing)
.FadeIn(duration, easing)
.OnComplete(dd => {
lineBadge.ResizeWidthTo(text.DrawWidth);
lineBadge.IsCollapsed = false;
});
});
}
public TextBadgePair(ColourInfo badgeColour, string displayText = "Listing")
{
AutoSizeAxes = Axes.X;
RelativeSizeAxes = Axes.Y;
Children = new Drawable[]
{
text = new SpriteText
{
TextSize = 20,
Text = displayText,
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
AlwaysPresent = true,
Margin = new MarginPadding()
{
Top = 5,
Bottom = 15,
Left = 10,
Right = 10,
}
},
lineBadge = new LineBadge
{
Colour = badgeColour,
}
};
}
public virtual void Deactivate()
{
lineBadge.IsCollapsed = true;
text.Font = "Exo2.0-Regular";
}
public virtual void Activate()
{
lineBadge.IsCollapsed = false;
text.Font = "Exo2.0-Bold";
}
}
}

View File

@ -0,0 +1,58 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using OpenTK.Graphics;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Input;
using System;
namespace osu.Game.Overlays.Changelog.Header
{
public class TextBadgePairListing : TextBadgePair
{
private TextBadgePairRelease releaseBadge;
private ColourInfo badgeColour;
public TextBadgePairListing(ColourInfo badgeColour) : base(badgeColour, "Listing")
{
this.releaseBadge = releaseBadge;
this.badgeColour = badgeColour;
text.Font = "Exo2.0-Bold";
}
public override void Activate()
{
lineBadge.IsCollapsed = false;
text.Font = "Exo2.0-Bold";
SetTextColor(Color4.White, 100);
OnActivation?.Invoke();
}
public override void Deactivate()
{
lineBadge.IsCollapsed = true;
//text.Font = "Exo2.0-Regular"; // commented out since it makes bad resize-jumping
SetTextColor(badgeColour, 100);
OnDeactivation?.Invoke();
}
protected override bool OnClick(InputState state)
{
Activate();
return base.OnClick(state);
}
protected override bool OnHover(InputState state)
{
lineBadge.ResizeHeightTo(lineBadge.UncollapsedHeight, lineBadge.TransitionDuration);
return base.OnHover(state);
}
protected override void OnHoverLost(InputState state)
{
if (lineBadge.IsCollapsed) lineBadge.ResizeHeightTo(1, lineBadge.TransitionDuration);
base.OnHoverLost(state);
}
}
}

View File

@ -0,0 +1,42 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Input;
namespace osu.Game.Overlays.Changelog.Header
{
public class TextBadgePairRelease : TextBadgePair
{
private TextBadgePairListing listingBadge;
public TextBadgePairRelease(ColourInfo badgeColour, string displayText) : base(badgeColour, displayText)
{
this.listingBadge = listingBadge;
text.Font = "Exo2.0-Bold";
text.Y = 20;
text.Alpha = 0;
}
public void SetText(string displayText)
{
text.Text = displayText;
}
public void Activate(string displayText = null)
{
ClearTransforms();
if (text.IsPresent) ChangeText(250, displayText);
else ShowText();
OnActivation?.Invoke();
}
public override void Deactivate()
{
FinishTransforms(true);
HideText(250);
OnDeactivation?.Invoke();
}
}
}

View File

@ -0,0 +1,87 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using OpenTK;
using OpenTK.Graphics;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites;
using osu.Game.Overlays.Changelog;
using System;
using System.Collections.Generic;
using System.Text;
namespace osu.Game.Overlays
{
public class ChangelogOverlay : WaveOverlayContainer
{
private readonly ScrollContainer scroll;
public ChangelogHeader header;
public ChangelogOverlay()
{
Waves.FirstWaveColour = OsuColour.Gray(0.4f);
Waves.SecondWaveColour = OsuColour.Gray(0.3f);
Waves.ThirdWaveColour = OsuColour.Gray(0.2f);
Waves.FourthWaveColour = OsuColour.Gray(0.1f);
Anchor = Anchor.TopCentre;
Origin = Anchor.TopCentre;
RelativeSizeAxes = Axes.Both;
Width = 0.85f;
Masking = true;
EdgeEffect = new EdgeEffectParameters
{
Colour = Color4.Black.Opacity(0),
Type = EdgeEffectType.Shadow,
Radius = 3,
Offset = new Vector2(0f, 1f),
};
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = new Color4(20, 18, 23, 255)
},
scroll = new ScrollContainer
{
RelativeSizeAxes = Axes.Both,
ScrollbarVisible = false,
Child = new ReverseChildIDFillFlowContainer<Drawable>
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
header = new ChangelogHeader(),
},
},
},
};
}
// receive input outside our bounds so we can trigger a close event on ourselves.
public override bool ReceiveMouseInputAt(Vector2 screenSpacePos) => true;
protected override void PopIn()
{
base.PopIn();
FadeEdgeEffectTo(0.25f, WaveContainer.APPEAR_DURATION, Easing.In);
}
protected override void PopOut()
{
base.PopOut();
FadeEdgeEffectTo(0, WaveContainer.DISAPPEAR_DURATION, Easing.Out);
}
}
}