mirror of
https://github.com/ppy/osu.git
synced 2025-02-13 14:53:21 +08:00
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
parent
47d2bd2a8d
commit
c0aaeff2b3
@ -128,11 +128,11 @@ namespace osu.Game.Tests.Visual.Online
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@ -155,9 +155,6 @@ namespace osu.Game.Online.Chat
|
||||
{
|
||||
public Func<Message, ChatLine> CreateChatLineAction;
|
||||
|
||||
[Resolved]
|
||||
private OsuColour colours { get; set; }
|
||||
|
||||
public StandAloneDrawableChannel(Channel channel)
|
||||
: base(channel)
|
||||
{
|
||||
@ -166,25 +163,40 @@ namespace osu.Game.Online.Chat
|
||||
[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;
|
||||
|
||||
@ -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 @@ namespace osu.Game.Overlays.Chat
|
||||
[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
105
osu.Game/Overlays/Chat/DaySeparator.cs
Normal 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,
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7,14 +7,9 @@ using System.Diagnostics;
|
||||
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 @@ namespace osu.Game.Overlays.Chat
|
||||
}
|
||||
}
|
||||
|
||||
[Resolved]
|
||||
private OsuColour colours { get; set; }
|
||||
|
||||
public DrawableChannel(Channel channel)
|
||||
{
|
||||
Channel = channel;
|
||||
@ -67,7 +59,7 @@ namespace osu.Game.Overlays.Chat
|
||||
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 @@ namespace osu.Game.Overlays.Chat
|
||||
|
||||
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 @@ namespace osu.Game.Overlays.Chat
|
||||
});
|
||||
|
||||
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,
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user