Simplify toolbar width/padding calculations. Add avatar display (incorrect user id).

osu-resources

@@ -1 +1 @@
-Subproject commit ab7b953ec9393d8df5aeb23d23e8b1f8154601c1
+Subproject commit 14813bc7b6a570b2d727ee1f4bf4265d150a20fc

osu.Game/Overlays/Toolbar/Toolbar.cs

@@ -18,7 +18,7 @@ using OpenTK.Graphics;
 
 namespace osu.Game.Overlays.Toolbar
 {
-    public class Toolbar : OverlayContainer, IOnlineComponent
+    public class Toolbar : OverlayContainer
     {
         private const float height = 50;
 
@@ -28,7 +28,6 @@ namespace osu.Game.Overlays.Toolbar
         public Action OnMusicController;
 
         private ToolbarModeSelector modeSelector;
-        private ToolbarButton userButton;
         private Box solidBackground;
         private Box gradientBackground;
 
@@ -126,10 +125,7 @@ namespace osu.Game.Overlays.Toolbar
                         {
                             Icon = FontAwesome.fa_search
                         },
-                        userButton = new ToolbarButton
-                        {
-                            Icon = FontAwesome.fa_user,
-                        },
+                        new ToolbarUserButton(),
                         new ToolbarButton
                         {
                             Icon = FontAwesome.fa_bars
@@ -142,25 +138,6 @@ namespace osu.Game.Overlays.Toolbar
             Size = new Vector2(1, height);
         }
 
-        [BackgroundDependencyLoader]
-        private void load(APIAccess api, OsuConfigManager config)
-        {
-            api.Register(this);
-        }
-
         public void SetGameMode(PlayMode mode) => modeSelector.SetGameMode(mode);
-
-        public void APIStateChanged(APIAccess api, APIState state)
-        {
-            switch (state)
-            {
-                default:
-                    userButton.Text = @"Guest";
-                    break;
-                case APIState.Online:
-                    userButton.Text = api.Username;
-                    break;
-            }
-        }
     }
 }

osu.Game/Overlays/Toolbar/ToolbarButton.cs

@@ -15,8 +15,6 @@ namespace osu.Game.Overlays.Toolbar
 {
     public class ToolbarButton : Container
     {
-        public const float WIDTH = 60;
-
         public FontAwesome Icon
         {
             get { return DrawableIcon.Icon; }
@@ -57,6 +55,7 @@ namespace osu.Game.Overlays.Toolbar
         private FlowContainer tooltipContainer;
         private SpriteText tooltip1;
         private SpriteText tooltip2;
+        protected FlowContainer Flow;
 
         public ToolbarButton()
         {
@@ -69,12 +68,13 @@ namespace osu.Game.Overlays.Toolbar
                     Colour = new Color4(60, 60, 60, 255),
                     Alpha = 0,
                 },
-                new FlowContainer
+                Flow = new FlowContainer
                 {
                     Direction = FlowDirection.HorizontalOnly,
                     Anchor = Anchor.TopCentre,
                     Origin = Anchor.TopCentre,
-                    Padding = new MarginPadding { Left = 5, Right = 5 },
+                    Padding = new MarginPadding { Left = 15, Right = 15 },
+                    Spacing = new Vector2(5),
                     RelativeSizeAxes = Axes.Y,
                     AutoSizeAxes = Axes.X,
                     Children = new Drawable[]
@@ -86,7 +86,6 @@ namespace osu.Game.Overlays.Toolbar
                         },
                         DrawableText = new SpriteText
                         {
-                            Margin = new MarginPadding { Left = 5 },
                             Anchor = Anchor.CentreLeft,
                             Origin = Anchor.CentreLeft,
                         },
@@ -117,7 +116,6 @@ namespace osu.Game.Overlays.Toolbar
             };
 
             RelativeSizeAxes = Axes.Y;
-            Size = new Vector2(WIDTH, 1);
         }
 
         protected override void Update()
@@ -125,7 +123,7 @@ namespace osu.Game.Overlays.Toolbar
             base.Update();
 
             //todo: find a way to avoid using this (autosize needs to be able to ignore certain drawables.. in this case the tooltip)
-            Size = new Vector2(WIDTH + (DrawableText.IsVisible ? DrawableText.DrawSize.X : 0), 1);
+            Size = new Vector2(Flow.DrawSize.X, 1);
         }
 
         protected override bool OnMouseDown(InputState state, MouseDownEventArgs args) => true;

osu.Game/Overlays/Toolbar/ToolbarModeSelector.cs

@@ -6,6 +6,7 @@ using System.Linq;
 using osu.Framework.Caching;
 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.Modes;
@@ -42,6 +43,7 @@ namespace osu.Game.Overlays.Toolbar
                     Direction = FlowDirection.HorizontalOnly,
                     Anchor = Anchor.TopCentre,
                     Origin = Anchor.TopCentre,
+                    Padding = new MarginPadding { Left = 10, Right = 10 },
                 },
                 modeButtonLine = new Box
                 {
@@ -69,9 +71,13 @@ namespace osu.Game.Overlays.Toolbar
                     }
                 });
             }
+        }
 
-            // We need to set the size within LoadComplete, because 
-            Size = new Vector2(amountButtons * ToolbarButton.WIDTH + padding * 2, 1);
+        protected override void Update()
+        {
+            base.Update();
+
+            Size = new Vector2(modeButtons.DrawSize.X, 1);
         }
 
         public void SetGameMode(PlayMode mode)

osu.Game/Overlays/Toolbar/ToolbarUserButton.cs

@@ -0,0 +1,138 @@
+//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;
+
+namespace osu.Game.Overlays.Toolbar
+{
+    class ToolbarUserButton : ToolbarButton, IOnlineComponent
+    {
+        private Avatar avatar;
+
+        public ToolbarUserButton()
+        {
+            DrawableText.Font = @"Exo2.0-MediumItalic";
+
+            Flow.Add(avatar = new Avatar());
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(APIAccess api, OsuConfigManager config)
+        {
+            api.Register(this);
+        }
+
+        public void APIStateChanged(APIAccess api, APIState state)
+        {
+            switch (state)
+            {
+                default:
+                    Text = @"Guest";
+                    avatar.UserId = 1;
+                    break;
+                case APIState.Online:
+                    Text = api.Username;
+                    avatar.UserId = 2;
+                    break;
+            }
+        }
+
+        public class Avatar : Container
+        {
+            public Drawable Sprite;
+
+            private int userId;
+            private OsuGame game;
+            private Texture guestTexture;
+
+            public Avatar()
+            {
+                Size = new Vector2(32);
+                Anchor = Anchor.CentreLeft;
+                Origin = Anchor.CentreLeft;
+
+                CornerRadius = Size.X / 8;
+
+                EdgeEffect = new EdgeEffect
+                {
+                    Type = EdgeEffectType.Shadow,
+                    Radius = 4,
+                    Colour = new Color4(0, 0, 0, 25),
+                };
+
+                Masking = true;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuGame game, TextureStore textures)
+            {
+                this.game = game;
+
+                guestTexture = textures.Get(@"Online/avatar-guest@2x");
+            }
+
+            public int UserId
+            {
+                get { return userId; }
+                set
+                {
+                    if (userId == value)
+                        return;
+
+                    userId = value;
+
+                    Sprite newSprite;
+                    if (userId > 1)
+                        newSprite = new OnlineSprite($@"https://a.ppy.sh/{userId}");
+                    else
+                        newSprite = new Sprite { Texture = guestTexture };
+
+                    newSprite.FillMode = FillMode.Fit;
+
+                    newSprite.Preload(game, s =>
+                    {
+                        Sprite?.FadeOut();
+                        Sprite?.Expire();
+                        Sprite = s;
+
+                        Add(s);
+
+                        s.FadeInFromZero(200);
+                    });
+                }
+            }
+
+            public class OnlineSprite : Sprite
+            {
+                private readonly string url;
+                private readonly int userId;
+
+                public OnlineSprite(string url)
+                {
+                    Debug.Assert(url != null);
+                    this.url = url;
+                }
+
+                [BackgroundDependencyLoader]
+                private void load(TextureStore textures)
+                {
+                    Texture = textures.Get(url);
+                }
+            }
+        }
+    }
+}

osu.Game/osu.Game.csproj

@@ -90,6 +90,7 @@
     <Compile Include="Beatmaps\Timing\SampleChange.cs" />
     <Compile Include="Beatmaps\Timing\TimingChange.cs" />
     <Compile Include="Configuration\OsuConfigManager.cs" />
+    <Compile Include="Overlays\Toolbar\ToolbarUserButton.cs" />
     <Compile Include="Screens\BackgroundMode.cs" />
     <Compile Include="Screens\Backgrounds\BackgroundModeBeatmap.cs" />
     <Compile Include="Screens\Backgrounds\BackgroundModeCustom.cs" />