Merge pull request #20030 from peppy/notification-design-update

Update notification overlay design

osu.Desktop/Security/ElevatedPrivilegesChecker.cs

@@ -76,7 +76,7 @@ namespace osu.Desktop.Security
             private void load(OsuColour colours)
             {
                 Icon = FontAwesome.Solid.ShieldAlt;
-                IconBackground.Colour = colours.YellowDark;
+                IconContent.Colour = colours.YellowDark;
             }
         }
     }

osu.Game/Database/TooManyDownloadsNotification.cs

@@ -20,7 +20,7 @@ namespace osu.Game.Database
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            IconBackground.Colour = colours.RedDark;
+            IconContent.Colour = colours.RedDark;
         }
     }
 }

osu.Game/Online/Chat/MessageNotifier.cs

@@ -174,7 +174,7 @@ namespace osu.Game.Online.Chat
             [BackgroundDependencyLoader]
             private void load(OsuColour colours, ChatOverlay chatOverlay, INotificationOverlay notificationOverlay)
             {
-                IconBackground.Colour = colours.PurpleDark;
+                IconContent.Colour = colours.PurpleDark;
 
                 Activated = delegate
                 {

osu.Game/Overlays/NotificationOverlay.cs

@@ -12,7 +12,6 @@ using osu.Framework.Graphics.Shapes;
 using osu.Framework.Localisation;
 using osu.Framework.Logging;
 using osu.Framework.Threading;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Overlays.Notifications;
 using osu.Game.Resources.Localisation.Web;
@@ -35,6 +34,9 @@ namespace osu.Game.Overlays
         [Resolved]
         private AudioManager audio { get; set; } = null!;
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
+
         private readonly IBindable<Visibility> firstRunSetupVisibility = new Bindable<Visibility>();
 
         [BackgroundDependencyLoader]
@@ -49,7 +51,7 @@ namespace osu.Game.Overlays
                 new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = OsuColour.Gray(0.05f),
+                    Colour = colourProvider.Background4,
                 },
                 new OsuScrollContainer
                 {

osu.Game/Overlays/Notifications/Notification.cs

@@ -46,22 +46,30 @@ namespace osu.Game.Overlays.Notifications
         public virtual string PopInSampleName => "UI/notification-pop-in";
 
         protected NotificationLight Light;
-        private readonly CloseButton closeButton;
+
         protected Container IconContent;
+
         private readonly Container content;
 
         protected override Container<Drawable> Content => content;
 
-        protected Container NotificationContent;
+        protected Container MainContent;
 
         public virtual bool Read { get; set; }
 
+        protected virtual IconUsage CloseButtonIcon => FontAwesome.Solid.Check;
+
+        [Resolved]
+        private OverlayColourProvider colourProvider { get; set; } = null!;
+
+        private Box background = null!;
+
         protected Notification()
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
 
-            AddRangeInternal(new Drawable[]
+            InternalChildren = new Drawable[]
             {
                 Light = new NotificationLight
                 {
@@ -69,9 +77,9 @@ namespace osu.Game.Overlays.Notifications
                     Anchor = Anchor.CentreLeft,
                     Origin = Anchor.CentreRight,
                 },
-                NotificationContent = new Container
+                MainContent = new Container
                 {
-                    CornerRadius = 8,
+                    CornerRadius = 6,
                     Masking = true,
                     RelativeSizeAxes = Axes.X,
                     AutoSizeAxes = Axes.Y,
@@ -79,61 +87,78 @@ namespace osu.Game.Overlays.Notifications
                     AutoSizeEasing = Easing.OutQuint,
                     Children = new Drawable[]
                     {
-                        new Box
+                        new GridContainer
                         {
-                            RelativeSizeAxes = Axes.Both,
+                            RelativeSizeAxes = Axes.X,
-                            Colour = Color4.White,
+                            AutoSizeAxes = Axes.Y,
+                            RowDimensions = new[]
+                            {
+                                new Dimension(GridSizeMode.AutoSize, minSize: 60)
+                            },
+                            ColumnDimensions = new[]
+                            {
+                                new Dimension(GridSizeMode.AutoSize),
+                                new Dimension(),
+                                new Dimension(GridSizeMode.AutoSize),
+                            },
+                            Content = new[]
+                            {
+                                new Drawable[]
+                                {
+                                    IconContent = new Container
+                                    {
+                                        Width = 40,
+                                        RelativeSizeAxes = Axes.Y,
                                     },
                                     new Container
                                     {
                                         RelativeSizeAxes = Axes.X,
-                            Padding = new MarginPadding(5),
                                         AutoSizeAxes = Axes.Y,
+                                        Padding = new MarginPadding(10),
                                         Children = new Drawable[]
                                         {
-                                IconContent = new Container
-                                {
-                                    Size = new Vector2(40),
-                                    Masking = true,
-                                    CornerRadius = 5,
-                                },
                                             content = new Container
                                             {
+                                                Masking = true,
                                                 RelativeSizeAxes = Axes.X,
                                                 AutoSizeAxes = Axes.Y,
-                                    Padding = new MarginPadding
-                                    {
-                                        Left = 45,
-                                        Right = 30
                                             },
                                         }
-                            }
                                     },
-                        closeButton = new CloseButton
+                                    new CloseButton(CloseButtonIcon)
                                     {
-                            Alpha = 0,
                                         Action = Close,
-                            Anchor = Anchor.CentreRight,
+                                        Anchor = Anchor.TopRight,
-                            Origin = Anchor.CentreRight,
+                                        Origin = Anchor.TopRight,
-                            Margin = new MarginPadding
+                                    }
-                            {
+                                }
-                                Right = 5
+                            },
                         },
                     }
                 }
+            };
         }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            MainContent.Add(background = new Box
+            {
+                RelativeSizeAxes = Axes.Both,
+                Colour = colourProvider.Background3,
+                Depth = float.MaxValue
             });
         }
 
         protected override bool OnHover(HoverEvent e)
         {
-            closeButton.FadeIn(75);
+            background.FadeColour(colourProvider.Background2, 200, Easing.OutQuint);
             return base.OnHover(e);
         }
 
         protected override void OnHoverLost(HoverLostEvent e)
         {
-            closeButton.FadeOut(75);
+            background.FadeColour(colourProvider.Background3, 200, Easing.OutQuint);
             base.OnHoverLost(e);
         }
 
@@ -150,8 +175,9 @@ namespace osu.Game.Overlays.Notifications
             base.LoadComplete();
 
             this.FadeInFromZero(200);
-            NotificationContent.MoveToX(DrawSize.X);
+
-            NotificationContent.MoveToX(0, 500, Easing.OutQuint);
+            MainContent.MoveToX(DrawSize.X);
+            MainContent.MoveToX(0, 500, Easing.OutQuint);
         }
 
         public bool WasClosed;
@@ -169,40 +195,55 @@ namespace osu.Game.Overlays.Notifications
 
         private class CloseButton : OsuClickableContainer
         {
-            private Color4 hoverColour;
+            private SpriteIcon icon = null!;
+            private Box background = null!;
 
-            public CloseButton()
+            private readonly IconUsage iconUsage;
-            {
-                Colour = OsuColour.Gray(0.2f);
-                AutoSizeAxes = Axes.Both;
 
-                Children = new[]
+            [Resolved]
+            private OverlayColourProvider colourProvider { get; set; } = null!;
+
+            public CloseButton(IconUsage iconUsage)
             {
-                    new SpriteIcon
+                this.iconUsage = iconUsage;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load()
+            {
+                RelativeSizeAxes = Axes.Y;
+                Width = 28;
+
+                Children = new Drawable[]
+                {
+                    background = new Box
+                    {
+                        Colour = OsuColour.Gray(0).Opacity(0.15f),
+                        Alpha = 0,
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    icon = new SpriteIcon
                     {
                         Anchor = Anchor.Centre,
                         Origin = Anchor.Centre,
-                        Icon = FontAwesome.Solid.TimesCircle,
+                        Icon = iconUsage,
-                        Size = new Vector2(20),
+                        Size = new Vector2(12),
+                        Colour = colourProvider.Foreground1,
                     }
                 };
             }
 
-            [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
-            {
-                hoverColour = colours.Yellow;
-            }
-
             protected override bool OnHover(HoverEvent e)
             {
-                this.FadeColour(hoverColour, 200);
+                background.FadeIn(200, Easing.OutQuint);
+                icon.FadeColour(colourProvider.Content1, 200, Easing.OutQuint);
                 return base.OnHover(e);
             }
 
             protected override void OnHoverLost(HoverLostEvent e)
             {
-                this.FadeColour(OsuColour.Gray(0.2f), 200);
+                background.FadeOut(200, Easing.OutQuint);
+                icon.FadeColour(colourProvider.Foreground1, 200, Easing.OutQuint);
                 base.OnHoverLost(e);
             }
         }

osu.Game/Overlays/Notifications/ProgressCompletionNotification.cs

@@ -20,7 +20,7 @@ namespace osu.Game.Overlays.Notifications
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            IconBackground.Colour = ColourInfo.GradientVertical(colours.GreenDark, colours.GreenLight);
+            IconContent.Colour = ColourInfo.GradientVertical(colours.GreenDark, colours.GreenLight);
         }
     }
 }

osu.Game/Overlays/Notifications/ProgressNotification.cs

@@ -57,11 +57,14 @@ namespace osu.Game.Overlays.Notifications
             set
             {
                 progress = value;
-                Scheduler.AddOnce(updateProgress, progress);
+                Scheduler.AddOnce(p => progressBar.Progress = p, progress);
             }
         }
 
-        private void updateProgress(float progress) => progressBar.Progress = progress;
+        protected override IconUsage CloseButtonIcon => FontAwesome.Solid.Times;
+
+        [Resolved]
+        private OverlayColourProvider colourProvider { get; set; } = null!;
 
         protected override void LoadComplete()
         {
@@ -100,7 +103,7 @@ namespace osu.Game.Overlays.Notifications
                     Light.Pulsate = false;
                     progressBar.Active = false;
 
-                    iconBackground.FadeColour(ColourInfo.GradientVertical(colourQueued, colourQueued.Lighten(0.5f)), colour_fade_duration);
+                    IconContent.FadeColour(ColourInfo.GradientVertical(colourQueued, colourQueued.Lighten(0.5f)), colour_fade_duration);
                     loadingSpinner.Show();
                     break;
 
@@ -109,14 +112,14 @@ namespace osu.Game.Overlays.Notifications
                     Light.Pulsate = true;
                     progressBar.Active = true;
 
-                    iconBackground.FadeColour(ColourInfo.GradientVertical(colourActive, colourActive.Lighten(0.5f)), colour_fade_duration);
+                    IconContent.FadeColour(ColourInfo.GradientVertical(colourActive, colourActive.Lighten(0.5f)), colour_fade_duration);
                     loadingSpinner.Show();
                     break;
 
                 case ProgressNotificationState.Cancelled:
                     cancellationTokenSource.Cancel();
 
-                    iconBackground.FadeColour(ColourInfo.GradientVertical(Color4.Gray, Color4.Gray.Lighten(0.5f)), colour_fade_duration);
+                    IconContent.FadeColour(ColourInfo.GradientVertical(Color4.Gray, Color4.Gray.Lighten(0.5f)), colour_fade_duration);
                     loadingSpinner.Hide();
 
                     var icon = new SpriteIcon
@@ -138,8 +141,7 @@ namespace osu.Game.Overlays.Notifications
 
                 case ProgressNotificationState.Completed:
                     loadingSpinner.Hide();
-                    NotificationContent.MoveToY(-DrawSize.Y / 2, 200, Easing.OutQuint);
+                    Completed();
-                    this.FadeOut(200).Finally(_ => Completed());
                     break;
             }
         }
@@ -165,21 +167,19 @@ namespace osu.Game.Overlays.Notifications
         private Color4 colourActive;
         private Color4 colourCancelled;
 
-        private Box iconBackground = null!;
         private LoadingSpinner loadingSpinner = null!;
 
         private readonly TextFlowContainer textDrawable;
 
         public ProgressNotification()
         {
-            Content.Add(textDrawable = new OsuTextFlowContainer
+            Content.Add(textDrawable = new OsuTextFlowContainer(t => t.Font = t.Font.With(size: 14, weight: FontWeight.Medium))
             {
-                Colour = OsuColour.Gray(128),
                 AutoSizeAxes = Axes.Y,
                 RelativeSizeAxes = Axes.X,
             });
 
-            NotificationContent.Add(progressBar = new ProgressBar
+            MainContent.Add(progressBar = new ProgressBar
             {
                 Origin = Anchor.BottomLeft,
                 Anchor = Anchor.BottomLeft,
@@ -204,10 +204,10 @@ namespace osu.Game.Overlays.Notifications
 
             IconContent.AddRange(new Drawable[]
             {
-                iconBackground = new Box
+                new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = Color4.White,
+                    Colour = colourProvider.Background5,
                 },
                 loadingSpinner = new LoadingSpinner
                 {

osu.Game/Overlays/Notifications/SimpleNotification.cs

@@ -3,7 +3,6 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Colour;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
@@ -24,6 +23,7 @@ namespace osu.Game.Overlays.Notifications
             set
             {
                 text = value;
+                if (textDrawable != null)
                     textDrawable.Text = text;
             }
         }
@@ -36,48 +36,44 @@ namespace osu.Game.Overlays.Notifications
             set
             {
                 icon = value;
+                if (iconDrawable != null)
                     iconDrawable.Icon = icon;
             }
         }
 
-        private readonly TextFlowContainer textDrawable;
+        private TextFlowContainer? textDrawable;
-        private readonly SpriteIcon iconDrawable;
 
-        protected Box IconBackground;
+        private SpriteIcon? iconDrawable;
 
-        public SimpleNotification()
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours, OverlayColourProvider colourProvider)
         {
+            Light.Colour = colours.Green;
+
             IconContent.AddRange(new Drawable[]
             {
-                IconBackground = new Box
+                new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = ColourInfo.GradientVertical(OsuColour.Gray(0.2f), OsuColour.Gray(0.6f))
+                    Colour = colourProvider.Background5,
                 },
                 iconDrawable = new SpriteIcon
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
                     Icon = icon,
-                    Size = new Vector2(20),
+                    Size = new Vector2(16),
                 }
             });
 
-            Content.Add(textDrawable = new OsuTextFlowContainer(t => t.Font = t.Font.With(size: 14))
+            Content.Add(textDrawable = new OsuTextFlowContainer(t => t.Font = t.Font.With(size: 14, weight: FontWeight.Medium))
             {
-                Colour = OsuColour.Gray(128),
                 AutoSizeAxes = Axes.Y,
                 RelativeSizeAxes = Axes.X,
                 Text = text
             });
         }
 
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            Light.Colour = colours.Green;
-        }
-
         public override bool Read
         {
             get => base.Read;

osu.Game/Screens/Play/PlayerLoader.cs

@@ -530,7 +530,7 @@ namespace osu.Game.Screens.Play
             private void load(OsuColour colours, AudioManager audioManager, INotificationOverlay notificationOverlay, VolumeOverlay volumeOverlay)
             {
                 Icon = FontAwesome.Solid.VolumeMute;
-                IconBackground.Colour = colours.RedDark;
+                IconContent.Colour = colours.RedDark;
 
                 Activated = delegate
                 {
@@ -584,7 +584,7 @@ namespace osu.Game.Screens.Play
             private void load(OsuColour colours, INotificationOverlay notificationOverlay)
             {
                 Icon = FontAwesome.Solid.BatteryQuarter;
-                IconBackground.Colour = colours.RedDark;
+                IconContent.Colour = colours.RedDark;
 
                 Activated = delegate
                 {

osu.Game/Updater/UpdateManager.cs

@@ -99,7 +99,7 @@ namespace osu.Game.Updater
             private void load(OsuColour colours, ChangelogOverlay changelog, INotificationOverlay notificationOverlay)
             {
                 Icon = FontAwesome.Solid.CheckSquare;
-                IconBackground.Colour = colours.BlueDark;
+                IconContent.Colour = colours.BlueDark;
 
                 Activated = delegate
                 {