mirror of
https://github.com/ppy/osu.git
synced 2025-02-08 09:42:55 +08:00
Merge pull request #31783 from bdach/bss/form-button
Implement "form button" control
This commit is contained in:
Dean Herbert
GitHub
commit
82ccce8099
@ -6,6 +6,7 @@ using osu.Framework.Graphics;
|
|||||||
using osu.Framework.Graphics.Containers;
|
using osu.Framework.Graphics.Containers;
|
||||||
using osu.Framework.Graphics.Cursor;
|
using osu.Framework.Graphics.Cursor;
|
||||||
using osu.Game.Beatmaps;
|
using osu.Game.Beatmaps;
|
||||||
|
using osu.Game.Graphics.Containers;
|
||||||
using osu.Game.Graphics.Cursor;
|
using osu.Game.Graphics.Cursor;
|
||||||
using osu.Game.Graphics.UserInterfaceV2;
|
using osu.Game.Graphics.UserInterfaceV2;
|
||||||
using osu.Game.Localisation;
|
using osu.Game.Localisation;
|
||||||
@ -27,87 +28,102 @@ namespace osu.Game.Tests.Visual.UserInterface
|
|||||||
Child = new PopoverContainer
|
Child = new PopoverContainer
|
||||||
{
|
{
|
||||||
RelativeSizeAxes = Axes.Both,
|
RelativeSizeAxes = Axes.Both,
|
||||||
Child = new FillFlowContainer
|
Child = new OsuScrollContainer
|
||||||
{
|
{
|
||||||
RelativeSizeAxes = Axes.Y,
|
RelativeSizeAxes = Axes.Both,
|
||||||
Anchor = Anchor.Centre,
|
Child = new FillFlowContainer
|
||||||
Origin = Anchor.Centre,
|
|
||||||
Width = 400,
|
|
||||||
Direction = FillDirection.Vertical,
|
|
||||||
Spacing = new Vector2(5),
|
|
||||||
Padding = new MarginPadding(10),
|
|
||||||
Children = new Drawable[]
|
|
||||||
{
|
{
|
||||||
new FormTextBox
|
AutoSizeAxes = Axes.Y,
|
||||||
|
Anchor = Anchor.Centre,
|
||||||
|
Origin = Anchor.Centre,
|
||||||
|
Width = 400,
|
||||||
|
Direction = FillDirection.Vertical,
|
||||||
|
Spacing = new Vector2(5),
|
||||||
|
Padding = new MarginPadding(10),
|
||||||
|
Children = new Drawable[]
|
||||||
{
|
{
|
||||||
Caption = "Artist",
|
new FormTextBox
|
||||||
HintText = "Poot artist here!",
|
|
||||||
PlaceholderText = "Here is an artist",
|
|
||||||
TabbableContentContainer = this,
|
|
||||||
},
|
|
||||||
new FormTextBox
|
|
||||||
{
|
|
||||||
Caption = "Artist",
|
|
||||||
HintText = "Poot artist here!",
|
|
||||||
PlaceholderText = "Here is an artist",
|
|
||||||
Current = { Disabled = true },
|
|
||||||
TabbableContentContainer = this,
|
|
||||||
},
|
|
||||||
new FormNumberBox(allowDecimals: true)
|
|
||||||
{
|
|
||||||
Caption = "Number",
|
|
||||||
HintText = "Insert your favourite number",
|
|
||||||
PlaceholderText = "Mine is 42!",
|
|
||||||
TabbableContentContainer = this,
|
|
||||||
},
|
|
||||||
new FormCheckBox
|
|
||||||
{
|
|
||||||
Caption = EditorSetupStrings.LetterboxDuringBreaks,
|
|
||||||
HintText = EditorSetupStrings.LetterboxDuringBreaksDescription,
|
|
||||||
},
|
|
||||||
new FormCheckBox
|
|
||||||
{
|
|
||||||
Caption = EditorSetupStrings.LetterboxDuringBreaks,
|
|
||||||
HintText = EditorSetupStrings.LetterboxDuringBreaksDescription,
|
|
||||||
Current = { Disabled = true },
|
|
||||||
},
|
|
||||||
new FormSliderBar<float>
|
|
||||||
{
|
|
||||||
Caption = "Slider",
|
|
||||||
Current = new BindableFloat
|
|
||||||
{
|
{
|
||||||
MinValue = 0,
|
Caption = "Artist",
|
||||||
MaxValue = 10,
|
HintText = "Poot artist here!",
|
||||||
Value = 5,
|
PlaceholderText = "Here is an artist",
|
||||||
Precision = 0.1f,
|
TabbableContentContainer = this,
|
||||||
},
|
},
|
||||||
TabbableContentContainer = this,
|
new FormTextBox
|
||||||
},
|
|
||||||
new FormEnumDropdown<CountdownType>
|
|
||||||
{
|
|
||||||
Caption = EditorSetupStrings.EnableCountdown,
|
|
||||||
HintText = EditorSetupStrings.CountdownDescription,
|
|
||||||
},
|
|
||||||
new FormFileSelector
|
|
||||||
{
|
|
||||||
Caption = "File selector",
|
|
||||||
PlaceholderText = "Select a file",
|
|
||||||
},
|
|
||||||
new FormBeatmapFileSelector(true)
|
|
||||||
{
|
|
||||||
Caption = "File selector with intermediate choice dialog",
|
|
||||||
PlaceholderText = "Select a file",
|
|
||||||
},
|
|
||||||
new FormColourPalette
|
|
||||||
{
|
|
||||||
Caption = "Combo colours",
|
|
||||||
Colours =
|
|
||||||
{
|
{
|
||||||
Colour4.Red,
|
Caption = "Artist",
|
||||||
Colour4.Green,
|
HintText = "Poot artist here!",
|
||||||
Colour4.Blue,
|
PlaceholderText = "Here is an artist",
|
||||||
Colour4.Yellow,
|
Current = { Disabled = true },
|
||||||
}
|
TabbableContentContainer = this,
|
||||||
|
},
|
||||||
|
new FormNumberBox(allowDecimals: true)
|
||||||
|
{
|
||||||
|
Caption = "Number",
|
||||||
|
HintText = "Insert your favourite number",
|
||||||
|
PlaceholderText = "Mine is 42!",
|
||||||
|
TabbableContentContainer = this,
|
||||||
|
},
|
||||||
|
new FormCheckBox
|
||||||
|
{
|
||||||
|
Caption = EditorSetupStrings.LetterboxDuringBreaks,
|
||||||
|
HintText = EditorSetupStrings.LetterboxDuringBreaksDescription,
|
||||||
|
},
|
||||||
|
new FormCheckBox
|
||||||
|
{
|
||||||
|
Caption = EditorSetupStrings.LetterboxDuringBreaks,
|
||||||
|
HintText = EditorSetupStrings.LetterboxDuringBreaksDescription,
|
||||||
|
Current = { Disabled = true },
|
||||||
|
},
|
||||||
|
new FormSliderBar<float>
|
||||||
|
{
|
||||||
|
Caption = "Slider",
|
||||||
|
Current = new BindableFloat
|
||||||
|
{
|
||||||
|
MinValue = 0,
|
||||||
|
MaxValue = 10,
|
||||||
|
Value = 5,
|
||||||
|
Precision = 0.1f,
|
||||||
|
},
|
||||||
|
TabbableContentContainer = this,
|
||||||
|
},
|
||||||
|
new FormEnumDropdown<CountdownType>
|
||||||
|
{
|
||||||
|
Caption = EditorSetupStrings.EnableCountdown,
|
||||||
|
HintText = EditorSetupStrings.CountdownDescription,
|
||||||
|
},
|
||||||
|
new FormFileSelector
|
||||||
|
{
|
||||||
|
Caption = "File selector",
|
||||||
|
PlaceholderText = "Select a file",
|
||||||
|
},
|
||||||
|
new FormBeatmapFileSelector(true)
|
||||||
|
{
|
||||||
|
Caption = "File selector with intermediate choice dialog",
|
||||||
|
PlaceholderText = "Select a file",
|
||||||
|
},
|
||||||
|
new FormColourPalette
|
||||||
|
{
|
||||||
|
Caption = "Combo colours",
|
||||||
|
Colours =
|
||||||
|
{
|
||||||
|
Colour4.Red,
|
||||||
|
Colour4.Green,
|
||||||
|
Colour4.Blue,
|
||||||
|
Colour4.Yellow,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
new FormButton
|
||||||
|
{
|
||||||
|
Caption = "No text in button",
|
||||||
|
Action = () => { },
|
||||||
|
},
|
||||||
|
new FormButton
|
||||||
|
{
|
||||||
|
Caption = "Text in button which is pretty long and is very likely to wrap",
|
||||||
|
ButtonText = "Foo the bar",
|
||||||
|
Action = () => { },
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
189
osu.Game/Graphics/UserInterfaceV2/FormButton.cs
Normal file
189
osu.Game/Graphics/UserInterfaceV2/FormButton.cs
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
// 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;
|
||||||
|
using System.Diagnostics;
|
||||||
|
using osu.Framework.Allocation;
|
||||||
|
using osu.Framework.Extensions.Color4Extensions;
|
||||||
|
using osu.Framework.Graphics;
|
||||||
|
using osu.Framework.Graphics.Colour;
|
||||||
|
using osu.Framework.Graphics.Containers;
|
||||||
|
using osu.Framework.Graphics.Shapes;
|
||||||
|
using osu.Framework.Graphics.Sprites;
|
||||||
|
using osu.Framework.Input.Events;
|
||||||
|
using osu.Framework.Localisation;
|
||||||
|
using osu.Game.Graphics.Backgrounds;
|
||||||
|
using osu.Game.Graphics.Containers;
|
||||||
|
using osu.Game.Graphics.UserInterface;
|
||||||
|
using osu.Game.Overlays;
|
||||||
|
using osuTK;
|
||||||
|
using osuTK.Graphics;
|
||||||
|
|
||||||
|
namespace osu.Game.Graphics.UserInterfaceV2
|
||||||
|
{
|
||||||
|
public partial class FormButton : CompositeDrawable
|
||||||
|
{
|
||||||
|
/// <summary>
|
||||||
|
/// Caption describing this button, displayed on the left of it.
|
||||||
|
/// </summary>
|
||||||
|
public LocalisableString Caption { get; init; }
|
||||||
|
|
||||||
|
public LocalisableString ButtonText { get; init; }
|
||||||
|
|
||||||
|
public Action? Action { get; init; }
|
||||||
|
|
||||||
|
[Resolved]
|
||||||
|
private OverlayColourProvider colourProvider { get; set; } = null!;
|
||||||
|
|
||||||
|
[BackgroundDependencyLoader]
|
||||||
|
private void load()
|
||||||
|
{
|
||||||
|
RelativeSizeAxes = Axes.X;
|
||||||
|
Height = 50;
|
||||||
|
|
||||||
|
Masking = true;
|
||||||
|
CornerRadius = 5;
|
||||||
|
CornerExponent = 2.5f;
|
||||||
|
|
||||||
|
InternalChildren = new Drawable[]
|
||||||
|
{
|
||||||
|
new Box
|
||||||
|
{
|
||||||
|
RelativeSizeAxes = Axes.Both,
|
||||||
|
Colour = colourProvider.Background5,
|
||||||
|
},
|
||||||
|
new Container
|
||||||
|
{
|
||||||
|
RelativeSizeAxes = Axes.Both,
|
||||||
|
Padding = new MarginPadding
|
||||||
|
{
|
||||||
|
Left = 9,
|
||||||
|
Right = 5,
|
||||||
|
Vertical = 5,
|
||||||
|
},
|
||||||
|
Children = new Drawable[]
|
||||||
|
{
|
||||||
|
new OsuTextFlowContainer
|
||||||
|
{
|
||||||
|
RelativeSizeAxes = Axes.X,
|
||||||
|
AutoSizeAxes = Axes.Y,
|
||||||
|
Width = 0.45f,
|
||||||
|
Anchor = Anchor.CentreLeft,
|
||||||
|
Origin = Anchor.CentreLeft,
|
||||||
|
Text = Caption,
|
||||||
|
},
|
||||||
|
new Button
|
||||||
|
{
|
||||||
|
Action = Action,
|
||||||
|
Text = ButtonText,
|
||||||
|
RelativeSizeAxes = ButtonText == default ? Axes.None : Axes.X,
|
||||||
|
Width = ButtonText == default ? 90 : 0.45f,
|
||||||
|
Anchor = Anchor.CentreRight,
|
||||||
|
Origin = Anchor.CentreRight,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
protected override bool OnHover(HoverEvent e)
|
||||||
|
{
|
||||||
|
updateState();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected override void OnHoverLost(HoverLostEvent e)
|
||||||
|
{
|
||||||
|
base.OnHoverLost(e);
|
||||||
|
updateState();
|
||||||
|
}
|
||||||
|
|
||||||
|
private void updateState()
|
||||||
|
{
|
||||||
|
BorderThickness = IsHovered ? 2 : 0;
|
||||||
|
|
||||||
|
if (IsHovered)
|
||||||
|
BorderColour = colourProvider.Light4;
|
||||||
|
}
|
||||||
|
|
||||||
|
public partial class Button : OsuButton
|
||||||
|
{
|
||||||
|
private TrianglesV2? triangles { get; set; }
|
||||||
|
|
||||||
|
protected override float HoverLayerFinalAlpha => 0;
|
||||||
|
|
||||||
|
private Color4? triangleGradientSecondColour;
|
||||||
|
|
||||||
|
public override Color4 BackgroundColour
|
||||||
|
{
|
||||||
|
get => base.BackgroundColour;
|
||||||
|
set
|
||||||
|
{
|
||||||
|
base.BackgroundColour = value;
|
||||||
|
triangleGradientSecondColour = BackgroundColour.Lighten(0.2f);
|
||||||
|
updateColours();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[BackgroundDependencyLoader]
|
||||||
|
private void load(OverlayColourProvider overlayColourProvider)
|
||||||
|
{
|
||||||
|
DefaultBackgroundColour = overlayColourProvider.Colour3;
|
||||||
|
triangleGradientSecondColour ??= overlayColourProvider.Colour1;
|
||||||
|
|
||||||
|
if (Text == default)
|
||||||
|
{
|
||||||
|
Add(new SpriteIcon
|
||||||
|
{
|
||||||
|
Icon = FontAwesome.Solid.ChevronRight,
|
||||||
|
Size = new Vector2(16),
|
||||||
|
Shadow = true,
|
||||||
|
Anchor = Anchor.Centre,
|
||||||
|
Origin = Anchor.Centre,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected override void LoadComplete()
|
||||||
|
{
|
||||||
|
base.LoadComplete();
|
||||||
|
|
||||||
|
Content.CornerRadius = 2;
|
||||||
|
|
||||||
|
Add(triangles = new TrianglesV2
|
||||||
|
{
|
||||||
|
Thickness = 0.02f,
|
||||||
|
SpawnRatio = 0.6f,
|
||||||
|
RelativeSizeAxes = Axes.Both,
|
||||||
|
Depth = float.MaxValue,
|
||||||
|
});
|
||||||
|
|
||||||
|
updateColours();
|
||||||
|
}
|
||||||
|
|
||||||
|
private void updateColours()
|
||||||
|
{
|
||||||
|
if (triangles == null)
|
||||||
|
return;
|
||||||
|
|
||||||
|
Debug.Assert(triangleGradientSecondColour != null);
|
||||||
|
|
||||||
|
triangles.Colour = ColourInfo.GradientVertical(triangleGradientSecondColour.Value, BackgroundColour);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected override bool OnHover(HoverEvent e)
|
||||||
|
{
|
||||||
|
Debug.Assert(triangleGradientSecondColour != null);
|
||||||
|
|
||||||
|
Background.FadeColour(triangleGradientSecondColour.Value, 300, Easing.OutQuint);
|
||||||
|
return base.OnHover(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected override void OnHoverLost(HoverLostEvent e)
|
||||||
|
{
|
||||||
|
Background.FadeColour(BackgroundColour, 300, Easing.OutQuint);
|
||||||
|
base.OnHoverLost(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user