1
0
mirror of https://github.com/ppy/osu.git synced 2025-03-19 05:17:17 +08:00

Initial redesign of DrawableRoom

This commit is contained in:
smoogipoo 2021-07-06 20:04:32 +09:00
parent 2ddfa15a80
commit 8929aa0ca7
2 changed files with 57 additions and 61 deletions

View File

@ -8,6 +8,7 @@ using osu.Game.Graphics.UserInterface;
using osu.Game.Online.Rooms;
using osu.Game.Online.Rooms.RoomStatuses;
using osu.Game.Screens.OnlinePlay.Lounge.Components;
using osuTK;
namespace osu.Game.Tests.Visual.Multiplayer
{
@ -17,31 +18,34 @@ namespace osu.Game.Tests.Visual.Multiplayer
{
Child = new FillFlowContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Both,
Width = 0.5f,
Size = new Vector2(0.9f),
Spacing = new Vector2(10),
Children = new Drawable[]
{
createDrawableRoom(new Room
{
Name = { Value = "Open - ending in 1 day" },
Name = { Value = "Room name: Open - ending in 1 day" },
Status = { Value = new RoomStatusOpen() },
EndDate = { Value = DateTimeOffset.Now.AddDays(1) }
}),
createDrawableRoom(new Room
{
Name = { Value = "Playing - ending in 1 day" },
Name = { Value = "Room name: Playing - ending in 1 day" },
Status = { Value = new RoomStatusPlaying() },
EndDate = { Value = DateTimeOffset.Now.AddDays(1) }
}),
createDrawableRoom(new Room
{
Name = { Value = "Ended" },
Name = { Value = "Room name: Ended" },
Status = { Value = new RoomStatusEnded() },
EndDate = { Value = DateTimeOffset.Now }
}),
createDrawableRoom(new Room
{
Name = { Value = "Open" },
Name = { Value = "Room name: Open" },
Status = { Value = new RoomStatusOpen() },
Category = { Value = RoomCategory.Realtime }
}),

View File

@ -8,6 +8,7 @@ using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Cursor;
using osu.Framework.Graphics.Effects;
@ -29,16 +30,13 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components
public class DrawableRoom : OsuClickableContainer, IStateful<SelectionState>, IFilterable, IHasContextMenu
{
public const float SELECTION_BORDER_WIDTH = 4;
private const float corner_radius = 5;
private const float corner_radius = 10;
private const float transition_duration = 60;
private const float content_padding = 10;
private const float height = 110;
private const float side_strip_width = 5;
private const float cover_width = 145;
private const float height = 100;
public event Action<SelectionState> StateChanged;
private Box selectionBox;
private Drawable selectionBox;
[Resolved(canBeNull: true)]
private OnlinePlayScreen parentScreen { get; set; }
@ -108,23 +106,12 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
float stripWidth = side_strip_width * (Room.Category.Value == RoomCategory.Spotlight ? 2 : 1);
Children = new Drawable[]
{
new StatusColouredContainer(transition_duration)
{
RelativeSizeAxes = Axes.Both,
Child = selectionBox = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = state == SelectionState.Selected ? 1 : 0,
}
},
new Container
{
Name = @"Room content",
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding(SELECTION_BORDER_WIDTH),
Child = new Container
{
RelativeSizeAxes = Axes.Both,
@ -141,69 +128,74 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4Extensions.FromHex(@"212121"),
},
new StatusColouredContainer(transition_duration)
{
RelativeSizeAxes = Axes.Y,
Width = stripWidth,
Child = new Box { RelativeSizeAxes = Axes.Both }
Colour = Color4Extensions.FromHex(@"#27302E"),
},
new Container
{
RelativeSizeAxes = Axes.Y,
Width = cover_width,
Masking = true,
Margin = new MarginPadding { Left = stripWidth },
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
RelativeSizeAxes = Axes.Both,
FillMode = FillMode.Fill,
Child = new OnlinePlayBackgroundSprite(BeatmapSetCoverType.List) { RelativeSizeAxes = Axes.Both }
},
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = ColourInfo.GradientHorizontal(Color4Extensions.FromHex(@"#27302E"), Color4Extensions.FromHex(@"#27302E").Opacity(0.3f))
},
new Container
{
Name = @"Left details",
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding
{
Vertical = content_padding,
Left = stripWidth + cover_width + content_padding,
Right = content_padding,
Left = 20,
Vertical = 5
},
Children = new Drawable[]
{
new FillFlowContainer
new RoomStatusInfo(),
new RoomName
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Spacing = new Vector2(5f),
Children = new Drawable[]
{
new RoomName { Font = OsuFont.GetFont(size: 18) },
new ParticipantInfo(),
},
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Font = OsuFont.GetFont(size: 28)
},
new FillFlowContainer
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Spacing = new Vector2(0, 5),
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Children = new Drawable[]
{
new RoomStatusInfo(),
new BeatmapTitle { TextSize = 14 },
},
},
new ModeTypeInfo
{
Anchor = Anchor.BottomRight,
Origin = Anchor.BottomRight,
},
},
new StarRatingRangeDisplay { Scale = new Vector2(0.85f) }
}
}
}
},
},
},
},
new StatusColouredContainer(transition_duration)
{
RelativeSizeAxes = Axes.Both,
Child = selectionBox = new Container
{
RelativeSizeAxes = Axes.Both,
Alpha = state == SelectionState.Selected ? 1 : 0,
Masking = true,
CornerRadius = corner_radius,
BorderThickness = SELECTION_BORDER_WIDTH,
BorderColour = Color4.White,
Child = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0,
AlwaysPresent = true
}
}
},
};
}