From 0bf6bfe5ee4569bc7b2c0e83e92dd659d33299fc Mon Sep 17 00:00:00 2001 From: smoogipoo Date: Tue, 8 Sep 2020 16:43:07 +0900 Subject: [PATCH] Create a new collection via a placeholder item --- .../Collections/DrawableCollectionList.cs | 97 +++++++++++++++++-- .../Collections/DrawableCollectionListItem.cs | 94 ++++++++++++++---- .../Collections/ManageCollectionsDialog.cs | 19 +--- 3 files changed, 163 insertions(+), 47 deletions(-) diff --git a/osu.Game/Collections/DrawableCollectionList.cs b/osu.Game/Collections/DrawableCollectionList.cs index e8bde9066f..f4b5a89b3e 100644 --- a/osu.Game/Collections/DrawableCollectionList.cs +++ b/osu.Game/Collections/DrawableCollectionList.cs @@ -1,6 +1,8 @@ // Copyright (c) ppy Pty Ltd . Licensed under the MIT Licence. // See the LICENCE file in the repository root for full licence text. +using System.Linq; +using osu.Framework.Bindables; using osu.Framework.Graphics; using osu.Framework.Graphics.Containers; using osu.Game.Graphics.Containers; @@ -10,19 +12,94 @@ namespace osu.Game.Collections { public class DrawableCollectionList : OsuRearrangeableListContainer { - protected override ScrollContainer CreateScrollContainer() => base.CreateScrollContainer().With(d => - { - d.ScrollbarVisible = false; - d.Padding = new MarginPadding(10); - }); + private Scroll scroll; - protected override FillFlowContainer> CreateListFillFlowContainer() => new FillFlowContainer> + protected override ScrollContainer CreateScrollContainer() => scroll = new Scroll(); + + protected override FillFlowContainer> CreateListFillFlowContainer() => new Flow { - LayoutDuration = 200, - LayoutEasing = Easing.OutQuint, - Spacing = new Vector2(0, 5) + DragActive = { BindTarget = DragActive } }; - protected override OsuRearrangeableListItem CreateOsuDrawable(BeatmapCollection item) => new DrawableCollectionListItem(item); + protected override OsuRearrangeableListItem CreateOsuDrawable(BeatmapCollection item) + { + if (item == scroll.PlaceholderItem.Model) + return scroll.ReplacePlaceholder(); + + return new DrawableCollectionListItem(item, true); + } + + private class Scroll : OsuScrollContainer + { + public DrawableCollectionListItem PlaceholderItem { get; private set; } + + protected override Container Content => content; + private readonly Container content; + + private readonly Container placeholderContainer; + + public Scroll() + { + ScrollbarVisible = false; + Padding = new MarginPadding(10); + + base.Content.Add(new FillFlowContainer + { + RelativeSizeAxes = Axes.X, + AutoSizeAxes = Axes.Y, + LayoutDuration = 200, + LayoutEasing = Easing.OutQuint, + Children = new Drawable[] + { + content = new Container { RelativeSizeAxes = Axes.X }, + placeholderContainer = new Container + { + RelativeSizeAxes = Axes.X, + AutoSizeAxes = Axes.Y + } + } + }); + + ReplacePlaceholder(); + } + + protected override void Update() + { + base.Update(); + + // AutoSizeAxes cannot be used as the height should represent the post-layout-transform height at all times, so that the placeholder doesn't bounce around. + content.Height = ((Flow)Child).Children.Sum(c => c.DrawHeight + 5); + } + + /// + /// Replaces the current with a new one, and returns the previous. + /// + public DrawableCollectionListItem ReplacePlaceholder() + { + var previous = PlaceholderItem; + + placeholderContainer.Clear(false); + placeholderContainer.Add(PlaceholderItem = new DrawableCollectionListItem(new BeatmapCollection(), false)); + + return previous; + } + } + + private class Flow : FillFlowContainer> + { + public readonly IBindable DragActive = new Bindable(); + + public Flow() + { + Spacing = new Vector2(0, 5); + LayoutEasing = Easing.OutQuint; + } + + protected override void LoadComplete() + { + base.LoadComplete(); + DragActive.BindValueChanged(active => LayoutDuration = active.NewValue ? 200 : 0); + } + } } } diff --git a/osu.Game/Collections/DrawableCollectionListItem.cs b/osu.Game/Collections/DrawableCollectionListItem.cs index a1fc55556e..90d5bae223 100644 --- a/osu.Game/Collections/DrawableCollectionListItem.cs +++ b/osu.Game/Collections/DrawableCollectionListItem.cs @@ -3,6 +3,7 @@ using System; using osu.Framework.Allocation; +using osu.Framework.Bindables; using osu.Framework.Extensions.Color4Extensions; using osu.Framework.Graphics; using osu.Framework.Graphics.Containers; @@ -21,20 +22,33 @@ namespace osu.Game.Collections public class DrawableCollectionListItem : OsuRearrangeableListItem { private const float item_height = 35; - private const float button_width = item_height * 0.75f; - public DrawableCollectionListItem(BeatmapCollection item) + private readonly Bindable isCreated = new Bindable(); + + public DrawableCollectionListItem(BeatmapCollection item, bool isCreated) : base(item) { + this.isCreated.Value = isCreated; + + ShowDragHandle.BindTo(this.isCreated); } - protected override Drawable CreateContent() => new ItemContent(Model); + protected override Drawable CreateContent() => new ItemContent(Model) + { + IsCreated = { BindTarget = isCreated } + }; private class ItemContent : CircularContainer { + public readonly Bindable IsCreated = new Bindable(); + + private readonly IBindable collectionName; private readonly BeatmapCollection collection; + [Resolved] + private BeatmapCollectionManager collectionManager { get; set; } + private ItemTextBox textBox; public ItemContent(BeatmapCollection collection) @@ -44,6 +58,8 @@ public ItemContent(BeatmapCollection collection) RelativeSizeAxes = Axes.X; Height = item_height; Masking = true; + + collectionName = collection.Name.GetBoundCopy(); } [BackgroundDependencyLoader] @@ -55,6 +71,7 @@ private void load(OsuColour colours) { Anchor = Anchor.CentreRight, Origin = Anchor.CentreRight, + IsCreated = { BindTarget = IsCreated }, IsTextBoxHovered = v => textBox.ReceivePositionalInputAt(v) }, new Container @@ -68,12 +85,37 @@ private void load(OsuColour colours) RelativeSizeAxes = Axes.Both, Size = Vector2.One, CornerRadius = item_height / 2, - Current = collection.Name + Current = collection.Name, + PlaceholderText = IsCreated.Value ? string.Empty : "Create a new collection" }, } }, }; } + + protected override void LoadComplete() + { + base.LoadComplete(); + collectionName.BindValueChanged(_ => createNewCollection(), true); + } + + private void createNewCollection() + { + if (IsCreated.Value) + return; + + if (string.IsNullOrEmpty(collectionName.Value)) + return; + + // Add the new collection and disable our placeholder. If all text is removed, the placeholder should not show back again. + collectionManager.Collections.Add(collection); + textBox.PlaceholderText = string.Empty; + + // When this item changes from placeholder to non-placeholder (via changing containers), its textbox will lose focus, so it needs to be re-focused. + Schedule(() => GetContainingInputManager().ChangeFocus(textBox)); + + IsCreated.Value = true; + } } private class ItemTextBox : OsuTextBox @@ -90,6 +132,8 @@ private void load(OsuColour colours) public class DeleteButton : CompositeDrawable { + public readonly IBindable IsCreated = new Bindable(); + public Func IsTextBoxHovered; [Resolved(CanBeNull = true)] @@ -100,6 +144,7 @@ public class DeleteButton : CompositeDrawable private readonly BeatmapCollection collection; + private Drawable fadeContainer; private Drawable background; public DeleteButton(BeatmapCollection collection) @@ -108,42 +153,51 @@ public DeleteButton(BeatmapCollection collection) RelativeSizeAxes = Axes.Y; Width = button_width + item_height / 2; // add corner radius to cover with fill - - Alpha = 0.1f; } [BackgroundDependencyLoader] private void load(OsuColour colours) { - InternalChildren = new[] + InternalChild = fadeContainer = new Container { - background = new Box + RelativeSizeAxes = Axes.Both, + Alpha = 0.1f, + Children = new[] { - RelativeSizeAxes = Axes.Both, - Colour = colours.Red - }, - new SpriteIcon - { - Anchor = Anchor.CentreRight, - Origin = Anchor.Centre, - X = -button_width * 0.6f, - Size = new Vector2(10), - Icon = FontAwesome.Solid.Trash + background = new Box + { + RelativeSizeAxes = Axes.Both, + Colour = colours.Red + }, + new SpriteIcon + { + Anchor = Anchor.CentreRight, + Origin = Anchor.Centre, + X = -button_width * 0.6f, + Size = new Vector2(10), + Icon = FontAwesome.Solid.Trash + } } }; } + protected override void LoadComplete() + { + base.LoadComplete(); + IsCreated.BindValueChanged(created => Alpha = created.NewValue ? 1 : 0, true); + } + public override bool ReceivePositionalInputAt(Vector2 screenSpacePos) => base.ReceivePositionalInputAt(screenSpacePos) && !IsTextBoxHovered(screenSpacePos); protected override bool OnHover(HoverEvent e) { - this.FadeTo(1f, 100, Easing.Out); + fadeContainer.FadeTo(1f, 100, Easing.Out); return false; } protected override void OnHoverLost(HoverLostEvent e) { - this.FadeTo(0.1f, 100); + fadeContainer.FadeTo(0.1f, 100); } protected override bool OnClick(ClickEvent e) diff --git a/osu.Game/Collections/ManageCollectionsDialog.cs b/osu.Game/Collections/ManageCollectionsDialog.cs index 036a745913..8f8ac9542c 100644 --- a/osu.Game/Collections/ManageCollectionsDialog.cs +++ b/osu.Game/Collections/ManageCollectionsDialog.cs @@ -8,7 +8,6 @@ using osu.Game.Graphics; using osu.Game.Graphics.Containers; using osu.Game.Graphics.Sprites; -using osu.Game.Graphics.UserInterface; using osuTK; namespace osu.Game.Collections @@ -51,9 +50,7 @@ private void load(OsuColour colours) RelativeSizeAxes = Axes.Both, RowDimensions = new[] { - new Dimension(GridSizeMode.Absolute, 50), - new Dimension(), - new Dimension(GridSizeMode.Absolute, 50), + new Dimension(GridSizeMode.AutoSize), }, Content = new[] { @@ -65,6 +62,7 @@ private void load(OsuColour colours) Origin = Anchor.Centre, Text = "Manage collections", Font = OsuFont.GetFont(size: 30), + Padding = new MarginPadding { Vertical = 10 }, } }, new Drawable[] @@ -87,19 +85,6 @@ private void load(OsuColour colours) } } }, - new Drawable[] - { - new OsuButton - { - Anchor = Anchor.Centre, - Origin = Anchor.Centre, - RelativeSizeAxes = Axes.Both, - Size = Vector2.One, - Padding = new MarginPadding(10), - Text = "Create new collection", - Action = () => collectionManager.Collections.Add(new BeatmapCollection { Name = { Value = "My new collection" } }) - }, - }, } } }