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

Toolbar design iteration
ppy · Dec 27, 2023 · 62e6871 · 62e6871
2 parents 28f5e90 + 3fd713e
commit 62e6871
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 73 deletions.
diff --git a/osu.Game/Overlays/Toolbar/Toolbar.cs b/osu.Game/Overlays/Toolbar/Toolbar.cs
@@ -224,9 +224,9 @@ public ToolbarBackground()
                         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 @@ protected override void LoadComplete()
             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);
             }
         }
 

diff --git a/osu.Game/Overlays/Toolbar/ToolbarButton.cs b/osu.Game/Overlays/Toolbar/ToolbarButton.cs
@@ -7,7 +7,6 @@
 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 @@ public LocalisableString TooltipSub
         private readonly SpriteText keyBindingTooltip;
         protected FillFlowContainer Flow;
 
+        protected readonly Container BackgroundContent;
+
         [Resolved]
         private RealmAccess realm { get; set; } = null!;
 
@@ -82,21 +83,33 @@ protected ToolbarButton()
             Width = Toolbar.HEIGHT;
             RelativeSizeAxes = Axes.Y;
 
+            Padding = new MarginPadding(3);
+
             Children = new Drawable[]
             {
-                HoverBackground = new Box
+                BackgroundContent = new Container
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = OsuColour.Gray(80).Opacity(180),
-                    Blending = BlendingParameters.Additive,
-                    Alpha = 0,
-                },
-                flashBackground = new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Alpha = 0,
-                    Colour = Color4.White.Opacity(100),
-                    Blending = BlendingParameters.Additive,
+                    Masking = true,
+                    CornerRadius = 6,
+                    CornerExponent = 3f,
+                    Children = new Drawable[]
+                    {
+                        HoverBackground = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Colour = OsuColour.Gray(80).Opacity(180),
+                            Blending = BlendingParameters.Additive,
+                            Alpha = 0,
+                        },
+                        flashBackground = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Alpha = 0,
+                            Colour = Color4.White.Opacity(100),
+                            Blending = BlendingParameters.Additive,
+                        },
+                    }
                 },
                 Flow = new FillFlowContainer
                 {
@@ -219,14 +232,6 @@ public partial class OpaqueBackground : Container
         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[]
             {

diff --git a/osu.Game/Overlays/Toolbar/ToolbarClock.cs b/osu.Game/Overlays/Toolbar/ToolbarClock.cs
@@ -42,21 +42,33 @@ private void load(OsuConfigManager config)
             clockDisplayMode = config.GetBindable<ToolbarClockDisplayMode>(OsuSetting.ToolbarClockDisplayMode);
             prefer24HourTime = config.GetBindable<bool>(OsuSetting.Prefer24HourTime);
 
+            Padding = new MarginPadding(3);
+
             Children = new Drawable[]
             {
-                hoverBackground = new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = OsuColour.Gray(80).Opacity(180),
-                    Blending = BlendingParameters.Additive,
-                    Alpha = 0,
-                },
-                flashBackground = new Box
+                new Container
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Alpha = 0,
-                    Colour = Color4.White.Opacity(100),
-                    Blending = BlendingParameters.Additive,
+                    Masking = true,
+                    CornerRadius = 6,
+                    CornerExponent = 3f,
+                    Children = new Drawable[]
+                    {
+                        hoverBackground = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Colour = OsuColour.Gray(80).Opacity(180),
+                            Blending = BlendingParameters.Additive,
+                            Alpha = 0,
+                        },
+                        flashBackground = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Alpha = 0,
+                            Colour = Color4.White.Opacity(100),
+                            Blending = BlendingParameters.Additive,
+                        },
+                    }
                 },
                 new FillFlowContainer
                 {

diff --git a/osu.Game/Overlays/Toolbar/ToolbarOverlayToggleButton.cs b/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 @@ public OverlayContainer StateContainer
             }
         }
 
-        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,

diff --git a/osu.Game/Overlays/Toolbar/ToolbarRulesetSelector.cs b/osu.Game/Overlays/Toolbar/ToolbarRulesetSelector.cs
@@ -4,20 +4,19 @@
 #nullable disable
 
 using System.Collections.Generic;
+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.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 osu.Game.Rulesets;
+using osuTK;
+using osuTK.Graphics;
 using osuTK.Input;
-using System.Linq;
-using osu.Framework.Allocation;
-using osu.Framework.Audio;
-using osu.Framework.Audio.Sample;
 
 namespace osu.Game.Overlays.Toolbar
 {
@@ -41,25 +40,24 @@ private void load(AudioManager audio)
                 new OpaqueBackground
                 {
                     Depth = 1,
+                    Masking = true,
                 },
                 ModeButtonLine = new Container
                 {
                     Size = new Vector2(Toolbar.HEIGHT, 3),
                     Anchor = Anchor.BottomLeft,
-                    Origin = Anchor.TopLeft,
-                    Masking = true,
-                    EdgeEffect = new EdgeEffectParameters
+                    Origin = Anchor.BottomLeft,
+                    Y = -1,
+                    Children = new Drawable[]
                     {
-                        Type = EdgeEffectType.Glow,
-                        Colour = new Color4(255, 194, 224, 100),
-                        Radius = 15,
-                        Roundness = 15,
-                    },
-                    Child = new Box
-                    {
-                        RelativeSizeAxes = Axes.Both,
+                        new Circle
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Size = new Vector2(18, 3),
+                        }
                     }
-                }
+                },
             });
 
             foreach (var ruleset in Rulesets.AvailableRulesets)
@@ -89,7 +87,7 @@ private void moveLineToCurrent()
         {
             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();

diff --git a/osu.Game/Overlays/Toolbar/ToolbarRulesetTabButton.cs b/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 @@ private partial class RulesetButton : ToolbarButton
         {
             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.EdgeEffect = new EdgeEffectParameters
-                        {
-                            Type = EdgeEffectType.Glow,
-                            Colour = new Color4(255, 194, 224, 100),
-                            Radius = 15,
-                            Roundness = 15,
-                        };
+                        IconContainer.Colour = Color4Extensions.FromHex("#00FFAA");
                     }
                     else
                     {
-                        IconContainer.Colour = new Color4(255, 194, 224, 255);
+                        IconContainer.Colour = colours.GrayF;
                         IconContainer.EdgeEffect = new EdgeEffectParameters();
                     }
-                }
+                });
             }
 
             protected override bool OnClick(ClickEvent e)

diff --git a/osu.Game/Overlays/Toolbar/ToolbarUserButton.cs b/osu.Game/Overlays/Toolbar/ToolbarUserButton.cs
@@ -40,7 +40,7 @@ public ToolbarUserButton()
         [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
             {