mirror of
https://github.com/ppy/osu
synced 2024-12-14 02:46:27 +00:00
Add special category pill + secondary background
This commit is contained in:
smoogipoo
parent
c5977f3318
commit
0e89bafd17
@ -47,10 +47,16 @@ namespace osu.Game.Tests.Visual.Multiplayer
|
||||
}),
|
||||
createDrawableRoom(new Room
|
||||
{
|
||||
Name = { Value = "Room 4" },
|
||||
Name = { Value = "Room 4 (realtime)" },
|
||||
Status = { Value = new RoomStatusOpen() },
|
||||
Category = { Value = RoomCategory.Realtime },
|
||||
}),
|
||||
createDrawableRoom(new Room
|
||||
{
|
||||
Name = { Value = "Room 4 (spotlight)" },
|
||||
Status = { Value = new RoomStatusOpen() },
|
||||
Category = { Value = RoomCategory.Spotlight },
|
||||
}),
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -105,7 +105,11 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components
|
||||
}
|
||||
}
|
||||
|
||||
private readonly Bindable<RoomCategory> roomCategory = new Bindable<RoomCategory>();
|
||||
|
||||
private RecentParticipantsList recentParticipantsList;
|
||||
private RoomSpecialCategoryPill specialCategoryPill;
|
||||
private Drawable spotlightGlow;
|
||||
|
||||
public bool FilteringActive { get; set; }
|
||||
|
||||
@ -126,156 +130,169 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components
|
||||
{
|
||||
new Container
|
||||
{
|
||||
Name = @"Room content",
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Child = new Container
|
||||
Children = new Drawable[]
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Masking = true,
|
||||
CornerRadius = corner_radius,
|
||||
EdgeEffect = new EdgeEffectParameters
|
||||
new OnlinePlayBackgroundSprite(BeatmapSetCoverType.List)
|
||||
{
|
||||
Type = EdgeEffectType.Shadow,
|
||||
Colour = Color4.Black.Opacity(40),
|
||||
Radius = 5,
|
||||
RelativeSizeAxes = Axes.Both
|
||||
},
|
||||
Children = new Drawable[]
|
||||
new Container
|
||||
{
|
||||
// This resolves 1px gaps due to applying the (parenting) corner radius and masking across multiple filling background sprites.
|
||||
new BufferedContainer
|
||||
Name = @"Room content",
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Padding = new MarginPadding { Left = 20, Vertical = -0.5f },
|
||||
Child = new Container
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Masking = true,
|
||||
CornerRadius = corner_radius,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new Box
|
||||
// This resolves internal 1px gaps due to applying the (parenting) corner radius and masking across multiple filling background sprites.
|
||||
new BufferedContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = Color4Extensions.FromHex(@"#27302E"),
|
||||
Children = new[]
|
||||
{
|
||||
new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = Color4Extensions.FromHex(@"#27302E"),
|
||||
},
|
||||
new OnlinePlayBackgroundSprite(BeatmapSetCoverType.List)
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both
|
||||
},
|
||||
new GridContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
ColumnDimensions = new[]
|
||||
{
|
||||
new Dimension(GridSizeMode.Relative, 0.2f)
|
||||
},
|
||||
Content = new[]
|
||||
{
|
||||
new Drawable[]
|
||||
{
|
||||
new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = Color4Extensions.FromHex(@"#27302E"),
|
||||
},
|
||||
new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = ColourInfo.GradientHorizontal(Color4Extensions.FromHex(@"#27302E"), Color4Extensions.FromHex(@"#27302E").Opacity(0.3f))
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
spotlightGlow = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Y,
|
||||
Width = 50,
|
||||
Colour = ColourInfo.GradientHorizontal(colours.Pink.Opacity(0.5f), colours.Pink.Opacity(0))
|
||||
}
|
||||
},
|
||||
},
|
||||
new Container
|
||||
{
|
||||
Anchor = Anchor.CentreRight,
|
||||
Origin = Anchor.CentreRight,
|
||||
Name = @"Left details",
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
FillMode = FillMode.Fill,
|
||||
Child = new OnlinePlayBackgroundSprite(BeatmapSetCoverType.List) { RelativeSizeAxes = Axes.Both }
|
||||
},
|
||||
new GridContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
ColumnDimensions = new[]
|
||||
Padding = new MarginPadding
|
||||
{
|
||||
new Dimension(GridSizeMode.Relative, 0.2f)
|
||||
Left = 20,
|
||||
Vertical = 5
|
||||
},
|
||||
Content = new[]
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new Drawable[]
|
||||
new FillFlowContainer
|
||||
{
|
||||
new Box
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(4),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = Color4Extensions.FromHex(@"#27302E"),
|
||||
},
|
||||
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
|
||||
{
|
||||
Left = 20,
|
||||
Vertical = 5
|
||||
},
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new FillFlowContainer
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(4),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new RoomStatusPill
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft
|
||||
new RoomStatusPill
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft
|
||||
},
|
||||
specialCategoryPill = new RoomSpecialCategoryPill
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft
|
||||
},
|
||||
new EndDateInfo
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft
|
||||
},
|
||||
}
|
||||
},
|
||||
new EndDateInfo
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft
|
||||
},
|
||||
}
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Vertical,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new RoomNameText(),
|
||||
new RoomHostText()
|
||||
}
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
Anchor = Anchor.BottomLeft,
|
||||
Origin = Anchor.BottomLeft,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(4),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new PlaylistCountPill
|
||||
new FillFlowContainer
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Vertical,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new RoomNameText(),
|
||||
new RoomHostText()
|
||||
}
|
||||
},
|
||||
new StarRatingRangeDisplay
|
||||
new FillFlowContainer
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Scale = new Vector2(0.85f)
|
||||
Anchor = Anchor.BottomLeft,
|
||||
Origin = Anchor.BottomLeft,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(4),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new PlaylistCountPill
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
},
|
||||
new StarRatingRangeDisplay
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Scale = new Vector2(0.85f)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
Name = "Right content",
|
||||
Anchor = Anchor.CentreRight,
|
||||
Origin = Anchor.CentreRight,
|
||||
AutoSizeAxes = Axes.X,
|
||||
RelativeSizeAxes = Axes.Y,
|
||||
Padding = new MarginPadding
|
||||
{
|
||||
Right = 10,
|
||||
Vertical = 5
|
||||
},
|
||||
Children = new Drawable[]
|
||||
{
|
||||
recentParticipantsList = new RecentParticipantsList
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
Name = "Right content",
|
||||
Anchor = Anchor.CentreRight,
|
||||
Origin = Anchor.CentreRight,
|
||||
NumberOfAvatars = NumberOfAvatars
|
||||
AutoSizeAxes = Axes.X,
|
||||
RelativeSizeAxes = Axes.Y,
|
||||
Padding = new MarginPadding
|
||||
{
|
||||
Right = 10,
|
||||
Vertical = 5
|
||||
},
|
||||
Children = new Drawable[]
|
||||
{
|
||||
recentParticipantsList = new RecentParticipantsList
|
||||
{
|
||||
Anchor = Anchor.CentreRight,
|
||||
Origin = Anchor.CentreRight,
|
||||
NumberOfAvatars = NumberOfAvatars
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
new StatusColouredContainer(transition_duration)
|
||||
{
|
||||
@ -315,6 +332,21 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components
|
||||
this.FadeInFromZero(transition_duration);
|
||||
else
|
||||
Alpha = 0;
|
||||
|
||||
roomCategory.BindTo(Room.Category);
|
||||
roomCategory.BindValueChanged(c =>
|
||||
{
|
||||
if (c.NewValue == RoomCategory.Spotlight)
|
||||
{
|
||||
specialCategoryPill.Show();
|
||||
spotlightGlow.Show();
|
||||
}
|
||||
else
|
||||
{
|
||||
specialCategoryPill.Hide();
|
||||
spotlightGlow.Hide();
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
|
||||
protected override bool ShouldBeConsideredForInput(Drawable child) => state == SelectionState.Selected;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
// 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 osu.Framework.Allocation;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Containers;
|
||||
using osu.Framework.Graphics.Shapes;
|
||||
@ -16,7 +15,7 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components
|
||||
{
|
||||
private const float padding = 8;
|
||||
|
||||
public Drawable Background { get; private set; }
|
||||
public readonly Drawable Background;
|
||||
|
||||
protected override Container<Drawable> Content { get; } = new Container
|
||||
{
|
||||
@ -29,11 +28,7 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components
|
||||
{
|
||||
AutoSizeAxes = Axes.X;
|
||||
Height = 16;
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load()
|
||||
{
|
||||
InternalChild = new CircularContainer
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
// 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 osu.Framework.Allocation;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Sprites;
|
||||
using osu.Game.Graphics;
|
||||
using osu.Game.Graphics.Sprites;
|
||||
using osuTK.Graphics;
|
||||
|
||||
namespace osu.Game.Screens.OnlinePlay.Lounge.Components
|
||||
{
|
||||
public class RoomSpecialCategoryPill : OnlinePlayComposite
|
||||
{
|
||||
private SpriteText text;
|
||||
|
||||
public RoomSpecialCategoryPill()
|
||||
{
|
||||
AutoSizeAxes = Axes.Both;
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(OsuColour colours)
|
||||
{
|
||||
InternalChild = new PillContainer
|
||||
{
|
||||
Background =
|
||||
{
|
||||
Colour = colours.Pink,
|
||||
Alpha = 1
|
||||
},
|
||||
Child = text = new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Font = OsuFont.GetFont(weight: FontWeight.SemiBold, size: 12),
|
||||
Colour = Color4.Black
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
base.LoadComplete();
|
||||
|
||||
Category.BindValueChanged(c => text.Text = c.NewValue.ToString(), true);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,6 +35,9 @@ namespace osu.Game.Screens.OnlinePlay
|
||||
[Resolved(typeof(Room))]
|
||||
protected BindableList<PlaylistItem> Playlist { get; private set; }
|
||||
|
||||
[Resolved(typeof(Room))]
|
||||
protected Bindable<RoomCategory> Category { get; private set; }
|
||||
|
||||
[Resolved(typeof(Room))]
|
||||
protected BindableList<User> RecentParticipants { get; private set; }
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user