Merge pull request #11659 from peppy/playlists-item-visual-improvements

Improve appearance of playlist items display

osu.Game.Tests/Visual/Multiplayer/TestSceneDrawableRoomPlaylist.cs

@@ -11,8 +11,8 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Platform;
 using osu.Framework.Testing;
 using osu.Game.Beatmaps;
+using osu.Game.Beatmaps.Drawables;
 using osu.Game.Graphics.Containers;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Online.Rooms;
 using osu.Game.Overlays;
 using osu.Game.Rulesets;
@@ -20,6 +20,7 @@ using osu.Game.Rulesets.Osu;
 using osu.Game.Rulesets.Osu.Mods;
 using osu.Game.Screens.OnlinePlay;
 using osu.Game.Tests.Beatmaps;
+using osu.Game.Users;
 using osuTK;
 using osuTK.Input;
 
@@ -241,7 +242,7 @@ namespace osu.Game.Tests.Visual.Multiplayer
         }
 
         private void moveToItem(int index, Vector2? offset = null)
-            => AddStep($"move mouse to item {index}", () => InputManager.MoveMouseTo(playlist.ChildrenOfType<OsuRearrangeableListItem<PlaylistItem>>().ElementAt(index), offset));
+            => AddStep($"move mouse to item {index}", () => InputManager.MoveMouseTo(playlist.ChildrenOfType<DifficultyIcon>().ElementAt(index), offset));
 
         private void moveToDragger(int index, Vector2? offset = null) => AddStep($"move mouse to dragger {index}", () =>
         {
@@ -252,7 +253,7 @@ namespace osu.Game.Tests.Visual.Multiplayer
         private void moveToDeleteButton(int index, Vector2? offset = null) => AddStep($"move mouse to delete button {index}", () =>
         {
             var item = playlist.ChildrenOfType<OsuRearrangeableListItem<PlaylistItem>>().ElementAt(index);
-            InputManager.MoveMouseTo(item.ChildrenOfType<IconButton>().ElementAt(0), offset);
+            InputManager.MoveMouseTo(item.ChildrenOfType<DrawableRoomPlaylistItem.PlaylistRemoveButton>().ElementAt(0), offset);
         });
 
         private void assertHandleVisibility(int index, bool visible)
@@ -260,7 +261,7 @@ namespace osu.Game.Tests.Visual.Multiplayer
                 () => (playlist.ChildrenOfType<OsuRearrangeableListItem<PlaylistItem>.PlaylistItemHandle>().ElementAt(index).Alpha > 0) == visible);
 
         private void assertDeleteButtonVisibility(int index, bool visible)
-            => AddAssert($"delete button {index} {(visible ? "is" : "is not")} visible", () => (playlist.ChildrenOfType<IconButton>().ElementAt(2 + index * 2).Alpha > 0) == visible);
+            => AddAssert($"delete button {index} {(visible ? "is" : "is not")} visible", () => (playlist.ChildrenOfType<DrawableRoomPlaylistItem.PlaylistRemoveButton>().ElementAt(2 + index * 2).Alpha > 0) == visible);
 
         private void createPlaylist(bool allowEdit, bool allowSelection)
         {
@@ -278,7 +279,21 @@ namespace osu.Game.Tests.Visual.Multiplayer
                     playlist.Items.Add(new PlaylistItem
                     {
                         ID = i,
-                        Beatmap = { Value = new TestBeatmap(new OsuRuleset().RulesetInfo).BeatmapInfo },
+                        Beatmap =
+                        {
+                            Value = i % 2 == 1
+                                ? new TestBeatmap(new OsuRuleset().RulesetInfo).BeatmapInfo
+                                : new BeatmapInfo
+                                {
+                                    Metadata = new BeatmapMetadata
+                                    {
+                                        Artist = "Artist",
+                                        Author = new User { Username = "Creator name here" },
+                                        Title = "Long title used to check background colour",
+                                    },
+                                    BeatmapSet = new BeatmapSetInfo()
+                                }
+                        },
                         Ruleset = { Value = new OsuRuleset().RulesetInfo },
                         RequiredMods =
                         {

osu.Game/Graphics/UserInterface/DownloadButton.cs

@@ -4,54 +4,38 @@
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Online;
 using osuTK;
 
 namespace osu.Game.Graphics.UserInterface
 {
-    public class DownloadButton : OsuAnimatedButton
+    public class DownloadButton : GrayButton
     {
-        public readonly Bindable<DownloadState> State = new Bindable<DownloadState>();
-
-        private readonly SpriteIcon icon;
-        private readonly SpriteIcon checkmark;
-        private readonly Box background;
-
         [Resolved]
         private OsuColour colours { get; set; }
 
+        public readonly Bindable<DownloadState> State = new Bindable<DownloadState>();
+
+        private SpriteIcon checkmark;
+
         public DownloadButton()
+            : base(FontAwesome.Solid.Download)
         {
-            Children = new Drawable[]
-            {
-                background = new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Depth = float.MaxValue
-                },
-                icon = new SpriteIcon
-                {
-                    Anchor = Anchor.Centre,
-                    Origin = Anchor.Centre,
-                    Size = new Vector2(13),
-                    Icon = FontAwesome.Solid.Download,
-                },
-                checkmark = new SpriteIcon
-                {
-                    Anchor = Anchor.Centre,
-                    Origin = Anchor.Centre,
-                    X = 8,
-                    Size = Vector2.Zero,
-                    Icon = FontAwesome.Solid.Check,
-                }
-            };
         }
 
         [BackgroundDependencyLoader]
         private void load()
         {
+            AddInternal(checkmark = new SpriteIcon
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                X = 8,
+                Size = Vector2.Zero,
+                Icon = FontAwesome.Solid.Check,
+            });
+
             State.BindValueChanged(updateState, true);
         }
 
@@ -60,27 +44,27 @@ namespace osu.Game.Graphics.UserInterface
             switch (state.NewValue)
             {
                 case DownloadState.NotDownloaded:
-                    background.FadeColour(colours.Gray4, 500, Easing.InOutExpo);
+                    Background.FadeColour(colours.Gray4, 500, Easing.InOutExpo);
-                    icon.MoveToX(0, 500, Easing.InOutExpo);
+                    Icon.MoveToX(0, 500, Easing.InOutExpo);
                     checkmark.ScaleTo(Vector2.Zero, 500, Easing.InOutExpo);
                     TooltipText = "Download";
                     break;
 
                 case DownloadState.Downloading:
-                    background.FadeColour(colours.Blue, 500, Easing.InOutExpo);
+                    Background.FadeColour(colours.Blue, 500, Easing.InOutExpo);
-                    icon.MoveToX(0, 500, Easing.InOutExpo);
+                    Icon.MoveToX(0, 500, Easing.InOutExpo);
                     checkmark.ScaleTo(Vector2.Zero, 500, Easing.InOutExpo);
                     TooltipText = "Downloading...";
                     break;
 
                 case DownloadState.Importing:
-                    background.FadeColour(colours.Yellow, 500, Easing.InOutExpo);
+                    Background.FadeColour(colours.Yellow, 500, Easing.InOutExpo);
                     TooltipText = "Importing";
                     break;
 
                 case DownloadState.LocallyAvailable:
-                    background.FadeColour(colours.Green, 500, Easing.InOutExpo);
+                    Background.FadeColour(colours.Green, 500, Easing.InOutExpo);
-                    icon.MoveToX(-8, 500, Easing.InOutExpo);
+                    Icon.MoveToX(-8, 500, Easing.InOutExpo);
                     checkmark.ScaleTo(new Vector2(13), 500, Easing.InOutExpo);
                     break;
             }

osu.Game/Graphics/UserInterface/GrayButton.cs

@@ -0,0 +1,48 @@
+// 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.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osuTK;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    public class GrayButton : OsuAnimatedButton
+    {
+        protected SpriteIcon Icon { get; private set; }
+        protected Box Background { get; private set; }
+
+        private readonly IconUsage icon;
+
+        [Resolved]
+        private OsuColour colours { get; set; }
+
+        public GrayButton(IconUsage icon)
+        {
+            this.icon = icon;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Children = new Drawable[]
+            {
+                Background = new Box
+                {
+                    Colour = colours.Gray4,
+                    RelativeSizeAxes = Axes.Both,
+                    Depth = float.MaxValue
+                },
+                Icon = new SpriteIcon
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Size = new Vector2(13),
+                    Icon = icon,
+                },
+            };
+        }
+    }
+}

osu.Game/Screens/OnlinePlay/DrawableRoomPlaylistItem.cs

@@ -124,101 +124,111 @@ namespace osu.Game.Screens.OnlinePlay
             modDisplay.Current.Value = requiredMods.ToArray();
         }
 
-        protected override Drawable CreateContent() => maskingContainer = new Container
+        protected override Drawable CreateContent()
         {
-            RelativeSizeAxes = Axes.X,
+            Action<SpriteText> fontParameters = s => s.Font = OsuFont.Default.With(weight: FontWeight.SemiBold);
-            Height = 50,
+
-            Masking = true,
+            return maskingContainer = new Container
-            CornerRadius = 10,
-            Children = new Drawable[]
             {
-                new Box // A transparent box that forces the border to be drawn if the panel background is opaque
+                RelativeSizeAxes = Axes.X,
+                Height = 50,
+                Masking = true,
+                CornerRadius = 10,
+                Children = new Drawable[]
                 {
-                    RelativeSizeAxes = Axes.Both,
+                    new Box // A transparent box that forces the border to be drawn if the panel background is opaque
-                    Alpha = 0,
-                    AlwaysPresent = true
-                },
-                new PanelBackground
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Beatmap = { BindTarget = beatmap }
-                },
-                new FillFlowContainer
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Padding = new MarginPadding { Left = 8 },
-                    Spacing = new Vector2(8, 0),
-                    Direction = FillDirection.Horizontal,
-                    Children = new Drawable[]
                     {
-                        difficultyIconContainer = new Container
+                        RelativeSizeAxes = Axes.Both,
+                        Alpha = 0,
+                        AlwaysPresent = true
+                    },
+                    new PanelBackground
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Beatmap = { BindTarget = beatmap }
+                    },
+                    new FillFlowContainer
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Padding = new MarginPadding { Left = 8 },
+                        Spacing = new Vector2(8, 0),
+                        Direction = FillDirection.Horizontal,
+                        Children = new Drawable[]
                         {
-                            Anchor = Anchor.CentreLeft,
+                            difficultyIconContainer = new Container
-                            Origin = Anchor.CentreLeft,
-                            AutoSizeAxes = Axes.Both,
-                        },
-                        new FillFlowContainer
-                        {
-                            Anchor = Anchor.CentreLeft,
-                            Origin = Anchor.CentreLeft,
-                            AutoSizeAxes = Axes.Both,
-                            Direction = FillDirection.Vertical,
-                            Children = new Drawable[]
                             {
-                                beatmapText = new LinkFlowContainer { AutoSizeAxes = Axes.Both },
+                                Anchor = Anchor.CentreLeft,
-                                new FillFlowContainer
+                                Origin = Anchor.CentreLeft,
+                                AutoSizeAxes = Axes.Both,
+                            },
+                            new FillFlowContainer
+                            {
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                AutoSizeAxes = Axes.Both,
+                                Direction = FillDirection.Vertical,
+                                Children = new Drawable[]
                                 {
-                                    AutoSizeAxes = Axes.Both,
+                                    beatmapText = new LinkFlowContainer(fontParameters) { AutoSizeAxes = Axes.Both },
-                                    Direction = FillDirection.Horizontal,
+                                    new FillFlowContainer
-                                    Spacing = new Vector2(10f, 0),
-                                    Children = new Drawable[]
                                     {
-                                        new FillFlowContainer
+                                        AutoSizeAxes = Axes.Both,
+                                        Direction = FillDirection.Horizontal,
+                                        Spacing = new Vector2(10f, 0),
+                                        Children = new Drawable[]
                                         {
-                                            AutoSizeAxes = Axes.Both,
+                                            new FillFlowContainer
-                                            Direction = FillDirection.Horizontal,
-                                            Spacing = new Vector2(10f, 0),
-                                            Children = new Drawable[]
                                             {
-                                                authorText = new LinkFlowContainer { AutoSizeAxes = Axes.Both },
+                                                AutoSizeAxes = Axes.Both,
-                                                explicitContentPill = new ExplicitContentBeatmapPill
+                                                Direction = FillDirection.Horizontal,
+                                                Spacing = new Vector2(10f, 0),
+                                                Children = new Drawable[]
                                                 {
-                                                    Alpha = 0f,
+                                                    authorText = new LinkFlowContainer(fontParameters) { AutoSizeAxes = Axes.Both },
-                                                    Anchor = Anchor.CentreLeft,
+                                                    explicitContentPill = new ExplicitContentBeatmapPill
-                                                    Origin = Anchor.CentreLeft,
+                                                    {
-                                                    Margin = new MarginPadding { Top = 3f },
+                                                        Alpha = 0f,
-                                                }
+                                                        Anchor = Anchor.CentreLeft,
+                                                        Origin = Anchor.CentreLeft,
+                                                        Margin = new MarginPadding { Top = 3f },
+                                                    }
+                                                },
                                             },
-                                        },
+                                            new Container
-                                        new Container
-                                        {
-                                            Anchor = Anchor.CentreLeft,
-                                            Origin = Anchor.CentreLeft,
-                                            AutoSizeAxes = Axes.Both,
-                                            Child = modDisplay = new ModDisplay
                                             {
-                                                Scale = new Vector2(0.4f),
+                                                Anchor = Anchor.CentreLeft,
-                                                DisplayUnrankedText = false,
+                                                Origin = Anchor.CentreLeft,
-                                                ExpansionMode = ExpansionMode.AlwaysExpanded
+                                                AutoSizeAxes = Axes.Both,
+                                                Child = modDisplay = new ModDisplay
+                                                {
+                                                    Scale = new Vector2(0.4f),
+                                                    DisplayUnrankedText = false,
+                                                    ExpansionMode = ExpansionMode.AlwaysExpanded
+                                                }
                                             }
                                         }
                                     }
                                 }
                             }
                         }
+                    },
+                    new FillFlowContainer
+                    {
+                        Anchor = Anchor.CentreRight,
+                        Origin = Anchor.CentreRight,
+                        Direction = FillDirection.Horizontal,
+                        AutoSizeAxes = Axes.Both,
+                        Spacing = new Vector2(5),
+                        X = -10,
+                        ChildrenEnumerable = CreateButtons().Select(button => button.With(b =>
+                        {
+                            b.Anchor = Anchor.Centre;
+                            b.Origin = Anchor.Centre;
+                        }))
                     }
-                },
-                new FillFlowContainer
-                {
-                    Anchor = Anchor.CentreRight,
-                    Origin = Anchor.CentreRight,
-                    Direction = FillDirection.Horizontal,
-                    AutoSizeAxes = Axes.Both,
-                    X = -18,
-                    ChildrenEnumerable = CreateButtons()
                 }
-            }
+            };
-        };
+        }
 
         protected virtual IEnumerable<Drawable> CreateButtons() =>
             new Drawable[]
@@ -227,14 +237,29 @@ namespace osu.Game.Screens.OnlinePlay
                 {
                     Size = new Vector2(50, 30)
                 },
-                new IconButton
+                new PlaylistRemoveButton
                 {
-                    Icon = FontAwesome.Solid.MinusSquare,
+                    Size = new Vector2(30, 30),
                     Alpha = allowEdit ? 1 : 0,
                     Action = () => RequestDeletion?.Invoke(Model),
                 },
             };
 
+        public class PlaylistRemoveButton : GrayButton
+        {
+            public PlaylistRemoveButton()
+                : base(FontAwesome.Solid.MinusSquare)
+            {
+                TooltipText = "Remove from playlist";
+            }
+
+            [BackgroundDependencyLoader]
+            private void load()
+            {
+                Icon.Scale = new Vector2(0.8f);
+            }
+        }
+
         protected override bool OnClick(ClickEvent e)
         {
             if (allowSelection)
@@ -318,24 +343,18 @@ namespace osu.Game.Screens.OnlinePlay
                                 Colour = Color4.Black,
                                 Width = 0.4f,
                             },
-                            // Piecewise-linear gradient with 3 segments to make it appear smoother
+                            // Piecewise-linear gradient with 2 segments to make it appear smoother
                             new Box
                             {
                                 RelativeSizeAxes = Axes.Both,
-                                Colour = ColourInfo.GradientHorizontal(Color4.Black, new Color4(0f, 0f, 0f, 0.9f)),
+                                Colour = ColourInfo.GradientHorizontal(Color4.Black, new Color4(0f, 0f, 0f, 0.7f)),
-                                Width = 0.05f,
+                                Width = 0.4f,
                             },
                             new Box
                             {
                                 RelativeSizeAxes = Axes.Both,
-                                Colour = ColourInfo.GradientHorizontal(new Color4(0f, 0f, 0f, 0.9f), new Color4(0f, 0f, 0f, 0.1f)),
+                                Colour = ColourInfo.GradientHorizontal(new Color4(0f, 0f, 0f, 0.7f), new Color4(0, 0, 0, 0.4f)),
-                                Width = 0.2f,
+                                Width = 0.4f,
-                            },
-                            new Box
-                            {
-                                RelativeSizeAxes = Axes.Both,
-                                Colour = ColourInfo.GradientHorizontal(new Color4(0f, 0f, 0f, 0.1f), new Color4(0, 0, 0, 0)),
-                                Width = 0.05f,
                             },
                         }
                     }