Merge pull request #302 from peppy/login-updates

Move login screen to toolbar and update design (still not fully implemented).

osu.Game/OsuGame.cs

@@ -21,6 +21,7 @@ using osu.Game.Modes;
 using osu.Game.Overlays.Toolbar;
 using osu.Game.Screens;
 using osu.Game.Screens.Menu;
+using OpenTK;
 
 namespace osu.Game
 {
@@ -101,14 +102,20 @@ namespace osu.Game
             //overlay elements
             (chat = new ChatOverlay { Depth = 0 }).Preload(this, overlayContent.Add);
             (options = new OptionsOverlay { Depth = -1 }).Preload(this, overlayContent.Add);
-            (musicController = new MusicController() { Depth = -3 }).Preload(this, overlayContent.Add);
+            (musicController = new MusicController()
+            {
+                Depth = -2,
+                Position = new Vector2(0, Toolbar.HEIGHT),
+                Anchor = Anchor.TopRight,
+                Origin = Anchor.TopRight,
+            }).Preload(this, overlayContent.Add);
 
             Dependencies.Cache(options);
             Dependencies.Cache(musicController);
 
             (Toolbar = new Toolbar
             {
-                Depth = -2,
+                Depth = -3,
                 OnHome = delegate { mainMenu?.MakeCurrent(); },
                 OnPlayModeChange = delegate (PlayMode m) { PlayMode.Value = m; },
             }).Preload(this, t =>

osu.Game/Overlays/LoginOverlay.cs

@@ -0,0 +1,77 @@
+//Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
+//Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Primitives;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Transformations;
+using osu.Game.Graphics;
+using osu.Game.Overlays.Options.General;
+using OpenTK;
+using OpenTK.Graphics;
+
+namespace osu.Game.Overlays
+{
+    class LoginOverlay : OverlayContainer
+    {
+        private LoginOptions optionsSection;
+
+        const float transition_time = 400;
+
+        public LoginOverlay()
+        {
+            AutoSizeAxes = Axes.Both;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            Children = new Drawable[]
+            {
+                new Box {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = Color4.Black,
+                    Alpha = 0.8f,
+                },
+                new Container
+                {
+                    Width = 360,
+                    AutoSizeAxes = Axes.Y,
+                    Masking = true,
+                    AutoSizeDuration = transition_time,
+                    AutoSizeEasing = EasingTypes.OutQuint,
+                    Children = new Drawable[]
+                    {
+                        optionsSection = new LoginOptions
+                        {
+                            Padding = new MarginPadding(10),
+                        },
+                        new Box
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            Anchor = Anchor.BottomLeft,
+                            Origin = Anchor.BottomLeft,
+                            Height = 3,
+                            Colour = colours.Yellow,
+                            Alpha = 1,
+                        },
+                    }
+                }
+            };
+        }
+
+        protected override void PopIn()
+        {
+            optionsSection.Bounding = true;
+            FadeIn(transition_time, EasingTypes.OutQuint);
+        }
+
+        protected override void PopOut()
+        {
+            optionsSection.Bounding = false;
+            FadeOut(transition_time);
+        }
+    }
+}

osu.Game/Overlays/MusicController.cs

@@ -28,8 +28,6 @@ namespace osu.Game.Overlays
 {
     public class MusicController : OverlayContainer
     {
-        private static readonly Vector2 start_position = new Vector2(0, 50);
-
         private MusicControllerBackground backgroundSprite;
         private DragBar progress;
         private TextAwesome playButton, listButton;
@@ -47,22 +45,13 @@ namespace osu.Game.Overlays
         private BeatmapDatabase beatmaps;
         private BaseGame game;
 
+        private Container dragContainer;
+
         public MusicController()
         {
             Width = 400;
             Height = 130;
-            CornerRadius = 5;
-            EdgeEffect = new EdgeEffect
-            {
-                Type = EdgeEffectType.Shadow,
-                Colour = Color4.Black.Opacity(40),
-                Radius = 5,
-            };
 
-            Masking = true;
-            Anchor = Anchor.TopRight;//placeholder
-            Origin = Anchor.TopRight;
-            Position = start_position;
             Margin = new MarginPadding(10);
         }
 
@@ -75,13 +64,13 @@ namespace osu.Game.Overlays
             // Diminish the drag distance as we go further to simulate "rubber band" feeling.
             change *= (float)Math.Pow(change.Length, 0.7f) / change.Length;
 
-            MoveTo(start_position + change);
+            dragContainer.MoveTo(change);
             return base.OnDrag(state);
         }
 
         protected override bool OnDragEnd(InputState state)
         {
-            MoveTo(start_position, 800, EasingTypes.OutElastic);
+            dragContainer.MoveTo(Vector2.Zero, 800, EasingTypes.OutElastic);
             return base.OnDragEnd(state);
         }
 
@@ -93,111 +82,126 @@ namespace osu.Game.Overlays
 
             Children = new Drawable[]
             {
-                title = new SpriteText
+                dragContainer = new Container
                 {
-                    Origin = Anchor.BottomCentre,
+                    Masking = true,
-                    Anchor = Anchor.TopCentre,
+                    CornerRadius = 5,
-                    Position = new Vector2(0, 40),
+                    EdgeEffect = new EdgeEffect
-                    TextSize = 25,
-                    Colour = Color4.White,
-                    Text = @"Nothing to play",
-                    Font = @"Exo2.0-MediumItalic"
-                },
-                artist = new SpriteText
-                {
-                    Origin = Anchor.TopCentre,
-                    Anchor = Anchor.TopCentre,
-                    Position = new Vector2(0, 45),
-                    TextSize = 15,
-                    Colour = Color4.White,
-                    Text = @"Nothing to play",
-                    Font = @"Exo2.0-BoldItalic"
-                },
-                new ClickableContainer
-                {
-                    AutoSizeAxes = Axes.Both,
-                    Origin = Anchor.Centre,
-                    Anchor = Anchor.BottomCentre,
-                    Position = new Vector2(0, -30),
-                    Action = () =>
                     {
-                        if (current?.Track == null) return;
+                        Type = EdgeEffectType.Shadow,
-                        if (current.Track.IsRunning)
+                        Colour = Color4.Black.Opacity(40),
-                            current.Track.Stop();
+                        Radius = 5,
-                        else
-                            current.Track.Start();
                     },
+                    RelativeSizeAxes = Axes.Both,
                     Children = new Drawable[]
                     {
-                        playButton = new TextAwesome
+                        title = new SpriteText
                         {
-                            TextSize = 30,
+                            Origin = Anchor.BottomCentre,
-                            Icon = FontAwesome.fa_play_circle_o,
+                            Anchor = Anchor.TopCentre,
-                            Origin = Anchor.Centre,
+                            Position = new Vector2(0, 40),
-                            Anchor = Anchor.Centre
+                            TextSize = 25,
-                        }
+                            Colour = Color4.White,
-                    }
+                            Text = @"Nothing to play",
-                },
+                            Font = @"Exo2.0-MediumItalic"
-                new ClickableContainer
+                        },
-                {
+                        artist = new SpriteText
-                    AutoSizeAxes = Axes.Both,
-                    Origin = Anchor.Centre,
-                    Anchor = Anchor.BottomCentre,
-                    Position = new Vector2(-30, -30),
-                    Action = prev,
-                    Children = new Drawable[]
-                    {
-                        new TextAwesome
                         {
+                            Origin = Anchor.TopCentre,
+                            Anchor = Anchor.TopCentre,
+                            Position = new Vector2(0, 45),
                             TextSize = 15,
-                            Icon = FontAwesome.fa_step_backward,
+                            Colour = Color4.White,
-                            Origin = Anchor.Centre,
+                            Text = @"Nothing to play",
-                            Anchor = Anchor.Centre
+                            Font = @"Exo2.0-BoldItalic"
-                        }
+                        },
-                    }
+                        new ClickableContainer
-                },
-                new ClickableContainer
-                {
-                    AutoSizeAxes = Axes.Both,
-                    Origin = Anchor.Centre,
-                    Anchor = Anchor.BottomCentre,
-                    Position = new Vector2(30, -30),
-                    Action = next,
-                    Children = new Drawable[]
-                    {
-                        new TextAwesome
                         {
-                            TextSize = 15,
+                            AutoSizeAxes = Axes.Both,
-                            Icon = FontAwesome.fa_step_forward,
                             Origin = Anchor.Centre,
-                            Anchor = Anchor.Centre
+                            Anchor = Anchor.BottomCentre,
-                        }
+                            Position = new Vector2(0, -30),
-                    }
+                            Action = () =>
-                },
+                            {
-                new ClickableContainer
+                                if (current?.Track == null) return;
-                {
+                                if (current.Track.IsRunning)
-                    AutoSizeAxes = Axes.Both,
+                                    current.Track.Stop();
-                    Origin = Anchor.Centre,
+                                else
-                    Anchor = Anchor.BottomRight,
+                                    current.Track.Start();
-                    Position = new Vector2(20, -30),
+                            },
-                    Children = new Drawable[]
+                            Children = new Drawable[]
-                    {
+                            {
-                        listButton = new TextAwesome
+                                playButton = new TextAwesome
+                                {
+                                    TextSize = 30,
+                                    Icon = FontAwesome.fa_play_circle_o,
+                                    Origin = Anchor.Centre,
+                                    Anchor = Anchor.Centre
+                                }
+                            }
+                        },
+                        new ClickableContainer
                         {
-                            TextSize = 15,
+                            AutoSizeAxes = Axes.Both,
-                            Icon = FontAwesome.fa_bars,
                             Origin = Anchor.Centre,
-                            Anchor = Anchor.Centre
+                            Anchor = Anchor.BottomCentre,
+                            Position = new Vector2(-30, -30),
+                            Action = prev,
+                            Children = new Drawable[]
+                            {
+                                new TextAwesome
+                                {
+                                    TextSize = 15,
+                                    Icon = FontAwesome.fa_step_backward,
+                                    Origin = Anchor.Centre,
+                                    Anchor = Anchor.Centre
+                                }
+                            }
+                        },
+                        new ClickableContainer
+                        {
+                            AutoSizeAxes = Axes.Both,
+                            Origin = Anchor.Centre,
+                            Anchor = Anchor.BottomCentre,
+                            Position = new Vector2(30, -30),
+                            Action = next,
+                            Children = new Drawable[]
+                            {
+                                new TextAwesome
+                                {
+                                    TextSize = 15,
+                                    Icon = FontAwesome.fa_step_forward,
+                                    Origin = Anchor.Centre,
+                                    Anchor = Anchor.Centre
+                                }
+                            }
+                        },
+                        new ClickableContainer
+                        {
+                            AutoSizeAxes = Axes.Both,
+                            Origin = Anchor.Centre,
+                            Anchor = Anchor.BottomRight,
+                            Position = new Vector2(20, -30),
+                            Children = new Drawable[]
+                            {
+                                listButton = new TextAwesome
+                                {
+                                    TextSize = 15,
+                                    Icon = FontAwesome.fa_bars,
+                                    Origin = Anchor.Centre,
+                                    Anchor = Anchor.Centre
+                                }
+                            }
+                        },
+                        progress = new DragBar
+                        {
+                            Origin = Anchor.BottomCentre,
+                            Anchor = Anchor.BottomCentre,
+                            Height = 10,
+                            Colour = colours.Yellow,
+                            SeekRequested = seek
                         }
                     }
-                },
-                progress = new DragBar
-                {
-                    Origin = Anchor.BottomCentre,
-                    Anchor = Anchor.BottomCentre,
-                    Height = 10,
-                    Colour = colours.Yellow,
-                    SeekRequested = seek
                 }
             };
         
@@ -210,7 +214,7 @@ namespace osu.Game.Overlays
             playList = beatmaps.GetAllWithChildren<BeatmapSetInfo>();
 
             backgroundSprite = new MusicControllerBackground();
-            AddInternal(backgroundSprite);
+            dragContainer.Add(backgroundSprite);
         }
 
         protected override void LoadComplete()
@@ -333,7 +337,7 @@ namespace osu.Game.Overlays
             (newBackground = new MusicControllerBackground(beatmap)).Preload(game, delegate
             {
 
-                Add(newBackground);
+                dragContainer.Add(newBackground);
 
                 switch (direction)
                 {

osu.Game/Overlays/Options/General/GeneralSection.cs

@@ -15,7 +15,6 @@ namespace osu.Game.Overlays.Options.General
         {
             Children = new Drawable[]
             {
-                new LoginOptions(),
                 new LanguageOptions(),
                 new UpdateOptions(),
             };

osu.Game/Overlays/Options/General/LoginOptions.cs

@@ -12,13 +12,28 @@ using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Online.API;
 using osu.Game.Configuration;
+using osu.Framework.Graphics.Primitives;
 
 namespace osu.Game.Overlays.Options.General
 {
     public class LoginOptions : OptionsSubsection, IOnlineComponent
     {
+        private bool bounding = true;
+
         protected override string Header => "Sign In";
 
+        public override RectangleF BoundingBox => bounding ? base.BoundingBox : RectangleF.Empty;
+
+        public bool Bounding
+        {
+            get { return bounding; }
+            set
+            {
+                bounding = value;
+                Invalidate(Invalidation.Geometry);
+            }
+        }
+
         [BackgroundDependencyLoader(permitNulls: true)]
         private void load(APIAccess api)
         {
@@ -109,24 +124,24 @@ namespace osu.Game.Overlays.Options.General
                     },
                     saveUsername = new CheckBoxOption
                     {
-                        LabelText = "Remember Username",
+                        LabelText = "Remember username",
                         Bindable = config.GetBindable<bool>(OsuConfig.SaveUsername),
                     },
                     savePassword = new CheckBoxOption
                     {
-                        LabelText = "Remember Password",
+                        LabelText = "Stay logged in",
                         Bindable = config.GetBindable<bool>(OsuConfig.SavePassword),
                     },
                     new OsuButton
                     {
                         RelativeSizeAxes = Axes.X,
-                        Text = "Log in",
+                        Text = "Sign in",
                         Action = performLogin
                     },
                     new OsuButton
                     {
                         RelativeSizeAxes = Axes.X,
-                        Text = "Register",
+                        Text = "Register new account",
                         //Action = registerLink
                     }
                 };

osu.Game/Overlays/Toolbar/Toolbar.cs

@@ -19,65 +19,25 @@ namespace osu.Game.Overlays.Toolbar
 {
     public class Toolbar : OverlayContainer
     {
-        private const float height = 50;
+        public const float HEIGHT = 50;
 
         public Action OnHome;
         public Action<PlayMode> OnPlayModeChange;
 
         private ToolbarModeSelector modeSelector;
-        private Box solidBackground;
-        private Box gradientBackground;
 
         private const int transition_time = 250;
 
         private const float alpha_hovering = 0.8f;
         private const float alpha_normal = 0.6f;
 
-
+        public override bool Contains(Vector2 screenSpacePos) => true;
-        protected override void PopIn()
-        {
-            MoveToY(0, transition_time, EasingTypes.OutQuint);
-            FadeIn(transition_time, EasingTypes.OutQuint);
-        }
-
-        protected override void PopOut()
-        {
-            MoveToY(-DrawSize.Y, transition_time, EasingTypes.InQuint);
-            FadeOut(transition_time, EasingTypes.InQuint);
-        }
-
-        protected override bool OnHover(InputState state)
-        {
-            solidBackground.FadeTo(alpha_hovering, transition_time, EasingTypes.OutQuint);
-            gradientBackground.FadeIn(transition_time, EasingTypes.OutQuint);
-            return true;
-        }
-
-        protected override void OnHoverLost(InputState state)
-        {
-            solidBackground.FadeTo(alpha_normal, transition_time, EasingTypes.OutQuint);
-            gradientBackground.FadeOut(transition_time, EasingTypes.OutQuint);
-        }
 
         public Toolbar()
         {
             Children = new Drawable[]
             {
-                solidBackground = new Box
+                new ToolbarBackground(),
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = OsuColour.Gray(0.1f),
-                    Alpha = alpha_normal,
-                },
-                gradientBackground = new Box
-                {
-                    RelativeSizeAxes = Axes.X,
-                    Anchor = Anchor.BottomLeft,
-                    Alpha = 0,
-                    Height = 90,
-                    ColourInfo = ColourInfo.GradientVertical(
-                        OsuColour.Gray(0.1f).Opacity(0.5f), OsuColour.Gray(0.1f).Opacity(0)),
-                },
                 new FlowContainer
                 {
                     Direction = FlowDirection.HorizontalOnly,
@@ -96,21 +56,21 @@ namespace osu.Game.Overlays.Toolbar
                         }
                     }
                 },
-                new FlowContainer
+                new PassThroughFlowContainer
                 {
                     Anchor = Anchor.TopRight,
                     Origin = Anchor.TopRight,
                     Direction = FlowDirection.HorizontalOnly,
                     RelativeSizeAxes = Axes.Y,
                     AutoSizeAxes = Axes.X,
-                    Children = new []
+                    Children = new Drawable[]
                     {
                         new ToolbarMusicButton(),
                         new ToolbarButton
                         {
                             Icon = FontAwesome.fa_search
                         },
-                        new ToolbarUserButton(),
+                        new ToolbarUserArea(),
                         new ToolbarButton
                         {
                             Icon = FontAwesome.fa_bars
@@ -120,9 +80,69 @@ namespace osu.Game.Overlays.Toolbar
             };
 
             RelativeSizeAxes = Axes.X;
-            Size = new Vector2(1, height);
+            Size = new Vector2(1, HEIGHT);
+        }
+
+        public class ToolbarBackground : Container
+        {
+            private Box solidBackground;
+            private Box gradientBackground;
+
+            public ToolbarBackground()
+            {
+                RelativeSizeAxes = Axes.Both;
+                Children = new Drawable[]
+                {
+                    solidBackground = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = OsuColour.Gray(0.1f),
+                        Alpha = alpha_normal,
+                    },
+                    gradientBackground = new Box
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        Anchor = Anchor.BottomLeft,
+                        Alpha = 0,
+                        Height = 90,
+                        ColourInfo = ColourInfo.GradientVertical(
+                            OsuColour.Gray(0.1f).Opacity(0.5f), OsuColour.Gray(0.1f).Opacity(0)),
+                    },
+                };
+            }
+
+            protected override bool OnHover(InputState state)
+            {
+                solidBackground.FadeTo(alpha_hovering, transition_time, EasingTypes.OutQuint);
+                gradientBackground.FadeIn(transition_time, EasingTypes.OutQuint);
+                return true;
+            }
+
+            protected override void OnHoverLost(InputState state)
+            {
+                solidBackground.FadeTo(alpha_normal, transition_time, EasingTypes.OutQuint);
+                gradientBackground.FadeOut(transition_time, EasingTypes.OutQuint);
+            }
         }
 
         public void SetGameMode(PlayMode mode) => modeSelector.SetGameMode(mode);
+
+        protected override void PopIn()
+        {
+            MoveToY(0, transition_time, EasingTypes.OutQuint);
+            FadeIn(transition_time, EasingTypes.OutQuint);
+        }
+
+        protected override void PopOut()
+        {
+            MoveToY(-DrawSize.Y, transition_time, EasingTypes.InQuint);
+            FadeOut(transition_time, EasingTypes.InQuint);
+        }
+
+        class PassThroughFlowContainer : FlowContainer
+        {
+            //needed to get input to the login overlay.
+            public override bool Contains(Vector2 screenSpacePos) => true;
+        }
     }
 }

osu.Game/Overlays/Toolbar/ToolbarButton.cs

@@ -122,6 +122,7 @@ namespace osu.Game.Overlays.Toolbar
             };
 
             RelativeSizeAxes = Axes.Y;
+            AutoSizeAxes = Axes.X;
         }
 
         [BackgroundDependencyLoader]
@@ -168,6 +169,12 @@ namespace osu.Game.Overlays.Toolbar
         {
             RelativeSizeAxes = Axes.Both;
             Masking = true;
+            EdgeEffect = new EdgeEffect
+            {
+                Type = EdgeEffectType.Shadow,
+                Colour = Color4.Black.Opacity(40),
+                Radius = 5,
+            };
 
             Children = new Drawable[]
             {

osu.Game/Overlays/Toolbar/ToolbarUserArea.cs

@@ -0,0 +1,46 @@
+//Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
+//Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Primitives;
+using OpenTK;
+
+namespace osu.Game.Overlays.Toolbar
+{
+    class ToolbarUserArea : Container
+    {
+        private LoginOverlay loginOverlay;
+        private ToolbarUserButton button;
+
+        public override RectangleF BoundingBox => button.BoundingBox;
+
+        public override bool Contains(Vector2 screenSpacePos) => true;
+
+        public override Vector2 Size => button.Size;
+
+        public ToolbarUserArea()
+        {
+            RelativeSizeAxes = Axes.Y;
+
+            Children = new Drawable[] {
+                button = new ToolbarUserButton
+                {
+                    Action = toggle,
+                },
+                loginOverlay = new LoginOverlay
+                {
+                    Position = new Vector2(0, 1),
+                    RelativePositionAxes = Axes.Y,
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                }
+            };
+        }
+
+        private void toggle()
+        {
+            loginOverlay.ToggleVisibility();
+        }
+    }
+}

osu.Game/Overlays/Toolbar/ToolbarUserButton.cs

@@ -1,18 +1,12 @@
 //Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
 //Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
-using System;
-using System.Collections.Generic;
 using System.Diagnostics;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.Textures;
-using osu.Game.Configuration;
 using osu.Game.Online.API;
 using OpenTK;
 using OpenTK.Graphics;
@@ -34,7 +28,7 @@ namespace osu.Game.Overlays.Toolbar
         }
 
         [BackgroundDependencyLoader]
-        private void load(APIAccess api, OsuConfigManager config)
+        private void load(APIAccess api)
         {
             api.Register(this);
         }

osu.Game/osu.Game.csproj

@@ -76,6 +76,7 @@
     <Compile Include="Online\API\IOnlineComponent.cs" />
     <Compile Include="Online\API\Requests\GetUserRequest.cs" />
     <Compile Include="Overlays\DragBar.cs" />
+    <Compile Include="Overlays\LoginOverlay.cs" />
     <Compile Include="Overlays\MusicController.cs" />
     <Compile Include="Beatmaps\Beatmap.cs" />
     <Compile Include="Beatmaps\Formats\ConstructableBeatmapDecoder.cs" />
@@ -99,6 +100,7 @@
     <Compile Include="Overlays\Toolbar\ToolbarMusicButton.cs" />
     <Compile Include="Overlays\Toolbar\ToolbarSettingsButton.cs" />
     <Compile Include="Overlays\Toolbar\ToolbarOverlayToggleButton.cs" />
+    <Compile Include="Overlays\Toolbar\ToolbarUserArea.cs" />
     <Compile Include="Overlays\Toolbar\ToolbarUserButton.cs" />
     <Compile Include="Screens\BackgroundMode.cs" />
     <Compile Include="Screens\Backgrounds\BackgroundModeBeatmap.cs" />