Merge pull request #18396 from peppy/editor-tidy-up

Bring editor design metrics up-to-date

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

@@ -28,7 +28,7 @@ namespace osu.Game.Tests.Visual.Editing
         private Triangle tickMarkerHead => tickSliderBar.ChildrenOfType<Triangle>().Single();
 
         [Cached]
-        private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Green);
+        private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
 
         [SetUp]
         public void SetUp() => Schedule(() =>

osu.Game/Graphics/UserInterfaceV2/LabelledDrawable.cs

@@ -154,7 +154,7 @@ namespace osu.Game.Graphics.UserInterfaceV2
         [BackgroundDependencyLoader(true)]
         private void load(OverlayColourProvider? colourProvider, OsuColour osuColour)
         {
-            background.Colour = colourProvider?.Background4 ?? Color4Extensions.FromHex(@"1c2125");
+            background.Colour = colourProvider?.Background5 ?? Color4Extensions.FromHex(@"1c2125");
             descriptionText.Colour = osuColour.Yellow;
         }
 

osu.Game/Overlays/OverlayColourProvider.cs

@@ -72,6 +72,9 @@ namespace osu.Game.Overlays
                 case OverlayColourScheme.Green:
                     return 125 / 360f;
 
+                case OverlayColourScheme.Aquamarine:
+                    return 160 / 360f;
+
                 case OverlayColourScheme.Purple:
                     return 255 / 360f;
 
@@ -94,5 +97,6 @@ namespace osu.Game.Overlays
         Purple,
         Blue,
         Plum,
+        Aquamarine
     }
 }

osu.Game/Rulesets/Edit/DistancedHitObjectComposer.cs

@@ -52,7 +52,7 @@ namespace osu.Game.Rulesets.Edit
         {
             AddInternal(RightSideToolboxContainer = new ExpandingToolboxContainer(130, 250)
             {
-                Padding = new MarginPadding { Right = 10 },
+                Padding = new MarginPadding(10),
                 Alpha = DistanceSpacingMultiplier.Disabled ? 0 : 1,
                 Anchor = Anchor.TopRight,
                 Origin = Anchor.TopRight,

osu.Game/Rulesets/Edit/HitObjectComposer.cs

@@ -114,9 +114,9 @@ namespace osu.Game.Rulesets.Edit
                                               .WithChild(BlueprintContainer = CreateBlueprintContainer())
                     }
                 },
-                new ExpandingToolboxContainer(80, 200)
+                new ExpandingToolboxContainer(90, 200)
                 {
-                    Padding = new MarginPadding { Left = 10 },
+                    Padding = new MarginPadding(10),
                     Children = new Drawable[]
                     {
                         new EditorToolboxGroup("toolbox (1-9)")

osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineArea.cs

@@ -2,12 +2,12 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Allocation;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
 using osuTK;
 
 namespace osu.Game.Screens.Edit.Compose.Components.Timeline
@@ -27,10 +27,9 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
         }
 
         [BackgroundDependencyLoader]
-        private void load()
+        private void load(OverlayColourProvider colourProvider)
         {
             Masking = true;
-            CornerRadius = 5;
 
             OsuCheckbox waveformCheckbox;
             OsuCheckbox controlPointsCheckbox;
@@ -41,7 +40,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
                 new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = Color4Extensions.FromHex("111")
+                    Colour = colourProvider.Background5
                 },
                 new GridContainer
                 {
@@ -55,12 +54,13 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
                             {
                                 RelativeSizeAxes = Axes.Y,
                                 AutoSizeAxes = Axes.X,
+                                Name = @"Toggle controls",
                                 Children = new Drawable[]
                                 {
                                     new Box
                                     {
                                         RelativeSizeAxes = Axes.Both,
-                                        Colour = Color4Extensions.FromHex("222")
+                                        Colour = colourProvider.Background2,
                                     },
                                     new FillFlowContainer
                                     {
@@ -94,12 +94,13 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
                             {
                                 RelativeSizeAxes = Axes.Y,
                                 AutoSizeAxes = Axes.X,
+                                Name = @"Zoom controls",
                                 Children = new Drawable[]
                                 {
                                     new Box
                                     {
                                         RelativeSizeAxes = Axes.Both,
-                                        Colour = Color4Extensions.FromHex("333")
+                                        Colour = colourProvider.Background3,
                                     },
                                     new Container<TimelineButton>
                                     {

osu.Game/Screens/Edit/Editor.cs

@@ -140,7 +140,7 @@ namespace osu.Game.Screens.Edit
         public readonly EditorClipboard Clipboard = new EditorClipboard();
 
         [Cached]
-        private readonly OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
+        private readonly OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
 
         public Editor(EditorLoader loader = null)
         {
@@ -777,6 +777,7 @@ namespace osu.Game.Screens.Edit
                 if ((currentScreen = screenContainer.SingleOrDefault(s => s.Type == e.NewValue)) != null)
                 {
                     screenContainer.ChangeChildDepth(currentScreen, lastScreen?.Depth + 1 ?? 0);
+
                     currentScreen.Show();
                     return;
                 }

osu.Game/Screens/Edit/EditorRoundedScreen.cs

@@ -1,53 +0,0 @@
-// 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;
-
-namespace osu.Game.Screens.Edit
-{
-    public class EditorRoundedScreen : EditorScreen
-    {
-        public const int HORIZONTAL_PADDING = 100;
-
-        private Container roundedContent;
-
-        protected override Container<Drawable> Content => roundedContent;
-
-        public EditorRoundedScreen(EditorScreenMode mode)
-            : base(mode)
-        {
-        }
-
-        [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider colourProvider)
-        {
-            base.Content.Add(new Container
-            {
-                RelativeSizeAxes = Axes.Both,
-                Padding = new MarginPadding(50),
-                Child = new Container
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Masking = true,
-                    CornerRadius = 10,
-                    Children = new Drawable[]
-                    {
-                        new Box
-                        {
-                            Colour = colourProvider.Background3,
-                            RelativeSizeAxes = Axes.Both,
-                        },
-                        roundedContent = new Container
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                        },
-                    }
-                }
-            });
-        }
-    }
-}

osu.Game/Screens/Edit/EditorRoundedScreenSettings.cs

@@ -8,6 +8,7 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics.Containers;
 using osu.Game.Overlays;
+using osuTK;
 
 namespace osu.Game.Screens.Edit
 {
@@ -22,7 +23,7 @@ namespace osu.Game.Screens.Edit
             {
                 new Box
                 {
-                    Colour = colours.Background4,
+                    Colour = colours.Background6,
                     RelativeSizeAxes = Axes.Both,
                 },
                 new OsuScrollContainer
@@ -33,6 +34,8 @@ namespace osu.Game.Screens.Edit
                         RelativeSizeAxes = Axes.X,
                         AutoSizeAxes = Axes.Y,
                         Direction = FillDirection.Vertical,
+                        Padding = new MarginPadding(10),
+                        Spacing = new Vector2(10),
                         Children = CreateSections()
                     },
                 }

osu.Game/Screens/Edit/EditorScreen.cs

@@ -33,17 +33,9 @@ namespace osu.Game.Screens.Edit
             InternalChild = content = new PopoverContainer { RelativeSizeAxes = Axes.Both };
         }
 
-        protected override void PopIn()
+        protected override void PopIn() => this.FadeIn();
-        {
-            this.ScaleTo(1f, 200, Easing.OutQuint)
-                .FadeIn(200, Easing.OutQuint);
-        }
 
-        protected override void PopOut()
+        protected override void PopOut() => this.FadeOut();
-        {
-            this.ScaleTo(0.98f, 200, Easing.OutQuint)
-                .FadeOut(200, Easing.OutQuint);
-        }
 
         #region Clipboard operations
 

osu.Game/Screens/Edit/EditorScreenWithTimeline.cs

@@ -3,21 +3,19 @@
 
 using JetBrains.Annotations;
 using osu.Framework.Allocation;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
 using osu.Game.Screens.Edit.Compose.Components;
 using osu.Game.Screens.Edit.Compose.Components.Timeline;
-using osuTK.Graphics;
 
 namespace osu.Game.Screens.Edit
 {
     public abstract class EditorScreenWithTimeline : EditorScreen
     {
-        private const float vertical_margins = 10;
+        private const float padding = 10;
-        private const float horizontal_margins = 20;
 
         private readonly BindableBeatDivisor beatDivisor = new BindableBeatDivisor();
 
@@ -33,7 +31,7 @@ namespace osu.Game.Screens.Edit
         private LoadingSpinner spinner;
 
         [BackgroundDependencyLoader(true)]
-        private void load([CanBeNull] BindableBeatDivisor beatDivisor)
+        private void load(OverlayColourProvider colourProvider, [CanBeNull] BindableBeatDivisor beatDivisor)
         {
             if (beatDivisor != null)
                 this.beatDivisor.BindTo(beatDivisor);
@@ -60,14 +58,14 @@ namespace osu.Game.Screens.Edit
                                 new Box
                                 {
                                     RelativeSizeAxes = Axes.Both,
-                                    Colour = Color4.Black.Opacity(0.5f)
+                                    Colour = colourProvider.Background4
                                 },
                                 new Container
                                 {
                                     Name = "Timeline content",
                                     RelativeSizeAxes = Axes.X,
                                     AutoSizeAxes = Axes.Y,
-                                    Padding = new MarginPadding { Horizontal = horizontal_margins, Vertical = vertical_margins },
+                                    Padding = new MarginPadding { Horizontal = padding, Top = padding },
                                     Child = new GridContainer
                                     {
                                         RelativeSizeAxes = Axes.X,
@@ -106,12 +104,6 @@ namespace osu.Game.Screens.Edit
                             Name = "Main content",
                             RelativeSizeAxes = Axes.Both,
                             Depth = float.MaxValue,
-                            Padding = new MarginPadding
-                            {
-                                Horizontal = horizontal_margins,
-                                Top = vertical_margins,
-                                Bottom = vertical_margins
-                            },
                             Child = spinner = new LoadingSpinner(true)
                             {
                                 State = { Value = Visibility.Visible },
@@ -133,18 +125,10 @@ namespace osu.Game.Screens.Edit
                 mainContent.Add(content);
                 content.FadeInFromZero(300, Easing.OutQuint);
 
-                LoadComponentAsync(new TimelineArea(CreateTimelineContent()), t =>
+                LoadComponentAsync(new TimelineArea(CreateTimelineContent()), timelineContainer.Add);
-                {
-                    timelineContainer.Add(t);
-                    OnTimelineLoaded(t);
-                });
             });
         }
 
-        protected virtual void OnTimelineLoaded(TimelineArea timelineArea)
-        {
-        }
-
         protected abstract Drawable CreateMainContent();
 
         protected virtual Drawable CreateTimelineContent() => new Container();

osu.Game/Screens/Edit/Setup/SetupScreen.cs

@@ -4,11 +4,13 @@
 using System.Collections.Generic;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
+using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics.Containers;
+using osu.Game.Overlays;
 
 namespace osu.Game.Screens.Edit.Setup
 {
-    public class SetupScreen : EditorRoundedScreen
+    public class SetupScreen : EditorScreen
     {
         [Cached]
         private SectionsContainer<SetupSection> sections { get; } = new SetupScreenSectionsContainer();
@@ -22,7 +24,7 @@ namespace osu.Game.Screens.Edit.Setup
         }
 
         [BackgroundDependencyLoader]
-        private void load(EditorBeatmap beatmap)
+        private void load(EditorBeatmap beatmap, OverlayColourProvider colourProvider)
         {
             var sectionsEnumerable = new List<SetupSection>
             {
@@ -37,6 +39,12 @@ namespace osu.Game.Screens.Edit.Setup
             if (rulesetSpecificSection != null)
                 sectionsEnumerable.Add(rulesetSpecificSection);
 
+            Add(new Box
+            {
+                Colour = colourProvider.Background2,
+                RelativeSizeAxes = Axes.Both,
+            });
+
             Add(sections.With(s =>
             {
                 s.RelativeSizeAxes = Axes.Both;

osu.Game/Screens/Edit/Setup/SetupScreenHeader.cs

@@ -93,7 +93,7 @@ namespace osu.Game.Screens.Edit.Setup
 
             public SetupScreenTabControl()
             {
-                TabContainer.Margin = new MarginPadding { Horizontal = EditorRoundedScreen.HORIZONTAL_PADDING };
+                TabContainer.Margin = new MarginPadding { Horizontal = 100 };
 
                 AddInternal(background = new Box
                 {

osu.Game/Screens/Edit/Setup/SetupSection.cs

@@ -40,7 +40,7 @@ namespace osu.Game.Screens.Edit.Setup
             Padding = new MarginPadding
             {
                 Vertical = 10,
-                Horizontal = EditorRoundedScreen.HORIZONTAL_PADDING
+                Horizontal = 100
             };
 
             InternalChild = new FillFlowContainer

osu.Game/Screens/Edit/Timing/Section.cs

@@ -44,9 +44,15 @@ namespace osu.Game.Screens.Edit.Timing
             AutoSizeAxes = Axes.Y;
 
             Masking = true;
+            CornerRadius = 5;
 
             InternalChildren = new Drawable[]
             {
+                new Box
+                {
+                    Colour = colours.Background4,
+                    RelativeSizeAxes = Axes.Both,
+                },
                 new Container
                 {
                     RelativeSizeAxes = Axes.X,
@@ -69,11 +75,6 @@ namespace osu.Game.Screens.Edit.Timing
                     AutoSizeAxes = Axes.Y,
                     Children = new Drawable[]
                     {
-                        new Box
-                        {
-                            Colour = colours.Background3,
-                            RelativeSizeAxes = Axes.Both,
-                        },
                         Flow = new FillFlowContainer
                         {
                             Padding = new MarginPadding(20),

osu.Game/Screens/Edit/Timing/SliderWithTextBoxInput.cs

@@ -11,6 +11,7 @@ using osu.Framework.Localisation;
 using osu.Game.Graphics.UserInterfaceV2;
 using osu.Game.Overlays.Settings;
 using osu.Game.Utils;
+using osuTK;
 
 namespace osu.Game.Screens.Edit.Timing
 {
@@ -33,6 +34,7 @@ namespace osu.Game.Screens.Edit.Timing
                     RelativeSizeAxes = Axes.X,
                     AutoSizeAxes = Axes.Y,
                     Direction = FillDirection.Vertical,
+                    Spacing = new Vector2(20),
                     Children = new Drawable[]
                     {
                         textBox = new LabelledTextBox

osu.Game/Screens/Edit/Timing/TimingScreen.cs

@@ -16,7 +16,7 @@ using osuTK;
 
 namespace osu.Game.Screens.Edit.Timing
 {
-    public class TimingScreen : EditorRoundedScreen
+    public class TimingScreen : EditorScreenWithTimeline
     {
         [Cached]
         private Bindable<ControlPointGroup> selectedGroup = new Bindable<ControlPointGroup>();
@@ -26,27 +26,23 @@ namespace osu.Game.Screens.Edit.Timing
         {
         }
 
-        [BackgroundDependencyLoader]
+        protected override Drawable CreateMainContent() => new GridContainer
-        private void load()
         {
-            Add(new GridContainer
+            RelativeSizeAxes = Axes.Both,
+            ColumnDimensions = new[]
             {
-                RelativeSizeAxes = Axes.Both,
+                new Dimension(),
-                ColumnDimensions = new[]
+                new Dimension(GridSizeMode.Absolute, 350),
+            },
+            Content = new[]
+            {
+                new Drawable[]
                 {
-                    new Dimension(),
+                    new ControlPointList(),
-                    new Dimension(GridSizeMode.Absolute, 350),
+                    new ControlPointSettings(),
                 },
-                Content = new[]
+            }
-                {
+        };
-                    new Drawable[]
-                    {
-                        new ControlPointList(),
-                        new ControlPointSettings(),
-                    },
-                }
-            });
-        }
 
         public class ControlPointList : CompositeDrawable
         {
@@ -77,12 +73,12 @@ namespace osu.Game.Screens.Edit.Timing
                 {
                     new Box
                     {
-                        Colour = colours.Background3,
+                        Colour = colours.Background4,
                         RelativeSizeAxes = Axes.Both,
                     },
                     new Box
                     {
-                        Colour = colours.Background2,
+                        Colour = colours.Background3,
                         RelativeSizeAxes = Axes.Y,
                         Width = ControlPointTable.TIMING_COLUMN_WIDTH + margins,
                     },

osu.Game/Screens/Edit/Verify/VerifyScreen.cs

@@ -11,7 +11,7 @@ using osu.Game.Rulesets.Edit.Checks.Components;
 namespace osu.Game.Screens.Edit.Verify
 {
     [Cached]
-    public class VerifyScreen : EditorRoundedScreen
+    public class VerifyScreen : EditorScreen
     {
         public readonly Bindable<Issue> SelectedIssue = new Bindable<Issue>();
 
@@ -32,7 +32,6 @@ namespace osu.Game.Screens.Edit.Verify
             InterpretedDifficulty.Default = BeatmapDifficultyCache.GetDifficultyRating(EditorBeatmap.BeatmapInfo.StarRating);
             InterpretedDifficulty.SetDefault();
 
-            IssueList = new IssueList();
             Child = new Container
             {
                 RelativeSizeAxes = Axes.Both,
@@ -48,7 +47,7 @@ namespace osu.Game.Screens.Edit.Verify
                     {
                         new Drawable[]
                         {
-                            IssueList,
+                            IssueList = new IssueList(),
                             new IssueSettings(),
                         },
                     }

osu.Game/Tests/Visual/EditorClockTestScene.cs

@@ -5,6 +5,7 @@ using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Input.Events;
 using osu.Game.Beatmaps;
+using osu.Game.Overlays;
 using osu.Game.Screens.Edit;
 
 namespace osu.Game.Tests.Visual
@@ -15,6 +16,9 @@ namespace osu.Game.Tests.Visual
     /// </summary>
     public abstract class EditorClockTestScene : OsuManualInputManagerTestScene
     {
+        [Cached]
+        private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
+
         protected readonly BindableBeatDivisor BeatDivisor = new BindableBeatDivisor();
         protected new readonly EditorClock Clock;