From 2c19b7994c70a3b1d0799add0b1018bf9ad7fa6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Fri, 6 Sep 2024 11:38:50 +0200 Subject: [PATCH 1/4] Implement "form" check box control --- .../UserInterface/TestSceneFormControls.cs | 16 +- .../Graphics/UserInterfaceV2/FormCheckBox.cs | 155 ++++++++++++++++++ 2 files changed, 170 insertions(+), 1 deletion(-) create mode 100644 osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs diff --git a/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs b/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs index f5bc40c8692a..9c05a340104b 100644 --- a/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs +++ b/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs @@ -6,6 +6,7 @@ using osu.Framework.Graphics.Cursor; using osu.Game.Graphics.Cursor; using osu.Game.Graphics.UserInterfaceV2; +using osu.Game.Localisation; using osuTK; namespace osu.Game.Tests.Visual.UserInterface @@ -53,9 +54,22 @@ public TestSceneFormControls() PlaceholderText = "Mine is 42!", TabbableContentContainer = this, }, + new FormCheckBox + { + Caption = EditorSetupStrings.LetterboxDuringBreaks, + HintText = EditorSetupStrings.LetterboxDuringBreaksDescription, + OnText = "Letterbox", + OffText = "Do not letterbox", + }, + new FormCheckBox + { + Caption = EditorSetupStrings.LetterboxDuringBreaks, + HintText = EditorSetupStrings.LetterboxDuringBreaksDescription, + Current = { Disabled = true }, + }, }, }, - }, + } }; } } diff --git a/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs b/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs new file mode 100644 index 000000000000..587aa921f57c --- /dev/null +++ b/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs @@ -0,0 +1,155 @@ +// Copyright (c) ppy Pty Ltd . Licensed under the MIT Licence. +// See the LICENCE file in the repository root for full licence text. + +using osu.Framework.Allocation; +using osu.Framework.Audio; +using osu.Framework.Audio.Sample; +using osu.Framework.Bindables; +using osu.Framework.Graphics; +using osu.Framework.Graphics.Colour; +using osu.Framework.Graphics.Containers; +using osu.Framework.Graphics.Shapes; +using osu.Framework.Graphics.UserInterface; +using osu.Framework.Input.Events; +using osu.Framework.Localisation; +using osu.Game.Graphics.Sprites; +using osu.Game.Graphics.UserInterface; +using osu.Game.Overlays; + +namespace osu.Game.Graphics.UserInterfaceV2 +{ + public partial class FormCheckBox : CompositeDrawable, IHasCurrentValue + { + public Bindable Current + { + get => current.Current; + set => current.Current = value; + } + + private readonly BindableWithCurrent current = new BindableWithCurrent(); + + public LocalisableString Caption { get; init; } + public LocalisableString HintText { get; init; } + public LocalisableString OnText { get; init; } = "On"; + public LocalisableString OffText { get; init; } = "Off"; + + private Box background = null!; + private FormFieldCaption caption = null!; + private OsuSpriteText text = null!; + private Nub checkbox = null!; + + private Sample? sampleChecked; + private Sample? sampleUnchecked; + + [Resolved] + private OverlayColourProvider colourProvider { get; set; } = null!; + + [BackgroundDependencyLoader] + private void load(AudioManager audio) + { + RelativeSizeAxes = Axes.X; + Height = 50; + + Masking = true; + CornerRadius = 5; + CornerExponent = 2.5f; + + InternalChildren = new Drawable[] + { + background = new Box + { + RelativeSizeAxes = Axes.Both, + Colour = colourProvider.Background5, + }, + new Container + { + RelativeSizeAxes = Axes.Both, + Padding = new MarginPadding(9), + Children = new Drawable[] + { + caption = new FormFieldCaption + { + Caption = Caption, + TooltipText = HintText, + Anchor = Anchor.TopLeft, + Origin = Anchor.TopLeft, + }, + text = new OsuSpriteText + { + RelativeSizeAxes = Axes.X, + Anchor = Anchor.BottomLeft, + Origin = Anchor.BottomLeft, + }, + checkbox = new Nub + { + Anchor = Anchor.CentreRight, + Origin = Anchor.CentreRight, + Current = Current, + } + }, + }, + }; + + sampleChecked = audio.Samples.Get(@"UI/check-on"); + sampleUnchecked = audio.Samples.Get(@"UI/check-off"); + } + + protected override void LoadComplete() + { + base.LoadComplete(); + + current.BindValueChanged(_ => + { + updateState(); + playSamples(); + background.FlashColour(ColourInfo.GradientVertical(colourProvider.Background5, colourProvider.Dark2), 800, Easing.OutQuint); + }); + current.BindDisabledChanged(_ => updateState(), true); + } + + private void playSamples() + { + if (Current.Value) + sampleChecked?.Play(); + else + sampleUnchecked?.Play(); + } + + protected override bool OnHover(HoverEvent e) + { + updateState(); + return true; + } + + protected override void OnHoverLost(HoverLostEvent e) + { + base.OnHoverLost(e); + updateState(); + } + + protected override bool OnClick(ClickEvent e) + { + if (!Current.Disabled) + Current.Value = !Current.Value; + return true; + } + + private void updateState() + { + background.Colour = Current.Disabled ? colourProvider.Background4 : colourProvider.Background5; + caption.Colour = Current.Disabled ? colourProvider.Foreground1 : colourProvider.Content2; + checkbox.Colour = Current.Disabled ? colourProvider.Foreground1 : colourProvider.Content1; + text.Colour = Current.Disabled ? colourProvider.Foreground1 : colourProvider.Content1; + + text.Text = Current.Value ? OnText : OffText; + + if (!Current.Disabled) + { + BorderThickness = IsHovered ? 2 : 0; + + if (IsHovered) + BorderColour = colourProvider.Light4; + } + } + } +} From 652a59061164dadb2db1302d9c896e5cefecdec9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Fri, 13 Sep 2024 09:59:20 +0200 Subject: [PATCH 2/4] Attempt to address design concerns --- .../UserInterface/TestSceneFormControls.cs | 2 -- .../Graphics/UserInterfaceV2/FormCheckBox.cs | 33 +++++++++++++------ 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs b/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs index 9c05a340104b..be2ba860d308 100644 --- a/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs +++ b/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs @@ -58,8 +58,6 @@ public TestSceneFormControls() { Caption = EditorSetupStrings.LetterboxDuringBreaks, HintText = EditorSetupStrings.LetterboxDuringBreaksDescription, - OnText = "Letterbox", - OffText = "Do not letterbox", }, new FormCheckBox { diff --git a/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs b/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs index 587aa921f57c..6054e898fe7b 100644 --- a/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs +++ b/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs @@ -14,7 +14,9 @@ using osu.Framework.Localisation; using osu.Game.Graphics.Sprites; using osu.Game.Graphics.UserInterface; +using osu.Game.Localisation; using osu.Game.Overlays; +using osuTK; namespace osu.Game.Graphics.UserInterfaceV2 { @@ -30,8 +32,6 @@ public Bindable Current public LocalisableString Caption { get; init; } public LocalisableString HintText { get; init; } - public LocalisableString OnText { get; init; } = "On"; - public LocalisableString OffText { get; init; } = "Off"; private Box background = null!; private FormFieldCaption caption = null!; @@ -74,17 +74,30 @@ private void load(AudioManager audio) Anchor = Anchor.TopLeft, Origin = Anchor.TopLeft, }, - text = new OsuSpriteText + new FillFlowContainer { RelativeSizeAxes = Axes.X, + AutoSizeAxes = Axes.Y, Anchor = Anchor.BottomLeft, Origin = Anchor.BottomLeft, - }, - checkbox = new Nub - { - Anchor = Anchor.CentreRight, - Origin = Anchor.CentreRight, - Current = Current, + Direction = FillDirection.Horizontal, + Spacing = new Vector2(7), + Children = new Drawable[] + { + checkbox = new Nub + { + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft, + Current = Current, + Margin = new MarginPadding { Top = 2, }, + }, + text = new OsuSpriteText + { + RelativeSizeAxes = Axes.X, + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft, + }, + } } }, }, @@ -141,7 +154,7 @@ private void updateState() checkbox.Colour = Current.Disabled ? colourProvider.Foreground1 : colourProvider.Content1; text.Colour = Current.Disabled ? colourProvider.Foreground1 : colourProvider.Content1; - text.Text = Current.Value ? OnText : OffText; + text.Text = Current.Value ? CommonStrings.Enabled : CommonStrings.Disabled; if (!Current.Disabled) { From 929ea87975520450ead9e385d9560d105c2f1063 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Fri, 13 Sep 2024 14:53:59 +0200 Subject: [PATCH 3/4] Revert to checkbox on right --- .../Graphics/UserInterfaceV2/FormCheckBox.cs | 30 +++++-------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs b/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs index 6054e898fe7b..797ff098007d 100644 --- a/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs +++ b/osu.Game/Graphics/UserInterfaceV2/FormCheckBox.cs @@ -16,7 +16,6 @@ using osu.Game.Graphics.UserInterface; using osu.Game.Localisation; using osu.Game.Overlays; -using osuTK; namespace osu.Game.Graphics.UserInterfaceV2 { @@ -74,31 +73,18 @@ private void load(AudioManager audio) Anchor = Anchor.TopLeft, Origin = Anchor.TopLeft, }, - new FillFlowContainer + text = new OsuSpriteText { RelativeSizeAxes = Axes.X, - AutoSizeAxes = Axes.Y, Anchor = Anchor.BottomLeft, Origin = Anchor.BottomLeft, - Direction = FillDirection.Horizontal, - Spacing = new Vector2(7), - Children = new Drawable[] - { - checkbox = new Nub - { - Anchor = Anchor.CentreLeft, - Origin = Anchor.CentreLeft, - Current = Current, - Margin = new MarginPadding { Top = 2, }, - }, - text = new OsuSpriteText - { - RelativeSizeAxes = Axes.X, - Anchor = Anchor.CentreLeft, - Origin = Anchor.CentreLeft, - }, - } - } + }, + checkbox = new Nub + { + Anchor = Anchor.CentreRight, + Origin = Anchor.CentreRight, + Current = Current, + }, }, }, }; From f71ce8869e8cccd50651f3cbe52355093b0c09e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Fri, 13 Sep 2024 14:54:07 +0200 Subject: [PATCH 4/4] Limit width of test scene controls To better reflect what the widths should be in actual usage. --- osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs b/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs index be2ba860d308..eb8a8b3fe97a 100644 --- a/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs +++ b/osu.Game.Tests/Visual/UserInterface/TestSceneFormControls.cs @@ -26,7 +26,10 @@ public TestSceneFormControls() RelativeSizeAxes = Axes.Both, Child = new FillFlowContainer { - RelativeSizeAxes = Axes.Both, + RelativeSizeAxes = Axes.Y, + Anchor = Anchor.Centre, + Origin = Anchor.Centre, + Width = 400, Direction = FillDirection.Vertical, Spacing = new Vector2(5), Padding = new MarginPadding(10),