mirror of https://github.com/ppy/osu
Merge pull request #17252 from jai-x/new-chat-channel-control
Implement `ChannelListItem` for new chat design
This commit is contained in:
Dean Herbert
GitHub
commit
31570d3114
|
|
@ -0,0 +1,163 @@
|
|||
// 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 NUnit.Framework;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using osu.Framework.Allocation;
|
||||
using osu.Framework.Bindables;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Containers;
|
||||
using osu.Framework.Graphics.Shapes;
|
||||
using osu.Game.Graphics.Sprites;
|
||||
using osu.Game.Online.API.Requests.Responses;
|
||||
using osu.Game.Online.Chat;
|
||||
using osu.Game.Overlays;
|
||||
using osu.Game.Overlays.Chat.ChannelList;
|
||||
using osuTK;
|
||||
|
||||
namespace osu.Game.Tests.Visual.Online
|
||||
{
|
||||
[TestFixture]
|
||||
public class TestSceneChannelListItem : OsuTestScene
|
||||
{
|
||||
[Cached]
|
||||
private readonly OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Pink);
|
||||
|
||||
[Cached]
|
||||
private readonly Bindable<Channel> selected = new Bindable<Channel>();
|
||||
|
||||
private static readonly List<Channel> channels = new List<Channel>
|
||||
{
|
||||
createPublicChannel("#public-channel"),
|
||||
createPublicChannel("#public-channel-long-name"),
|
||||
createPrivateChannel("test user", 2),
|
||||
createPrivateChannel("test user long name", 3),
|
||||
};
|
||||
|
||||
private readonly Dictionary<Channel, ChannelListItem> channelMap = new Dictionary<Channel, ChannelListItem>();
|
||||
|
||||
private FillFlowContainer flow;
|
||||
private OsuSpriteText selectedText;
|
||||
private OsuSpriteText leaveText;
|
||||
|
||||
[SetUp]
|
||||
public void SetUp()
|
||||
{
|
||||
Schedule(() =>
|
||||
{
|
||||
foreach (var item in channelMap.Values)
|
||||
item.Expire();
|
||||
|
||||
channelMap.Clear();
|
||||
|
||||
Child = new FillFlowContainer
|
||||
{
|
||||
Direction = FillDirection.Vertical,
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Spacing = new Vector2(10),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
selectedText = new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.TopCentre,
|
||||
},
|
||||
leaveText = new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.TopCentre,
|
||||
Height = 16,
|
||||
AlwaysPresent = true,
|
||||
},
|
||||
new Container
|
||||
{
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.TopCentre,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Width = 190,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = colourProvider.Background6,
|
||||
},
|
||||
flow = new FillFlowContainer
|
||||
{
|
||||
Direction = FillDirection.Vertical,
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
selected.BindValueChanged(change =>
|
||||
{
|
||||
selectedText.Text = $"Selected Channel: {change.NewValue?.Name ?? "[null]"}";
|
||||
}, true);
|
||||
|
||||
foreach (var channel in channels)
|
||||
{
|
||||
var item = new ChannelListItem(channel);
|
||||
flow.Add(item);
|
||||
channelMap.Add(channel, item);
|
||||
item.OnRequestSelect += c => selected.Value = c;
|
||||
item.OnRequestLeave += leaveChannel;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
[Test]
|
||||
public void TestVisual()
|
||||
{
|
||||
AddStep("Select second item", () => selected.Value = channels.Skip(1).First());
|
||||
|
||||
AddStep("Unread Selected", () =>
|
||||
{
|
||||
if (selected.Value != null)
|
||||
channelMap[selected.Value].Unread.Value = true;
|
||||
});
|
||||
|
||||
AddStep("Read Selected", () =>
|
||||
{
|
||||
if (selected.Value != null)
|
||||
channelMap[selected.Value].Unread.Value = false;
|
||||
});
|
||||
|
||||
AddStep("Add Mention Selected", () =>
|
||||
{
|
||||
if (selected.Value != null)
|
||||
channelMap[selected.Value].Mentions.Value++;
|
||||
});
|
||||
|
||||
AddStep("Add 98 Mentions Selected", () =>
|
||||
{
|
||||
if (selected.Value != null)
|
||||
channelMap[selected.Value].Mentions.Value += 98;
|
||||
});
|
||||
|
||||
AddStep("Clear Mentions Selected", () =>
|
||||
{
|
||||
if (selected.Value != null)
|
||||
channelMap[selected.Value].Mentions.Value = 0;
|
||||
});
|
||||
}
|
||||
|
||||
private void leaveChannel(Channel channel)
|
||||
{
|
||||
leaveText.Text = $"OnRequestLeave: {channel.Name}";
|
||||
leaveText.FadeOutFromOne(1000, Easing.InQuint);
|
||||
}
|
||||
|
||||
private static Channel createPublicChannel(string name) =>
|
||||
new Channel { Name = name, Type = ChannelType.Public, Id = 1234 };
|
||||
|
||||
private static Channel createPrivateChannel(string username, int id)
|
||||
=> new Channel(new APIUser { Id = id, Username = username });
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
// 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 enable
|
||||
|
||||
using System;
|
||||
using System.Linq;
|
||||
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.Input.Events;
|
||||
using osu.Game.Graphics;
|
||||
using osu.Game.Graphics.Containers;
|
||||
using osu.Game.Graphics.Sprites;
|
||||
using osu.Game.Online.Chat;
|
||||
using osu.Game.Users.Drawables;
|
||||
using osuTK;
|
||||
|
||||
namespace osu.Game.Overlays.Chat.ChannelList
|
||||
{
|
||||
public class ChannelListItem : OsuClickableContainer
|
||||
{
|
||||
public event Action<Channel>? OnRequestSelect;
|
||||
public event Action<Channel>? OnRequestLeave;
|
||||
|
||||
public readonly BindableInt Mentions = new BindableInt();
|
||||
|
||||
public readonly BindableBool Unread = new BindableBool();
|
||||
|
||||
private readonly Channel channel;
|
||||
|
||||
private Box? hoverBox;
|
||||
private Box? selectBox;
|
||||
private OsuSpriteText? text;
|
||||
private ChannelListItemCloseButton? close;
|
||||
|
||||
[Resolved]
|
||||
private Bindable<Channel> selectedChannel { get; set; } = null!;
|
||||
|
||||
[Resolved]
|
||||
private OverlayColourProvider colourProvider { get; set; } = null!;
|
||||
|
||||
public ChannelListItem(Channel channel)
|
||||
{
|
||||
this.channel = channel;
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load()
|
||||
{
|
||||
Height = 30;
|
||||
RelativeSizeAxes = Axes.X;
|
||||
|
||||
Children = new Drawable[]
|
||||
{
|
||||
hoverBox = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = colourProvider.Background3,
|
||||
Alpha = 0f,
|
||||
},
|
||||
selectBox = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = colourProvider.Background4,
|
||||
Alpha = 0f,
|
||||
},
|
||||
new Container
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Padding = new MarginPadding { Left = 18, Right = 10 },
|
||||
Child = new GridContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
ColumnDimensions = new[]
|
||||
{
|
||||
new Dimension(GridSizeMode.AutoSize),
|
||||
new Dimension(),
|
||||
new Dimension(GridSizeMode.AutoSize),
|
||||
new Dimension(GridSizeMode.AutoSize),
|
||||
},
|
||||
Content = new[]
|
||||
{
|
||||
new[]
|
||||
{
|
||||
createIcon(),
|
||||
text = new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Text = channel.Name,
|
||||
Font = OsuFont.Torus.With(size: 17, weight: FontWeight.SemiBold),
|
||||
Colour = colourProvider.Light3,
|
||||
Margin = new MarginPadding { Bottom = 2 },
|
||||
RelativeSizeAxes = Axes.X,
|
||||
Truncate = true,
|
||||
},
|
||||
new ChannelListItemMentionPill
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Margin = new MarginPadding { Right = 3 },
|
||||
Mentions = { BindTarget = Mentions },
|
||||
},
|
||||
close = new ChannelListItemCloseButton
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Margin = new MarginPadding { Right = 3 },
|
||||
Action = () => OnRequestLeave?.Invoke(channel),
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Action = () => OnRequestSelect?.Invoke(channel);
|
||||
}
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
base.LoadComplete();
|
||||
|
||||
selectedChannel.BindValueChanged(change =>
|
||||
{
|
||||
if (change.NewValue == channel)
|
||||
selectBox?.FadeIn(300, Easing.OutQuint);
|
||||
else
|
||||
selectBox?.FadeOut(200, Easing.OutQuint);
|
||||
}, true);
|
||||
|
||||
Unread.BindValueChanged(change =>
|
||||
{
|
||||
text!.FadeColour(change.NewValue ? colourProvider.Content1 : colourProvider.Light3, 300, Easing.OutQuint);
|
||||
}, true);
|
||||
}
|
||||
|
||||
protected override bool OnHover(HoverEvent e)
|
||||
{
|
||||
hoverBox?.FadeIn(300, Easing.OutQuint);
|
||||
close?.FadeIn(300, Easing.OutQuint);
|
||||
return base.OnHover(e);
|
||||
}
|
||||
|
||||
protected override void OnHoverLost(HoverLostEvent e)
|
||||
{
|
||||
hoverBox?.FadeOut(200, Easing.OutQuint);
|
||||
close?.FadeOut(200, Easing.OutQuint);
|
||||
base.OnHoverLost(e);
|
||||
}
|
||||
|
||||
private Drawable createIcon()
|
||||
{
|
||||
if (channel.Type != ChannelType.PM)
|
||||
return Drawable.Empty();
|
||||
|
||||
return new UpdateableAvatar(channel.Users.First(), isInteractive: false)
|
||||
{
|
||||
Size = new Vector2(20),
|
||||
Margin = new MarginPadding { Right = 5 },
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
CornerRadius = 10,
|
||||
Masking = true,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
// 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 enable
|
||||
|
||||
using osu.Framework.Allocation;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Sprites;
|
||||
using osu.Framework.Input.Events;
|
||||
using osu.Game.Graphics;
|
||||
using osu.Game.Graphics.Containers;
|
||||
using osuTK;
|
||||
using osuTK.Graphics;
|
||||
|
||||
namespace osu.Game.Overlays.Chat.ChannelList
|
||||
{
|
||||
public class ChannelListItemCloseButton : OsuClickableContainer
|
||||
{
|
||||
private SpriteIcon icon = null!;
|
||||
|
||||
private Color4 normalColour;
|
||||
private Color4 hoveredColour;
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(OsuColour osuColour)
|
||||
{
|
||||
normalColour = osuColour.Red2;
|
||||
hoveredColour = Color4.White;
|
||||
|
||||
Alpha = 0f;
|
||||
Size = new Vector2(20);
|
||||
Add(icon = new SpriteIcon
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Size = new Vector2(0.75f),
|
||||
Icon = FontAwesome.Solid.TimesCircle,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = normalColour,
|
||||
});
|
||||
}
|
||||
|
||||
// Transforms matching OsuAnimatedButton
|
||||
protected override bool OnHover(HoverEvent e)
|
||||
{
|
||||
icon.FadeColour(hoveredColour, 300, Easing.OutQuint);
|
||||
return base.OnHover(e);
|
||||
}
|
||||
|
||||
protected override void OnHoverLost(HoverLostEvent e)
|
||||
{
|
||||
icon.FadeColour(normalColour, 300, Easing.OutQuint);
|
||||
base.OnHoverLost(e);
|
||||
}
|
||||
|
||||
protected override bool OnMouseDown(MouseDownEvent e)
|
||||
{
|
||||
icon.ScaleTo(0.75f, 2000, Easing.OutQuint);
|
||||
return base.OnMouseDown(e);
|
||||
}
|
||||
|
||||
protected override void OnMouseUp(MouseUpEvent e)
|
||||
{
|
||||
icon.ScaleTo(1, 1000, Easing.OutElastic);
|
||||
base.OnMouseUp(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
// 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 enable
|
||||
|
||||
using osu.Framework.Allocation;
|
||||
using osu.Framework.Bindables;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Containers;
|
||||
using osu.Framework.Graphics.Shapes;
|
||||
using osu.Game.Graphics;
|
||||
using osu.Game.Graphics.Sprites;
|
||||
using osuTK;
|
||||
using osuTK.Graphics;
|
||||
|
||||
namespace osu.Game.Overlays.Chat.ChannelList
|
||||
{
|
||||
public class ChannelListItemMentionPill : CircularContainer
|
||||
{
|
||||
public readonly BindableInt Mentions = new BindableInt();
|
||||
|
||||
private OsuSpriteText countText = null!;
|
||||
|
||||
private Box box = null!;
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(OsuColour osuColour, OverlayColourProvider colourProvider)
|
||||
{
|
||||
Masking = true;
|
||||
Size = new Vector2(20, 12);
|
||||
Alpha = 0f;
|
||||
|
||||
Children = new Drawable[]
|
||||
{
|
||||
box = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = osuColour.Orange1,
|
||||
},
|
||||
countText = new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Font = OsuFont.Torus.With(size: 11, weight: FontWeight.Bold),
|
||||
Margin = new MarginPadding { Bottom = 1 },
|
||||
Colour = colourProvider.Background5,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
base.LoadComplete();
|
||||
|
||||
Mentions.BindValueChanged(change =>
|
||||
{
|
||||
int mentionCount = change.NewValue;
|
||||
|
||||
countText.Text = mentionCount > 99 ? "99+" : mentionCount.ToString();
|
||||
|
||||
if (mentionCount > 0)
|
||||
{
|
||||
this.FadeIn(1000, Easing.OutQuint);
|
||||
box.FlashColour(Color4.White, 500, Easing.OutQuint);
|
||||
}
|
||||
else
|
||||
this.FadeOut(100, Easing.OutQuint);
|
||||
}, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue