1
0
mirror of https://github.com/ppy/osu.git synced 2025-01-14 00:42:55 +08:00

Merge pull request #17260 from peppy/editor-sidebar

Add `EditorSidebar` component
This commit is contained in:
Dan Balasescu 2022-03-16 18:20:18 +09:00 committed by GitHub
commit 7e8aa77b2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 235 additions and 0 deletions

View File

@ -0,0 +1,97 @@
// 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 System.Linq;
using NUnit.Framework;
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 osuTK;
using osuTK.Graphics;
namespace osu.Game.Tests.Visual.UserInterface
{
public class TestSceneEditorSidebar : OsuTestScene
{
[Cached]
private readonly OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
[Test]
public void TestSidebars()
{
AddStep("Add sidebars", () =>
{
Children = new Drawable[]
{
new GridContainer
{
RelativeSizeAxes = Axes.Both,
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
new Dimension(GridSizeMode.AutoSize),
},
Content = new[]
{
new Drawable[]
{
new EditorSidebar
{
Children = new[]
{
new EditorSidebarSection("Section 1")
{
Child = new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Full,
Spacing = new Vector2(3),
ChildrenEnumerable = Enumerable.Range(0, 10).Select(_ => new Box
{
Colour = Color4.White,
Size = new Vector2(32),
})
},
},
new EditorSidebarSection("Section with a really long section header")
{
Child = new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Full,
Spacing = new Vector2(3),
ChildrenEnumerable = Enumerable.Range(0, 400).Select(_ => new Box
{
Colour = Color4.Gray,
Size = new Vector2(32),
})
},
},
},
},
new Container
{
RelativeSizeAxes = Axes.Both,
},
new EditorSidebar
{
Children = new[]
{
new EditorSidebarSection("Section 1"),
new EditorSidebarSection("Section 2"),
},
},
}
}
}
};
});
}
}
}

View File

@ -0,0 +1,55 @@
// 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.Graphics.Containers;
using osu.Game.Overlays;
namespace osu.Game.Screens.Edit.Components
{
/// <summary>
/// A sidebar area that can be attached to the left or right edge of the screen.
/// Houses scrolling sectionised content.
/// </summary>
internal class EditorSidebar : Container<EditorSidebarSection>
{
private readonly Box background;
protected override Container<EditorSidebarSection> Content { get; }
public EditorSidebar()
{
Width = 250;
RelativeSizeAxes = Axes.Y;
InternalChildren = new Drawable[]
{
background = new Box
{
RelativeSizeAxes = Axes.Both,
},
new OsuScrollContainer
{
Padding = new MarginPadding { Left = 20 },
ScrollbarOverlapsContent = false,
RelativeSizeAxes = Axes.Both,
Child = Content = new FillFlowContainer<EditorSidebarSection>
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
},
}
};
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
background.Colour = colourProvider.Background5;
}
}
}

View File

@ -0,0 +1,83 @@
// 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.Framework.Localisation;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Overlays;
using osuTK;
namespace osu.Game.Screens.Edit.Components
{
public class EditorSidebarSection : Container
{
protected override Container<Drawable> Content { get; }
public EditorSidebarSection(LocalisableString sectionName)
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
InternalChild = new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
new SectionHeader(sectionName),
Content = new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
},
}
};
}
public class SectionHeader : CompositeDrawable
{
private readonly LocalisableString text;
public SectionHeader(LocalisableString text)
{
this.text = text;
Margin = new MarginPadding { Vertical = 10, Horizontal = 5 };
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
InternalChild = new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Spacing = new Vector2(2),
Children = new Drawable[]
{
new OsuTextFlowContainer(cp => cp.Font = OsuFont.Default.With(size: 16, weight: FontWeight.SemiBold))
{
Text = text,
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
},
new Circle
{
Colour = colourProvider.Highlight1,
Size = new Vector2(28, 2),
}
}
};
}
}
}
}