Merge pull request #209 from peppy/general-fixes

Toolbar and main menu button improvements.

osu-framework

@@ -1 +1 @@
-Subproject commit 4fd477755a640a497c04fc8e540e8641278aa056
+Subproject commit 976d7833e85ff880e9b00e8c121747f59becb2d8

osu.Desktop.VisualTests/Tests/TestCaseMenuButtonSystem.cs

@@ -2,7 +2,10 @@
 //Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
 using osu.Framework.GameModes.Testing;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Sprites;
 using osu.Game.Screens.Menu;
+using OpenTK.Graphics;
 
 namespace osu.Desktop.VisualTests.Tests
 {
@@ -15,6 +18,11 @@ namespace osu.Desktop.VisualTests.Tests
         {
             base.Reset();
 
+            Add(new Box
+            {
+                ColourInfo = ColourInfo.GradientVertical(Color4.Gray, Color4.WhiteSmoke),
+                RelativeSizeAxes = Framework.Graphics.Axes.Both,
+            });
             Add(new ButtonSystem());
         }
     }

osu.Game/OsuGame.cs

@@ -19,6 +19,7 @@ using osu.Framework.Logging;
 using osu.Game.Graphics.UserInterface.Volume;
 using osu.Game.Database;
 using osu.Framework.Allocation;
+using osu.Framework.Graphics.Transformations;
 using osu.Game.Modes;
 using osu.Game.Screens;
 using osu.Game.Screens.Menu;
@@ -132,6 +133,19 @@ namespace osu.Game
                 overlayContent.Add(Toolbar);
             });
 
+            Options.StateChanged += delegate
+            {
+                switch (Options.State)
+                {
+                    case Visibility.Hidden:
+                        intro.MoveToX(0, OptionsOverlay.TRANSITION_LENGTH, EasingTypes.OutQuint);
+                        break;
+                    case Visibility.Visible:
+                        intro.MoveToX(OptionsOverlay.SIDEBAR_WIDTH / 2, OptionsOverlay.TRANSITION_LENGTH, EasingTypes.OutQuint);
+                        break;
+                }
+            };
+
             Cursor.Alpha = 0;
         }
 

osu.Game/Overlays/OptionsOverlay.cs

@@ -30,8 +30,12 @@ namespace osu.Game.Overlays
     {
         internal const float CONTENT_MARGINS = 10;
 
+        public const float TRANSITION_LENGTH = 600;
+
+        public const float SIDEBAR_WIDTH = OptionsSidebar.default_width;
+
         private const float width = 400;
-        private const float sidebar_width = OptionsSidebar.default_width;
+        
         private const float sidebar_padding = 10;
 
         private ScrollContainer scrollContainer;
@@ -71,7 +75,7 @@ namespace osu.Game.Overlays
                     ScrollDraggerVisible = false,
                     RelativeSizeAxes = Axes.Y,
                     Width = width,
-                    Margin = new MarginPadding { Left = sidebar_width },
+                    Margin = new MarginPadding { Left = SIDEBAR_WIDTH },
                     Children = new[]
                     {
                         new FlowContainer
@@ -108,7 +112,7 @@ namespace osu.Game.Overlays
                 },
                 sidebar = new OptionsSidebar
                 {
-                    Width = sidebar_width,
+                    Width = SIDEBAR_WIDTH,
                     Children = sidebarButtons = sections.Select(section =>
                         new SidebarButton
                         {
@@ -175,16 +179,16 @@ namespace osu.Game.Overlays
 
         protected override void PopIn()
         {
-            scrollContainer.MoveToX(0, 600, EasingTypes.OutQuint);
+            scrollContainer.MoveToX(0, TRANSITION_LENGTH, EasingTypes.OutQuint);
-            sidebar.MoveToX(0, 800, EasingTypes.OutQuint);
+            sidebar.MoveToX(0, TRANSITION_LENGTH, EasingTypes.OutQuint);
-            FadeTo(1, 300);
+            FadeTo(1, TRANSITION_LENGTH / 2);
         }
 
         protected override void PopOut()
         {
-            scrollContainer.MoveToX(-width, 600, EasingTypes.OutQuint);
+            scrollContainer.MoveToX(-width, TRANSITION_LENGTH, EasingTypes.OutQuint);
-            sidebar.MoveToX(-sidebar_width, 600, EasingTypes.OutQuint);
+            sidebar.MoveToX(-SIDEBAR_WIDTH, TRANSITION_LENGTH, EasingTypes.OutQuint);
-            FadeTo(0, 300);
+            FadeTo(0, TRANSITION_LENGTH / 2);
         }
     }
 }

osu.Game/Overlays/Toolbar.cs

@@ -30,9 +30,14 @@ namespace osu.Game.Overlays
 
         private ToolbarModeSelector modeSelector;
         private ToolbarButton userButton;
+        private Box solidBackground;
         private Box gradientBackground;
 
-        private const int transition_time = 200;
+        private const int transition_time = 250;
+
+        private const float alpha_hovering = 0.8f;
+        private const float alpha_normal = 0.6f;
+
 
         protected override void PopIn()
         {
@@ -48,23 +53,26 @@ namespace osu.Game.Overlays
 
         protected override bool OnHover(InputState state)
         {
-            gradientBackground.FadeIn(200);
+            solidBackground.FadeTo(alpha_hovering, transition_time, EasingTypes.OutQuint);
+            gradientBackground.FadeIn(transition_time, EasingTypes.OutQuint);
             return true;
         }
 
         protected override void OnHoverLost(InputState state)
         {
-            gradientBackground.FadeOut(200);
+            solidBackground.FadeTo(alpha_normal, transition_time, EasingTypes.OutQuint);
+            gradientBackground.FadeOut(transition_time, EasingTypes.OutQuint);
         }
 
         public Toolbar()
         {
             Children = new Drawable[]
             {
-                new Box
+                solidBackground = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = new Color4(0.1f, 0.1f, 0.1f, 0.6f)
+                    Colour = new Color4(0.1f, 0.1f, 0.1f, 1),
+                    Alpha = alpha_normal,
                 },
                 gradientBackground = new Box
                 {

osu.Game/Screens/Menu/Button.cs

@@ -19,7 +19,7 @@ namespace osu.Game.Screens.Menu
     public class Button : Container, IStateful<ButtonState>
     {
         private Container iconText;
-        private Box box;
+        private Container box;
         private Color4 colour;
         private TextAwesome icon;
         private string internalName;
@@ -51,15 +51,31 @@ namespace osu.Game.Screens.Menu
 
             Children = new Drawable[]
             {
-                box = new Box
+                box = new Container
                 {
+                    Masking = true,
+                    EdgeEffect = new EdgeEffect
+                    {
+                        Type = EdgeEffectType.Shadow,
+                        Colour = new Color4(0, 0, 0, 0.2f),
+                        Roundness = 5,
+                        Radius = 8,
+                    },
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
                     Colour = colour,
                     Scale = new Vector2(0, 1),
                     Size = boxSize,
                     Shear = new Vector2(ButtonSystem.wedge_width / boxSize.Y, 0),
-                    EdgeSmoothness = new Vector2(2, 0),
+
+                    Children = new Drawable[]
+                    {
+                        new Box
+                        {
+                            EdgeSmoothness = new Vector2(2, 0),
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                    }
                 },
                 iconText = new Container
                 {
@@ -71,6 +87,7 @@ namespace osu.Game.Screens.Menu
                     {
                         icon = new TextAwesome
                         {
+                            Shadow = true,
                             Anchor = Anchor.Centre,
                             TextSize = 30,
                             Position = new Vector2(0, 0),
@@ -78,6 +95,7 @@ namespace osu.Game.Screens.Menu
                         },
                         new SpriteText
                         {
+                            Shadow = true,
                             Direction = FlowDirection.HorizontalOnly,
                             Anchor = Anchor.Centre,
                             Origin = Anchor.Centre,

osu.Game/Screens/Menu/FlowContainerWithOrigin.cs

@@ -1,6 +1,8 @@
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using OpenTK;
+using System.Collections.Generic;
+using System.Linq;
 
 namespace osu.Game.Screens.Menu
 {
@@ -15,6 +17,10 @@ namespace osu.Game.Screens.Menu
         /// </summary>
         public Drawable CentreTarget;
 
+        protected override IComparer<Drawable> DepthComparer => new ReverseCreationOrderDepthComparer();
+
+        protected override IEnumerable<Drawable> SortedChildren => base.SortedChildren.Reverse();
+
         public override Anchor Origin => Anchor.Custom;
 
         public override Vector2 OriginPosition