Merge pull request #8038 from thewildtree/adjust-rankings-overlay

Adjust rankings overlay elements to better match osu-web

osu.Game/Overlays/Rankings/CountryFilter.cs

@@ -1,4 +1,4 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// 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;
@@ -17,7 +17,7 @@ namespace osu.Game.Overlays.Rankings
     public class CountryFilter : CompositeDrawable, IHasCurrentValue<Country>
     {
         private const int duration = 200;
-        private const int height = 50;
+        private const int height = 70;
 
         private readonly BindableWithCurrent<Country> current = new BindableWithCurrent<Country>();
 

osu.Game/Overlays/Rankings/CountryPill.cs

@@ -42,7 +42,7 @@ namespace osu.Game.Overlays.Rankings
 
             InternalChild = content = new CircularContainer
             {
-                Height = 25,
+                Height = 30,
                 AutoSizeDuration = duration,
                 AutoSizeEasing = Easing.OutQuint,
                 Masking = true,
@@ -58,9 +58,9 @@ namespace osu.Game.Overlays.Rankings
                         Origin = Anchor.Centre,
                         RelativeSizeAxes = Axes.Y,
                         AutoSizeAxes = Axes.X,
-                        Margin = new MarginPadding { Horizontal = 10 },
+                        Margin = new MarginPadding { Horizontal = 15 },
                         Direction = FillDirection.Horizontal,
-                        Spacing = new Vector2(8, 0),
+                        Spacing = new Vector2(15, 0),
                         Children = new Drawable[]
                         {
                             new FillFlowContainer
@@ -70,14 +70,14 @@ namespace osu.Game.Overlays.Rankings
                                 Anchor = Anchor.Centre,
                                 Origin = Anchor.Centre,
                                 Direction = FillDirection.Horizontal,
-                                Spacing = new Vector2(3, 0),
+                                Spacing = new Vector2(5, 0),
                                 Children = new Drawable[]
                                 {
                                     flag = new UpdateableFlag
                                     {
                                         Anchor = Anchor.Centre,
                                         Origin = Anchor.Centre,
-                                        Size = new Vector2(22, 15)
+                                        Size = new Vector2(30, 20)
                                     },
                                     countryName = new OsuSpriteText
                                     {
@@ -148,7 +148,7 @@ namespace osu.Game.Overlays.Rankings
                 AutoSizeAxes = Axes.Both;
                 Add(icon = new SpriteIcon
                 {
-                    Size = new Vector2(8),
+                    Size = new Vector2(10),
                     Icon = FontAwesome.Solid.Times
                 });
             }

osu.Game/Overlays/Rankings/SpotlightSelector.cs

@@ -15,6 +15,7 @@ using System;
 using System.Collections.Generic;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Online.API.Requests;
+using osu.Framework.Extensions.Color4Extensions;
 
 namespace osu.Game.Overlays.Rankings
 {
@@ -46,6 +47,7 @@ namespace osu.Game.Overlays.Rankings
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
+
             InternalChildren = new Drawable[]
             {
                 background = new Box
@@ -139,7 +141,7 @@ namespace osu.Game.Overlays.Rankings
             {
                 AutoSizeAxes = Axes.Both;
                 Direction = FillDirection.Vertical;
-                Margin = new MarginPadding { Vertical = 10 };
+                Padding = new MarginPadding { Vertical = 15 };
                 Children = new Drawable[]
                 {
                     new OsuSpriteText
@@ -150,11 +152,11 @@ namespace osu.Game.Overlays.Rankings
                     new Container
                     {
                         AutoSizeAxes = Axes.X,
-                        Height = 20,
+                        Height = 25,
                         Child = valueText = new OsuSpriteText
                         {
-                            Anchor = Anchor.BottomLeft,
+                            Anchor = Anchor.CentreLeft,
-                            Origin = Anchor.BottomLeft,
+                            Origin = Anchor.CentreLeft,
                             Font = OsuFont.GetFont(size: 20, weight: FontWeight.Light),
                         }
                     }
@@ -174,11 +176,34 @@ namespace osu.Game.Overlays.Rankings
 
             protected override DropdownMenu CreateMenu() => menu = base.CreateMenu().With(m => m.MaxHeight = 400);
 
+            protected override DropdownHeader CreateHeader() => new SpotlightsDropdownHeader();
+
             [BackgroundDependencyLoader]
             private void load(OverlayColourProvider colourProvider)
             {
+                // osu-web adds a 0.6 opacity container on top of the 0.5 base one when hovering, 0.8 on a single container here matches the resulting colour
+                AccentColour = colourProvider.Background6.Opacity(0.8f);
                 menu.BackgroundColour = colourProvider.Background5;
-                AccentColour = colourProvider.Background6;
+                Padding = new MarginPadding { Vertical = 20 };
+            }
+
+            private class SpotlightsDropdownHeader : OsuDropdownHeader
+            {
+                public SpotlightsDropdownHeader()
+                {
+                    AutoSizeAxes = Axes.Y;
+                    Text.Font = OsuFont.GetFont(size: 15);
+                    Text.Padding = new MarginPadding { Vertical = 1.5f }; // osu-web line-height difference compensation
+                    Foreground.Padding = new MarginPadding { Horizontal = 10, Vertical = 15 };
+                    Margin = Icon.Margin = new MarginPadding(0);
+                }
+
+                [BackgroundDependencyLoader]
+                private void load(OverlayColourProvider colourProvider)
+                {
+                    BackgroundColour = colourProvider.Background6.Opacity(0.5f);
+                    BackgroundColourHover = colourProvider.Background5;
+                }
             }
         }
     }

osu.Game/Overlays/Rankings/Tables/CountriesTable.cs

@@ -1,15 +1,14 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// 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.Graphics;
 using osu.Framework.Graphics.Containers;
 using System;
 using osu.Game.Users;
-using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
 using System.Collections.Generic;
 using osu.Framework.Allocation;
-using osu.Game.Graphics.Containers;
 
 namespace osu.Game.Overlays.Rankings.Tables
 {
@@ -62,35 +61,20 @@ namespace osu.Game.Overlays.Rankings.Tables
             }
         };
 
-        private class CountryName : OsuHoverContainer
+        private class CountryName : LinkFlowContainer
         {
-            protected override IEnumerable<Drawable> EffectTargets => new[] { text };
-
             [Resolved(canBeNull: true)]
             private RankingsOverlay rankings { get; set; }
 
-            private readonly OsuSpriteText text;
-            private readonly Country country;
-
             public CountryName(Country country)
+                : base(t => t.Font = OsuFont.GetFont(size: 12))
             {
-                this.country = country;
+                AutoSizeAxes = Axes.X;
+                RelativeSizeAxes = Axes.Y;
+                TextAnchor = Anchor.CentreLeft;
 
-                AutoSizeAxes = Axes.Both;
+                if (!string.IsNullOrEmpty(country.FullName))
-                Add(text = new OsuSpriteText
+                    AddLink(country.FullName, () => rankings?.ShowCountry(country));
-                {
-                    Font = OsuFont.GetFont(size: 12),
-                    Text = country.FullName ?? string.Empty,
-                });
-            }
-
-            [BackgroundDependencyLoader]
-            private void load(OverlayColourProvider colourProvider)
-            {
-                IdleColour = colourProvider.Light2;
-                HoverColour = colourProvider.Content2;
-
-                Action = () => rankings?.ShowCountry(country);
             }
         }
     }

osu.Game/Overlays/Rankings/Tables/RankingsTable.cs

@@ -1,4 +1,4 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// 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.Graphics;
@@ -20,7 +20,8 @@ namespace osu.Game.Overlays.Rankings.Tables
     {
         protected const int TEXT_SIZE = 12;
         private const float horizontal_inset = 20;
-        private const float row_height = 25;
+        private const float row_height = 32;
+        private const float row_spacing = 3;
         private const int items_per_page = 50;
 
         private readonly int page;
@@ -35,7 +36,7 @@ namespace osu.Game.Overlays.Rankings.Tables
             AutoSizeAxes = Axes.Y;
 
             Padding = new MarginPadding { Horizontal = horizontal_inset };
-            RowSize = new Dimension(GridSizeMode.Absolute, row_height);
+            RowSize = new Dimension(GridSizeMode.Absolute, row_height + row_spacing);
         }
 
         [BackgroundDependencyLoader]
@@ -47,10 +48,11 @@ namespace osu.Game.Overlays.Rankings.Tables
             {
                 RelativeSizeAxes = Axes.Both,
                 Depth = 1f,
-                Margin = new MarginPadding { Top = row_height }
+                Margin = new MarginPadding { Top = row_height + row_spacing },
+                Spacing = new Vector2(0, row_spacing),
             });
 
-            rankings.ForEach(_ => backgroundFlow.Add(new TableRowBackground()));
+            rankings.ForEach(_ => backgroundFlow.Add(new TableRowBackground { Height = row_height }));
 
             Columns = mainHeaders.Concat(CreateAdditionalHeaders()).ToArray();
             Content = rankings.Select((s, i) => createContent((page - 1) * items_per_page + i, s)).ToArray().ToRectangular();
@@ -68,13 +70,19 @@ namespace osu.Game.Overlays.Rankings.Tables
 
         protected abstract Drawable[] CreateAdditionalContent(TModel item);
 
-        protected override Drawable CreateHeader(int index, TableColumn column) => new HeaderText(column?.Header ?? string.Empty, HighlightedColumn());
+        protected virtual string HighlightedColumn => @"Performance";
+
+        protected override Drawable CreateHeader(int index, TableColumn column)
+        {
+            var title = column?.Header ?? string.Empty;
+            return new HeaderText(title, title == HighlightedColumn);
+        }
 
         protected abstract Country GetCountry(TModel item);
 
         protected abstract Drawable CreateFlagContent(TModel item);
 
-        private OsuSpriteText createIndexDrawable(int index) => new OsuSpriteText
+        private OsuSpriteText createIndexDrawable(int index) => new RowText
         {
             Text = $"#{index + 1}",
             Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.SemiBold)
@@ -84,37 +92,36 @@ namespace osu.Game.Overlays.Rankings.Tables
         {
             AutoSizeAxes = Axes.Both,
             Direction = FillDirection.Horizontal,
-            Spacing = new Vector2(7, 0),
+            Spacing = new Vector2(10, 0),
+            Margin = new MarginPadding { Bottom = row_spacing },
             Children = new[]
             {
                 new UpdateableFlag(GetCountry(item))
                 {
-                    Size = new Vector2(20, 13),
+                    Size = new Vector2(30, 20),
                     ShowPlaceholderOnNull = false,
                 },
                 CreateFlagContent(item)
             }
         };
 
-        protected virtual string HighlightedColumn() => @"Performance";
+        protected class HeaderText : OsuSpriteText
-
-        private class HeaderText : OsuSpriteText
         {
-            private readonly string highlighted;
+            private readonly bool isHighlighted;
 
-            public HeaderText(string text, string highlighted)
+            public HeaderText(string text, bool isHighlighted)
             {
-                this.highlighted = highlighted;
+                this.isHighlighted = isHighlighted;
 
                 Text = text;
                 Font = OsuFont.GetFont(size: 12);
-                Margin = new MarginPadding { Horizontal = 10 };
+                Margin = new MarginPadding { Vertical = 5, Horizontal = 10 };
             }
 
             [BackgroundDependencyLoader]
             private void load(OverlayColourProvider colourProvider)
             {
-                if (Text != highlighted)
+                if (!isHighlighted)
                     Colour = colourProvider.Foreground1;
             }
         }
@@ -124,7 +131,7 @@ namespace osu.Game.Overlays.Rankings.Tables
             public RowText()
             {
                 Font = OsuFont.GetFont(size: TEXT_SIZE);
-                Margin = new MarginPadding { Horizontal = 10 };
+                Margin = new MarginPadding { Horizontal = 10, Bottom = row_spacing };
             }
         }
 

osu.Game/Overlays/Rankings/Tables/ScoresTable.cs

@@ -33,6 +33,6 @@ namespace osu.Game.Overlays.Rankings.Tables
             }
         };
 
-        protected override string HighlightedColumn() => @"Ranked Score";
+        protected override string HighlightedColumn => @"Ranked Score";
     }
 }

osu.Game/Overlays/Rankings/Tables/TableRowBackground.cs

@@ -1,4 +1,4 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// 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;
@@ -22,10 +22,10 @@ namespace osu.Game.Overlays.Rankings.Tables
         public TableRowBackground()
         {
             RelativeSizeAxes = Axes.X;
-            Height = 25;
 
-            CornerRadius = 3;
+            CornerRadius = 4;
             Masking = true;
+            MaskingSmoothness = 0.5f;
 
             InternalChild = background = new Box
             {

osu.Game/Overlays/Rankings/Tables/UserBasedTable.cs

@@ -19,22 +19,32 @@ namespace osu.Game.Overlays.Rankings.Tables
         {
         }
 
+        protected virtual IEnumerable<string> GradeColumns => new List<string> { "SS", "S", "A" };
+
         protected override TableColumn[] CreateAdditionalHeaders() => new[]
             {
                 new TableColumn("Accuracy", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
                 new TableColumn("Play Count", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
-        }.Concat(CreateUniqueHeaders()).Concat(new[]
+            }.Concat(CreateUniqueHeaders())
+             .Concat(GradeColumns.Select(grade => new TableColumn(grade, Anchor.Centre, new Dimension(GridSizeMode.AutoSize))))
+             .ToArray();
+
+        protected override Drawable CreateHeader(int index, TableColumn column)
         {
-            new TableColumn("SS", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
+            var title = column?.Header ?? string.Empty;
-            new TableColumn("S", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
+            return new UserTableHeaderText(title, HighlightedColumn == title, GradeColumns.Contains(title));
-            new TableColumn("A", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
+        }
-        }).ToArray();
 
         protected sealed override Country GetCountry(UserStatistics item) => item.User.Country;
 
         protected sealed override Drawable CreateFlagContent(UserStatistics item)
         {
-            var username = new LinkFlowContainer(t => t.Font = OsuFont.GetFont(size: TEXT_SIZE, italics: true)) { AutoSizeAxes = Axes.Both };
+            var username = new LinkFlowContainer(t => t.Font = OsuFont.GetFont(size: TEXT_SIZE, italics: true))
+            {
+                AutoSizeAxes = Axes.X,
+                RelativeSizeAxes = Axes.Y,
+                TextAnchor = Anchor.CentreLeft
+            };
             username.AddUserLink(item.User);
             return username;
         }
@@ -53,5 +63,19 @@ namespace osu.Game.Overlays.Rankings.Tables
         protected abstract TableColumn[] CreateUniqueHeaders();
 
         protected abstract Drawable[] CreateUniqueContent(UserStatistics item);
+
+        private class UserTableHeaderText : HeaderText
+        {
+            public UserTableHeaderText(string text, bool isHighlighted, bool isGrade)
+                : base(text, isHighlighted)
+            {
+                Margin = new MarginPadding
+                {
+                    // Grade columns have extra horizontal padding for readibility
+                    Horizontal = isGrade ? 20 : 10,
+                    Vertical = 5
+                };
+            }
+        }
     }
 }