Implement LoadingButton component

This commit is contained in:
Andrei Zavatski
2019-10-17 13:57:17 +03:00
parent 1f28c00594
commit d3a8dfd5ff
2 changed files with 135 additions and 90 deletions

View File

@ -0,0 +1,96 @@
// 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.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Input.Events;
using osu.Game.Graphics.Containers;
using osuTK;
namespace osu.Game.Graphics.UserInterface
{
public abstract class LoadingButton : OsuHoverContainer
{
private const float fade_duration = 200;
private bool isLoading;
public bool IsLoading
{
get => isLoading;
set
{
isLoading = value;
Enabled.Value = !isLoading;
if (value)
{
loading.Show();
content.FadeOut(fade_duration, Easing.OutQuint);
OnLoadingStart();
}
else
{
loading.Hide();
content.FadeIn(fade_duration, Easing.OutQuint);
OnLoadingFinished();
}
}
}
public Vector2 LoadingAnimationSize
{
get => loading.Size;
set => loading.Size = value;
}
private readonly Container background;
private readonly LoadingAnimation loading;
private readonly Drawable content;
public LoadingButton()
{
Child = background = CreateBackground();
background.AddRange(new Drawable[]
{
content = CreateContent(),
loading = new LoadingAnimation
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(12)
}
});
}
protected override bool OnClick(ClickEvent e)
{
if (!Enabled.Value)
return false;
try
{
return base.OnClick(e);
}
finally
{
// run afterwards as this will disable this button.
IsLoading = true;
}
}
protected virtual void OnLoadingStart()
{
}
protected virtual void OnLoadingFinished()
{
}
protected abstract Container CreateBackground();
protected abstract Drawable CreateContent();
}
}

View File

@ -5,8 +5,6 @@ using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers; using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes; using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites; using osu.Framework.Graphics.Sprites;
using osu.Framework.Input.Events;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites; using osu.Game.Graphics.Sprites;
using osuTK; using osuTK;
using osuTK.Graphics; using osuTK.Graphics;
@ -14,10 +12,8 @@ using System.Collections.Generic;
namespace osu.Game.Graphics.UserInterface namespace osu.Game.Graphics.UserInterface
{ {
public class ShowMoreButton : OsuHoverContainer public class ShowMoreButton : LoadingButton
{ {
private const float fade_duration = 200;
private Color4 chevronIconColour; private Color4 chevronIconColour;
protected Color4 ChevronIconColour protected Color4 ChevronIconColour
@ -32,55 +28,34 @@ namespace osu.Game.Graphics.UserInterface
set => text.Text = value; set => text.Text = value;
} }
private bool isLoading;
public bool IsLoading
{
get => isLoading;
set
{
isLoading = value;
Enabled.Value = !isLoading;
if (value)
{
loading.Show();
content.FadeOut(fade_duration, Easing.OutQuint);
}
else
{
loading.Hide();
content.FadeIn(fade_duration, Easing.OutQuint);
}
}
}
private readonly Box background;
private readonly LoadingAnimation loading;
private readonly FillFlowContainer content;
private readonly ChevronIcon leftChevron;
private readonly ChevronIcon rightChevron;
private readonly SpriteText text;
protected override IEnumerable<Drawable> EffectTargets => new[] { background }; protected override IEnumerable<Drawable> EffectTargets => new[] { background };
private ChevronIcon leftChevron;
private ChevronIcon rightChevron;
private SpriteText text;
private Box background;
public ShowMoreButton() public ShowMoreButton()
{ {
AutoSizeAxes = Axes.Both; AutoSizeAxes = Axes.Both;
Children = new Drawable[] AddInternal(new CircularContainer
{ {
new CircularContainer Masking = true,
Size = new Vector2(140, 30)
});
}
protected override Container CreateBackground() => new CircularContainer
{ {
Masking = true, Masking = true,
Size = new Vector2(140, 30), Size = new Vector2(140, 30),
Children = new Drawable[] Child = background = new Box
{
background = new Box
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
}, }
content = new FillFlowContainer };
protected override Drawable CreateContent() => new FillFlowContainer
{ {
Anchor = Anchor.Centre, Anchor = Anchor.Centre,
Origin = Anchor.Centre, Origin = Anchor.Centre,
@ -99,33 +74,7 @@ namespace osu.Game.Graphics.UserInterface
}, },
rightChevron = new ChevronIcon(), rightChevron = new ChevronIcon(),
} }
},
loading = new LoadingAnimation
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(12)
},
}
}
}; };
}
protected override bool OnClick(ClickEvent e)
{
if (!Enabled.Value)
return false;
try
{
return base.OnClick(e);
}
finally
{
// run afterwards as this will disable this button.
IsLoading = true;
}
}
private class ChevronIcon : SpriteIcon private class ChevronIcon : SpriteIcon
{ {