Share remove from playlist button design with adjacent download button

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;
+        protected Box Background;
+
+        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

@@ -214,7 +214,8 @@ namespace osu.Game.Screens.OnlinePlay
                     Origin = Anchor.CentreRight,
                     Direction = FillDirection.Horizontal,
                     AutoSizeAxes = Axes.Both,
-                    X = -18,
+                    Spacing = new Vector2(5),
+                    X = -10,
                     ChildrenEnumerable = CreateButtons()
                 }
             }
@@ -225,16 +226,35 @@ namespace osu.Game.Screens.OnlinePlay
             {
                 new PlaylistDownloadButton(Item)
                 {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
                     Size = new Vector2(50, 30)
                 },
-                new IconButton
+                new PlaylistRemoveButton
                 {
-                    Icon = FontAwesome.Solid.MinusSquare,
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    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)