Merge pull request #19658 from peppy/user-button-better-display

Display connecting / failing states on toolbar user display
This commit is contained in:
Dan Balasescu 2022-08-09 17:59:28 +09:00 committed by GitHub
commit efc4a129d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 190 additions and 25 deletions

View File

@ -0,0 +1,87 @@
// 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 NUnit.Framework;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Online.API;
using osu.Game.Overlays.Toolbar;
using osuTK;
using osuTK.Graphics;
namespace osu.Game.Tests.Visual.Menus
{
[TestFixture]
public class TestSceneToolbarUserButton : OsuManualInputManagerTestScene
{
public TestSceneToolbarUserButton()
{
Container mainContainer;
Children = new Drawable[]
{
mainContainer = new Container
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.X,
Height = Toolbar.HEIGHT,
Children = new Drawable[]
{
new Box
{
Colour = Color4.Black,
RelativeSizeAxes = Axes.Both,
},
new FillFlowContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
Direction = FillDirection.Horizontal,
Children = new Drawable[]
{
new Box
{
Colour = Color4.DarkRed,
RelativeSizeAxes = Axes.Y,
Width = 2,
},
new ToolbarUserButton(),
new Box
{
Colour = Color4.DarkRed,
RelativeSizeAxes = Axes.Y,
Width = 2,
},
}
},
}
},
};
AddSliderStep("scale", 0.5, 4, 1, scale => mainContainer.Scale = new Vector2((float)scale));
}
[Test]
public void TestLoginLogout()
{
AddStep("Log out", () => ((DummyAPIAccess)API).Logout());
AddStep("Log in", () => ((DummyAPIAccess)API).Login("wang", "jang"));
}
[Test]
public void TestStates()
{
AddStep("Log in", () => ((DummyAPIAccess)API).Login("wang", "jang"));
foreach (var state in Enum.GetValues<APIState>())
{
AddStep($"Change state to {state}", () => ((DummyAPIAccess)API).SetState(state));
}
}
}
}

View File

@ -20,6 +20,8 @@ namespace osu.Game.Graphics.UserInterface
/// </summary>
public class LoadingLayer : LoadingSpinner
{
private readonly bool blockInput;
[CanBeNull]
protected Box BackgroundDimLayer { get; }
@ -28,9 +30,11 @@ namespace osu.Game.Graphics.UserInterface
/// </summary>
/// <param name="dimBackground">Whether the full background area should be dimmed while loading.</param>
/// <param name="withBox">Whether the spinner should have a surrounding black box for visibility.</param>
public LoadingLayer(bool dimBackground = false, bool withBox = true)
/// <param name="blockInput">Whether to block input of components behind the loading layer.</param>
public LoadingLayer(bool dimBackground = false, bool withBox = true, bool blockInput = true)
: base(withBox)
{
this.blockInput = blockInput;
RelativeSizeAxes = Axes.Both;
Size = new Vector2(1);
@ -52,6 +56,9 @@ namespace osu.Game.Graphics.UserInterface
protected override bool Handle(UIEvent e)
{
if (!blockInput)
return false;
switch (e)
{
// blocking scroll can cause weird behaviour when this layer is used within a ScrollContainer.
@ -83,7 +90,7 @@ namespace osu.Game.Graphics.UserInterface
{
base.Update();
MainContents.Size = new Vector2(Math.Clamp(Math.Min(DrawWidth, DrawHeight) * 0.25f, 30, 100));
MainContents.Size = new Vector2(Math.Clamp(Math.Min(DrawWidth, DrawHeight) * 0.25f, 20, 100));
}
}
}

View File

@ -0,0 +1,24 @@
// 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.Localisation;
namespace osu.Game.Localisation
{
public static class ToolbarStrings
{
private const string prefix = @"osu.Game.Resources.Localisation.Toolbar";
/// <summary>
/// "Connection interrupted, will try to reconnect..."
/// </summary>
public static LocalisableString AttemptingToReconnect => new TranslatableString(getKey(@"attempting_to_reconnect"), @"Connection interrupted, will try to reconnect...");
/// <summary>
/// "Connecting..."
/// </summary>
public static LocalisableString Connecting => new TranslatableString(getKey(@"connecting"), @"Connecting...");
private static string getKey(string key) => $@"{prefix}:{key}";
}
}

View File

@ -13,6 +13,7 @@ using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterface;
using osu.Game.Localisation;
using osu.Game.Online.API;
using osu.Game.Users;
using osuTK;
@ -109,7 +110,7 @@ namespace osu.Game.Overlays.Login
Origin = Anchor.TopCentre,
TextAnchor = Anchor.TopCentre,
AutoSizeAxes = Axes.Both,
Text = state.NewValue == APIState.Failing ? "Connection is failing, will attempt to reconnect... " : "Attempting to connect... ",
Text = state.NewValue == APIState.Failing ? ToolbarStrings.AttemptingToReconnect : ToolbarStrings.Connecting,
Margin = new MarginPadding { Top = 10, Bottom = 10 },
},
};

View File

@ -1,17 +1,19 @@
// 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.
#nullable disable
using System;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.UserInterface;
using osu.Game.Localisation;
using osu.Game.Online.API;
using osu.Game.Online.API.Requests.Responses;
using osu.Game.Resources.Localisation.Web;
using osu.Game.Users.Drawables;
using osuTK;
using osuTK.Graphics;
@ -20,59 +22,103 @@ namespace osu.Game.Overlays.Toolbar
{
public class ToolbarUserButton : ToolbarOverlayToggleButton
{
private readonly UpdateableAvatar avatar;
private UpdateableAvatar avatar = null!;
[Resolved]
private IAPIProvider api { get; set; }
private IBindable<APIUser> localUser = null!;
private readonly IBindable<APIState> apiState = new Bindable<APIState>();
private LoadingSpinner spinner = null!;
private SpriteIcon failingIcon = null!;
private IBindable<APIState> apiState = null!;
public ToolbarUserButton()
{
AutoSizeAxes = Axes.X;
}
DrawableText.Font = OsuFont.GetFont(italics: true);
[BackgroundDependencyLoader]
private void load(OsuColour colours, IAPIProvider api, LoginOverlay? login)
{
Add(new OpaqueBackground { Depth = 1 });
Flow.Add(avatar = new UpdateableAvatar(isInteractive: false)
Flow.Add(new Container
{
Masking = true,
CornerRadius = 4,
Size = new Vector2(32),
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
CornerRadius = 4,
EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Shadow,
Radius = 4,
Colour = Color4.Black.Opacity(0.1f),
},
Children = new Drawable[]
{
avatar = new UpdateableAvatar(isInteractive: false)
{
RelativeSizeAxes = Axes.Both,
},
spinner = new LoadingLayer(dimBackground: true, withBox: false, blockInput: false)
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Both,
},
failingIcon = new SpriteIcon
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Alpha = 0,
Size = new Vector2(0.3f),
Icon = FontAwesome.Solid.ExclamationTriangle,
RelativeSizeAxes = Axes.Both,
Colour = colours.YellowLight,
},
}
});
}
[BackgroundDependencyLoader(true)]
private void load(LoginOverlay login)
{
apiState.BindTo(api.State);
apiState = api.State.GetBoundCopy();
apiState.BindValueChanged(onlineStateChanged, true);
localUser = api.LocalUser.GetBoundCopy();
localUser.BindValueChanged(userChanged, true);
StateContainer = login;
}
private void userChanged(ValueChangedEvent<APIUser> user) => Schedule(() =>
{
Text = user.NewValue.Username;
avatar.User = user.NewValue;
});
private void onlineStateChanged(ValueChangedEvent<APIState> state) => Schedule(() =>
{
failingIcon.FadeTo(state.NewValue == APIState.Failing ? 1 : 0, 200, Easing.OutQuint);
switch (state.NewValue)
{
default:
Text = UsersStrings.AnonymousUsername;
avatar.User = new APIUser();
case APIState.Connecting:
TooltipText = ToolbarStrings.Connecting;
spinner.Show();
break;
case APIState.Online:
Text = api.LocalUser.Value.Username;
avatar.User = api.LocalUser.Value;
case APIState.Failing:
TooltipText = ToolbarStrings.AttemptingToReconnect;
spinner.Show();
break;
case APIState.Offline:
case APIState.Online:
TooltipText = string.Empty;
spinner.Hide();
break;
default:
throw new ArgumentOutOfRangeException();
}
});
}