Add a count of unread notifications to the toolbar

osu.Game.Tests/Visual/TestCaseToolbar.cs

@@ -3,6 +3,7 @@
 
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Overlays.Toolbar;
 
@@ -15,11 +16,24 @@ namespace osu.Game.Tests.Visual
             typeof(ToolbarButton),
             typeof(ToolbarModeSelector),
             typeof(ToolbarModeButton),
+            typeof(ToolbarNotificationButton),
         };
 
         public TestCaseToolbar()
         {
-            Add(new Toolbar { State = Visibility.Visible });
+            var toolbar = new Toolbar { State = Visibility.Visible };
+
+            Add(toolbar);
+
+            var notificationButton = toolbar.Children.OfType<FillFlowContainer>().Last().Children.OfType<ToolbarNotificationButton>().First();
+
+            void setNotifications(int count) => AddStep($"set notification count to {count}", () => notificationButton.NotificationCount.Value = count);
+
+            setNotifications(1);
+            setNotifications(2);
+            setNotifications(3);
+            setNotifications(0);
+            setNotifications(144);
         }
     }
 }

osu.Game/Overlays/Toolbar/ToolbarNotificationButton.cs

@@ -2,8 +2,14 @@
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
 using osu.Framework.Allocation;
+using osu.Framework.Configuration;
 using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using OpenTK;
+using OpenTK.Graphics;
 
 namespace osu.Game.Overlays.Toolbar
 {
@@ -11,17 +17,75 @@ namespace osu.Game.Overlays.Toolbar
     {
         protected override Anchor TooltipAnchor => Anchor.TopRight;
 
+        public BindableInt NotificationCount = new BindableInt();
+
+        private CountCircle countDisplay;
+
         public ToolbarNotificationButton()
         {
             Icon = FontAwesome.fa_bars;
             TooltipMain = "Notifications";
             TooltipSub = "Waiting for 'ya";
+
+            Add(countDisplay = new CountCircle
+            {
+                Alpha = 0,
+                Height = 16,
+                RelativePositionAxes = Axes.Both,
+                Origin = Anchor.TopCentre,
+                Position = new Vector2(0.7f, 0.05f),
+            });
         }
 
         [BackgroundDependencyLoader(true)]
         private void load(NotificationOverlay notificationOverlay)
         {
             StateContainer = notificationOverlay;
+
+            NotificationCount.ValueChanged += count =>
+            {
+                if (count == 0)
+                    countDisplay.FadeOut(200, Easing.OutQuint);
+                else
+                    countDisplay.FadeIn(200, Easing.OutQuint);
+
+                countDisplay.Count = count;
+            };
+        }
+
+        private class CountCircle : CompositeDrawable
+        {
+            private readonly OsuSpriteText count;
+
+            public int Count
+            {
+                set { count.Text = value.ToString("#,0"); }
+            }
+
+            public CountCircle()
+            {
+                AutoSizeAxes = Axes.X;
+
+                InternalChildren = new Drawable[]
+                {
+                    new Circle
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = Color4.Red
+                    },
+                    count = new OsuSpriteText
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Y = -1,
+                        TextSize = 14,
+                        Padding = new MarginPadding(5),
+                        Colour = Color4.White,
+                        UseFullGlyphHeight = true,
+                        Font = "Exo2.0-Bold",
+                    }
+                };
+            }
         }
     }
 }