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

Add osu!-styled colour picker control

This commit is contained in:
Bartłomiej Dach 2021-06-06 13:05:26 +02:00
parent 7a6e67e694
commit 583242d96d
4 changed files with 267 additions and 0 deletions

View File

@ -0,0 +1,82 @@
// 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.Testing;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterfaceV2;
using osu.Game.Overlays;
namespace osu.Game.Tests.Visual.UserInterface
{
public class TestSceneColourPicker : OsuTestScene
{
[SetUpSteps]
public void SetUpSteps()
{
AddStep("create pickers", () => Child = new GridContainer
{
RelativeSizeAxes = Axes.Both,
ColumnDimensions = new[]
{
new Dimension(),
new Dimension()
},
Content = new[]
{
new Drawable[]
{
new Container
{
RelativeSizeAxes = Axes.Both,
Children = new Drawable[]
{
new OsuSpriteText
{
Text = @"No OverlayColourProvider",
Font = OsuFont.Default.With(size: 40)
},
new OsuColourPicker
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre
}
}
},
new ColourProvidingContainer(OverlayColourScheme.Blue)
{
RelativeSizeAxes = Axes.Both,
Children = new Drawable[]
{
new OsuSpriteText
{
Text = @"With blue OverlayColourProvider",
Font = OsuFont.Default.With(size: 40)
},
new OsuColourPicker
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre
}
}
}
}
}
});
}
private class ColourProvidingContainer : Container
{
[Cached]
private OverlayColourProvider provider { get; }
public ColourProvidingContainer(OverlayColourScheme colourScheme)
{
provider = new OverlayColourProvider(colourScheme);
}
}
}
}

View File

@ -0,0 +1,19 @@
// 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.Graphics.UserInterface;
namespace osu.Game.Graphics.UserInterfaceV2
{
public class OsuColourPicker : ColourPicker
{
public OsuColourPicker()
{
CornerRadius = 10;
Masking = true;
}
protected override HSVColourPicker CreateHSVColourPicker() => new OsuHSVColourPicker();
protected override HexColourPicker CreateHexColourPicker() => new OsuHexColourPicker();
}
}

View File

@ -0,0 +1,109 @@
// 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 JetBrains.Annotations;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.UserInterface;
using osu.Game.Overlays;
using osuTK;
namespace osu.Game.Graphics.UserInterfaceV2
{
public class OsuHSVColourPicker : HSVColourPicker
{
protected override HueSelector CreateHueSelector() => new OsuHueSelector();
protected override SaturationValueSelector CreateSaturationValueSelector() => new OsuSaturationValueSelector();
[BackgroundDependencyLoader(true)]
private void load([CanBeNull] OverlayColourProvider colourProvider, OsuColour osuColour)
{
Background.Colour = colourProvider?.Dark5 ?? osuColour.GreySeafoamDark;
Content.Padding = new MarginPadding(10);
Content.Spacing = new Vector2(0, 10);
}
private class OsuHueSelector : HueSelector
{
public OsuHueSelector()
{
Margin = new MarginPadding
{
Bottom = 15
};
SliderBar.CornerRadius = SliderBar.Height / 2;
SliderBar.Masking = true;
}
protected override Drawable CreateSliderNub() => new SliderNub();
private class SliderNub : CompositeDrawable
{
public SliderNub()
{
InternalChild = new Triangle
{
Width = 20,
Height = 15,
Anchor = Anchor.BottomCentre,
Origin = Anchor.TopCentre
};
}
}
}
private class OsuSaturationValueSelector : SaturationValueSelector
{
public OsuSaturationValueSelector()
{
SelectionArea.CornerRadius = 10;
SelectionArea.Masking = true;
// purposefully use hard non-AA'd masking to avoid edge artifacts.
SelectionArea.MaskingSmoothness = 0;
}
protected override Marker CreateMarker() => new OsuMarker();
private class OsuMarker : Marker
{
private readonly Box previewBox;
public OsuMarker()
{
AutoSizeAxes = Axes.Both;
InternalChild = new CircularContainer
{
Size = new Vector2(20),
Masking = true,
BorderColour = Colour4.White,
BorderThickness = 3,
EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Shadow,
Offset = new Vector2(0, 1),
Radius = 3,
Colour = Colour4.Black.Opacity(0.3f)
},
Child = previewBox = new Box
{
RelativeSizeAxes = Axes.Both
}
};
}
protected override void LoadComplete()
{
base.LoadComplete();
Current.BindValueChanged(colour => previewBox.Colour = colour.NewValue, true);
}
}
}
}
}

View File

@ -0,0 +1,57 @@
// 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 JetBrains.Annotations;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.UserInterface;
using osu.Game.Graphics.UserInterface;
using osu.Game.Overlays;
namespace osu.Game.Graphics.UserInterfaceV2
{
public class OsuHexColourPicker : HexColourPicker
{
public OsuHexColourPicker()
{
Padding = new MarginPadding(20);
Spacing = 20;
}
[BackgroundDependencyLoader(true)]
private void load([CanBeNull] OverlayColourProvider overlayColourProvider, OsuColour osuColour)
{
Background.Colour = overlayColourProvider?.Dark6 ?? osuColour.GreySeafoamDarker;
}
protected override TextBox CreateHexCodeTextBox() => new OsuTextBox();
protected override ColourPreview CreateColourPreview() => new OsuColourPreview();
private class OsuColourPreview : ColourPreview
{
private readonly Box preview;
public OsuColourPreview()
{
InternalChild = new CircularContainer
{
RelativeSizeAxes = Axes.Both,
Masking = true,
Child = preview = new Box
{
RelativeSizeAxes = Axes.Both
}
};
}
protected override void LoadComplete()
{
base.LoadComplete();
Current.BindValueChanged(colour => preview.Colour = colour.NewValue, true);
}
}
}
}