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[]
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
         {
-                background = new Box
+            AddInternal(checkmark = new SpriteIcon
-                {
-                    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()
-        {
             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,7 +124,11 @@ namespace osu.Game.Screens.OnlinePlay
             modDisplay.Current.Value = requiredMods.ToArray();
         }
 
-        protected override Drawable CreateContent() => maskingContainer = new Container
+        protected override Drawable CreateContent()
+        {
+            Action<SpriteText> fontParameters = s => s.Font = OsuFont.Default.With(weight: FontWeight.SemiBold);
+
+            return maskingContainer = new Container
             {
                 RelativeSizeAxes = Axes.X,
                 Height = 50,
@@ -165,7 +169,7 @@ namespace osu.Game.Screens.OnlinePlay
                                 Direction = FillDirection.Vertical,
                                 Children = new Drawable[]
                                 {
-                                beatmapText = new LinkFlowContainer { AutoSizeAxes = Axes.Both },
+                                    beatmapText = new LinkFlowContainer(fontParameters) { AutoSizeAxes = Axes.Both },
                                     new FillFlowContainer
                                     {
                                         AutoSizeAxes = Axes.Both,
@@ -180,7 +184,7 @@ namespace osu.Game.Screens.OnlinePlay
                                                 Spacing = new Vector2(10f, 0),
                                                 Children = new Drawable[]
                                                 {
-                                                authorText = new LinkFlowContainer { AutoSizeAxes = Axes.Both },
+                                                    authorText = new LinkFlowContainer(fontParameters) { AutoSizeAxes = Axes.Both },
                                                     explicitContentPill = new ExplicitContentBeatmapPill
                                                     {
                                                         Alpha = 0f,
@@ -214,11 +218,17 @@ namespace osu.Game.Screens.OnlinePlay
                         Origin = Anchor.CentreRight,
                         Direction = FillDirection.Horizontal,
                         AutoSizeAxes = Axes.Both,
-                    X = -18,
+                        Spacing = new Vector2(5),
-                    ChildrenEnumerable = CreateButtons()
+                        X = -10,
+                        ChildrenEnumerable = CreateButtons().Select(button => button.With(b =>
+                        {
+                            b.Anchor = Anchor.Centre;
+                            b.Origin = Anchor.Centre;
+                        }))
                     }
                 }
             };
+        }
 
         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,
                             },
                         }
                     }