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,63 +3,40 @@
 
 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[]
         {
-                nameContainer = new FillFlowContainer
+            Add(countContainer = new Container
             {
-                    Anchor = Anchor.Centre,
-                    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
-                        {
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,
-                            Text = value.Name,
-                            Font = OsuFont.Default.With(size: 18),
-                        },
-                        new Container
-                        {
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                            AutoSizeAxes = Axes.Both,
                 Masking = true,
                 CornerRadius = 4f,
                 Children = new Drawable[]
@@ -67,79 +44,33 @@ namespace osu.Game.Overlays.BeatmapSet
                     new Box
                     {
                         RelativeSizeAxes = Axes.Both,
-                                    Colour = Color4.Black.Opacity(0.5f),
+                        Colour = colourProvider.Background6
                     },
                     count = new OsuSpriteText
                     {
-                                    Alpha = 0,
                         Anchor = Anchor.Centre,
                         Origin = Anchor.Centre,
                         Margin = new MarginPadding { Horizontal = 5f },
                         Font = OsuFont.Default.With(weight: FontWeight.SemiBold),
+                        Colour = colourProvider.Foreground1,
                     }
                 }
+            });
         }
-                    }
+
-                },
+        protected override void LoadComplete()
-                bar = new Box
         {
-                    Anchor = Anchor.BottomCentre,
+            base.LoadComplete();
-                    Origin = Anchor.BottomCentre,
-                    RelativeSizeAxes = Axes.X,
-                },
-                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,31 +66,21 @@ namespace osu.Game.Overlays.BeatmapSet
                 Offset = new Vector2(0f, 1f),
             };
 
-            InternalChildren = new Drawable[]
+            InternalChild = new FillFlowContainer
-            {
-                new Container
             {
                 RelativeSizeAxes = Axes.X,
-                    Height = tabs_height,
+                AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Vertical,
                 Children = new Drawable[]
                 {
-                        tabsBg = new Box
+                    beatmapSetHeader = new BeatmapSetHeader
                     {
-                            RelativeSizeAxes = Axes.Both,
+                        Ruleset = { BindTarget = ruleset },
-                        },
-                        RulesetSelector = new BeatmapRulesetSelector
-                        {
-                            Current = ruleset,
-                            Anchor = Anchor.BottomCentre,
-                            Origin = Anchor.BottomCentre,
-                        }
-                    },
                     },
                     new Container
                     {
                         RelativeSizeAxes = Axes.X,
                         AutoSizeAxes = Axes.Y,
-                    Padding = new MarginPadding { Top = tabs_height },
                         Children = new Drawable[]
                         {
                             new Container
@@ -217,6 +204,7 @@ namespace osu.Game.Overlays.BeatmapSet
                             },
                         },
                     },
+                }
             };
 
             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;
     }
 }