Merge pull request #23637 from peppy/add-shadow-settings-notifications

Add shadow to notifications and settings overlays to better distinguish from other overlays

osu.Game/Graphics/Containers/WaveContainer.cs

@@ -17,6 +17,7 @@ namespace osu.Game.Graphics.Containers
     {
         public const float APPEAR_DURATION = 800;
         public const float DISAPPEAR_DURATION = 500;
+        public const float SHADOW_OPACITY = 0.2f;
 
         private const Easing easing_show = Easing.OutSine;
         private const Easing easing_hide = Easing.InSine;

osu.Game/Overlays/FullscreenOverlay.cs

@@ -56,6 +56,7 @@ namespace osu.Game.Overlays
             {
                 Colour = Color4.Black.Opacity(0),
                 Type = EdgeEffectType.Shadow,
+                Hollow = true,
                 Radius = 10
             };
 
@@ -101,7 +102,7 @@ namespace osu.Game.Overlays
         protected override void PopIn()
         {
             base.PopIn();
-            FadeEdgeEffectTo(0.4f, WaveContainer.APPEAR_DURATION, Easing.Out);
+            FadeEdgeEffectTo(WaveContainer.SHADOW_OPACITY, WaveContainer.APPEAR_DURATION, Easing.Out);
         }
 
         protected override void PopOut()

osu.Game/Overlays/NotificationOverlay.cs

@@ -5,9 +5,11 @@ using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Audio;
 using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Extensions.IEnumerableExtensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Localisation;
 using osu.Framework.Logging;
@@ -16,6 +18,7 @@ using osu.Game.Graphics.Containers;
 using osu.Game.Overlays.Notifications;
 using osu.Game.Resources.Localisation.Web;
 using osuTK;
+using osuTK.Graphics;
 using NotificationsStrings = osu.Game.Localisation.NotificationsStrings;
 
 namespace osu.Game.Overlays
@@ -72,6 +75,14 @@ namespace osu.Game.Overlays
                 mainContent = new Container
                 {
                     RelativeSizeAxes = Axes.Both,
+                    Masking = true,
+                    EdgeEffect = new EdgeEffectParameters
+                    {
+                        Colour = Color4.Black.Opacity(0),
+                        Type = EdgeEffectType.Shadow,
+                        Radius = 10,
+                        Hollow = true,
+                    },
                     Children = new Drawable[]
                     {
                         new Box
@@ -199,6 +210,7 @@ namespace osu.Game.Overlays
 
             this.MoveToX(0, TRANSITION_LENGTH, Easing.OutQuint);
             mainContent.FadeTo(1, TRANSITION_LENGTH, Easing.OutQuint);
+            mainContent.FadeEdgeEffectTo(WaveContainer.SHADOW_OPACITY, WaveContainer.APPEAR_DURATION, Easing.Out);
 
             toastTray.FlushAllToasts();
         }
@@ -211,6 +223,7 @@ namespace osu.Game.Overlays
 
             this.MoveToX(WIDTH, TRANSITION_LENGTH, Easing.OutQuint);
             mainContent.FadeTo(0, TRANSITION_LENGTH, Easing.OutQuint);
+            mainContent.FadeEdgeEffectTo(0, WaveContainer.DISAPPEAR_DURATION, Easing.In);
         }
 
         private void notificationClosed() => Schedule(() =>

osu.Game/Overlays/SettingsPanel.cs

@@ -10,15 +10,18 @@ using System.Threading.Tasks;
 using osuTK;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Extensions.IEnumerableExtensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Primitives;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays.Settings;
+using osuTK.Graphics;
 
 namespace osu.Game.Overlays
 {
@@ -105,6 +108,14 @@ namespace osu.Game.Overlays
             Add(SectionsContainer = new SettingsSectionsContainer
             {
                 Masking = true,
+                EdgeEffect = new EdgeEffectParameters
+                {
+                    Colour = Color4.Black.Opacity(0),
+                    Type = EdgeEffectType.Shadow,
+                    Hollow = true,
+                    Radius = 10
+                },
+                MaskingSmoothness = 0,
                 RelativeSizeAxes = Axes.Both,
                 ExpandableHeader = CreateHeader(),
                 SelectedSection = { BindTarget = CurrentSection },
@@ -156,6 +167,8 @@ namespace osu.Game.Overlays
 
             ContentContainer.MoveToX(ExpandedPosition, TRANSITION_LENGTH, Easing.OutQuint);
 
+            SectionsContainer.FadeEdgeEffectTo(WaveContainer.SHADOW_OPACITY, WaveContainer.APPEAR_DURATION, Easing.Out);
+
             // delay load enough to ensure it doesn't overlap with the initial animation.
             // this is done as there is still a brief stutter during load completion which is more visible if the transition is in progress.
             // the eventual goal would be to remove the need for this by splitting up load into smaller work pieces, or fixing the remaining
@@ -175,6 +188,7 @@ namespace osu.Game.Overlays
         {
             base.PopOut();
 
+            SectionsContainer.FadeEdgeEffectTo(0, WaveContainer.DISAPPEAR_DURATION, Easing.In);
             ContentContainer.MoveToX(-WIDTH + ExpandedPosition, TRANSITION_LENGTH, Easing.OutQuint);
 
             Sidebar?.MoveToX(-sidebar_width, TRANSITION_LENGTH, Easing.OutQuint);