Merge pull request #24220 from peppy/editor-metrics

Update various editor design language (and centre playfield / timeline)

osu.Game.Rulesets.Osu/Edit/OsuHitObjectComposer.cs

@@ -62,12 +62,7 @@ protected override IEnumerable<TernaryButton> CreateTernaryButtons() => base.Cre
         private void load()
         {
             // Give a bit of breathing room around the playfield content.
-            PlayfieldContentContainer.Padding = new MarginPadding
-            {
-                Vertical = 10,
-                Left = TOOLBOX_CONTRACTED_SIZE_LEFT + 10,
-                Right = TOOLBOX_CONTRACTED_SIZE_RIGHT + 10,
-            };
+            PlayfieldContentContainer.Padding = new MarginPadding(10);
 
             LayerBelowRuleset.AddRange(new Drawable[]
             {

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

@@ -22,21 +22,26 @@ namespace osu.Game.Tests.Visual.Editing
     public partial class TestSceneBeatDivisorControl : OsuManualInputManagerTestScene
     {
         private BeatDivisorControl beatDivisorControl = null!;
-        private BindableBeatDivisor bindableBeatDivisor = null!;
 
         private SliderBar<int> tickSliderBar => beatDivisorControl.ChildrenOfType<SliderBar<int>>().Single();
         private Triangle tickMarkerHead => tickSliderBar.ChildrenOfType<Triangle>().Single();
 
         [Cached]
         private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
 
+        [Cached]
+        private readonly BindableBeatDivisor bindableBeatDivisor = new BindableBeatDivisor(16);
+
         [SetUp]
         public void SetUp() => Schedule(() =>
         {
+            bindableBeatDivisor.ValidDivisors.SetDefault();
+            bindableBeatDivisor.SetDefault();
+
             Child = new PopoverContainer
             {
                 RelativeSizeAxes = Axes.Both,
-                Child = beatDivisorControl = new BeatDivisorControl(bindableBeatDivisor = new BindableBeatDivisor(16))
+                Child = beatDivisorControl = new BeatDivisorControl
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,

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

@@ -117,16 +117,22 @@ public void TestPlacementFailsWhenClickingButton()
             AddStep("move mouse to overlapping toggle button", () =>
             {
                 var playfield = hitObjectComposer.Playfield.ScreenSpaceDrawQuad;
-                var button = toolboxContainer.ChildrenOfType<DrawableTernaryButton>().First(b => playfield.Contains(b.ScreenSpaceDrawQuad.Centre));
+                var button = toolboxContainer.ChildrenOfType<DrawableTernaryButton>().First(b => playfield.Contains(getOverlapPoint(b)));
 
-                InputManager.MoveMouseTo(button);
+                InputManager.MoveMouseTo(getOverlapPoint(button));
             });
 
             AddAssert("no circles placed", () => editorBeatmap.HitObjects.Count == 0);
 
             AddStep("attempt place circle", () => InputManager.Click(MouseButton.Left));
 
             AddAssert("no circles placed", () => editorBeatmap.HitObjects.Count == 0);
+
+            Vector2 getOverlapPoint(DrawableTernaryButton ternaryButton)
+            {
+                var quad = ternaryButton.ScreenSpaceDrawQuad;
+                return quad.TopLeft + new Vector2(quad.Width * 9 / 10, quad.Height / 2);
+            }
         }
 
         [Test]

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

@@ -23,7 +23,7 @@ private void load()
         {
             BeatDivisor.Value = 4;
 
-            Add(new BeatDivisorControl(BeatDivisor)
+            Add(new BeatDivisorControl
             {
                 Anchor = Anchor.TopRight,
                 Origin = Anchor.TopRight,

osu.Game/Graphics/UserInterface/Nub.cs

@@ -20,16 +20,16 @@ public partial class Nub : Container, IHasCurrentValue<bool>, IHasAccentColour
     {
         public const float HEIGHT = 15;
 
-        public const float EXPANDED_SIZE = 50;
+        public const float DEFAULT_EXPANDED_SIZE = 50;
 
         private const float border_width = 3;
 
         private readonly Box fill;
         private readonly Container main;
 
-        public Nub()
+        public Nub(float expandedSize = DEFAULT_EXPANDED_SIZE)
         {
-            Size = new Vector2(EXPANDED_SIZE, HEIGHT);
+            Size = new Vector2(expandedSize, HEIGHT);
 
             InternalChildren = new[]
             {

osu.Game/Graphics/UserInterface/OsuCheckbox.cs

@@ -47,7 +47,7 @@ public MarginPadding LabelPadding
         private Sample sampleChecked;
         private Sample sampleUnchecked;
 
-        public OsuCheckbox(bool nubOnRight = true)
+        public OsuCheckbox(bool nubOnRight = true, float nubSize = Nub.DEFAULT_EXPANDED_SIZE)
         {
             AutoSizeAxes = Axes.Y;
             RelativeSizeAxes = Axes.X;
@@ -61,7 +61,7 @@ public OsuCheckbox(bool nubOnRight = true)
                     AutoSizeAxes = Axes.Y,
                     RelativeSizeAxes = Axes.X,
                 },
-                Nub = new Nub(),
+                Nub = new Nub(nubSize),
                 new HoverSounds()
             };
 
@@ -70,14 +70,14 @@ public OsuCheckbox(bool nubOnRight = true)
                 Nub.Anchor = Anchor.CentreRight;
                 Nub.Origin = Anchor.CentreRight;
                 Nub.Margin = new MarginPadding { Right = nub_padding };
-                LabelTextFlowContainer.Padding = new MarginPadding { Right = Nub.EXPANDED_SIZE + nub_padding * 2 };
+                LabelTextFlowContainer.Padding = new MarginPadding { Right = Nub.DEFAULT_EXPANDED_SIZE + nub_padding * 2 };
             }
             else
             {
                 Nub.Anchor = Anchor.CentreLeft;
                 Nub.Origin = Anchor.CentreLeft;
                 Nub.Margin = new MarginPadding { Left = nub_padding };
-                LabelTextFlowContainer.Padding = new MarginPadding { Left = Nub.EXPANDED_SIZE + nub_padding * 2 };
+                LabelTextFlowContainer.Padding = new MarginPadding { Left = Nub.DEFAULT_EXPANDED_SIZE + nub_padding * 2 };
             }
 
             Nub.Current.BindTo(Current);

osu.Game/Graphics/UserInterface/RoundedSliderBar.cs

@@ -51,7 +51,7 @@ public Color4 BackgroundColour
         public RoundedSliderBar()
         {
             Height = Nub.HEIGHT;
-            RangePadding = Nub.EXPANDED_SIZE / 2;
+            RangePadding = Nub.DEFAULT_EXPANDED_SIZE / 2;
             Children = new Drawable[]
             {
                 new Container

osu.Game/Rulesets/Edit/HitObjectComposer.cs

@@ -117,13 +117,10 @@ private void load(OsuConfigManager config)
             {
                 PlayfieldContentContainer = new Container
                 {
-                    Name = "Content",
-                    Padding = new MarginPadding
-                    {
-                        Left = TOOLBOX_CONTRACTED_SIZE_LEFT,
-                        Right = TOOLBOX_CONTRACTED_SIZE_RIGHT,
-                    },
-                    RelativeSizeAxes = Axes.Both,
+                    Name = "Playfield content",
+                    RelativeSizeAxes = Axes.Y,
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
                     Children = new Drawable[]
                     {
                         // layers below playfield
@@ -240,6 +237,14 @@ protected override void LoadComplete()
             });
         }
 
+        protected override void Update()
+        {
+            base.Update();
+
+            // Ensure that the playfield is always centered but also doesn't get cut off by toolboxes.
+            PlayfieldContentContainer.Width = Math.Max(1024, DrawWidth) - TOOLBOX_CONTRACTED_SIZE_RIGHT * 2;
+        }
+
         public override Playfield Playfield => drawableRulesetWrapper.Playfield;
 
         public override IEnumerable<DrawableHitObject> HitObjects => drawableRulesetWrapper.Playfield.AllHitObjects;
@@ -472,7 +477,7 @@ public override SnapResult FindSnappedPositionAndTime(Vector2 screenSpacePositio
     public abstract partial class HitObjectComposer : CompositeDrawable, IPositionSnapProvider
     {
         public const float TOOLBOX_CONTRACTED_SIZE_LEFT = 60;
-        public const float TOOLBOX_CONTRACTED_SIZE_RIGHT = 130;
+        public const float TOOLBOX_CONTRACTED_SIZE_RIGHT = 120;
 
         public readonly Ruleset Ruleset;
 

osu.Game/Screens/Edit/BottomBar.cs

@@ -10,6 +10,7 @@
 using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Overlays;
+using osu.Game.Rulesets.Edit;
 using osu.Game.Screens.Edit.Components;
 using osu.Game.Screens.Edit.Components.Timelines.Summary;
 using osuTK;
@@ -57,7 +58,7 @@ private void load(OverlayColourProvider colourProvider, Editor editor)
                             new Dimension(GridSizeMode.Absolute, 170),
                             new Dimension(),
                             new Dimension(GridSizeMode.Absolute, 220),
-                            new Dimension(GridSizeMode.Absolute, 120),
+                            new Dimension(GridSizeMode.Absolute, HitObjectComposer.TOOLBOX_CONTRACTED_SIZE_RIGHT),
                         },
                         Content = new[]
                         {
@@ -69,7 +70,6 @@ private void load(OverlayColourProvider colourProvider, Editor editor)
                                 TestGameplayButton = new TestGameplayButton
                                 {
                                     RelativeSizeAxes = Axes.Both,
-                                    Padding = new MarginPadding { Left = 10 },
                                     Size = new Vector2(1),
                                     Action = editor.TestGameplay,
                                 }

osu.Game/Screens/Edit/Components/Menus/EditorMenuBar.cs

@@ -3,6 +3,9 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Textures;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics;
@@ -14,19 +17,59 @@ namespace osu.Game.Screens.Edit.Components.Menus
 {
     public partial class EditorMenuBar : OsuMenu
     {
+        private const float heading_area = 114;
+
         public EditorMenuBar()
             : base(Direction.Horizontal, true)
         {
             RelativeSizeAxes = Axes.X;
 
             MaskingContainer.CornerRadius = 0;
-            ItemsContainer.Padding = new MarginPadding { Left = 100 };
+            ItemsContainer.Padding = new MarginPadding();
+
+            ContentContainer.Margin = new MarginPadding { Left = heading_area };
+            ContentContainer.Masking = true;
         }
 
         [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider colourProvider)
+        private void load(OverlayColourProvider colourProvider, TextureStore textures)
         {
             BackgroundColour = colourProvider.Background3;
+
+            TextFlowContainer text;
+
+            AddRangeInternal(new[]
+            {
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Y,
+                    Width = heading_area,
+                    Padding = new MarginPadding(8),
+                    Children = new Drawable[]
+                    {
+                        new Sprite
+                        {
+                            Size = new Vector2(26),
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Texture = textures.Get("Icons/Hexacons/editor"),
+                        },
+                        text = new TextFlowContainer
+                        {
+                            Anchor = Anchor.CentreRight,
+                            Origin = Anchor.CentreRight,
+                            AutoSizeAxes = Axes.Both,
+                        }
+                    }
+                },
+            });
+
+            text.AddText(@"osu!", t => t.Font = OsuFont.TorusAlternate);
+            text.AddText(@"editor", t =>
+            {
+                t.Font = OsuFont.TorusAlternate;
+                t.Colour = colourProvider.Highlight1;
+            });
         }
 
         protected override Framework.Graphics.UserInterface.Menu CreateSubMenu() => new SubMenu();

osu.Game/Screens/Edit/Components/Timelines/Summary/Parts/MarkerPart.cs

@@ -73,39 +73,55 @@ private partial class MarkerVisualisation : CompositeDrawable
         {
             public MarkerVisualisation()
             {
+                const float box_height = 4;
+
                 Anchor = Anchor.CentreLeft;
                 Origin = Anchor.Centre;
                 RelativePositionAxes = Axes.X;
                 RelativeSizeAxes = Axes.Y;
                 AutoSizeAxes = Axes.X;
                 InternalChildren = new Drawable[]
                 {
+                    new Box
+                    {
+                        Anchor = Anchor.TopCentre,
+                        Origin = Anchor.TopCentre,
+                        Size = new Vector2(14, box_height),
+                    },
                     new Triangle
                     {
                         Anchor = Anchor.TopCentre,
                         Origin = Anchor.BottomCentre,
                         Scale = new Vector2(1, -1),
                         Size = new Vector2(10, 5),
+                        Y = box_height,
                     },
                     new Triangle
                     {
                         Anchor = Anchor.BottomCentre,
                         Origin = Anchor.BottomCentre,
-                        Size = new Vector2(10, 5)
+                        Size = new Vector2(10, 5),
+                        Y = -box_height,
+                    },
+                    new Box
+                    {
+                        Anchor = Anchor.BottomCentre,
+                        Origin = Anchor.BottomCentre,
+                        Size = new Vector2(14, box_height),
                     },
                     new Box
                     {
                         Anchor = Anchor.Centre,
                         Origin = Anchor.Centre,
                         RelativeSizeAxes = Axes.Y,
-                        Width = 2,
+                        Width = 1.4f,
                         EdgeSmoothness = new Vector2(1, 0)
                     }
                 };
             }
 
             [BackgroundDependencyLoader]
-            private void load(OsuColour colours) => Colour = colours.Red;
+            private void load(OsuColour colours) => Colour = colours.Red1;
         }
     }
 }

osu.Game/Screens/Edit/Compose/Components/BeatDivisorControl.cs

@@ -33,12 +33,8 @@ public partial class BeatDivisorControl : CompositeDrawable, IKeyBindingHandler<
     {
         private int? lastCustomDivisor;
 
-        private readonly BindableBeatDivisor beatDivisor = new BindableBeatDivisor();
-
-        public BeatDivisorControl(BindableBeatDivisor beatDivisor)
-        {
-            this.beatDivisor.BindTo(beatDivisor);
-        }
+        [Resolved]
+        private BindableBeatDivisor beatDivisor { get; set; } = null!;
 
         [BackgroundDependencyLoader]
         private void load(OverlayColourProvider colourProvider)