Merge pull request #26168 from peppy/toolbar-design-iteration

Toolbar design iteration

osu.Game/Overlays/Toolbar/Toolbar.cs

@@ -224,9 +224,9 @@ namespace osu.Game.Overlays.Toolbar
                         RelativeSizeAxes = Axes.X,
                         Anchor = Anchor.BottomLeft,
                         Alpha = 0,
-                        Height = 100,
+                        Height = 80,
                         Colour = ColourInfo.GradientVertical(
-                            OsuColour.Gray(0).Opacity(0.9f), OsuColour.Gray(0).Opacity(0)),
+                            OsuColour.Gray(0f).Opacity(0.7f), OsuColour.Gray(0).Opacity(0)),
                     },
                 };
             }
@@ -241,9 +241,9 @@ namespace osu.Game.Overlays.Toolbar
             private void updateState()
             {
                 if (ShowGradient.Value)
-                    gradientBackground.FadeIn(transition_time, Easing.OutQuint);
+                    gradientBackground.FadeIn(2500, Easing.OutQuint);
                 else
-                    gradientBackground.FadeOut(transition_time, Easing.OutQuint);
+                    gradientBackground.FadeOut(200, Easing.OutQuint);
             }
         }
 

osu.Game/Overlays/Toolbar/ToolbarButton.cs

@@ -7,7 +7,6 @@ using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Extensions.EnumExtensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Input;
@@ -74,6 +73,8 @@ namespace osu.Game.Overlays.Toolbar
         private readonly SpriteText keyBindingTooltip;
         protected FillFlowContainer Flow;
 
+        protected readonly Container BackgroundContent;
+
         [Resolved]
         private RealmAccess realm { get; set; } = null!;
 
@@ -82,6 +83,16 @@ namespace osu.Game.Overlays.Toolbar
             Width = Toolbar.HEIGHT;
             RelativeSizeAxes = Axes.Y;
 
+            Padding = new MarginPadding(3);
+
+            Children = new Drawable[]
+            {
+                BackgroundContent = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Masking = true,
+                    CornerRadius = 6,
+                    CornerExponent = 3f,
                     Children = new Drawable[]
                     {
                         HoverBackground = new Box
@@ -98,6 +109,8 @@ namespace osu.Game.Overlays.Toolbar
                             Colour = Color4.White.Opacity(100),
                             Blending = BlendingParameters.Additive,
                         },
+                    }
+                },
                 Flow = new FillFlowContainer
                 {
                     Direction = FillDirection.Horizontal,
@@ -219,14 +232,6 @@ namespace osu.Game.Overlays.Toolbar
         public OpaqueBackground()
         {
             RelativeSizeAxes = Axes.Both;
-            Masking = true;
-            MaskingSmoothness = 0;
-            EdgeEffect = new EdgeEffectParameters
-            {
-                Type = EdgeEffectType.Shadow,
-                Colour = Color4.Black.Opacity(40),
-                Radius = 5,
-            };
 
             Children = new Drawable[]
             {

osu.Game/Overlays/Toolbar/ToolbarClock.cs

@@ -42,6 +42,16 @@ namespace osu.Game.Overlays.Toolbar
             clockDisplayMode = config.GetBindable<ToolbarClockDisplayMode>(OsuSetting.ToolbarClockDisplayMode);
             prefer24HourTime = config.GetBindable<bool>(OsuSetting.Prefer24HourTime);
 
+            Padding = new MarginPadding(3);
+
+            Children = new Drawable[]
+            {
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Masking = true,
+                    CornerRadius = 6,
+                    CornerExponent = 3f,
                     Children = new Drawable[]
                     {
                         hoverBackground = new Box
@@ -58,6 +68,8 @@ namespace osu.Game.Overlays.Toolbar
                             Colour = Color4.White.Opacity(100),
                             Blending = BlendingParameters.Additive,
                         },
+                    }
+                },
                 new FillFlowContainer
                 {
                     RelativeSizeAxes = Axes.Y,

osu.Game/Overlays/Toolbar/ToolbarOverlayToggleButton.cs

@@ -3,6 +3,7 @@
 
 #nullable disable
 
+using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
@@ -14,7 +15,7 @@ namespace osu.Game.Overlays.Toolbar
 {
     public partial class ToolbarOverlayToggleButton : ToolbarButton
     {
-        private readonly Box stateBackground;
+        private Box stateBackground;
 
         private OverlayContainer stateContainer;
 
@@ -44,12 +45,13 @@ namespace osu.Game.Overlays.Toolbar
             }
         }
 
-        public ToolbarOverlayToggleButton()
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
         {
-            Add(stateBackground = new Box
+            BackgroundContent.Add(stateBackground = new Box
             {
                 RelativeSizeAxes = Axes.Both,
-                Colour = OsuColour.Gray(150).Opacity(180),
+                Colour = colours.Carmine.Opacity(180),
                 Blending = BlendingParameters.Additive,
                 Depth = 2,
                 Alpha = 0,

osu.Game/Overlays/Toolbar/ToolbarRulesetSelector.cs

@@ -4,20 +4,19 @@
 #nullable disable
 
 using System.Collections.Generic;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Effects;
-using osuTK;
-using osuTK.Graphics;
-using osu.Framework.Graphics.Shapes;
-using osu.Game.Rulesets;
-using osu.Framework.Graphics.UserInterface;
-using osu.Framework.Input.Events;
-using osuTK.Input;
 using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Audio;
 using osu.Framework.Audio.Sample;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Input.Events;
+using osu.Game.Rulesets;
+using osuTK;
+using osuTK.Graphics;
+using osuTK.Input;
 
 namespace osu.Game.Overlays.Toolbar
 {
@@ -41,25 +40,24 @@ namespace osu.Game.Overlays.Toolbar
                 new OpaqueBackground
                 {
                     Depth = 1,
+                    Masking = true,
                 },
                 ModeButtonLine = new Container
                 {
                     Size = new Vector2(Toolbar.HEIGHT, 3),
                     Anchor = Anchor.BottomLeft,
-                    Origin = Anchor.TopLeft,
+                    Origin = Anchor.BottomLeft,
-                    Masking = true,
+                    Y = -1,
-                    EdgeEffect = new EdgeEffectParameters
+                    Children = new Drawable[]
                     {
-                        Type = EdgeEffectType.Glow,
+                        new Circle
-                        Colour = new Color4(255, 194, 224, 100),
+                        {
-                        Radius = 15,
+                            Anchor = Anchor.Centre,
-                        Roundness = 15,
+                            Origin = Anchor.Centre,
+                            Size = new Vector2(18, 3),
+                        }
+                    }
                 },
-                    Child = new Box
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                    }
-                }
             });
 
             foreach (var ruleset in Rulesets.AvailableRulesets)
@@ -89,7 +87,7 @@ namespace osu.Game.Overlays.Toolbar
         {
             if (SelectedTab != null)
             {
-                ModeButtonLine.MoveToX(SelectedTab.DrawPosition.X, !hasInitialPosition ? 0 : 200, Easing.OutQuint);
+                ModeButtonLine.MoveToX(SelectedTab.DrawPosition.X, !hasInitialPosition ? 0 : 500, Easing.OutElasticQuarter);
 
                 if (hasInitialPosition)
                     selectionSamples[SelectedTab.Value.ShortName]?.Play();

osu.Game/Overlays/Toolbar/ToolbarRulesetTabButton.cs

@@ -1,14 +1,16 @@
 // 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.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input.Events;
+using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Localisation;
 using osu.Game.Rulesets;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays.Toolbar
 {
@@ -41,27 +43,31 @@ namespace osu.Game.Overlays.Toolbar
         {
             protected override HoverSounds CreateHoverSounds(HoverSampleSet sampleSet) => new HoverSounds();
 
+            [Resolved]
+            private OsuColour colours { get; set; } = null!;
+
+            public RulesetButton()
+            {
+                Padding = new MarginPadding(3)
+                {
+                    Bottom = 5
+                };
+            }
+
             public bool Active
             {
-                set
+                set => Scheduler.AddOnce(() =>
                 {
                     if (value)
                     {
-                        IconContainer.Colour = Color4.White;
+                        IconContainer.Colour = Color4Extensions.FromHex("#00FFAA");
-                        IconContainer.EdgeEffect = new EdgeEffectParameters
-                        {
-                            Type = EdgeEffectType.Glow,
-                            Colour = new Color4(255, 194, 224, 100),
-                            Radius = 15,
-                            Roundness = 15,
-                        };
                     }
                     else
                     {
-                        IconContainer.Colour = new Color4(255, 194, 224, 255);
+                        IconContainer.Colour = colours.GrayF;
                         IconContainer.EdgeEffect = new EdgeEffectParameters();
                     }
-                }
+                });
             }
 
             protected override bool OnClick(ClickEvent e)

osu.Game/Overlays/Toolbar/ToolbarUserButton.cs

@@ -40,7 +40,7 @@ namespace osu.Game.Overlays.Toolbar
         [BackgroundDependencyLoader]
         private void load(OsuColour colours, IAPIProvider api, LoginOverlay? login)
         {
-            Add(new OpaqueBackground { Depth = 1 });
+            BackgroundContent.Add(new OpaqueBackground { Depth = 1 });
 
             Flow.Add(new Container
             {