Merge pull request #7366 from EVAST9919/overlay-headers-update-two

Update overlay headers layout in line with the new web design

osu.Game/Graphics/UserInterface/ScreenTitle.cs

@@ -16,7 +16,7 @@ namespace osu.Game.Graphics.UserInterface
     {
         public const float ICON_WIDTH = ICON_SIZE + spacing;
 
-        public const float ICON_SIZE = 30;
+        public const float ICON_SIZE = 25;
         private const float spacing = 6;
         private const int text_offset = 2;
 

osu.Game/Graphics/UserInterface/ScreenTitleTextureIcon.cs

@@ -33,6 +33,7 @@ namespace osu.Game.Graphics.UserInterface
                 Texture = textures.Get(textureName),
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,
+                FillMode = FillMode.Fit
             };
         }
     }

osu.Game/Overlays/Changelog/ChangelogHeader.cs

@@ -47,6 +47,8 @@ namespace osu.Game.Overlays.Changelog
         private void load(OsuColour colours)
         {
             TabControl.AccentColour = colours.Violet;
+            TitleBackgroundColour = colours.GreyVioletDarker;
+            ControlBackgroundColour = colours.GreyVioletDark;
         }
 
         private ChangelogHeaderTitle title;

osu.Game/Overlays/News/NewsHeader.cs

@@ -4,7 +4,6 @@
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.Textures;
 using osu.Game.Graphics;
@@ -37,9 +36,11 @@ namespace osu.Game.Overlays.News
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colour)
+        private void load(OsuColour colours)
         {
-            TabControl.AccentColour = colour.Violet;
+            TabControl.AccentColour = colours.Violet;
+            TitleBackgroundColour = colours.GreyVioletDarker;
+            ControlBackgroundColour = colours.GreyVioletDark;
         }
 
         private void showPost(ValueChangedEvent<string> e)
@@ -63,8 +64,6 @@ namespace osu.Game.Overlays.News
 
         protected override Drawable CreateBackground() => new NewsHeaderBackground();
 
-        protected override Drawable CreateContent() => new Container();
-
         protected override ScreenTitle CreateTitle() => title = new NewsHeaderTitle();
 
         private class NewsHeaderBackground : Sprite

osu.Game/Overlays/OverlayHeader.cs

@@ -1,9 +1,12 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using JetBrains.Annotations;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics.UserInterface;
+using osuTK.Graphics;
 
 namespace osu.Game.Overlays
 {
@@ -11,59 +14,96 @@ namespace osu.Game.Overlays
     {
         protected readonly OverlayHeaderTabControl TabControl;
 
-        private const float cover_height = 150;
+        private readonly Box titleBackground;
-        private const float cover_info_height = 75;
+        private readonly Box controlBackground;
+        private readonly Container background;
+
+        protected Color4 TitleBackgroundColour
+        {
+            set => titleBackground.Colour = value;
+        }
+
+        protected Color4 ControlBackgroundColour
+        {
+            set => controlBackground.Colour = value;
+        }
+
+        protected float BackgroundHeight
+        {
+            set => background.Height = value;
+        }
 
         protected OverlayHeader()
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
 
-            Children = new Drawable[]
+            Add(new FillFlowContainer
             {
-                new Container
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Vertical,
+                Children = new[]
                 {
-                    RelativeSizeAxes = Axes.X,
+                    background = new Container
-                    Height = cover_height,
-                    Masking = true,
-                    Child = CreateBackground()
-                },
-                new Container
-                {
-                    Margin = new MarginPadding { Left = UserProfileOverlay.CONTENT_X_MARGIN },
-                    Y = cover_height,
-                    Height = cover_info_height,
-                    RelativeSizeAxes = Axes.X,
-                    Anchor = Anchor.TopLeft,
-                    Origin = Anchor.BottomLeft,
-                    Depth = -float.MaxValue,
-                    Children = new Drawable[]
                     {
-                        CreateTitle().With(t => t.X = -ScreenTitle.ICON_WIDTH),
+                        RelativeSizeAxes = Axes.X,
-                        TabControl = new OverlayHeaderTabControl
+                        Height = 80,
+                        Masking = true,
+                        Child = CreateBackground()
+                    },
+                    new Container
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Children = new Drawable[]
                         {
-                            Anchor = Anchor.BottomLeft,
+                            titleBackground = new Box
-                            Origin = Anchor.BottomLeft,
+                            {
-                            RelativeSizeAxes = Axes.X,
+                                RelativeSizeAxes = Axes.Both,
-                            Height = cover_info_height - 30,
+                                Colour = Color4.Gray,
-                            Margin = new MarginPadding { Left = -UserProfileOverlay.CONTENT_X_MARGIN },
+                            },
-                            Padding = new MarginPadding { Left = UserProfileOverlay.CONTENT_X_MARGIN }
+                            CreateTitle().With(title =>
+                            {
+                                title.Margin = new MarginPadding
+                                {
+                                    Vertical = 10,
+                                    Left = UserProfileOverlay.CONTENT_X_MARGIN
+                                };
+                            })
                         }
-                    }
+                    },
-                },
+                    new Container
-                new Container
+                    {
-                {
+                        RelativeSizeAxes = Axes.X,
-                    Margin = new MarginPadding { Top = cover_height },
+                        AutoSizeAxes = Axes.Y,
-                    RelativeSizeAxes = Axes.X,
+                        Depth = -float.MaxValue,
-                    AutoSizeAxes = Axes.Y,
+                        Children = new Drawable[]
-                    Child = CreateContent()
+                        {
+                            controlBackground = new Box
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Colour = Color4.Gray,
+                            },
+                            TabControl = new OverlayHeaderTabControl
+                            {
+                                Anchor = Anchor.BottomLeft,
+                                Origin = Anchor.BottomLeft,
+                                RelativeSizeAxes = Axes.X,
+                                Height = 30,
+                                Padding = new MarginPadding { Left = UserProfileOverlay.CONTENT_X_MARGIN },
+                            }
+                        }
+                    },
+                    CreateContent()
                 }
-            };
+            });
         }
 
         protected abstract Drawable CreateBackground();
 
-        protected abstract Drawable CreateContent();
+        [NotNull]
+        protected virtual Drawable CreateContent() => new Container();
 
         protected abstract ScreenTitle CreateTitle();
     }

osu.Game/Overlays/Profile/ProfileHeader.cs

@@ -26,6 +26,8 @@ namespace osu.Game.Overlays.Profile
 
         public ProfileHeader()
         {
+            BackgroundHeight = 150;
+
             User.ValueChanged += e => updateDisplay(e.NewValue);
 
             TabControl.AddItem("Info");
@@ -38,6 +40,8 @@ namespace osu.Game.Overlays.Profile
         private void load(OsuColour colours)
         {
             TabControl.AccentColour = colours.Seafoam;
+            TitleBackgroundColour = colours.GreySeafoamDarker;
+            ControlBackgroundColour = colours.GreySeafoam;
         }
 
         protected override Drawable CreateBackground() =>
@@ -110,6 +114,8 @@ namespace osu.Game.Overlays.Profile
             {
                 AccentColour = colours.Seafoam;
             }
+
+            protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/profile");
         }
     }
 }