h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2024-12-15 02:33:02 +08:00
Code Issues Releases Wiki Activity

Merge pull request #17252 from jai-x/new-chat-channel-control

Browse Source 
Implement `ChannelListItem` for new chat design
This commit is contained in:
Dean Herbert 2022-03-21 15:41:00 +09:00 committed by GitHub
commit 31570d3114
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 473 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
osu.Game.Tests/Visual/Online/TestSceneChannelListItem.cs Normal file
View File

@ -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 });
}
}

171
osu.Game/Overlays/Chat/ChannelList/ChannelListItem.cs Normal file
View File

@ -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,
};
}
}
}

68
osu.Game/Overlays/Chat/ChannelList/ChannelListItemCloseButton.cs Normal file
View File

@ -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);
}
}
}

71
osu.Game/Overlays/Chat/ChannelList/ChannelListItemMentionPill.cs Normal file
View File

@ -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);
}
}
}