Redesign sample bank toggles

osu.Game/Rulesets/Edit/ExpandableSpriteText.cs

@@ -0,0 +1,34 @@
+// 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.Bindables;
+using osu.Framework.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Rulesets.Edit
+{
+    internal partial class ExpandableSpriteText : OsuSpriteText, IExpandable
+    {
+        public BindableBool Expanded { get; } = new BindableBool();
+
+        [Resolved(canBeNull: true)]
+        private IExpandingContainer? expandingContainer { get; set; }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            expandingContainer?.Expanded.BindValueChanged(containerExpanded =>
+            {
+                Expanded.Value = containerExpanded.NewValue;
+            }, true);
+
+            Expanded.BindValueChanged(expanded =>
+            {
+                this.FadeTo(expanded.NewValue ? 1 : 0, 150, Easing.OutQuint);
+            }, true);
+        }
+    }
+}

osu.Game/Rulesets/Edit/HitObjectComposer.cs

@@ -18,6 +18,7 @@ using osu.Framework.Input.Events;
 using osu.Framework.Logging;
 using osu.Game.Beatmaps;
 using osu.Game.Configuration;
+using osu.Game.Graphics;
 using osu.Game.Overlays;
 using osu.Game.Rulesets.Configuration;
 using osu.Game.Rulesets.Edit.Tools;
@@ -85,7 +86,6 @@ namespace osu.Game.Rulesets.Edit
         private EditorRadioButtonCollection toolboxCollection;
         private FillFlowContainer togglesCollection;
         private FillFlowContainer sampleBankTogglesCollection;
-        private FillFlowContainer sampleAdditionBankTogglesCollection;
 
         private IBindable<bool> hasTiming;
         private Bindable<bool> autoSeekOnPlacement;
@@ -176,25 +176,55 @@ namespace osu.Game.Rulesets.Edit
                                         Spacing = new Vector2(0, 5),
                                     },
                                 },
-                                new EditorToolboxGroup("bank (Shift-Q~R)")
+                                new EditorToolboxGroup("bank (Shift/Alt-Q~R)")
                                 {
-                                    Child = sampleBankTogglesCollection = new FillFlowContainer
+                                    Child = new FillFlowContainer
-                                    {
+                                    {
-                                        RelativeSizeAxes = Axes.X,
+                                        RelativeSizeAxes = Axes.X,
-                                        AutoSizeAxes = Axes.Y,
+                                        AutoSizeAxes = Axes.Y,
-                                        Direction = FillDirection.Vertical,
+                                        Direction = FillDirection.Vertical,
-                                        Spacing = new Vector2(0, 5),
+                                        Spacing = new Vector2(0, 5),
-                                    },
+                                        Children = new Drawable[]
-                                },
+                                        {
-                                new EditorToolboxGroup("additions (Alt-Q~R)")
+                                            new Container
-                                {
+                                            {
-                                    Child = sampleAdditionBankTogglesCollection = new FillFlowContainer
+                                                RelativeSizeAxes = Axes.X,
+                                                AutoSizeAxes = Axes.Y,
+                                                Children = new Drawable[]
+                                                {
+                                                    new ExpandableSpriteText
+                                                    {
+                                                        Text = "Normal",
+                                                        AlwaysPresent = true,
+                                                        AllowMultiline = false,
+                                                        RelativePositionAxes = Axes.X,
+                                                        X = 0.25f,
+                                                        Origin = Anchor.TopCentre,
+                                                        Anchor = Anchor.TopLeft,
+                                                        Font = OsuFont.GetFont(weight: FontWeight.Regular, size: 17),
+                                                    },
+                                                    new ExpandableSpriteText
+                                                    {
+                                                        Text = "Addition",
+                                                        AlwaysPresent = true,
+                                                        AllowMultiline = false,
+                                                        RelativePositionAxes = Axes.X,
+                                                        X = 0.75f,
+                                                        Origin = Anchor.TopCentre,
+                                                        Anchor = Anchor.TopLeft,
+                                                        Font = OsuFont.GetFont(weight: FontWeight.Regular, size: 17),
+                                                    },
+                                                }
+                                            },
+                                            sampleBankTogglesCollection = new FillFlowContainer
                                             {
                                                 RelativeSizeAxes = Axes.X,
                                                 AutoSizeAxes = Axes.Y,
                                                 Direction = FillDirection.Vertical,
                                                 Spacing = new Vector2(0, 5),
                                             },
+                                        }
+                                    }
                                 },
                             }
                         },
@@ -240,8 +270,7 @@ namespace osu.Game.Rulesets.Edit
             TernaryStates = CreateTernaryButtons().ToArray();
             togglesCollection.AddRange(TernaryStates.Select(b => new DrawableTernaryButton(b)));
 
-            sampleBankTogglesCollection.AddRange(BlueprintContainer.SampleBankTernaryStates.Select(b => new DrawableTernaryButton(b)));
+            sampleBankTogglesCollection.AddRange(BlueprintContainer.SampleBankTernaryStates.Zip(BlueprintContainer.SampleAdditionBankTernaryStates).Select(b => new DoubleDrawableTernaryButton(b.First, b.Second)));
-            sampleAdditionBankTogglesCollection.AddRange(BlueprintContainer.SampleAdditionBankTernaryStates.Select(b => new DrawableTernaryButton(b)));
 
             setSelectTool();
 
@@ -397,7 +426,7 @@ namespace osu.Game.Rulesets.Edit
                         attemptToggle(rightIndex, sampleBankTogglesCollection);
 
                     if (e.AltPressed)
-                        attemptToggle(rightIndex, sampleAdditionBankTogglesCollection);
+                        attemptToggle(rightIndex, sampleBankTogglesCollection, true);
                 }
                 else
                     attemptToggle(rightIndex, togglesCollection);
@@ -405,14 +434,26 @@ namespace osu.Game.Rulesets.Edit
 
             return handled || base.OnKeyDown(e);
 
-            void attemptToggle(int index, FillFlowContainer collection)
+            void attemptToggle(int index, FillFlowContainer collection, bool second = false)
             {
                 var item = collection.ElementAtOrDefault(index);
 
-                if (item is DrawableTernaryButton button)
+                switch (item)
                 {
+                    case DrawableTernaryButton button:
                         button.Button.Toggle();
                         handled = true;
+                        break;
+
+                    case DoubleDrawableTernaryButton doubleButton:
+                    {
+                        if (second)
+                            doubleButton.Button2.Toggle();
+                        else
+                            doubleButton.Button1.Toggle();
+                        handled = true;
+                        break;
+                    }
                 }
             }
         }

osu.Game/Screens/Edit/Components/TernaryButtons/DoubleDrawableTernaryButton.cs

@@ -0,0 +1,78 @@
+// 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.Sprites;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Screens.Edit.Components.TernaryButtons
+{
+    public partial class DoubleDrawableTernaryButton : CompositeDrawable
+    {
+        public readonly TernaryButton Button1;
+        public readonly TernaryButton Button2;
+
+        public DoubleDrawableTernaryButton(TernaryButton button1, TernaryButton button2)
+        {
+            Button1 = button1;
+            Button2 = button2;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+            Masking = true;
+            CornerRadius = 5;
+
+            InternalChildren = new Drawable[]
+            {
+                new Container
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Width = 0.5f,
+                    Padding = new MarginPadding { Right = 1 },
+                    Child = new InlineDrawableTernaryButton(Button1),
+                },
+                new Container
+                {
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Width = 0.5f,
+                    Padding = new MarginPadding { Left = 1 },
+                    Child = new InlineDrawableTernaryButton(Button2),
+                },
+            };
+        }
+    }
+
+    public partial class InlineDrawableTernaryButton : DrawableTernaryButton
+    {
+        public InlineDrawableTernaryButton(TernaryButton button)
+            : base(button)
+        {
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Content.Masking = false;
+            Content.CornerRadius = 0;
+            Icon.X = 4.5f;
+        }
+
+        protected override SpriteText CreateText() => new OsuSpriteText
+        {
+            Depth = -1,
+            Origin = Anchor.CentreLeft,
+            Anchor = Anchor.CentreLeft,
+            X = 31f
+        };
+    }
+}

osu.Game/Screens/Edit/Components/TernaryButtons/DrawableTernaryButton.cs

@@ -21,7 +21,7 @@ namespace osu.Game.Screens.Edit.Components.TernaryButtons
         private Color4 selectedBackgroundColour;
         private Color4 selectedIconColour;
 
-        private Drawable icon = null!;
+        protected Drawable Icon = null!;
 
         public readonly TernaryButton Button;
 
@@ -43,7 +43,7 @@ namespace osu.Game.Screens.Edit.Components.TernaryButtons
             defaultIconColour = defaultBackgroundColour.Darken(0.5f);
             selectedIconColour = selectedBackgroundColour.Lighten(0.5f);
 
-            Add(icon = (Button.CreateIcon?.Invoke() ?? new Circle()).With(b =>
+            Add(Icon = (Button.CreateIcon?.Invoke() ?? new Circle()).With(b =>
             {
                 b.Blending = BlendingParameters.Additive;
                 b.Anchor = Anchor.CentreLeft;
@@ -75,17 +75,17 @@ namespace osu.Game.Screens.Edit.Components.TernaryButtons
             switch (Button.Bindable.Value)
             {
                 case TernaryState.Indeterminate:
-                    icon.Colour = selectedIconColour.Darken(0.5f);
+                    Icon.Colour = selectedIconColour.Darken(0.5f);
                     BackgroundColour = selectedBackgroundColour.Darken(0.5f);
                     break;
 
                 case TernaryState.False:
-                    icon.Colour = defaultIconColour;
+                    Icon.Colour = defaultIconColour;
                     BackgroundColour = defaultBackgroundColour;
                     break;
 
                 case TernaryState.True:
-                    icon.Colour = selectedIconColour;
+                    Icon.Colour = selectedIconColour;
                     BackgroundColour = selectedBackgroundColour;
                     break;
             }

osu.Game/Screens/Edit/Compose/Components/ComposeBlueprintContainer.cs

@@ -259,28 +259,13 @@ namespace osu.Game.Screens.Edit.Compose.Components
 
         private Drawable getIconForBank(string sampleName)
         {
-            return new Container
+            return new OsuSpriteText
             {
-                Size = new Vector2(30, 20),
+                Anchor = Anchor.Centre,
-                Children = new Drawable[]
+                Origin = Anchor.Centre,
-                {
-                    new SpriteIcon
-                    {
-                        Size = new Vector2(8),
-                        Anchor = Anchor.CentreLeft,
-                        Origin = Anchor.CentreLeft,
-                        Icon = FontAwesome.Solid.VolumeOff
-                    },
-                    new OsuSpriteText
-                    {
-                        Anchor = Anchor.CentreLeft,
-                        Origin = Anchor.CentreLeft,
-                        X = 10,
                 Y = -1,
                 Font = OsuFont.Default.With(weight: FontWeight.Bold, size: 20),
                 Text = $"{char.ToUpperInvariant(sampleName.First())}"
-                    }
-                }
             };
         }