Merge pull request #7719 from EVAST9919/beatmap-overlay-header

Update BeatmapOverlay header in line with the web design

osu.Game.Tests/Visual/Online/TestSceneBeatmapRulesetSelector.cs

@@ -5,6 +5,7 @@ using NUnit.Framework;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Beatmaps;
+using osu.Game.Overlays;
 using osu.Game.Overlays.BeatmapSet;
 using osu.Game.Rulesets;
 using System;
@@ -21,6 +22,9 @@ namespace osu.Game.Tests.Visual.Online
             typeof(BeatmapRulesetTabItem),
         };
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
+
         private readonly TestRulesetSelector selector;
 
         public TestSceneBeatmapRulesetSelector()

osu.Game/Overlays/BeatmapSet/BeatmapRulesetSelector.cs

@@ -2,17 +2,14 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Bindables;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Beatmaps;
 using osu.Game.Rulesets;
-using osuTK;
 using System.Linq;
 
 namespace osu.Game.Overlays.BeatmapSet
 {
-    public class BeatmapRulesetSelector : RulesetSelector
+    public class BeatmapRulesetSelector : OverlayRulesetSelector
     {
         private readonly Bindable<BeatmapSetInfo> beatmapSet = new Bindable<BeatmapSetInfo>();
 
@@ -28,21 +25,9 @@ namespace osu.Game.Overlays.BeatmapSet
             }
         }
 
-        public BeatmapRulesetSelector()
-        {
-            AutoSizeAxes = Axes.Both;
-        }
-
         protected override TabItem<RulesetInfo> CreateTabItem(RulesetInfo value) => new BeatmapRulesetTabItem(value)
         {
             BeatmapSet = { BindTarget = beatmapSet }
         };
-
-        protected override TabFillFlowContainer CreateTabFlow() => new TabFillFlowContainer
-        {
-            AutoSizeAxes = Axes.Both,
-            Direction = FillDirection.Horizontal,
-            Spacing = new Vector2(10, 0),
-        };
     }
 }

osu.Game/Overlays/BeatmapSet/BeatmapRulesetTabItem.cs

@@ -3,143 +3,74 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
-using osu.Framework.Graphics.UserInterface;
-using osu.Framework.Input.Events;
 using osu.Game.Beatmaps;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Rulesets;
-using osuTK;
-using osuTK.Graphics;
 using System.Linq;
 
 namespace osu.Game.Overlays.BeatmapSet
 {
-    public class BeatmapRulesetTabItem : TabItem<RulesetInfo>
+    public class BeatmapRulesetTabItem : OverlayRulesetTabItem
     {
-        private readonly OsuSpriteText name, count;
-        private readonly Box bar;
-
         public readonly Bindable<BeatmapSetInfo> BeatmapSet = new Bindable<BeatmapSetInfo>();
 
-        public override bool PropagatePositionalInputSubTree => Enabled.Value && !Active.Value && base.PropagatePositionalInputSubTree;
+        [Resolved]
+        private OverlayColourProvider colourProvider { get; set; }
+
+        private OsuSpriteText count;
+        private Container countContainer;
 
         public BeatmapRulesetTabItem(RulesetInfo value)
             : base(value)
         {
-            AutoSizeAxes = Axes.Both;
+        }
 
-            FillFlowContainer nameContainer;
+        [BackgroundDependencyLoader]
-
+        private void load()
-            Children = new Drawable[]
+        {
+            Add(countContainer = new Container
             {
-                nameContainer = new FillFlowContainer
+                AutoSizeAxes = Axes.Both,
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Masking = true,
+                CornerRadius = 4f,
+                Children = new Drawable[]
                 {
-                    Anchor = Anchor.Centre,
+                    new Box
-                    Origin = Anchor.Centre,
-                    AutoSizeAxes = Axes.Both,
-                    Direction = FillDirection.Horizontal,
-                    Margin = new MarginPadding { Bottom = 7.5f },
-                    Spacing = new Vector2(2.5f),
-                    Children = new Drawable[]
                     {
-                        name = new OsuSpriteText
+                        RelativeSizeAxes = Axes.Both,
-                        {
+                        Colour = colourProvider.Background6
-                            Anchor = Anchor.Centre,
+                    },
-                            Origin = Anchor.Centre,
+                    count = new OsuSpriteText
-                            Text = value.Name,
+                    {
-                            Font = OsuFont.Default.With(size: 18),
+                        Anchor = Anchor.Centre,
-                        },
+                        Origin = Anchor.Centre,
-                        new Container
+                        Margin = new MarginPadding { Horizontal = 5f },
-                        {
+                        Font = OsuFont.Default.With(weight: FontWeight.SemiBold),
-                            Anchor = Anchor.Centre,
+                        Colour = colourProvider.Foreground1,
-                            Origin = Anchor.Centre,
-                            AutoSizeAxes = Axes.Both,
-                            Masking = true,
-                            CornerRadius = 4f,
-                            Children = new Drawable[]
-                            {
-                                new Box
-                                {
-                                    RelativeSizeAxes = Axes.Both,
-                                    Colour = Color4.Black.Opacity(0.5f),
-                                },
-                                count = new OsuSpriteText
-                                {
-                                    Alpha = 0,
-                                    Anchor = Anchor.Centre,
-                                    Origin = Anchor.Centre,
-                                    Margin = new MarginPadding { Horizontal = 5f },
-                                    Font = OsuFont.Default.With(weight: FontWeight.SemiBold),
-                                }
-                            }
-                        }
                     }
-                },
+                }
-                bar = new Box
+            });
-                {
+        }
-                    Anchor = Anchor.BottomCentre,
+
-                    Origin = Anchor.BottomCentre,
+        protected override void LoadComplete()
-                    RelativeSizeAxes = Axes.X,
+        {
-                },
+            base.LoadComplete();
-                new HoverClickSounds(),
-            };
 
             BeatmapSet.BindValueChanged(setInfo =>
             {
                 var beatmapsCount = setInfo.NewValue?.Beatmaps.Count(b => b.Ruleset.Equals(Value)) ?? 0;
 
                 count.Text = beatmapsCount.ToString();
-                count.Alpha = beatmapsCount > 0 ? 1f : 0f;
+                countContainer.FadeTo(beatmapsCount > 0 ? 1 : 0);
 
                 Enabled.Value = beatmapsCount > 0;
             }, true);
-
-            Enabled.BindValueChanged(v => nameContainer.Alpha = v.NewValue ? 1f : 0.5f, true);
         }
-
-        [Resolved]
-        private OsuColour colour { get; set; }
-
-        protected override void LoadComplete()
-        {
-            base.LoadComplete();
-
-            count.Colour = colour.Gray9;
-            bar.Colour = colour.Blue;
-
-            updateState();
-        }
-
-        private void updateState()
-        {
-            var isHoveredOrActive = IsHovered || Active.Value;
-
-            bar.ResizeHeightTo(isHoveredOrActive ? 4 : 0, 200, Easing.OutQuint);
-
-            name.Colour = isHoveredOrActive ? colour.GrayE : colour.GrayC;
-            name.Font = name.Font.With(weight: Active.Value ? FontWeight.Bold : FontWeight.Regular);
-        }
-
-        #region Hovering and activation logic
-
-        protected override void OnActivated() => updateState();
-
-        protected override void OnDeactivated() => updateState();
-
-        protected override bool OnHover(HoverEvent e)
-        {
-            updateState();
-            return false;
-        }
-
-        protected override void OnHoverLost(HoverLostEvent e) => updateState();
-
-        #endregion
     }
 }

osu.Game/Overlays/BeatmapSet/BeatmapSetHeader.cs

@@ -0,0 +1,35 @@
+// 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.Bindables;
+using osu.Framework.Graphics;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Rulesets;
+
+namespace osu.Game.Overlays.BeatmapSet
+{
+    public class BeatmapSetHeader : OverlayHeader
+    {
+        public readonly Bindable<RulesetInfo> Ruleset = new Bindable<RulesetInfo>();
+
+        public BeatmapRulesetSelector RulesetSelector { get; private set; }
+
+        protected override ScreenTitle CreateTitle() => new BeatmapHeaderTitle();
+
+        protected override Drawable CreateTitleContent() => RulesetSelector = new BeatmapRulesetSelector
+        {
+            Current = Ruleset
+        };
+
+        private class BeatmapHeaderTitle : ScreenTitle
+        {
+            public BeatmapHeaderTitle()
+            {
+                Title = @"beatmap";
+                Section = @"info";
+            }
+
+            protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/changelog");
+        }
+    }
+}

osu.Game/Overlays/BeatmapSet/Header.cs

@@ -26,11 +26,9 @@ namespace osu.Game.Overlays.BeatmapSet
     public class Header : BeatmapDownloadTrackingComposite
     {
         private const float transition_duration = 200;
-        private const float tabs_height = 50;
         private const float buttons_height = 45;
         private const float buttons_spacing = 5;
 
-        private readonly Box tabsBg;
         private readonly UpdateableBeatmapSetCover cover;
         private readonly OsuSpriteText title, artist;
         private readonly AuthorInfo author;
@@ -41,14 +39,13 @@ namespace osu.Game.Overlays.BeatmapSet
 
         public bool DownloadButtonsVisible => downloadButtonsContainer.Any();
 
-        public readonly BeatmapRulesetSelector RulesetSelector;
+        public BeatmapRulesetSelector RulesetSelector => beatmapSetHeader.RulesetSelector;
         public readonly BeatmapPicker Picker;
 
         private readonly FavouriteButton favouriteButton;
-
         private readonly FillFlowContainer fadeContent;
-
         private readonly LoadingAnimation loading;
+        private readonly BeatmapSetHeader beatmapSetHeader;
 
         [Cached(typeof(IBindable<RulesetInfo>))]
         private readonly Bindable<RulesetInfo> ruleset = new Bindable<RulesetInfo>();
@@ -69,154 +66,145 @@ namespace osu.Game.Overlays.BeatmapSet
                 Offset = new Vector2(0f, 1f),
             };
 
-            InternalChildren = new Drawable[]
+            InternalChild = new FillFlowContainer
             {
-                new Container
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Vertical,
+                Children = new Drawable[]
                 {
-                    RelativeSizeAxes = Axes.X,
+                    beatmapSetHeader = new BeatmapSetHeader
-                    Height = tabs_height,
-                    Children = new Drawable[]
                     {
-                        tabsBg = new Box
+                        Ruleset = { BindTarget = ruleset },
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                        },
-                        RulesetSelector = new BeatmapRulesetSelector
-                        {
-                            Current = ruleset,
-                            Anchor = Anchor.BottomCentre,
-                            Origin = Anchor.BottomCentre,
-                        }
                     },
-                },
+                    new Container
-                new Container
-                {
-                    RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y,
-                    Padding = new MarginPadding { Top = tabs_height },
-                    Children = new Drawable[]
                     {
-                        new Container
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Children = new Drawable[]
                         {
-                            RelativeSizeAxes = Axes.Both,
+                            new Container
-                            Children = new Drawable[]
                             {
-                                cover = new UpdateableBeatmapSetCover
+                                RelativeSizeAxes = Axes.Both,
+                                Children = new Drawable[]
                                 {
-                                    RelativeSizeAxes = Axes.Both,
+                                    cover = new UpdateableBeatmapSetCover
-                                    Masking = true,
-                                },
-                                new Box
-                                {
-                                    RelativeSizeAxes = Axes.Both,
-                                    Colour = ColourInfo.GradientVertical(Color4.Black.Opacity(0.3f), Color4.Black.Opacity(0.8f)),
-                                },
-                            },
-                        },
-                        new Container
-                        {
-                            RelativeSizeAxes = Axes.X,
-                            AutoSizeAxes = Axes.Y,
-                            Padding = new MarginPadding
-                            {
-                                Top = 20,
-                                Bottom = 30,
-                                Left = BeatmapSetOverlay.X_PADDING,
-                                Right = BeatmapSetOverlay.X_PADDING + BeatmapSetOverlay.RIGHT_WIDTH,
-                            },
-                            Children = new Drawable[]
-                            {
-                                fadeContent = new FillFlowContainer
-                                {
-                                    RelativeSizeAxes = Axes.X,
-                                    AutoSizeAxes = Axes.Y,
-                                    Direction = FillDirection.Vertical,
-                                    Children = new Drawable[]
                                     {
-                                        new Container
+                                        RelativeSizeAxes = Axes.Both,
+                                        Masking = true,
+                                    },
+                                    new Box
+                                    {
+                                        RelativeSizeAxes = Axes.Both,
+                                        Colour = ColourInfo.GradientVertical(Color4.Black.Opacity(0.3f), Color4.Black.Opacity(0.8f)),
+                                    },
+                                },
+                            },
+                            new Container
+                            {
+                                RelativeSizeAxes = Axes.X,
+                                AutoSizeAxes = Axes.Y,
+                                Padding = new MarginPadding
+                                {
+                                    Top = 20,
+                                    Bottom = 30,
+                                    Left = BeatmapSetOverlay.X_PADDING,
+                                    Right = BeatmapSetOverlay.X_PADDING + BeatmapSetOverlay.RIGHT_WIDTH,
+                                },
+                                Children = new Drawable[]
+                                {
+                                    fadeContent = new FillFlowContainer
+                                    {
+                                        RelativeSizeAxes = Axes.X,
+                                        AutoSizeAxes = Axes.Y,
+                                        Direction = FillDirection.Vertical,
+                                        Children = new Drawable[]
                                         {
-                                            RelativeSizeAxes = Axes.X,
+                                            new Container
-                                            AutoSizeAxes = Axes.Y,
-                                            Child = Picker = new BeatmapPicker(),
-                                        },
-                                        new FillFlowContainer
-                                        {
-                                            Direction = FillDirection.Horizontal,
-                                            AutoSizeAxes = Axes.Both,
-                                            Children = new Drawable[]
                                             {
-                                                title = new OsuSpriteText
+                                                RelativeSizeAxes = Axes.X,
-                                                {
+                                                AutoSizeAxes = Axes.Y,
-                                                    Font = OsuFont.GetFont(size: 37, weight: FontWeight.Bold, italics: true)
+                                                Child = Picker = new BeatmapPicker(),
-                                                },
+                                            },
-                                                externalLink = new ExternalLinkButton
+                                            new FillFlowContainer
-                                                {
-                                                    Anchor = Anchor.BottomLeft,
-                                                    Origin = Anchor.BottomLeft,
-                                                    Margin = new MarginPadding { Left = 3, Bottom = 4 }, //To better lineup with the font
-                                                },
-                                            }
-                                        },
-                                        artist = new OsuSpriteText { Font = OsuFont.GetFont(size: 25, weight: FontWeight.SemiBold, italics: true) },
-                                        new Container
-                                        {
-                                            RelativeSizeAxes = Axes.X,
-                                            AutoSizeAxes = Axes.Y,
-                                            Margin = new MarginPadding { Top = 20 },
-                                            Child = author = new AuthorInfo(),
-                                        },
-                                        beatmapAvailability = new BeatmapAvailability(),
-                                        new Container
-                                        {
-                                            RelativeSizeAxes = Axes.X,
-                                            Height = buttons_height,
-                                            Margin = new MarginPadding { Top = 10 },
-                                            Children = new Drawable[]
                                             {
-                                                favouriteButton = new FavouriteButton
+                                                Direction = FillDirection.Horizontal,
+                                                AutoSizeAxes = Axes.Both,
+                                                Children = new Drawable[]
                                                 {
-                                                    BeatmapSet = { BindTarget = BeatmapSet }
+                                                    title = new OsuSpriteText
-                                                },
+                                                    {
-                                                downloadButtonsContainer = new FillFlowContainer
+                                                        Font = OsuFont.GetFont(size: 37, weight: FontWeight.Bold, italics: true)
+                                                    },
+                                                    externalLink = new ExternalLinkButton
+                                                    {
+                                                        Anchor = Anchor.BottomLeft,
+                                                        Origin = Anchor.BottomLeft,
+                                                        Margin = new MarginPadding { Left = 3, Bottom = 4 }, //To better lineup with the font
+                                                    },
+                                                }
+                                            },
+                                            artist = new OsuSpriteText { Font = OsuFont.GetFont(size: 25, weight: FontWeight.SemiBold, italics: true) },
+                                            new Container
+                                            {
+                                                RelativeSizeAxes = Axes.X,
+                                                AutoSizeAxes = Axes.Y,
+                                                Margin = new MarginPadding { Top = 20 },
+                                                Child = author = new AuthorInfo(),
+                                            },
+                                            beatmapAvailability = new BeatmapAvailability(),
+                                            new Container
+                                            {
+                                                RelativeSizeAxes = Axes.X,
+                                                Height = buttons_height,
+                                                Margin = new MarginPadding { Top = 10 },
+                                                Children = new Drawable[]
                                                 {
-                                                    RelativeSizeAxes = Axes.Both,
+                                                    favouriteButton = new FavouriteButton
-                                                    Padding = new MarginPadding { Left = buttons_height + buttons_spacing },
+                                                    {
-                                                    Spacing = new Vector2(buttons_spacing),
+                                                        BeatmapSet = { BindTarget = BeatmapSet }
+                                                    },
+                                                    downloadButtonsContainer = new FillFlowContainer
+                                                    {
+                                                        RelativeSizeAxes = Axes.Both,
+                                                        Padding = new MarginPadding { Left = buttons_height + buttons_spacing },
+                                                        Spacing = new Vector2(buttons_spacing),
+                                                    },
                                                 },
                                             },
                                         },
                                     },
-                                },
+                                }
-                            }
+                            },
-                        },
+                            loading = new LoadingAnimation
-                        loading = new LoadingAnimation
-                        {
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                            Scale = new Vector2(1.5f),
-                        },
-                        new FillFlowContainer
-                        {
-                            Anchor = Anchor.BottomRight,
-                            Origin = Anchor.BottomRight,
-                            AutoSizeAxes = Axes.Both,
-                            Margin = new MarginPadding { Top = BeatmapSetOverlay.TOP_PADDING, Right = BeatmapSetOverlay.X_PADDING },
-                            Direction = FillDirection.Vertical,
-                            Spacing = new Vector2(10),
-                            Children = new Drawable[]
                             {
-                                onlineStatusPill = new BeatmapSetOnlineStatusPill
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                Scale = new Vector2(1.5f),
+                            },
+                            new FillFlowContainer
+                            {
+                                Anchor = Anchor.BottomRight,
+                                Origin = Anchor.BottomRight,
+                                AutoSizeAxes = Axes.Both,
+                                Margin = new MarginPadding { Top = BeatmapSetOverlay.TOP_PADDING, Right = BeatmapSetOverlay.X_PADDING },
+                                Direction = FillDirection.Vertical,
+                                Spacing = new Vector2(10),
+                                Children = new Drawable[]
                                 {
-                                    Anchor = Anchor.TopRight,
+                                    onlineStatusPill = new BeatmapSetOnlineStatusPill
-                                    Origin = Anchor.TopRight,
+                                    {
-                                    TextSize = 14,
+                                        Anchor = Anchor.TopRight,
-                                    TextPadding = new MarginPadding { Horizontal = 25, Vertical = 8 }
+                                        Origin = Anchor.TopRight,
+                                        TextSize = 14,
+                                        TextPadding = new MarginPadding { Horizontal = 25, Vertical = 8 }
+                                    },
+                                    Details = new Details(),
                                 },
-                                Details = new Details(),
                             },
                         },
                     },
-                },
+                }
             };
 
             Picker.Beatmap.ValueChanged += b =>
@@ -229,8 +217,6 @@ namespace osu.Game.Overlays.BeatmapSet
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            tabsBg.Colour = colours.Gray3;
-
             State.BindValueChanged(_ => updateDownloadButtons());
 
             BeatmapSet.BindValueChanged(setInfo =>

osu.Game/Overlays/OverlayRulesetTabItem.cs

@@ -61,12 +61,14 @@ namespace osu.Game.Overlays
             Enabled.Value = true;
         }
 
-        [BackgroundDependencyLoader]
+        protected override void LoadComplete()
-        private void load()
         {
-            updateState();
+            base.LoadComplete();
+            Enabled.BindValueChanged(_ => updateState(), true);
         }
 
+        public override bool PropagatePositionalInputSubTree => Enabled.Value && !Active.Value && base.PropagatePositionalInputSubTree;
+
         protected override bool OnHover(HoverEvent e)
         {
             base.OnHover(e);
@@ -87,7 +89,9 @@ namespace osu.Game.Overlays
         private void updateState()
         {
             text.Font = text.Font.With(weight: Active.Value ? FontWeight.Bold : FontWeight.Medium);
-            AccentColour = IsHovered || Active.Value ? Color4.White : colourProvider.Highlight1;
+            AccentColour = Enabled.Value ? getActiveColour() : colourProvider.Foreground1;
         }
+
+        private Color4 getActiveColour() => IsHovered || Active.Value ? Color4.White : colourProvider.Highlight1;
     }
 }