RepoMirrors/osu
1
0
Fork 0
mirror of https://github.com/ppy/osu synced 2025-02-05 21:01:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement ChannelList for new chat design

Browse Source 
Reference design: https://www.figma.com/file/f8b2dHp9LJCMOqYP4mdrPZ/Client%2FChat?node-id=1%3A297

Adds new component `ChannelList` which makes up the sidebar channel
selector of the new chat design. Contains two separate fill flows for
public and private `ChannelItem` child components.

Exposed bindable `SelectorActive` to indicate current state of the "Add
more channels" button. Requires `Bindable<Channel>` from parent
component.

Renames and updates the `TestSceneChannelListItem` to
`TestSceneChannelList` to make use of new component and having both
tests seemed redundant.
This commit is contained in:
Jai Sharma 2022-04-15 15:38:47 +01:00
parent 987e931baa
commit f1dd319fd9
4 changed files with 445 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
osu.Game.Tests/Visual/Online/TestSceneChannelList.cs Normal file
View File

@ -0,0 +1,187 @@
// 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 osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Testing;
using osu.Framework.Utils;
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;
namespace osu.Game.Tests.Visual.Online
{
[TestFixture]
public class TestSceneChannelList : OsuTestScene
{
[Cached]
private readonly OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Pink);
[Cached]
private readonly Bindable<Channel> selected = new Bindable<Channel>();
private OsuSpriteText selectorText;
private OsuSpriteText selectedText;
private OsuSpriteText leaveText;
private ChannelList channelList;
[SetUp]
public void SetUp()
{
Schedule(() =>
{
Child = new GridContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Both,
Height = 0.7f,
RowDimensions = new[]
{
new Dimension(GridSizeMode.Absolute, 20),
new Dimension(GridSizeMode.Absolute, 20),
new Dimension(GridSizeMode.Absolute, 20),
new Dimension(),
},
Content = new[]
{
new Drawable[]
{
selectorText = new OsuSpriteText
{
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
},
},
new Drawable[]
{
selectedText = new OsuSpriteText
{
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
},
},
new Drawable[]
{
leaveText = new OsuSpriteText
{
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
},
},
new Drawable[]
{
channelList = new ChannelList
{
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
RelativeSizeAxes = Axes.Y,
Width = 190,
},
},
},
};
channelList.OnRequestSelect += channel =>
{
channelList.SelectorActive.Value = false;
selected.Value = channel;
};
channelList.OnRequestLeave += channel =>
{
leaveText.Text = $"OnRequestLeave: {channel.Name}";
leaveText.FadeOutFromOne(1000, Easing.InQuint);
selected.Value = null;
channelList.RemoveChannel(channel);
};
channelList.SelectorActive.BindValueChanged(change =>
{
selectorText.Text = $"Channel Selector Active: {change.NewValue}";
}, true);
selected.BindValueChanged(change =>
{
selectedText.Text = $"Selected Channel: {change.NewValue?.Name ?? "[null]"}";
}, true);
});
}
[SetUpSteps]
public void SetUpSteps()
{
AddStep("Add Public Channels", () =>
{
for (int i = 0; i < 10; i++)
channelList.AddChannel(createRandomPublicChannel());
});
AddStep("Add Private Channels", () =>
{
for (int i = 0; i < 10; i++)
channelList.AddChannel(createRandomPrivateChannel());
});
}
[Test]
public void TestVisual()
{
AddStep("Unread Selected", () =>
{
if (selected.Value != null)
channelList.GetItem(selected.Value).Unread.Value = true;
});
AddStep("Read Selected", () =>
{
if (selected.Value != null)
channelList.GetItem(selected.Value).Unread.Value = false;
});
AddStep("Add Mention Selected", () =>
{
if (selected.Value != null)
channelList.GetItem(selected.Value).Mentions.Value++;
});
AddStep("Add 98 Mentions Selected", () =>
{
if (selected.Value != null)
channelList.GetItem(selected.Value).Mentions.Value += 98;
});
AddStep("Clear Mentions Selected", () =>
{
if (selected.Value != null)
channelList.GetItem(selected.Value).Mentions.Value = 0;
});
}
private Channel createRandomPublicChannel()
{
int id = RNG.Next(0, 10000);
return new Channel
{
Name = $"#channel-{id}",
Type = ChannelType.Public,
Id = id,
};
}
private Channel createRandomPrivateChannel()
{
int id = RNG.Next(0, 10000);
return new Channel(new APIUser
{
Id = id,
Username = $"test user {id}",
});
}
}
}

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

@ -1,163 +0,0 @@
// 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 });
}
}

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

@ -0,0 +1,174 @@
// 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.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.Input.Events;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites;
using osu.Game.Online.Chat;
using osuTK;
namespace osu.Game.Overlays.Chat.ChannelList
{
public class ChannelList : Container
{
public Action<Channel>? OnRequestSelect;
public Action<Channel>? OnRequestLeave;
public readonly BindableBool SelectorActive = new BindableBool();
private readonly Dictionary<Channel, ChannelListItem> channelMap = new Dictionary<Channel, ChannelListItem>();
private ChannelListItemFlow publicChannelFlow = null!;
private ChannelListItemFlow privateChannelFlow = null!;
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background6,
},
new ChannelListScrollContainer
{
Padding = new MarginPadding { Vertical = 7 },
RelativeSizeAxes = Axes.Both,
ScrollbarAnchor = Anchor.TopLeft,
ScrollDistance = 35f,
Child = new FillFlowContainer
{
Direction = FillDirection.Vertical,
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Children = new Drawable[]
{
publicChannelFlow = new ChannelListItemFlow("CHANNELS"),
new ChannelListSelector
{
Margin = new MarginPadding { Bottom = 10 },
SelectorActive = { BindTarget = SelectorActive },
},
privateChannelFlow = new ChannelListItemFlow("DIRECT MESSAGES"),
},
},
},
};
}
public void AddChannel(Channel channel)
{
if (channelMap.ContainsKey(channel))
return;
ChannelListItem item = new ChannelListItem(channel);
item.OnRequestSelect += channel => this.OnRequestSelect?.Invoke(channel);
item.OnRequestLeave += channel => this.OnRequestLeave?.Invoke(channel);
ChannelListItemFlow flow = getFlowForChannel(channel);
channelMap.Add(channel, item);
flow.Add(item);
}
public void RemoveChannel(Channel channel)
{
if (!channelMap.ContainsKey(channel))
return;
ChannelListItem item = channelMap[channel];
ChannelListItemFlow flow = getFlowForChannel(channel);
channelMap.Remove(channel);
flow.Remove(item);
item.Expire();
}
public ChannelListItem GetItem(Channel channel)
{
if (!channelMap.ContainsKey(channel))
throw new ArgumentOutOfRangeException();
return channelMap[channel];
}
private ChannelListItemFlow getFlowForChannel(Channel channel)
{
switch (channel.Type)
{
case ChannelType.Public:
return publicChannelFlow;
case ChannelType.PM:
return privateChannelFlow;
default:
throw new ArgumentOutOfRangeException();
}
}
private class ChannelListItemFlow : FillFlowContainer
{
public ChannelListItemFlow(string label)
{
Direction = FillDirection.Vertical;
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
Add(new OsuSpriteText
{
Text = label,
Margin = new MarginPadding { Left = 18, Bottom = 5 },
Font = OsuFont.Torus.With(size: 12),
});
}
}
private class ChannelListScrollContainer : OsuScrollContainer
{
protected override bool OnHover(HoverEvent e)
{
ScrollbarVisible = true;
return base.OnHover(e);
}
protected override void OnHoverLost(HoverLostEvent e)
{
ScrollbarVisible = false;
base.OnHoverLost(e);
}
protected override ScrollbarContainer CreateScrollbar(Direction direction)
=> new ChannelListScrollBar(direction);
protected class ChannelListScrollBar : OsuScrollbar
{
private const float BAR_SIZE = 4;
private const float BAR_MARGIN = 7;
public ChannelListScrollBar(Direction scrollDir) : base(scrollDir)
{
Size = new Vector2(BAR_SIZE);
Margin = new MarginPadding { Left = BAR_MARGIN };
CornerRadius = 2;
}
public override void ResizeTo(float val, int duration = 0, Easing easing = Easing.None)
{
Vector2 size = new Vector2(BAR_SIZE, val);
this.ResizeTo(size, duration, easing);
}
}
}
}
}

84
osu.Game/Overlays/Chat/ChannelList/ChannelListSelector.cs Normal file
View File

@ -0,0 +1,84 @@
// 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.Framework.Input.Events;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites;
namespace osu.Game.Overlays.Chat.ChannelList
{
public class ChannelListSelector : OsuClickableContainer
{
public readonly BindableBool SelectorActive = new BindableBool();
private Box hoverBox = null!;
private Box selectBox = null!;
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
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 OsuSpriteText
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Text = "Add More Channels",
Font = OsuFont.Torus.With(size: 17, weight: FontWeight.SemiBold),
Colour = colourProvider.Light3,
Margin = new MarginPadding { Bottom = 2 },
RelativeSizeAxes = Axes.X,
Truncate = true,
},
},
};
}
protected override void LoadComplete()
{
base.LoadComplete();
SelectorActive.BindValueChanged(selected => selectBox.FadeTo(selected.NewValue ? 1 : 0));
Action = () => SelectorActive.Value = true;
}
protected override bool OnHover(HoverEvent e)
{
hoverBox.FadeIn(300, Easing.OutQuint);
return base.OnHover(e);
}
protected override void OnHoverLost(HoverLostEvent e)
{
hoverBox.FadeOut(200, Easing.OutQuint);
base.OnHoverLost(e);
}
}
}