RepoMirrors
/
osu
mirror of https://github.com/ppy/osu
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update `DaySeparator` to use new design throughout 

Moves `DaySeparator` chat component to it's own file and update it to
match new chat design. Makes use of several virtual attributes that can
be overridden to update spacing and layout in other usage contexts.

Remove redundant usage of `ChatOverlayDaySeparator`, since the new
design is now part of the base class.

Create `StandAloneDaySeparator` to use in `StandAloneChatDisplay` which
overrides attributes to match correct spacing and layout for its design.

Ensure that `DrawableChannel.CreateDaySeparator` returns type of
`DaySeparator` instead of `Drawable`.
This commit is contained in:
Jai Sharma 2022-06-04 16:11:49 +01:00
parent 47d2bd2a8d
commit c0aaeff2b3
5 changed files with 138 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
osu.Game.Tests/Visual/Online/TestSceneStandAloneChatDisplay.cs
View File

@ -128,11 +128,11 @@ public void TestManyMessages()
AddAssert("Ensure no adjacent day separators", () =>
{
var indices = chatDisplay.FillFlow.OfType<DrawableChannel.DaySeparator>().Select(ds => chatDisplay.FillFlow.IndexOf(ds));
var indices = chatDisplay.FillFlow.OfType<DaySeparator>().Select(ds => chatDisplay.FillFlow.IndexOf(ds));
foreach (int i in indices)
{
if (i < chatDisplay.FillFlow.Count && chatDisplay.FillFlow[i + 1] is DrawableChannel.DaySeparator)
if (i < chatDisplay.FillFlow.Count && chatDisplay.FillFlow[i + 1] is DaySeparator)
return false;
}

34
osu.Game/Online/Chat/StandAloneChatDisplay.cs
View File

@ -155,9 +155,6 @@ public class StandAloneDrawableChannel : DrawableChannel
{
public Func<Message, ChatLine> CreateChatLineAction;
[Resolved]
private OsuColour colours { get; set; }
public StandAloneDrawableChannel(Channel channel)
: base(channel)
{
@ -166,25 +163,40 @@ public StandAloneDrawableChannel(Channel channel)
[BackgroundDependencyLoader]
private void load()
{
// TODO: Remove once DrawableChannel & ChatLine padding is fixed
ChatLineFlow.Padding = new MarginPadding { Horizontal = 0 };
}
protected override ChatLine CreateChatLine(Message m) => CreateChatLineAction(m);
protected override Drawable CreateDaySeparator(DateTimeOffset time) => new DaySeparator(time)
protected override DaySeparator CreateDaySeparator(DateTimeOffset time) => new StandAloneDaySeparator(time);
}
protected class StandAloneDaySeparator : DaySeparator
{
protected override float TextSize => 14;
protected override float LineHeight => 1;
protected override float Spacing => 10;
protected override float DateAlign => 120;
public StandAloneDaySeparator(DateTimeOffset time)
: base(time)
{
TextSize = 14,
Colour = colours.Yellow,
LineHeight = 1,
Padding = new MarginPadding { Horizontal = 10 },
Margin = new MarginPadding { Vertical = 5 },
};
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
Height = 25;
Colour = colours.Yellow;
// TODO: Remove once DrawableChannel & ChatLine padding is fixed
Padding = new MarginPadding { Horizontal = 10 };
}
}
protected class StandAloneMessage : ChatLine
{
protected override float TextSize => 15;
protected override float HorizontalPadding => 10;
protected override float MessagePadding => 120;
protected override float TimestampPadding => 50;

82
osu.Game/Overlays/Chat/ChatOverlayDrawableChannel.cs
View File

@ -6,10 +6,6 @@
using System;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Online.Chat;
namespace osu.Game.Overlays.Chat
@ -24,85 +20,19 @@ public ChatOverlayDrawableChannel(Channel channel)
[BackgroundDependencyLoader]
private void load()
{
// TODO: Remove once DrawableChannel & ChatLine padding is fixed
ChatLineFlow.Padding = new MarginPadding(0);
}
protected override Drawable CreateDaySeparator(DateTimeOffset time) => new ChatOverlayDaySeparator(time);
protected override DaySeparator CreateDaySeparator(DateTimeOffset time) => new ChatOverlayDaySeparator(time);
private class ChatOverlayDaySeparator : Container
private class ChatOverlayDaySeparator : DaySeparator
{
private readonly DateTimeOffset time;
public ChatOverlayDaySeparator(DateTimeOffset time)
: base(time)
{
this.time = time;
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
Padding = new MarginPadding { Horizontal = 15, Vertical = 20 };
Child = new GridContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.Absolute, 200),
new Dimension(GridSizeMode.Absolute, 15),
new Dimension(),
},
Content = new[]
{
new[]
{
new GridContainer
{
RelativeSizeAxes = Axes.Both,
ColumnDimensions = new[]
{
new Dimension(),
new Dimension(GridSizeMode.Absolute, 15),
new Dimension(GridSizeMode.AutoSize),
},
Content = new[]
{
new[]
{
new Circle
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Colour = colourProvider.Background5,
RelativeSizeAxes = Axes.X,
Height = 2,
},
Drawable.Empty(),
new OsuSpriteText
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Text = time.ToLocalTime().ToString("dd MMMM yyyy").ToUpper(),
Font = OsuFont.Torus.With(size: 15, weight: FontWeight.SemiBold),
Colour = colourProvider.Content1,
},
},
},
},
Drawable.Empty(),
new Circle
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Colour = colourProvider.Background5,
RelativeSizeAxes = Axes.X,
Height = 2,
},
},
},
};
// TODO: Remove once DrawableChannel & ChatLine padding is fixed
Padding = new MarginPadding { Horizontal = 15 };
}
}
}

105
osu.Game/Overlays/Chat/DaySeparator.cs Normal file
View File

@ -0,0 +1,105 @@
// 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 osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
namespace osu.Game.Overlays.Chat
{
public class DaySeparator : Container
{
protected virtual float TextSize => 15;
protected virtual float LineHeight => 2;
protected virtual float DateAlign => 200;
protected virtual float Spacing => 15;
private readonly DateTimeOffset time;
[Resolved(CanBeNull = true)]
private OverlayColourProvider? colourProvider { get; set; }
public DaySeparator(DateTimeOffset time)
{
this.time = time;
Height = 40;
}
[BackgroundDependencyLoader]
private void load()
{
RelativeSizeAxes = Axes.X;
Child = new GridContainer
{
RelativeSizeAxes = Axes.Both,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
RowDimensions = new[] { new Dimension() },
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.Absolute, DateAlign),
new Dimension(GridSizeMode.Absolute, Spacing),
new Dimension(),
},
Content = new[]
{
new[]
{
new GridContainer
{
RelativeSizeAxes = Axes.Both,
RowDimensions = new[] { new Dimension() },
ColumnDimensions = new[]
{
new Dimension(),
new Dimension(GridSizeMode.Absolute, Spacing),
new Dimension(GridSizeMode.AutoSize),
},
Content = new[]
{
new[]
{
new Circle
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.X,
Height = LineHeight,
Colour = colourProvider?.Background5 ?? Colour4.White,
},
Drawable.Empty(),
new OsuSpriteText
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Text = time.ToLocalTime().ToString("dd MMMM yyyy").ToUpper(),
Font = OsuFont.Torus.With(size: TextSize, weight: FontWeight.SemiBold),
Colour = colourProvider?.Content1 ?? Colour4.White,
},
}
},
},
Drawable.Empty(),
new Circle
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.X,
Height = LineHeight,
Colour = colourProvider?.Background5 ?? Colour4.White,
},
}
}
};
}
}
}

80
osu.Game/Overlays/Chat/DrawableChannel.cs
View File

@ -7,14 +7,9 @@
using System.Linq;
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.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.Cursor;
using osu.Game.Graphics.Sprites;
using osu.Game.Online.Chat;
using osuTK.Graphics;
@ -40,9 +35,6 @@ public bool ScrollbarVisible
}
}
[Resolved]
private OsuColour colours { get; set; }
public DrawableChannel(Channel channel)
{
Channel = channel;
@ -67,7 +59,7 @@ private void load()
Padding = new MarginPadding { Bottom = 5 },
Child = ChatLineFlow = new FillFlowContainer
{
Padding = new MarginPadding { Left = 20, Right = 20 },
Padding = new MarginPadding { Horizontal = 15 },
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
@ -121,11 +113,7 @@ protected override void Dispose(bool isDisposing)
protected virtual ChatLine CreateChatLine(Message m) => new ChatLine(m);
protected virtual Drawable CreateDaySeparator(DateTimeOffset time) => new DaySeparator(time)
{
Colour = colours.ChatBlue.Lighten(0.7f),
Margin = new MarginPadding { Vertical = 10 },
};
protected virtual DaySeparator CreateDaySeparator(DateTimeOffset time) => new DaySeparator(time);
private void newMessagesArrived(IEnumerable<Message> newMessages) => Schedule(() =>
{
@ -203,69 +191,5 @@ private void messageRemoved(Message removed) => Schedule(() =>
});
private IEnumerable<ChatLine> chatLines => ChatLineFlow.Children.OfType<ChatLine>();
public class DaySeparator : Container
{
public float TextSize
{
get => text.Font.Size;
set => text.Font = text.Font.With(size: value);
}
private float lineHeight = 2;
public float LineHeight
{
get => lineHeight;
set => lineHeight = leftBox.Height = rightBox.Height = value;
}
private readonly SpriteText text;
private readonly Box leftBox;
private readonly Box rightBox;
public DaySeparator(DateTimeOffset time)
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
Child = new GridContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
ColumnDimensions = new[]
{
new Dimension(),
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
},
RowDimensions = new[] { new Dimension(GridSizeMode.AutoSize), },
Content = new[]
{
new Drawable[]
{
leftBox = new Box
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.X,
Height = lineHeight,
},
text = new OsuSpriteText
{
Margin = new MarginPadding { Horizontal = 10 },
Text = time.ToLocalTime().ToString("dd MMM yyyy"),
},
rightBox = new Box
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.X,
Height = lineHeight,
},
}
}
};
}
}
}
}