Adjust font sizes and spacing in BeatmapSetOverlay

2025-08-04 15:16:38 +09:00 · 2020-02-16 21:43:33 +01:00
parent 8fcd5e93dd
commit 4d180a685a
18 changed files with 102 additions and 97 deletions
--- a/osu.Game/Overlays/BeatmapSet/Scores/DrawableTopScore.cs
+++ b/osu.Game/Overlays/BeatmapSet/Scores/DrawableTopScore.cs
@ -23,7 +23,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
            AutoSizeAxes = Axes.Y;

            Masking = true;
-            CornerRadius = 5;
+            CornerRadius = 4;
            EdgeEffect = new EdgeEffectParameters
            {
                Type = EdgeEffectType.Shadow,
@ -46,7 +46,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                    {
                        Vertical = 10,
                        Left = 10,
-                        Right = 25,
+                        Right = 30,
                    },
                    Children = new Drawable[]
                    {
--- a/osu.Game/Overlays/BeatmapSet/Scores/NotSupporterPlaceholder.cs
+++ b/osu.Game/Overlays/BeatmapSet/Scores/NotSupporterPlaceholder.cs
@ -21,7 +21,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
            {
                AutoSizeAxes = Axes.Both,
                Direction = FillDirection.Vertical,
-                Spacing = new Vector2(0, 10),
+                Spacing = new Vector2(0, 20),
                Children = new Drawable[]
                {
                    new OsuSpriteText
@ -29,9 +29,9 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                        Anchor = Anchor.TopCentre,
                        Origin = Anchor.TopCentre,
                        Text = @"You need to be an osu!supporter to access the friend and country rankings!",
-                        Font = OsuFont.GetFont(weight: FontWeight.Bold),
+                        Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold),
                    },
-                    text = new LinkFlowContainer(t => t.Font = t.Font.With(size: 12))
+                    text = new LinkFlowContainer(t => t.Font = t.Font.With(size: 11))
                    {
                        Anchor = Anchor.TopCentre,
                        Origin = Anchor.TopCentre,
--- a/osu.Game/Overlays/BeatmapSet/Scores/ScoreTable.cs
+++ b/osu.Game/Overlays/BeatmapSet/Scores/ScoreTable.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;
@ -22,7 +22,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
    public class ScoreTable : TableContainer
    {
        private const float horizontal_inset = 20;
-        private const float row_height = 25;
+        private const float row_height = 22;
        private const int text_size = 12;

        private readonly FillFlowContainer backgroundFlow;
@ -63,7 +63,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                    return;

                for (int i = 0; i < value.Count; i++)
-                    backgroundFlow.Add(new ScoreTableRowBackground(i, value[i]));
+                    backgroundFlow.Add(new ScoreTableRowBackground(i, value[i], row_height));

                Columns = createHeaders(value[0]);
                Content = value.Select((s, i) => createContent(i, s)).ToArray().ToRectangular();
@ -99,6 +99,9 @@ namespace osu.Game.Overlays.BeatmapSet.Scores

        private Drawable[] createContent(int index, ScoreInfo score)
        {
+            var username = new LinkFlowContainer(t => t.Font = OsuFont.GetFont(size: text_size)) { AutoSizeAxes = Axes.Both };
+            username.AddUserLink(score.User);
+
            var content = new List<Drawable>
            {
                new OsuSpriteText
@ -108,7 +111,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                },
                new UpdateableRank(score.Rank)
                {
-                    Size = new Vector2(30, 20)
+                    Size = new Vector2(28, 14)
                },
                new OsuSpriteText
                {
@ -123,35 +126,18 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                    Font = OsuFont.GetFont(size: text_size),
                    Colour = score.Accuracy == 1 ? highAccuracyColour : Color4.White
                },
-            };
-
-            var username = new LinkFlowContainer(t => t.Font = OsuFont.GetFont(size: text_size)) { AutoSizeAxes = Axes.Both };
-            username.AddUserLink(score.User);
-
-            content.AddRange(new Drawable[]
-            {
-                new FillFlowContainer
+                new UpdateableFlag(score.User.Country)
                {
-                    AutoSizeAxes = Axes.Both,
-                    Direction = FillDirection.Horizontal,
-                    Margin = new MarginPadding { Right = horizontal_inset },
-                    Spacing = new Vector2(5, 0),
-                    Children = new Drawable[]
-                    {
-                        new UpdateableFlag(score.User.Country)
-                        {
-                            Size = new Vector2(20, 13),
-                            ShowPlaceholderOnNull = false,
-                        },
-                        username
-                    }
+                    Size = new Vector2(19, 13),
+                    ShowPlaceholderOnNull = false,
                },
+                username,
                new OsuSpriteText
                {
                    Text = $@"{score.MaxCombo:N0}x",
                    Font = OsuFont.GetFont(size: text_size)
                }
-            });
+            };

            foreach (var kvp in score.SortedStatistics)
            {
--- a/osu.Game/Overlays/BeatmapSet/Scores/ScoreTableRowBackground.cs
+++ b/osu.Game/Overlays/BeatmapSet/Scores/ScoreTableRowBackground.cs
@ -22,13 +22,13 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
        private readonly int index;
        private readonly ScoreInfo score;

-        public ScoreTableRowBackground(int index, ScoreInfo score)
+        public ScoreTableRowBackground(int index, ScoreInfo score, float height)
        {
            this.index = index;
            this.score = score;

            RelativeSizeAxes = Axes.X;
-            Height = 25;
+            Height = height;

            CornerRadius = 5;
            Masking = true;
--- a/osu.Game/Overlays/BeatmapSet/Scores/ScoresContainer.cs
+++ b/osu.Game/Overlays/BeatmapSet/Scores/ScoresContainer.cs
@ -90,9 +90,9 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                    Origin = Anchor.TopCentre,
                    RelativeSizeAxes = Axes.X,
                    AutoSizeAxes = Axes.Y,
-                    Width = 0.95f,
                    Direction = FillDirection.Vertical,
-                    Margin = new MarginPadding { Vertical = spacing },
+                    Padding = new MarginPadding { Horizontal = 50 },
+                    Margin = new MarginPadding { Vertical = 20 },
                    Children = new Drawable[]
                    {
                        new FillFlowContainer
@ -121,7 +121,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                        {
                            AutoSizeAxes = Axes.Y,
                            RelativeSizeAxes = Axes.X,
-                            Margin = new MarginPadding { Vertical = spacing },
+                            Margin = new MarginPadding { Top = spacing },
                            Children = new Drawable[]
                            {
                                noScoresPlaceholder = new NoScoresPlaceholder
--- a/osu.Game/Overlays/BeatmapSet/Scores/TopScoreStatisticsSection.cs
+++ b/osu.Game/Overlays/BeatmapSet/Scores/TopScoreStatisticsSection.cs
@ -27,7 +27,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
        private const float bottom_columns_min_width = 45;

        private readonly FontUsage smallFont = OsuFont.GetFont(size: 16);
-        private readonly FontUsage largeFont = OsuFont.GetFont(size: 22);
+        private readonly FontUsage largeFont = OsuFont.GetFont(size: 22, weight: FontWeight.Light);

        private readonly TextColumn totalScoreColumn;
        private readonly TextColumn accuracyColumn;
@ -47,7 +47,6 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                RelativeSizeAxes = Axes.X,
                AutoSizeAxes = Axes.Y,
                Direction = FillDirection.Vertical,
-                Spacing = new Vector2(10, 8),
                Children = new Drawable[]
                {
                    new FillFlowContainer
@ -117,6 +116,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
            public InfoColumn(string title, Drawable content, float? minWidth = null)
            {
                AutoSizeAxes = Axes.Both;
+                Margin = new MarginPadding { Vertical = 5 };

                InternalChild = new GridContainer
                {
@ -128,7 +128,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                    RowDimensions = new[]
                    {
                        new Dimension(GridSizeMode.AutoSize),
-                        new Dimension(GridSizeMode.Absolute, 4),
+                        new Dimension(GridSizeMode.Absolute, 2),
                        new Dimension(GridSizeMode.AutoSize)
                    },
                    Content = new[]
@ -138,21 +138,24 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                            text = new OsuSpriteText
                            {
                                Font = OsuFont.GetFont(size: 10, weight: FontWeight.Bold),
-                                Text = title.ToUpper()
+                                Text = title.ToUpper(),
+                                // 2px padding bottom + 1px vertical to compensate for the additional spacing because of 1.25 line-height in osu-web
+                                Padding = new MarginPadding { Top = 1, Bottom = 3 }
                            }
                        },
                        new Drawable[]
                        {
                            separator = new Box
                            {
-                                Anchor = Anchor.CentreLeft,
+                                Anchor = Anchor.TopLeft,
                                RelativeSizeAxes = Axes.X,
-                                Height = 2
-                            }
+                                Height = 2,
+                            },
                        },
                        new[]
                        {
-                            content
+                            // osu-web has 4px margin here but also uses 0.9 line-height, reducing margin to 2px seems like a good alternative to that
+                            content.With(c => c.Margin = new MarginPadding { Top = 2 })
                        }
                    }
                };
@ -194,9 +197,10 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
            public ModsInfoColumn()
                : this(new FillFlowContainer
                {
-                    AutoSizeAxes = Axes.Both,
+                    AutoSizeAxes = Axes.X,
                    Direction = FillDirection.Horizontal,
                    Spacing = new Vector2(1),
+                    Height = 18f
                })
            {
            }
--- a/osu.Game/Overlays/BeatmapSet/Scores/TopScoreUserSection.cs
+++ b/osu.Game/Overlays/BeatmapSet/Scores/TopScoreUserSection.cs
@ -67,7 +67,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                        Origin = Anchor.Centre,
                        Size = new Vector2(70),
                        Masking = true,
-                        CornerRadius = 5,
+                        CornerRadius = 4,
                        EdgeEffect = new EdgeEffectParameters
                        {
                            Type = EdgeEffectType.Shadow,