Merge pull request #7940 from EVAST9919/changelog-retouch

Adjust ChangelogOverlay appearance to match web

osu.Game/Overlays/Changelog/ChangelogBuild.cs

@@ -16,6 +16,7 @@ using osuTK.Graphics;
 using osu.Framework.Allocation;
 using System.Net;
 using osuTK;
+using osu.Framework.Extensions.Color4Extensions;
 
 namespace osu.Game.Overlays.Changelog
 {
@@ -51,28 +52,27 @@ namespace osu.Game.Overlays.Changelog
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OsuColour colours, OverlayColourProvider colourProvider)
         {
             foreach (var categoryEntries in Build.ChangelogEntries.GroupBy(b => b.Category).OrderBy(c => c.Key))
             {
                 ChangelogEntries.Add(new OsuSpriteText
                 {
                     Text = categoryEntries.Key,
-                    Font = OsuFont.GetFont(weight: FontWeight.Bold, size: 24),
+                    Font = OsuFont.GetFont(weight: FontWeight.Bold, size: 18),
                     Margin = new MarginPadding { Top = 35, Bottom = 15 },
                 });
 
-                var fontLarge = OsuFont.GetFont(size: 18);
+                var fontLarge = OsuFont.GetFont(size: 16);
-                var fontMedium = OsuFont.GetFont(size: 14);
+                var fontMedium = OsuFont.GetFont(size: 12);
-                var fontSmall = OsuFont.GetFont(size: 12);
 
-                foreach (APIChangelogEntry entry in categoryEntries)
+                foreach (var entry in categoryEntries)
                 {
                     var entryColour = entry.Major ? colours.YellowLight : Color4.White;
 
                     LinkFlowContainer title;
 
-                    Container titleContainer = new Container
+                    var titleContainer = new Container
                     {
                         AutoSizeAxes = Axes.Y,
                         RelativeSizeAxes = Axes.X,
@@ -83,9 +83,9 @@ namespace osu.Game.Overlays.Changelog
                             {
                                 Anchor = Anchor.CentreLeft,
                                 Origin = Anchor.CentreRight,
-                                Size = new Vector2(fontSmall.Size),
+                                Size = new Vector2(10),
                                 Icon = entry.Type == ChangelogEntryType.Fix ? FontAwesome.Solid.Check : FontAwesome.Solid.Plus,
-                                Colour = entryColour,
+                                Colour = entryColour.Opacity(0.5f),
                                 Margin = new MarginPadding { Right = 5 },
                             },
                             title = new LinkFlowContainer
@@ -123,10 +123,11 @@ namespace osu.Game.Overlays.Changelog
                         });
                     }
 
-                    title.AddText(" by ", t =>
+                    title.AddText("by ", t =>
                     {
-                        t.Font = fontMedium;
+                        t.Font = fontMedium.With(italics: true);
                         t.Colour = entryColour;
+                        t.Padding = new MarginPadding { Left = 10 };
                     });
 
                     if (entry.GithubUser.UserId != null)
@@ -137,7 +138,7 @@ namespace osu.Game.Overlays.Changelog
                             Id = entry.GithubUser.UserId.Value
                         }, t =>
                         {
-                            t.Font = fontMedium;
+                            t.Font = fontMedium.With(italics: true);
                             t.Colour = entryColour;
                         });
                     }
@@ -145,7 +146,7 @@ namespace osu.Game.Overlays.Changelog
                     {
                         title.AddLink(entry.GithubUser.DisplayName, entry.GithubUser.GithubUrl, t =>
                         {
-                            t.Font = fontMedium;
+                            t.Font = fontMedium.With(italics: true);
                             t.Colour = entryColour;
                         });
                     }
@@ -153,7 +154,7 @@ namespace osu.Game.Overlays.Changelog
                     {
                         title.AddText(entry.GithubUser.DisplayName, t =>
                         {
-                            t.Font = fontSmall;
+                            t.Font = fontMedium.With(italics: true);
                             t.Colour = entryColour;
                         });
                     }
@@ -162,7 +163,7 @@ namespace osu.Game.Overlays.Changelog
 
                     if (!string.IsNullOrEmpty(entry.MessageHtml))
                     {
-                        TextFlowContainer message = new TextFlowContainer
+                        var message = new TextFlowContainer
                         {
                             AutoSizeAxes = Axes.Y,
                             RelativeSizeAxes = Axes.X,
@@ -171,8 +172,8 @@ namespace osu.Game.Overlays.Changelog
                         // todo: use markdown parsing once API returns markdown
                         message.AddText(WebUtility.HtmlDecode(Regex.Replace(entry.MessageHtml, @"<(.|\n)*?>", string.Empty)), t =>
                         {
-                            t.Font = fontSmall;
+                            t.Font = fontMedium;
-                            t.Colour = new Color4(235, 184, 254, 255);
+                            t.Colour = colourProvider.Foreground1;
                         });
 
                         ChangelogEntries.Add(message);

osu.Game/Overlays/Changelog/ChangelogContent.cs

@@ -19,7 +19,6 @@ namespace osu.Game.Overlays.Changelog
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
             Direction = FillDirection.Vertical;
-            Padding = new MarginPadding { Bottom = 50 };
         }
     }
 }

osu.Game/Overlays/Changelog/ChangelogListing.cs

@@ -10,7 +10,6 @@ using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Online.API.Requests.Responses;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays.Changelog
 {
@@ -24,13 +23,13 @@ namespace osu.Game.Overlays.Changelog
         }
 
         [BackgroundDependencyLoader]
-        private void load()
+        private void load(OverlayColourProvider colourProvider)
         {
-            DateTime currentDate = DateTime.MinValue;
+            var currentDate = DateTime.MinValue;
 
             if (entries == null) return;
 
-            foreach (APIChangelogBuild build in entries)
+            foreach (var build in entries)
             {
                 if (build.CreatedAt.Date != currentDate)
                 {
@@ -40,7 +39,7 @@ namespace osu.Game.Overlays.Changelog
                         {
                             RelativeSizeAxes = Axes.X,
                             Height = 2,
-                            Colour = new Color4(17, 17, 17, 255),
+                            Colour = colourProvider.Background6,
                             Margin = new MarginPadding { Top = 30 },
                         });
                     }
@@ -49,10 +48,9 @@ namespace osu.Game.Overlays.Changelog
                     {
                         Anchor = Anchor.TopCentre,
                         Origin = Anchor.TopCentre,
-                        Margin = new MarginPadding { Top = 15 },
+                        Margin = new MarginPadding { Top = 20 },
-                        Text = build.CreatedAt.Date.ToString("dd MMM yyyy"),
+                        Text = build.CreatedAt.Date.ToString("dd MMMM yyyy"),
                         Font = OsuFont.GetFont(weight: FontWeight.Regular, size: 24),
-                        Colour = OsuColour.FromHex(@"FD5"),
                     });
 
                     currentDate = build.CreatedAt.Date;
@@ -68,7 +66,7 @@ namespace osu.Game.Overlays.Changelog
                         Child = new Box
                         {
                             RelativeSizeAxes = Axes.Both,
-                            Colour = new Color4(32, 24, 35, 255),
+                            Colour = colourProvider.Background6,
                         }
                     });
                 }

osu.Game/Overlays/Changelog/ChangelogSingleBuild.cs

@@ -8,6 +8,7 @@ using osu.Framework.Allocation;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
@@ -31,7 +32,7 @@ namespace osu.Game.Overlays.Changelog
         }
 
         [BackgroundDependencyLoader]
-        private void load(CancellationToken? cancellation, IAPIProvider api)
+        private void load(CancellationToken? cancellation, IAPIProvider api, OverlayColourProvider colourProvider)
         {
             bool complete = false;
 
@@ -63,10 +64,14 @@ namespace osu.Game.Overlays.Changelog
                 Children = new Drawable[]
                 {
                     new ChangelogBuildWithNavigation(build) { SelectBuild = SelectBuild },
-                    comments = new CommentsContainer
+                    new Box
                     {
-                        Margin = new MarginPadding { Top = 10 }
+                        RelativeSizeAxes = Axes.X,
-                    }
+                        Height = 2,
+                        Colour = colourProvider.Background6,
+                        Margin = new MarginPadding { Top = 30 },
+                    },
+                    comments = new CommentsContainer()
                 };
 
                 comments.ShowComments(CommentableType.Build, build.Id);
@@ -80,6 +85,8 @@ namespace osu.Game.Overlays.Changelog
             {
             }
 
+            private OsuSpriteText date;
+
             protected override FillFlowContainer CreateHeader()
             {
                 var fill = base.CreateHeader();
@@ -89,11 +96,10 @@ namespace osu.Game.Overlays.Changelog
                     existing.Scale = new Vector2(1.25f);
                     existing.Action = null;
 
-                    existing.Add(new OsuSpriteText
+                    existing.Add(date = new OsuSpriteText
                     {
-                        Text = Build.CreatedAt.Date.ToString("dd MMM yyyy"),
+                        Text = Build.CreatedAt.Date.ToString("dd MMMM yyyy"),
                         Font = OsuFont.GetFont(weight: FontWeight.Regular, size: 14),
-                        Colour = OsuColour.FromHex(@"FD5"),
                         Anchor = Anchor.BottomCentre,
                         Origin = Anchor.TopCentre,
                         Margin = new MarginPadding { Top = 5 },
@@ -113,6 +119,12 @@ namespace osu.Game.Overlays.Changelog
 
                 return fill;
             }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                date.Colour = colourProvider.Light1;
+            }
         }
 
         private class NavigationIconButton : IconButton

osu.Game/Overlays/Changelog/UpdateStreamBadge.cs

@@ -3,8 +3,6 @@
 
 using Humanizer;
 using osu.Framework.Allocation;
-using osu.Framework.Audio;
-using osu.Framework.Audio.Sample;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
@@ -16,99 +14,90 @@ using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays.Changelog
 {
     public class UpdateStreamBadge : TabItem<APIUpdateStream>
     {
-        private const float badge_height = 66.5f;
         private const float badge_width = 100;
         private const float transition_duration = 100;
 
-        private readonly ExpandingBar expandingBar;
-        private SampleChannel sampleClick;
-        private SampleChannel sampleHover;
-
-        private readonly FillFlowContainer<SpriteText> text;
-
         public readonly Bindable<APIUpdateStream> SelectedTab = new Bindable<APIUpdateStream>();
 
-        private readonly Container fadeContainer;
+        private readonly APIUpdateStream stream;
+
+        private Container fadeContainer;
+        private FillFlowContainer<SpriteText> text;
+        private ExpandingBar expandingBar;
 
         public UpdateStreamBadge(APIUpdateStream stream)
             : base(stream)
         {
-            Size = new Vector2(stream.IsFeatured ? badge_width * 2 : badge_width, badge_height);
+            this.stream = stream;
-            Padding = new MarginPadding(5);
-
-            Child = fadeContainer = new Container
-            {
-                RelativeSizeAxes = Axes.Both,
-                Children = new Drawable[]
-                {
-                    text = new FillFlowContainer<SpriteText>
-                    {
-                        AutoSizeAxes = Axes.X,
-                        RelativeSizeAxes = Axes.Y,
-                        Direction = FillDirection.Vertical,
-                        Children = new[]
-                        {
-                            new OsuSpriteText
-                            {
-                                Text = stream.DisplayName,
-                                Font = OsuFont.GetFont(weight: FontWeight.Bold, size: 12),
-                                Margin = new MarginPadding { Top = 6 },
-                            },
-                            new OsuSpriteText
-                            {
-                                Text = stream.LatestBuild.DisplayVersion,
-                                Font = OsuFont.GetFont(weight: FontWeight.Light, size: 16),
-                            },
-                            new OsuSpriteText
-                            {
-                                Text = stream.LatestBuild.Users > 0 ? $"{stream.LatestBuild.Users:N0} {"user".Pluralize(stream.LatestBuild.Users == 1)} online" : null,
-                                Font = OsuFont.GetFont(weight: FontWeight.Regular, size: 10),
-                                Colour = new Color4(203, 164, 218, 255),
-                            },
-                        }
-                    },
-                    expandingBar = new ExpandingBar
-                    {
-                        Anchor = Anchor.TopCentre,
-                        Colour = stream.Colour,
-                        ExpandedSize = 4,
-                        CollapsedSize = 2,
-                        IsCollapsed = true
-                    },
-                }
-            };
-
-            SelectedTab.BindValueChanged(_ => updateState(), true);
         }
 
         [BackgroundDependencyLoader]
-        private void load(AudioManager audio)
+        private void load(OverlayColourProvider colourProvider)
         {
-            sampleClick = audio.Samples.Get(@"UI/generic-select-soft");
+            Size = new Vector2(stream.IsFeatured ? badge_width * 2 : badge_width, 60);
-            sampleHover = audio.Samples.Get(@"UI/generic-hover-soft");
+            Padding = new MarginPadding(5);
+
+            AddRange(new Drawable[]
+            {
+                fadeContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Children = new Drawable[]
+                    {
+                        text = new FillFlowContainer<SpriteText>
+                        {
+                            AutoSizeAxes = Axes.X,
+                            RelativeSizeAxes = Axes.Y,
+                            Direction = FillDirection.Vertical,
+                            Margin = new MarginPadding { Top = 6 },
+                            Children = new[]
+                            {
+                                new OsuSpriteText
+                                {
+                                    Text = stream.DisplayName,
+                                    Font = OsuFont.GetFont(size: 12, weight: FontWeight.Black),
+                                },
+                                new OsuSpriteText
+                                {
+                                    Text = stream.LatestBuild.DisplayVersion,
+                                    Font = OsuFont.GetFont(size: 16, weight: FontWeight.Regular),
+                                },
+                                new OsuSpriteText
+                                {
+                                    Text = stream.LatestBuild.Users > 0 ? $"{"user".ToQuantity(stream.LatestBuild.Users, "N0")} online" : null,
+                                    Font = OsuFont.GetFont(size: 10),
+                                    Colour = colourProvider.Foreground1
+                                },
+                            }
+                        },
+                        expandingBar = new ExpandingBar
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Colour = stream.Colour,
+                            ExpandedSize = 4,
+                            CollapsedSize = 2,
+                            IsCollapsed = true
+                        },
+                    }
+                },
+                new HoverClickSounds()
+            });
+
+            SelectedTab.BindValueChanged(_ => updateState(), true);
         }
 
         protected override void OnActivated() => updateState();
 
         protected override void OnDeactivated() => updateState();
 
-        protected override bool OnClick(ClickEvent e)
-        {
-            sampleClick?.Play();
-            return base.OnClick(e);
-        }
-
         protected override bool OnHover(HoverEvent e)
         {
-            sampleHover?.Play();
             updateState();
-
             return base.OnHover(e);
         }
 

osu.Game/Overlays/Changelog/UpdateStreamBadgeArea.cs

@@ -8,34 +8,34 @@ using System.Collections.Generic;
 using System.Linq;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
-using osuTK.Graphics;
+using osu.Framework.Allocation;
 
 namespace osu.Game.Overlays.Changelog
 {
     public class UpdateStreamBadgeArea : TabControl<APIUpdateStream>
     {
-        public UpdateStreamBadgeArea()
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
 
             AddInternal(new Box
             {
-                Colour = Color4.Black,
-                Alpha = 0.12f,
                 RelativeSizeAxes = Axes.Both,
+                Colour = colourProvider.Background5,
             });
         }
 
         public void Populate(List<APIUpdateStream> streams)
         {
-            foreach (APIUpdateStream updateStream in streams)
+            foreach (var updateStream in streams)
                 AddItem(updateStream);
         }
 
         protected override bool OnHover(HoverEvent e)
         {
-            foreach (UpdateStreamBadge streamBadge in TabContainer.Children.OfType<UpdateStreamBadge>())
+            foreach (var streamBadge in TabContainer.Children.OfType<UpdateStreamBadge>())
                 streamBadge.EnableDim();
 
             return base.OnHover(e);
@@ -43,7 +43,7 @@ namespace osu.Game.Overlays.Changelog
 
         protected override void OnHoverLost(HoverLostEvent e)
         {
-            foreach (UpdateStreamBadge streamBadge in TabContainer.Children.OfType<UpdateStreamBadge>())
+            foreach (var streamBadge in TabContainer.Children.OfType<UpdateStreamBadge>())
                 streamBadge.DisableDim();
 
             base.OnHoverLost(e);

osu.Game/Overlays/ChangelogOverlay.cs

@@ -13,7 +13,6 @@ using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Input.Bindings;
 using osu.Game.Online.API.Requests;
@@ -42,14 +41,14 @@ namespace osu.Game.Overlays
         }
 
         [BackgroundDependencyLoader]
-        private void load(AudioManager audio, OsuColour colour)
+        private void load(AudioManager audio)
         {
             Children = new Drawable[]
             {
                 new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = colour.PurpleDarkAlternative,
+                    Colour = ColourProvider.Background4,
                 },
                 new OsuScrollContainer
                 {