From df49a48d4d70e3a365cccd76778c0b8f60f0adb2 Mon Sep 17 00:00:00 2001 From: Joseph Madamba Date: Tue, 13 Jun 2023 13:48:47 -0700 Subject: [PATCH 1/4] Put left and right details inside `GridContainer` --- .../Lounge/Components/DrawableRoom.cs | 163 ++++++++++-------- 1 file changed, 89 insertions(+), 74 deletions(-) diff --git a/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs b/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs index f1fc751630..f26d9b168d 100644 --- a/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs +++ b/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs @@ -117,94 +117,109 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components Colour = ColourInfo.GradientHorizontal(colours.Background5, colours.Background5.Opacity(0.3f)), Width = 0.8f, }, - new Container + new GridContainer { - Name = @"Left details", RelativeSizeAxes = Axes.Both, - Padding = new MarginPadding + ColumnDimensions = new[] { - Left = 20, - Vertical = 5 + new Dimension(), + new Dimension(GridSizeMode.AutoSize), }, - Children = new Drawable[] + Content = new[] { - new FillFlowContainer + new Drawable[] { - RelativeSizeAxes = Axes.X, - AutoSizeAxes = Axes.Y, - Direction = FillDirection.Vertical, - Children = new Drawable[] + new Container { - new FillFlowContainer + Name = @"Left details", + RelativeSizeAxes = Axes.Both, + Padding = new MarginPadding { - AutoSizeAxes = Axes.Both, - Direction = FillDirection.Horizontal, - Spacing = new Vector2(5), - Children = new Drawable[] - { - new RoomStatusPill - { - Anchor = Anchor.CentreLeft, - Origin = Anchor.CentreLeft - }, - specialCategoryPill = new RoomSpecialCategoryPill - { - Anchor = Anchor.CentreLeft, - Origin = Anchor.CentreLeft - }, - endDateInfo = new EndDateInfo - { - Anchor = Anchor.CentreLeft, - Origin = Anchor.CentreLeft, - }, - } + Left = 20, + Vertical = 5 }, - new FillFlowContainer + Children = new Drawable[] { - RelativeSizeAxes = Axes.X, - AutoSizeAxes = Axes.Y, - Padding = new MarginPadding { Top = 3 }, - Direction = FillDirection.Vertical, - Children = new Drawable[] + new FillFlowContainer { - new RoomNameText(), - new RoomStatusText() + RelativeSizeAxes = Axes.X, + AutoSizeAxes = Axes.Y, + Direction = FillDirection.Vertical, + Children = new Drawable[] + { + new FillFlowContainer + { + AutoSizeAxes = Axes.Both, + Direction = FillDirection.Horizontal, + Spacing = new Vector2(5), + Children = new Drawable[] + { + new RoomStatusPill + { + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft + }, + specialCategoryPill = new RoomSpecialCategoryPill + { + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft + }, + endDateInfo = new EndDateInfo + { + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft, + }, + } + }, + new FillFlowContainer + { + RelativeSizeAxes = Axes.X, + AutoSizeAxes = Axes.Y, + Padding = new MarginPadding { Top = 3 }, + Direction = FillDirection.Vertical, + Children = new Drawable[] + { + new RoomNameText(), + new RoomStatusText() + } + } + }, + }, + new FillFlowContainer + { + Anchor = Anchor.BottomLeft, + Origin = Anchor.BottomLeft, + AutoSizeAxes = Axes.Both, + Direction = FillDirection.Horizontal, + Spacing = new Vector2(5), + ChildrenEnumerable = CreateBottomDetails() + } + } + }, + new FillFlowContainer + { + Name = "Right content", + Anchor = Anchor.CentreRight, + Origin = Anchor.CentreRight, + AutoSizeAxes = Axes.X, + RelativeSizeAxes = Axes.Y, + Spacing = new Vector2(5), + Padding = new MarginPadding + { + Right = 10, + Vertical = 20, + }, + Children = new Drawable[] + { + ButtonsContainer, + drawableRoomParticipantsList = new DrawableRoomParticipantsList + { + Anchor = Anchor.CentreRight, + Origin = Anchor.CentreRight, + NumberOfCircles = NumberOfAvatars } } }, - }, - new FillFlowContainer - { - Anchor = Anchor.BottomLeft, - Origin = Anchor.BottomLeft, - AutoSizeAxes = Axes.Both, - Direction = FillDirection.Horizontal, - Spacing = new Vector2(5), - ChildrenEnumerable = CreateBottomDetails() - } - } - }, - new FillFlowContainer - { - Name = "Right content", - Anchor = Anchor.CentreRight, - Origin = Anchor.CentreRight, - AutoSizeAxes = Axes.X, - RelativeSizeAxes = Axes.Y, - Spacing = new Vector2(5), - Padding = new MarginPadding - { - Right = 10, - Vertical = 20, - }, - Children = new Drawable[] - { - ButtonsContainer, - drawableRoomParticipantsList = new DrawableRoomParticipantsList - { - Anchor = Anchor.CentreRight, - Origin = Anchor.CentreRight, - NumberOfCircles = NumberOfAvatars } } }, From 2a3f2ff122e0ec8fe0d26ddc9a6b72c4ca253af9 Mon Sep 17 00:00:00 2001 From: Joseph Madamba Date: Tue, 13 Jun 2023 13:56:29 -0700 Subject: [PATCH 2/4] Truncate room name text --- .../Lounge/Components/DrawableRoom.cs | 24 +++++-------------- 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs b/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs index f26d9b168d..11c649a9ae 100644 --- a/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs +++ b/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs @@ -179,7 +179,12 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components Direction = FillDirection.Vertical, Children = new Drawable[] { - new RoomNameText(), + new TruncatingSpriteText + { + RelativeSizeAxes = Axes.X, + Font = OsuFont.GetFont(size: 28), + Current = { BindTarget = Room.Name } + }, new RoomStatusText() } } @@ -316,23 +321,6 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components return pills; } - private partial class RoomNameText : OsuSpriteText - { - [Resolved(typeof(Room), nameof(Online.Rooms.Room.Name))] - private Bindable name { get; set; } - - public RoomNameText() - { - Font = OsuFont.GetFont(size: 28); - } - - [BackgroundDependencyLoader] - private void load() - { - Current = name; - } - } - private partial class RoomStatusText : OnlinePlayComposite { [Resolved] From 05bdc924267edf3afdea1a8573cc5ce603c5c1e5 Mon Sep 17 00:00:00 2001 From: Joseph Madamba Date: Tue, 13 Jun 2023 13:58:58 -0700 Subject: [PATCH 3/4] Add right padding according to right detail shear --- .../OnlinePlay/Lounge/Components/DrawableRoom.cs | 1 + .../Components/DrawableRoomParticipantsList.cs | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs b/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs index 11c649a9ae..ad421fce94 100644 --- a/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs +++ b/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs @@ -136,6 +136,7 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components Padding = new MarginPadding { Left = 20, + Right = DrawableRoomParticipantsList.SHEAR_WIDTH, Vertical = 5 }, Children = new Drawable[] diff --git a/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoomParticipantsList.cs b/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoomParticipantsList.cs index c31633eefc..06f9f35479 100644 --- a/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoomParticipantsList.cs +++ b/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoomParticipantsList.cs @@ -24,8 +24,14 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components { public partial class DrawableRoomParticipantsList : OnlinePlayComposite { + public const float SHEAR_WIDTH = 12f; + private const float avatar_size = 36; + private const float height = 60f; + + private static readonly Vector2 shear = new Vector2(SHEAR_WIDTH / height, 0); + private FillFlowContainer avatarFlow; private CircularAvatar hostAvatar; @@ -36,7 +42,7 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components public DrawableRoomParticipantsList() { AutoSizeAxes = Axes.X; - Height = 60; + Height = height; } [BackgroundDependencyLoader] @@ -49,7 +55,7 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components RelativeSizeAxes = Axes.Both, Masking = true, CornerRadius = 10, - Shear = new Vector2(0.2f, 0), + Shear = shear, Child = new Box { RelativeSizeAxes = Axes.Both, @@ -98,7 +104,7 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components RelativeSizeAxes = Axes.Both, Masking = true, CornerRadius = 10, - Shear = new Vector2(0.2f, 0), + Shear = shear, Child = new Box { RelativeSizeAxes = Axes.Both, From 24d8e336e24fbdb1f4fdfe01f7c2336546a3184b Mon Sep 17 00:00:00 2001 From: Salman Ahmed Date: Wed, 14 Jun 2023 07:55:03 +0300 Subject: [PATCH 4/4] Remove width limit on room status text in favour of cell distribution --- osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs | 1 - 1 file changed, 1 deletion(-) diff --git a/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs b/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs index ad421fce94..ef06d21655 100644 --- a/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs +++ b/osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs @@ -337,7 +337,6 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components { RelativeSizeAxes = Axes.X; AutoSizeAxes = Axes.Y; - Width = 0.5f; } [BackgroundDependencyLoader]