Implement CountryFilter component for RankingsOverlay (#7479)

Implement CountryFilter component for RankingsOverlay
This commit is contained in:
Dean Herbert 2020-01-14 19:17:47 +08:00 committed by GitHub
commit b407f33a04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 345 additions and 0 deletions

View File

@ -0,0 +1,76 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// See the LICENCE file in the repository root for full licence text.
using System;
using System.Collections.Generic;
using osu.Framework.Bindables;
using osu.Framework.Graphics.Containers;
using osu.Game.Overlays.Rankings;
using osu.Game.Users;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Shapes;
using osuTK.Graphics;
using osu.Game.Graphics.Sprites;
namespace osu.Game.Tests.Visual.Online
{
public class TestSceneRankingsCountryFilter : OsuTestScene
{
public override IReadOnlyList<Type> RequiredTypes => new[]
{
typeof(CountryFilter),
typeof(CountryPill)
};
public TestSceneRankingsCountryFilter()
{
var countryBindable = new Bindable<Country>();
AddRange(new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.Gray,
},
new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
new CountryFilter
{
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
Current = { BindTarget = countryBindable }
},
new OsuSpriteText
{
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
Text = "Some content",
Margin = new MarginPadding { Vertical = 20 }
}
}
}
});
var country = new Country
{
FlagName = "BY",
FullName = "Belarus"
};
var unknownCountry = new Country
{
FlagName = "CK",
FullName = "Cook Islands"
};
AddStep("Set country", () => countryBindable.Value = country);
AddStep("Set null country", () => countryBindable.Value = null);
AddStep("Set country with no flag", () => countryBindable.Value = unknownCountry);
}
}
}

View File

@ -0,0 +1,105 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// See the LICENCE file in the repository root for full licence text.
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.UserInterface;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Users;
using osuTK;
namespace osu.Game.Overlays.Rankings
{
public class CountryFilter : CompositeDrawable, IHasCurrentValue<Country>
{
private const int duration = 200;
private const int height = 50;
private readonly BindableWithCurrent<Country> current = new BindableWithCurrent<Country>();
public Bindable<Country> Current
{
get => current.Current;
set => current.Current = value;
}
private readonly Box background;
private readonly CountryPill countryPill;
private readonly Container content;
public CountryFilter()
{
RelativeSizeAxes = Axes.X;
InternalChild = content = new Container
{
RelativeSizeAxes = Axes.X,
Height = height,
Alpha = 0,
Children = new Drawable[]
{
background = new Box
{
RelativeSizeAxes = Axes.Both
},
new FillFlowContainer
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(10, 0),
Margin = new MarginPadding { Left = UserProfileOverlay.CONTENT_X_MARGIN },
Children = new Drawable[]
{
new OsuSpriteText
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Text = @"filtered by country:",
Font = OsuFont.GetFont(size: 14)
},
countryPill = new CountryPill
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Alpha = 0,
Current = Current
}
}
}
}
};
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
background.Colour = colours.GreySeafoam;
}
protected override void LoadComplete()
{
base.LoadComplete();
Current.BindValueChanged(onCountryChanged, true);
}
private void onCountryChanged(ValueChangedEvent<Country> country)
{
if (country.NewValue == null)
{
countryPill.Collapse();
this.ResizeHeightTo(0, duration, Easing.OutQuint);
content.FadeOut(duration, Easing.OutQuint);
return;
}
this.ResizeHeightTo(height, duration, Easing.OutQuint);
content.FadeIn(duration, Easing.OutQuint);
countryPill.Expand();
}
}
}

View File

@ -0,0 +1,164 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// See the LICENCE file in the repository root for full licence text.
using System.Collections.Generic;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Graphics.UserInterface;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites;
using osu.Game.Users;
using osu.Game.Users.Drawables;
using osuTK;
using osuTK.Graphics;
namespace osu.Game.Overlays.Rankings
{
public class CountryPill : CompositeDrawable, IHasCurrentValue<Country>
{
private const int duration = 200;
private readonly BindableWithCurrent<Country> current = new BindableWithCurrent<Country>();
public Bindable<Country> Current
{
get => current.Current;
set => current.Current = value;
}
private readonly Container content;
private readonly Box background;
private readonly UpdateableFlag flag;
private readonly OsuSpriteText countryName;
public CountryPill()
{
AutoSizeAxes = Axes.Both;
InternalChild = content = new CircularContainer
{
Height = 25,
AutoSizeDuration = duration,
AutoSizeEasing = Easing.OutQuint,
Masking = true,
Children = new Drawable[]
{
background = new Box
{
RelativeSizeAxes = Axes.Both
},
new FillFlowContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
Margin = new MarginPadding { Horizontal = 10 },
Direction = FillDirection.Horizontal,
Spacing = new Vector2(8, 0),
Children = new Drawable[]
{
new FillFlowContainer
{
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(3, 0),
Children = new Drawable[]
{
flag = new UpdateableFlag
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(22, 15)
},
countryName = new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Font = OsuFont.GetFont(size: 14)
}
}
},
new CloseButton
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Action = () => Current.Value = null
}
}
}
}
};
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
background.Colour = colours.GreySeafoamDarker;
}
protected override void LoadComplete()
{
base.LoadComplete();
Current.BindValueChanged(onCountryChanged, true);
}
public void Expand()
{
content.ClearTransforms();
content.AutoSizeAxes = Axes.X;
this.FadeIn(duration, Easing.OutQuint);
}
public void Collapse()
{
content.ClearTransforms();
content.AutoSizeAxes = Axes.None;
content.ResizeWidthTo(0, duration, Easing.OutQuint);
this.FadeOut(duration, Easing.OutQuint);
}
private void onCountryChanged(ValueChangedEvent<Country> country)
{
if (country.NewValue == null)
return;
flag.Country = country.NewValue;
countryName.Text = country.NewValue.FullName;
}
private class CloseButton : OsuHoverContainer
{
private readonly SpriteIcon icon;
protected override IEnumerable<Drawable> EffectTargets => new[] { icon };
public CloseButton()
{
AutoSizeAxes = Axes.Both;
Add(icon = new SpriteIcon
{
Size = new Vector2(8),
Icon = FontAwesome.Solid.Times
});
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
IdleColour = colours.GreySeafoamLighter;
HoverColour = Color4.White;
}
}
}
}