Merge pull request #7541 from EVAST9919/overlay-header-web-colours

Implement colour schemes for OverlayHeader

osu.Game/Graphics/OsuColour.cs

@@ -3,6 +3,7 @@
 
 using System;
 using osu.Game.Beatmaps;
+using osuTK;
 using osuTK.Graphics;
 
 namespace osu.Game.Graphics
@@ -63,6 +64,46 @@ namespace osu.Game.Graphics
             }
         }
 
+        public Color4 ForOverlayElement(OverlayColourScheme colourScheme, float saturation, float lightness, float opacity = 1) => Color4.FromHsl(new Vector4(getBaseHue(colourScheme), saturation, lightness, opacity));
+
+        // See https://github.com/ppy/osu-web/blob/4218c288292d7c810b619075471eaea8bbb8f9d8/app/helpers.php#L1463
+        private static float getBaseHue(OverlayColourScheme colourScheme)
+        {
+            float hue;
+
+            switch (colourScheme)
+            {
+                default:
+                    throw new ArgumentException($@"{colourScheme} colour scheme does not provide a hue value in {nameof(getBaseHue)}.");
+
+                case OverlayColourScheme.Red:
+                    hue = 0;
+                    break;
+
+                case OverlayColourScheme.Pink:
+                    hue = 333;
+                    break;
+
+                case OverlayColourScheme.Orange:
+                    hue = 46;
+                    break;
+
+                case OverlayColourScheme.Green:
+                    hue = 115;
+                    break;
+
+                case OverlayColourScheme.Purple:
+                    hue = 255;
+                    break;
+
+                case OverlayColourScheme.Blue:
+                    hue = 200;
+                    break;
+            }
+
+            return hue / 360f;
+        }
+
         // See https://github.com/ppy/osu-web/blob/master/resources/assets/less/colors.less
         public readonly Color4 PurpleLighter = FromHex(@"eeeeff");
         public readonly Color4 PurpleLight = FromHex(@"aa88ff");
@@ -165,4 +206,14 @@ namespace osu.Game.Graphics
 
         public readonly Color4 ContextMenuGray = FromHex(@"223034");
     }
+
+    public enum OverlayColourScheme
+    {
+        Red,
+        Pink,
+        Orange,
+        Green,
+        Purple,
+        Blue
+    }
 }

osu.Game/Overlays/BreadcrumbControlOverlayHeader.cs

@@ -1,8 +1,10 @@
 // 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 osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.UserInterface;
+using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
 
 namespace osu.Game.Overlays
@@ -13,6 +15,17 @@ namespace osu.Game.Overlays
 
         protected override TabControl<string> CreateTabControl() => BreadcrumbControl = new OverlayHeaderBreadcrumbControl();
 
+        protected BreadcrumbControlOverlayHeader(OverlayColourScheme colourScheme)
+            : base(colourScheme)
+        {
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            BreadcrumbControl.AccentColour = colours.ForOverlayElement(ColourScheme, 1, 0.75f);
+        }
+
         public class OverlayHeaderBreadcrumbControl : BreadcrumbControl<string>
         {
             public OverlayHeaderBreadcrumbControl()

osu.Game/Overlays/Changelog/ChangelogHeader.cs

@@ -26,6 +26,7 @@ namespace osu.Game.Overlays.Changelog
         private const string listing_string = "listing";
 
         public ChangelogHeader()
+            : base(OverlayColourScheme.Purple)
         {
             BreadcrumbControl.AddItem(listing_string);
             BreadcrumbControl.Current.ValueChanged += e =>
@@ -43,14 +44,6 @@ namespace osu.Game.Overlays.Changelog
             };
         }
 
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            BreadcrumbControl.AccentColour = colours.Violet;
-            TitleBackgroundColour = colours.GreyVioletDarker;
-            ControlBackgroundColour = colours.GreyVioletDark;
-        }
-
         private ChangelogHeaderTitle title;
 
         private void showBuild(ValueChangedEvent<APIChangelogBuild> e)
@@ -117,12 +110,6 @@ namespace osu.Game.Overlays.Changelog
                 Version = null;
             }
 
-            [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
-            {
-                AccentColour = colours.Violet;
-            }
-
             protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/changelog");
         }
     }

osu.Game/Overlays/News/NewsHeader.cs

@@ -23,6 +23,7 @@ namespace osu.Game.Overlays.News
         public Action ShowFrontPage;
 
         public NewsHeader()
+            : base(OverlayColourScheme.Purple)
         {
             BreadcrumbControl.AddItem(front_page_string);
 
@@ -35,14 +36,6 @@ namespace osu.Game.Overlays.News
             Current.ValueChanged += showPost;
         }
 
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            BreadcrumbControl.AccentColour = colours.Violet;
-            TitleBackgroundColour = colours.GreyVioletDarker;
-            ControlBackgroundColour = colours.GreyVioletDark;
-        }
-
         private void showPost(ValueChangedEvent<string> e)
         {
             if (e.OldValue != null)
@@ -97,12 +90,6 @@ namespace osu.Game.Overlays.News
             }
 
             protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/news");
-
-            [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
-            {
-                AccentColour = colours.Violet;
-            }
         }
     }
 }

osu.Game/Overlays/OverlayHeader.cs

@@ -2,10 +2,12 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using JetBrains.Annotations;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
+using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
 using osuTK.Graphics;
 
@@ -16,24 +18,19 @@ namespace osu.Game.Overlays
         private readonly Box titleBackground;
         private readonly Box controlBackground;
         private readonly Container background;
-
+        private readonly ScreenTitle title;
-        protected Color4 TitleBackgroundColour
-        {
-            set => titleBackground.Colour = value;
-        }
-
-        protected Color4 ControlBackgroundColour
-        {
-            set => controlBackground.Colour = value;
-        }
 
         protected float BackgroundHeight
         {
             set => background.Height = value;
         }
 
-        protected OverlayHeader()
+        protected OverlayColourScheme ColourScheme { get; }
+
+        protected OverlayHeader(OverlayColourScheme colourScheme)
         {
+            ColourScheme = colourScheme;
+
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
 
@@ -60,9 +57,8 @@ namespace osu.Game.Overlays
                             titleBackground = new Box
                             {
                                 RelativeSizeAxes = Axes.Both,
-                                Colour = Color4.Gray,
                             },
-                            CreateTitle().With(title =>
+                            title = CreateTitle().With(title =>
                             {
                                 title.Margin = new MarginPadding
                                 {
@@ -92,6 +88,14 @@ namespace osu.Game.Overlays
             });
         }
 
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            titleBackground.Colour = colours.ForOverlayElement(ColourScheme, 0.2f, 0.15f);
+            title.AccentColour = colours.ForOverlayElement(ColourScheme, 1, 0.7f);
+            controlBackground.Colour = colours.ForOverlayElement(ColourScheme, 0.2f, 0.2f);
+        }
+
         protected abstract Drawable CreateBackground();
 
         [NotNull]

osu.Game/Overlays/Profile/ProfileHeader.cs

@@ -1,7 +1,6 @@
 // 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 osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
@@ -25,6 +24,7 @@ namespace osu.Game.Overlays.Profile
         private DetailHeaderContainer detailHeaderContainer;
 
         public ProfileHeader()
+            : base(OverlayColourScheme.Green)
         {
             BackgroundHeight = 150;
 
@@ -36,14 +36,6 @@ namespace osu.Game.Overlays.Profile
             centreHeaderContainer.DetailsVisible.BindValueChanged(visible => detailHeaderContainer.Expanded = visible.NewValue, true);
         }
 
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            TabControl.AccentColour = colours.Seafoam;
-            TitleBackgroundColour = colours.GreySeafoamDarker;
-            ControlBackgroundColour = colours.GreySeafoam;
-        }
-
         protected override Drawable CreateBackground() =>
             new Container
             {
@@ -109,12 +101,6 @@ namespace osu.Game.Overlays.Profile
                 Section = "info";
             }
 
-            [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
-            {
-                AccentColour = colours.Seafoam;
-            }
-
             protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/profile");
         }
     }

osu.Game/Overlays/TabControlOverlayHeader.cs

@@ -1,6 +1,7 @@
 // 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 osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.UserInterface;
@@ -15,6 +16,17 @@ namespace osu.Game.Overlays
 
         protected override TabControl<string> CreateTabControl() => TabControl = new OverlayHeaderTabControl();
 
+        protected TabControlOverlayHeader(OverlayColourScheme colourScheme)
+            : base(colourScheme)
+        {
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            TabControl.AccentColour = colours.ForOverlayElement(ColourScheme, 1, 0.75f);
+        }
+
         public class OverlayHeaderTabControl : OverlayTabControl<string>
         {
             public OverlayHeaderTabControl()