Merge pull request #7795 from EVAST9919/comment-editor

Implement CommentEditor component

osu.Game.Tests/Visual/UserInterface/TestSceneCommentEditor.cs

@@ -0,0 +1,157 @@
+// 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.Collections.Generic;
+using NUnit.Framework;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Overlays;
+using osu.Game.Overlays.Comments;
+using osuTK;
+using osuTK.Input;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    public class TestSceneCommentEditor : ManualInputManagerTestScene
+    {
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(CommentEditor),
+            typeof(CancellableCommentEditor),
+        };
+
+        [Cached]
+        private readonly OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Blue);
+
+        private TestCommentEditor commentEditor;
+        private TestCancellableCommentEditor cancellableCommentEditor;
+
+        [SetUp]
+        public void SetUp() => Schedule(() =>
+            Add(new FillFlowContainer
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                AutoSizeAxes = Axes.Y,
+                Width = 800,
+                Direction = FillDirection.Vertical,
+                Spacing = new Vector2(0, 20),
+                Children = new Drawable[]
+                {
+                    commentEditor = new TestCommentEditor(),
+                    cancellableCommentEditor = new TestCancellableCommentEditor()
+                }
+            }));
+
+        [Test]
+        public void TestCommitViaKeyboard()
+        {
+            AddStep("click on text box", () =>
+            {
+                InputManager.MoveMouseTo(commentEditor);
+                InputManager.Click(MouseButton.Left);
+            });
+            AddStep("enter text", () => commentEditor.Current.Value = "text");
+
+            AddStep("press Enter", () => press(Key.Enter));
+
+            AddAssert("text committed", () => commentEditor.CommittedText == "text");
+            AddAssert("button is loading", () => commentEditor.IsLoading);
+        }
+
+        [Test]
+        public void TestCommitViaKeyboardWhenEmpty()
+        {
+            AddStep("click on text box", () =>
+            {
+                InputManager.MoveMouseTo(commentEditor);
+                InputManager.Click(MouseButton.Left);
+            });
+
+            AddStep("press Enter", () => press(Key.Enter));
+
+            AddAssert("no text committed", () => commentEditor.CommittedText == null);
+            AddAssert("button is not loading", () => !commentEditor.IsLoading);
+        }
+
+        [Test]
+        public void TestCommitViaButton()
+        {
+            AddStep("click on text box", () =>
+            {
+                InputManager.MoveMouseTo(commentEditor);
+                InputManager.Click(MouseButton.Left);
+            });
+            AddStep("enter text", () => commentEditor.Current.Value = "some other text");
+
+            AddStep("click submit", () =>
+            {
+                InputManager.MoveMouseTo(commentEditor.ButtonsContainer);
+                InputManager.Click(MouseButton.Left);
+            });
+
+            AddAssert("text committed", () => commentEditor.CommittedText == "some other text");
+            AddAssert("button is loading", () => commentEditor.IsLoading);
+        }
+
+        [Test]
+        public void TestCancelAction()
+        {
+            AddStep("click cancel button", () =>
+            {
+                InputManager.MoveMouseTo(cancellableCommentEditor.ButtonsContainer);
+                InputManager.Click(MouseButton.Left);
+            });
+
+            AddAssert("cancel action fired", () => cancellableCommentEditor.Cancelled);
+        }
+
+        private void press(Key key)
+        {
+            InputManager.PressKey(key);
+            InputManager.ReleaseKey(key);
+        }
+
+        private class TestCommentEditor : CommentEditor
+        {
+            public new Bindable<string> Current => base.Current;
+            public new FillFlowContainer ButtonsContainer => base.ButtonsContainer;
+
+            public string CommittedText { get; private set; }
+
+            public TestCommentEditor()
+            {
+                OnCommit = onCommit;
+            }
+
+            private void onCommit(string value)
+            {
+                CommittedText = value;
+                Scheduler.AddDelayed(() => IsLoading = false, 1000);
+            }
+
+            protected override string FooterText => @"Footer text. And it is pretty long. Cool.";
+            protected override string CommitButtonText => @"Commit";
+            protected override string TextBoxPlaceholder => @"This text box is empty";
+        }
+
+        private class TestCancellableCommentEditor : CancellableCommentEditor
+        {
+            public new FillFlowContainer ButtonsContainer => base.ButtonsContainer;
+            protected override string FooterText => @"Wow, another one. Sicc";
+
+            public bool Cancelled { get; private set; }
+
+            public TestCancellableCommentEditor()
+            {
+                OnCancel = () => Cancelled = true;
+            }
+
+            protected override string CommitButtonText => @"Save";
+            protected override string TextBoxPlaceholder => @"Multiline textboxes soon";
+        }
+    }
+}

osu.Game/Overlays/Comments/CancellableCommentEditor.cs

@@ -0,0 +1,71 @@
+// 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.Collections.Generic;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Overlays.Comments
+{
+    public abstract class CancellableCommentEditor : CommentEditor
+    {
+        public Action OnCancel;
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            ButtonsContainer.Add(new CancelButton
+            {
+                Anchor = Anchor.CentreRight,
+                Origin = Anchor.CentreRight,
+                Action = () => OnCancel?.Invoke()
+            });
+        }
+
+        private class CancelButton : OsuHoverContainer
+        {
+            protected override IEnumerable<Drawable> EffectTargets => new[] { background };
+
+            private readonly Box background;
+
+            public CancelButton()
+            {
+                AutoSizeAxes = Axes.Both;
+                Child = new CircularContainer
+                {
+                    Masking = true,
+                    Height = 25,
+                    AutoSizeAxes = Axes.X,
+                    Children = new Drawable[]
+                    {
+                        background = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both
+                        },
+                        new OsuSpriteText
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
+                            Margin = new MarginPadding { Horizontal = 20 },
+                            Text = @"Cancel"
+                        }
+                    }
+                };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                IdleColour = colourProvider.Light4;
+                HoverColour = colourProvider.Light3;
+            }
+        }
+    }
+}

osu.Game/Overlays/Comments/CommentEditor.cs

@@ -0,0 +1,241 @@
+// 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.Containers;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Graphics.Sprites;
+using osuTK.Graphics;
+using osu.Game.Graphics.UserInterface;
+using System.Collections.Generic;
+using System;
+using osuTK;
+using osu.Framework.Bindables;
+
+namespace osu.Game.Overlays.Comments
+{
+    public abstract class CommentEditor : CompositeDrawable
+    {
+        private const int side_padding = 8;
+
+        public Action<string> OnCommit;
+
+        public bool IsLoading
+        {
+            get => commitButton.IsLoading;
+            set => commitButton.IsLoading = value;
+        }
+
+        protected abstract string FooterText { get; }
+
+        protected abstract string CommitButtonText { get; }
+
+        protected abstract string TextBoxPlaceholder { get; }
+
+        protected FillFlowContainer ButtonsContainer { get; private set; }
+
+        protected readonly Bindable<string> Current = new Bindable<string>();
+
+        private CommitButton commitButton;
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            EditorTextBox textBox;
+
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+            Masking = true;
+            CornerRadius = 6;
+            BorderThickness = 3;
+            BorderColour = colourProvider.Background3;
+
+            AddRangeInternal(new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = colourProvider.Background3
+                },
+                new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Y,
+                    RelativeSizeAxes = Axes.X,
+                    Direction = FillDirection.Vertical,
+                    Children = new Drawable[]
+                    {
+                        textBox = new EditorTextBox
+                        {
+                            Height = 40,
+                            RelativeSizeAxes = Axes.X,
+                            PlaceholderText = TextBoxPlaceholder,
+                            Current = Current
+                        },
+                        new Container
+                        {
+                            Name = "Footer",
+                            RelativeSizeAxes = Axes.X,
+                            Height = 35,
+                            Padding = new MarginPadding { Horizontal = side_padding },
+                            Children = new Drawable[]
+                            {
+                                new OsuSpriteText
+                                {
+                                    Anchor = Anchor.CentreLeft,
+                                    Origin = Anchor.CentreLeft,
+                                    Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold),
+                                    Text = FooterText
+                                },
+                                ButtonsContainer = new FillFlowContainer
+                                {
+                                    Name = "Buttons",
+                                    Anchor = Anchor.CentreRight,
+                                    Origin = Anchor.CentreRight,
+                                    AutoSizeAxes = Axes.Both,
+                                    Direction = FillDirection.Horizontal,
+                                    Spacing = new Vector2(5, 0),
+                                    Child = commitButton = new CommitButton(CommitButtonText)
+                                    {
+                                        Anchor = Anchor.CentreRight,
+                                        Origin = Anchor.CentreRight,
+                                        Action = () =>
+                                        {
+                                            OnCommit?.Invoke(Current.Value);
+                                            Current.Value = string.Empty;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+
+            textBox.OnCommit += (u, v) =>
+            {
+                if (commitButton.IsBlocked.Value)
+                    return;
+
+                commitButton.Click();
+            };
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            Current.BindValueChanged(text => commitButton.IsBlocked.Value = string.IsNullOrEmpty(text.NewValue), true);
+        }
+
+        private class EditorTextBox : BasicTextBox
+        {
+            protected override float LeftRightPadding => side_padding;
+
+            protected override Color4 SelectionColour => Color4.Gray;
+
+            private OsuSpriteText placeholder;
+
+            public EditorTextBox()
+            {
+                Masking = false;
+                TextContainer.Height = 0.4f;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                BackgroundUnfocused = BackgroundFocused = colourProvider.Background5;
+                placeholder.Colour = colourProvider.Background3;
+                BackgroundCommit = colourProvider.Background3;
+            }
+
+            protected override SpriteText CreatePlaceholder() => placeholder = new OsuSpriteText
+            {
+                Font = OsuFont.GetFont(weight: FontWeight.Regular),
+            };
+
+            protected override Drawable GetDrawableCharacter(char c) => new OsuSpriteText { Text = c.ToString(), Font = OsuFont.GetFont(size: CalculatedTextSize) };
+        }
+
+        private class CommitButton : LoadingButton
+        {
+            private const int duration = 200;
+
+            public readonly BindableBool IsBlocked = new BindableBool();
+
+            public override bool PropagatePositionalInputSubTree => !IsBlocked.Value && base.PropagatePositionalInputSubTree;
+
+            protected override IEnumerable<Drawable> EffectTargets => new[] { background };
+
+            [Resolved]
+            private OverlayColourProvider colourProvider { get; set; }
+
+            private OsuSpriteText drawableText;
+            private Box background;
+            private Box blockedBackground;
+
+            public CommitButton(string text)
+            {
+                AutoSizeAxes = Axes.Both;
+                LoadingAnimationSize = new Vector2(10);
+
+                drawableText.Text = text;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load()
+            {
+                IdleColour = colourProvider.Light4;
+                HoverColour = colourProvider.Light3;
+                blockedBackground.Colour = colourProvider.Background5;
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+                IsBlocked.BindValueChanged(onBlockedStateChanged, true);
+            }
+
+            private void onBlockedStateChanged(ValueChangedEvent<bool> isBlocked)
+            {
+                drawableText.FadeColour(isBlocked.NewValue ? colourProvider.Foreground1 : Color4.White, duration, Easing.OutQuint);
+                background.FadeTo(isBlocked.NewValue ? 0 : 1, duration, Easing.OutQuint);
+            }
+
+            protected override Drawable CreateContent() => new CircularContainer
+            {
+                Masking = true,
+                Height = 25,
+                AutoSizeAxes = Axes.X,
+                Children = new Drawable[]
+                {
+                    blockedBackground = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both
+                    },
+                    background = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Alpha = 0
+                    },
+                    drawableText = new OsuSpriteText
+                    {
+                        AlwaysPresent = true,
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
+                        Margin = new MarginPadding { Horizontal = 20 }
+                    }
+                }
+            };
+
+            protected override void OnLoadStarted() => drawableText.FadeOut(duration, Easing.OutQuint);
+
+            protected override void OnLoadFinished() => drawableText.FadeIn(duration, Easing.OutQuint);
+        }
+    }
+}