Merge pull request #18413 from peppy/editor-bottom-bar-new-design

Update bottom bar components to new design language

osu.Game.Tests/Visual/Editing/TestSceneEditorClock.cs

@@ -2,10 +2,13 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using NUnit.Framework;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Rulesets.Osu;
+using osu.Game.Screens.Edit;
 using osu.Game.Screens.Edit.Components;
+using osu.Game.Tests.Beatmaps;
 using osuTK;
 
 namespace osu.Game.Tests.Visual.Editing
@@ -13,6 +16,9 @@ namespace osu.Game.Tests.Visual.Editing
     [TestFixture]
     public class TestSceneEditorClock : EditorClockTestScene
     {
+        [Cached]
+        private EditorBeatmap editorBeatmap = new EditorBeatmap(new TestBeatmap(new OsuRuleset().RulesetInfo));
+
         public TestSceneEditorClock()
         {
             Add(new FillFlowContainer

osu.Game.Tests/Visual/Editing/TestScenePlaybackControl.cs

@@ -12,7 +12,7 @@ using osuTK;
 namespace osu.Game.Tests.Visual.Editing
 {
     [TestFixture]
-    public class TestScenePlaybackControl : OsuTestScene
+    public class TestScenePlaybackControl : EditorClockTestScene
     {
         [BackgroundDependencyLoader]
         private void load()

osu.Game/Screens/Edit/BottomBar.cs

@@ -0,0 +1,70 @@
+// 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;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Overlays;
+using osu.Game.Screens.Edit.Components;
+using osu.Game.Screens.Edit.Components.Timelines.Summary;
+using osuTK;
+
+namespace osu.Game.Screens.Edit
+{
+    internal class BottomBar : CompositeDrawable
+    {
+        public TestGameplayButton TestGameplayButton { get; private set; }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider, Editor editor)
+        {
+            Anchor = Anchor.BottomLeft;
+            Origin = Anchor.BottomLeft;
+
+            RelativeSizeAxes = Axes.X;
+
+            Height = 60;
+
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = colourProvider.Background4,
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Child = new GridContainer
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        ColumnDimensions = new[]
+                        {
+                            new Dimension(GridSizeMode.Absolute, 170),
+                            new Dimension(),
+                            new Dimension(GridSizeMode.Absolute, 220),
+                            new Dimension(GridSizeMode.Absolute, 120),
+                        },
+                        Content = new[]
+                        {
+                            new Drawable[]
+                            {
+                                new TimeInfoContainer { RelativeSizeAxes = Axes.Both },
+                                new SummaryTimeline { RelativeSizeAxes = Axes.Both },
+                                new PlaybackControl { RelativeSizeAxes = Axes.Both },
+                                TestGameplayButton = new TestGameplayButton
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                    Padding = new MarginPadding { Left = 10 },
+                                    Size = new Vector2(1),
+                                    Action = editor.TestGameplay,
+                                }
+                            },
+                        }
+                    },
+                }
+            };
+        }
+    }
+}

osu.Game/Screens/Edit/Components/BottomBarContainer.cs

@@ -8,20 +8,19 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Beatmaps;
-using osu.Game.Graphics;
+using osuTK.Graphics;
 
 namespace osu.Game.Screens.Edit.Components
 {
     public class BottomBarContainer : Container
     {
-        private const float corner_radius = 5;
         private const float contents_padding = 15;
 
         protected readonly IBindable<WorkingBeatmap> Beatmap = new Bindable<WorkingBeatmap>();
 
         protected readonly IBindable<Track> Track = new Bindable<Track>();
 
-        private readonly Drawable background;
+        protected readonly Drawable Background;
         private readonly Container content;
 
         protected override Container<Drawable> Content => content;
@@ -29,11 +28,14 @@ namespace osu.Game.Screens.Edit.Components
         public BottomBarContainer()
         {
             Masking = true;
-            CornerRadius = corner_radius;
 
             InternalChildren = new[]
             {
-                background = new Box { RelativeSizeAxes = Axes.Both },
+                Background = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = Color4.Transparent,
+                },
                 content = new Container
                 {
                     RelativeSizeAxes = Axes.Both,
@@ -43,12 +45,10 @@ namespace osu.Game.Screens.Edit.Components
         }
 
         [BackgroundDependencyLoader]
-        private void load(IBindable<WorkingBeatmap> beatmap, OsuColour colours, EditorClock clock)
+        private void load(IBindable<WorkingBeatmap> beatmap, EditorClock clock)
         {
             Beatmap.BindTo(beatmap);
             Track.BindTo(clock.Track);
-
-            background.Colour = colours.Gray1;
         }
     }
 }

osu.Game/Screens/Edit/Components/PlaybackControl.cs

@@ -16,6 +16,7 @@ using osu.Framework.Input.Events;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
 using osuTK.Input;
 
 namespace osu.Game.Screens.Edit.Components
@@ -155,10 +156,10 @@ namespace osu.Game.Screens.Edit.Components
                 private Color4 normalColour;
 
                 [BackgroundDependencyLoader]
-                private void load(OsuColour colours)
+                private void load(OverlayColourProvider colourProvider)
                 {
-                    text.Colour = normalColour = colours.YellowDarker;
+                    text.Colour = normalColour = colourProvider.Light3;
-                    textBold.Colour = hoveredColour = colours.Yellow;
+                    textBold.Colour = hoveredColour = colourProvider.Content1;
                 }
 
                 protected override bool OnHover(HoverEvent e)

osu.Game/Screens/Edit/Components/TimeInfoContainer.cs

@@ -6,28 +6,43 @@ using osu.Game.Graphics.Sprites;
 using osu.Framework.Allocation;
 using osu.Game.Extensions;
 using osu.Game.Graphics;
+using osu.Game.Overlays;
+using osuTK;
 
 namespace osu.Game.Screens.Edit.Components
 {
     public class TimeInfoContainer : BottomBarContainer
     {
-        private readonly OsuSpriteText trackTimer;
+        private OsuSpriteText trackTimer;
+        private OsuSpriteText bpm;
+
+        [Resolved]
+        private EditorBeatmap editorBeatmap { get; set; }
 
         [Resolved]
         private EditorClock editorClock { get; set; }
 
-        public TimeInfoContainer()
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours, OverlayColourProvider colourProvider)
         {
+            Background.Colour = colourProvider.Background5;
+
             Children = new Drawable[]
             {
                 trackTimer = new OsuSpriteText
                 {
-                    Anchor = Anchor.CentreRight,
+                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreRight,
+                    Origin = Anchor.CentreLeft,
-                    // intentionally fudged centre to avoid movement of the number portion when
+                    Spacing = new Vector2(-2, 0),
-                    // going negative.
+                    Font = OsuFont.Torus.With(size: 36, fixedWidth: true, weight: FontWeight.Light),
-                    X = -35,
+                    Y = -10,
-                    Font = OsuFont.GetFont(size: 25, fixedWidth: true),
+                },
+                bpm = new OsuSpriteText
+                {
+                    Colour = colours.Orange1,
+                    Anchor = Anchor.CentreLeft,
+                    Font = OsuFont.Torus.With(size: 18, weight: FontWeight.SemiBold),
+                    Position = new Vector2(2, 5),
                 }
             };
         }
@@ -36,6 +51,7 @@ namespace osu.Game.Screens.Edit.Components
         {
             base.Update();
             trackTimer.Text = editorClock.CurrentTime.ToEditorFormattedString();
+            bpm.Text = @$"{editorBeatmap.ControlPointInfo.TimingPointAt(editorClock.CurrentTime).BPM:0} BPM";
         }
     }
 }

osu.Game/Screens/Edit/Components/Timelines/Summary/SummaryTimeline.cs

@@ -1,13 +1,13 @@
 // 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 osuTK;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
-using osu.Game.Graphics;
+using osu.Game.Overlays;
 using osu.Game.Screens.Edit.Components.Timelines.Summary.Parts;
+using osuTK;
 
 namespace osu.Game.Screens.Edit.Components.Timelines.Summary
 {
@@ -17,8 +17,10 @@ namespace osu.Game.Screens.Edit.Components.Timelines.Summary
     public class SummaryTimeline : BottomBarContainer
     {
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider colourProvider)
         {
+            Background.Colour = colourProvider.Background6;
+
             Children = new Drawable[]
             {
                 new MarkerPart { RelativeSizeAxes = Axes.Both },
@@ -41,7 +43,7 @@ namespace osu.Game.Screens.Edit.Components.Timelines.Summary
                 {
                     Name = "centre line",
                     RelativeSizeAxes = Axes.Both,
-                    Colour = colours.Gray5,
+                    Colour = colourProvider.Background2,
                     Children = new Drawable[]
                     {
                         new Circle

osu.Game/Screens/Edit/Components/Timelines/Summary/TestGameplayButton.cs

@@ -28,6 +28,8 @@ namespace osu.Game.Screens.Edit.Components.Timelines.Summary
             BackgroundColour = colours.Orange1;
             SpriteText.Colour = colourProvider.Background6;
 
+            Content.CornerRadius = 0;
+
             Text = "Test!";
         }
     }

osu.Game/Screens/Edit/Editor.cs

@@ -12,7 +12,6 @@ using osu.Framework.Audio.Track;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input;
 using osu.Framework.Input.Bindings;
@@ -26,7 +25,6 @@ using osu.Game.Beatmaps;
 using osu.Game.Beatmaps.ControlPoints;
 using osu.Game.Configuration;
 using osu.Game.Database;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Cursor;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Input.Bindings;
@@ -37,9 +35,7 @@ using osu.Game.Resources.Localisation.Web;
 using osu.Game.Rulesets;
 using osu.Game.Rulesets.Edit;
 using osu.Game.Rulesets.Objects;
-using osu.Game.Screens.Edit.Components;
 using osu.Game.Screens.Edit.Components.Menus;
-using osu.Game.Screens.Edit.Components.Timelines.Summary;
 using osu.Game.Screens.Edit.Compose;
 using osu.Game.Screens.Edit.Design;
 using osu.Game.Screens.Edit.GameplayTest;
@@ -48,7 +44,6 @@ using osu.Game.Screens.Edit.Timing;
 using osu.Game.Screens.Edit.Verify;
 using osu.Game.Screens.Play;
 using osu.Game.Users;
-using osuTK;
 using osuTK.Graphics;
 using osuTK.Input;
 
@@ -119,13 +114,13 @@ namespace osu.Game.Screens.Edit
         private IBeatmap playableBeatmap;
         private EditorBeatmap editorBeatmap;
 
+        private BottomBar bottomBar;
+
         [CanBeNull] // Should be non-null once it can support custom rulesets.
         private EditorChangeHandler changeHandler;
 
         private DependencyContainer dependencies;
 
-        private TestGameplayButton testGameplayButton;
-
         private bool isNewBeatmap;
 
         protected override UserActivity InitialActivity => new UserActivity.Editing(Beatmap.Value.BeatmapInfo);
@@ -148,7 +143,7 @@ namespace osu.Game.Screens.Edit
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours, OsuConfigManager config)
+        private void load(OsuConfigManager config)
         {
             var loadableBeatmap = Beatmap.Value;
 
@@ -226,7 +221,7 @@ namespace osu.Game.Screens.Edit
             AddInternal(new OsuContextMenuContainer
             {
                 RelativeSizeAxes = Axes.Both,
-                Children = new[]
+                Children = new Drawable[]
                 {
                     new Container
                     {
@@ -287,67 +282,7 @@ namespace osu.Game.Screens.Edit
                             },
                         },
                     },
-                    new Container
+                    bottomBar = new BottomBar(),
-                    {
-                        Name = "Bottom bar",
-                        Anchor = Anchor.BottomLeft,
-                        Origin = Anchor.BottomLeft,
-                        RelativeSizeAxes = Axes.X,
-                        Height = 60,
-                        Children = new Drawable[]
-                        {
-                            new Box
-                            {
-                                RelativeSizeAxes = Axes.Both,
-                                Colour = colours.Gray2
-                            },
-                            new Container
-                            {
-                                RelativeSizeAxes = Axes.Both,
-                                Padding = new MarginPadding { Vertical = 5, Horizontal = 10 },
-                                Child = new GridContainer
-                                {
-                                    RelativeSizeAxes = Axes.Both,
-                                    ColumnDimensions = new[]
-                                    {
-                                        new Dimension(GridSizeMode.Absolute, 220),
-                                        new Dimension(),
-                                        new Dimension(GridSizeMode.Absolute, 220),
-                                        new Dimension(GridSizeMode.Absolute, 120),
-                                    },
-                                    Content = new[]
-                                    {
-                                        new Drawable[]
-                                        {
-                                            new Container
-                                            {
-                                                RelativeSizeAxes = Axes.Both,
-                                                Padding = new MarginPadding { Right = 10 },
-                                                Child = new TimeInfoContainer { RelativeSizeAxes = Axes.Both },
-                                            },
-                                            new SummaryTimeline
-                                            {
-                                                RelativeSizeAxes = Axes.Both,
-                                            },
-                                            new Container
-                                            {
-                                                RelativeSizeAxes = Axes.Both,
-                                                Padding = new MarginPadding { Left = 10 },
-                                                Child = new PlaybackControl { RelativeSizeAxes = Axes.Both },
-                                            },
-                                            testGameplayButton = new TestGameplayButton
-                                            {
-                                                RelativeSizeAxes = Axes.Both,
-                                                Padding = new MarginPadding { Left = 10 },
-                                                Size = new Vector2(1),
-                                                Action = testGameplay
-                                            }
-                                        },
-                                    }
-                                },
-                            }
-                        }
-                    },
                 }
             });
 
@@ -392,6 +327,24 @@ namespace osu.Game.Screens.Edit
             Clipboard.Content.Value = state.ClipboardContent;
         });
 
+        public void TestGameplay()
+        {
+            if (HasUnsavedChanges)
+            {
+                dialogOverlay.Push(new SaveBeforeGameplayTestDialog(() =>
+                {
+                    Save();
+                    pushEditorPlayer();
+                }));
+            }
+            else
+            {
+                pushEditorPlayer();
+            }
+
+            void pushEditorPlayer() => this.Push(new EditorPlayerLoader(this));
+        }
+
         /// <summary>
         /// Saves the currently edited beatmap.
         /// </summary>
@@ -589,7 +542,7 @@ namespace osu.Game.Screens.Edit
                     return true;
 
                 case GlobalAction.EditorTestGameplay:
-                    testGameplayButton.TriggerClick();
+                    bottomBar.TestGameplayButton.TriggerClick();
                     return true;
 
                 default:
@@ -935,24 +888,6 @@ namespace osu.Game.Screens.Edit
             loader?.CancelPendingDifficultySwitch();
         }
 
-        private void testGameplay()
-        {
-            if (HasUnsavedChanges)
-            {
-                dialogOverlay.Push(new SaveBeforeGameplayTestDialog(() =>
-                {
-                    Save();
-                    pushEditorPlayer();
-                }));
-            }
-            else
-            {
-                pushEditorPlayer();
-            }
-
-            void pushEditorPlayer() => this.Push(new EditorPlayerLoader(this));
-        }
-
         public double SnapTime(double time, double? referenceTime) => editorBeatmap.SnapTime(time, referenceTime);
 
         public double GetBeatLengthAtTime(double referenceTime) => editorBeatmap.GetBeatLengthAtTime(referenceTime);

osu.Game/Tests/Visual/EditorClockTestScene.cs

@@ -20,6 +20,8 @@ namespace osu.Game.Tests.Visual
         private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
 
         protected readonly BindableBeatDivisor BeatDivisor = new BindableBeatDivisor();
+
+        [Cached]
         protected new readonly EditorClock Clock;
 
         protected virtual bool ScrollUsingMouseWheel => true;