h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2025-01-28 08:02:55 +08:00
Code Issues Releases Wiki Activity

Implement proper PageSelectorItem

Browse Source
This commit is contained in:
Andrei Zavatski 2020-01-04 21:14:56 +03:00
parent 70387c19f3
commit 9af9da039d
5 changed files with 222 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
osu.Game.Tests/Visual/UserInterface/TestScenePageSelector.cs
View File

@ -14,7 +14,9 @@ namespace osu.Game.Tests.Visual.UserInterface
public override IReadOnlyList<Type> RequiredTypes => new[]
{
typeof(PageSelector),
typeof(DrawablePage)
typeof(DrawablePage),
typeof(PageSelectorButton),
typeof(PageSelectorItem)
};
private readonly PageSelector pageSelector;
@ -42,6 +44,7 @@ namespace osu.Game.Tests.Visual.UserInterface
public void TestPageSelectorValues()
{
AddStep("10 max pages", () => setMaxPages(10));
AddStep("11 max pages", () => setMaxPages(11));
AddStep("200 max pages, current 199", () =>
{
setMaxPages(200);

79
osu.Game/Graphics/UserInterface/PageSelector/DrawablePage.cs
View File

@ -1,22 +1,16 @@
// 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.Containers;
using osu.Framework.Graphics;
using osu.Framework.Bindables;
using osu.Framework.Allocation;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Extensions.Color4Extensions;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites;
using osu.Framework.Input.Events;
namespace osu.Game.Graphics.UserInterface.PageSelector
{
public class DrawablePage : OsuClickableContainer
public class DrawablePage : PageSelectorItem
{
private const int duration = 200;
private readonly BindableBool selected = new BindableBool();
public bool Selected
@ -25,44 +19,33 @@ namespace osu.Game.Graphics.UserInterface.PageSelector
set => selected.Value = value;
}
[Resolved]
private OsuColour colours { get; set; }
public int Page { get; private set; }
private readonly Box background;
private readonly OsuSpriteText text;
private OsuSpriteText text;
public DrawablePage(int page)
{
AutoSizeAxes = Axes.X;
Height = PageSelector.HEIGHT;
Child = new CircularContainer
Page = page;
text.Text = page.ToString();
Background.Alpha = 0;
Action = () =>
{
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
Masking = true,
Children = new Drawable[]
{
background = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0,
},
text = new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Text = page.ToString(),
Font = OsuFont.GetFont(size: 12),
Margin = new MarginPadding { Horizontal = 10 }
}
}
if (!selected.Value)
selected.Value = true;
};
}
protected override Drawable CreateContent() => text = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 12),
};
[BackgroundDependencyLoader]
private void load()
{
background.Colour = colours.Lime;
Background.Colour = Colours.Lime;
}
protected override void LoadComplete()
@ -73,36 +56,16 @@ namespace osu.Game.Graphics.UserInterface.PageSelector
private void onSelectedChanged(ValueChangedEvent<bool> selected)
{
background.FadeTo(selected.NewValue ? 1 : 0, duration, Easing.OutQuint);
text.FadeColour(selected.NewValue ? colours.GreySeafoamDarker : colours.Lime, duration, Easing.OutQuint);
Background.FadeTo(selected.NewValue ? 1 : 0, DURATION, Easing.OutQuint);
text.FadeColour(selected.NewValue ? Colours.GreySeafoamDarker : Colours.Lime, DURATION, Easing.OutQuint);
}
protected override bool OnClick(ClickEvent e)
{
if (!selected.Value)
selected.Value = true;
return base.OnClick(e);
}
protected override bool OnHover(HoverEvent e)
{
updateHoverState();
return base.OnHover(e);
}
protected override void OnHoverLost(HoverLostEvent e)
{
base.OnHoverLost(e);
updateHoverState();
}
private void updateHoverState()
protected override void UpdateHoverState()
{
if (selected.Value)
return;
text.FadeColour(IsHovered ? colours.Lime.Lighten(20f) : colours.Lime, duration, Easing.OutQuint);
text.FadeColour(IsHovered ? Colours.Lime.Lighten(20f) : Colours.Lime, DURATION, Easing.OutQuint);
}
}
}

284
osu.Game/Graphics/UserInterface/PageSelector/PageSelector.cs
View File

@ -4,17 +4,7 @@
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics;
using osu.Framework.Bindables;
using osu.Framework.Allocation;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Extensions.Color4Extensions;
using System;
using osuTK;
using osu.Game.Graphics.Containers;
using System.Collections.Generic;
using osu.Framework.Extensions.IEnumerableExtensions;
using osu.Game.Graphics.Sprites;
using osuTK.Graphics;
namespace osu.Game.Graphics.UserInterface.PageSelector
{
@ -25,10 +15,10 @@ namespace osu.Game.Graphics.UserInterface.PageSelector
public readonly BindableInt CurrentPage = new BindableInt(1);
public readonly BindableInt MaxPages = new BindableInt(1);
private readonly FillFlowContainer itemsFlow;
private readonly FillFlowContainer<DrawablePage> itemsFlow;
private readonly Button previousPageButton;
private readonly Button nextPageButton;
private readonly PageSelectorButton previousPageButton;
private readonly PageSelectorButton nextPageButton;
public PageSelector()
{
@ -39,16 +29,16 @@ namespace osu.Game.Graphics.UserInterface.PageSelector
Direction = FillDirection.Horizontal,
Children = new Drawable[]
{
previousPageButton = new Button(false, "prev")
previousPageButton = new PageSelectorButton(false, "prev")
{
Action = () => CurrentPage.Value -= 1,
},
itemsFlow = new FillFlowContainer
itemsFlow = new FillFlowContainer<DrawablePage>
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
},
nextPageButton = new Button(true, "next")
nextPageButton = new PageSelectorButton(true, "next")
{
Action = () => CurrentPage.Value += 1
}
@ -60,253 +50,69 @@ namespace osu.Game.Graphics.UserInterface.PageSelector
{
base.LoadComplete();
MaxPages.BindValueChanged(pagesAmount => onMaxPagesChanged(pagesAmount.NewValue), true);
CurrentPage.BindValueChanged(page => onCurrentPageChanged(page.NewValue), true);
}
private void onMaxPagesChanged(int pagesAmount)
{
if (pagesAmount < 1)
{
MaxPages.Value = 1;
return;
}
if (CurrentPage.Value > pagesAmount)
{
CurrentPage.Value = pagesAmount;
return;
}
MaxPages.BindValueChanged(_ => redraw());
CurrentPage.BindValueChanged(page => onCurrentPageChanged(page.NewValue));
redraw();
}
private void onCurrentPageChanged(int newPage)
{
if (newPage > MaxPages.Value)
{
CurrentPage.Value = MaxPages.Value;
return;
}
if (newPage < 1)
{
CurrentPage.Value = 1;
return;
}
redraw();
if (newPage > MaxPages.Value)
{
CurrentPage.Value = MaxPages.Value;
return;
}
itemsFlow.ForEach(page => page.Selected = page.Page == newPage ? true : false);
updateButtonsState();
}
private void redraw()
{
itemsFlow.Clear();
if (MaxPages.Value < 1)
{
MaxPages.Value = 1;
return;
}
for (int i = 1; i <= MaxPages.Value; i++)
addDrawablePage(i);
if (CurrentPage.Value > MaxPages.Value)
{
CurrentPage.Value = MaxPages.Value;
return;
}
if (CurrentPage.Value < 1)
{
CurrentPage.Value = 1;
return;
}
CurrentPage.TriggerChange();
}
private void updateButtonsState()
{
int newPage = CurrentPage.Value;
int maxPages = MaxPages.Value;
previousPageButton.Enabled.Value = newPage != 1;
nextPageButton.Enabled.Value = newPage != maxPages;
itemsFlow.Clear();
if (newPage > 3)
addDrawablePage(1);
if (newPage > 4)
addPlaceholder();
for (int i = Math.Max(newPage - 2, 1); i <= Math.Min(newPage + 2, maxPages); i++)
{
if (i == newPage)
addDrawableCurrentPage();
else
addDrawablePage(i);
}
if (newPage + 2 < maxPages - 1)
addPlaceholder();
if (newPage + 2 < maxPages)
addDrawablePage(maxPages);
}
private void addDrawablePage(int page) => itemsFlow.Add(new DrawablePage(page.ToString())
private void addDrawablePage(int page) => itemsFlow.Add(new DrawablePage(page)
{
Action = () => CurrentPage.Value = page,
});
private void addPlaceholder() => itemsFlow.Add(new Placeholder());
private void addDrawableCurrentPage() => itemsFlow.Add(new SelectedPage(CurrentPage.Value.ToString()));
private abstract class PageItem : OsuHoverContainer
{
private const int margin = 10;
private const int height = 20;
protected override Container<Drawable> Content => contentContainer;
private readonly CircularContainer contentContainer;
protected PageItem(string text)
{
AutoSizeAxes = Axes.X;
Height = height;
base.Content.Add(contentContainer = new CircularContainer
{
AutoSizeAxes = Axes.X,
RelativeSizeAxes = Axes.Y,
Masking = true,
});
var background = CreateBackground();
if (background != null)
Add(background);
var drawableText = CreateText(text);
if (drawableText != null)
{
drawableText.Margin = new MarginPadding { Horizontal = margin };
Add(drawableText);
}
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
IdleColour = colours.Lime;
HoverColour = colours.Lime.Lighten(20f);
}
protected abstract Drawable CreateText(string text);
protected virtual Drawable CreateBackground() => null;
}
private class DrawablePage : PageItem
{
protected SpriteText SpriteText;
protected override IEnumerable<Drawable> EffectTargets => new[] { SpriteText };
public DrawablePage(string text)
: base(text)
{
}
protected override Drawable CreateText(string text) => SpriteText = new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Text = text,
Font = OsuFont.GetFont(size: 12),
};
}
private class SelectedPage : DrawablePage
{
private Box background;
protected override IEnumerable<Drawable> EffectTargets => new[] { background };
public SelectedPage(string text)
: base(text)
{
}
protected override Drawable CreateBackground() => background = new Box
{
RelativeSizeAxes = Axes.Both,
};
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
SpriteText.Colour = colours.GreySeafoamDark;
}
}
private class Placeholder : DrawablePage
{
public Placeholder()
: base("...")
{
}
}
private class Button : PageItem
{
private const int duration = 100;
private Box background;
private FillFlowContainer textContainer;
private SpriteIcon icon;
private readonly Box fadeBox;
protected override IEnumerable<Drawable> EffectTargets => new[] { textContainer };
public Button(bool rightAligned, string text)
: base(text)
{
var alignment = rightAligned ? Anchor.x0 : Anchor.x2;
textContainer.ForEach(drawable =>
{
drawable.Anchor = Anchor.y1 | alignment;
drawable.Origin = Anchor.y1 | alignment;
});
icon.Icon = alignment == Anchor.x2 ? FontAwesome.Solid.ChevronLeft : FontAwesome.Solid.ChevronRight;
Add(fadeBox = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.Black.Opacity(100)
});
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
background.Colour = colours.GreySeafoamDark;
}
protected override void LoadComplete()
{
base.LoadComplete();
Enabled.BindValueChanged(onEnabledChanged, true);
}
private void onEnabledChanged(ValueChangedEvent<bool> enabled)
{
fadeBox.FadeTo(enabled.NewValue ? 0 : 1, duration);
}
protected override Drawable CreateBackground() => background = new Box
{
RelativeSizeAxes = Axes.Both,
};
protected override Drawable CreateText(string text) => textContainer = new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Direction = FillDirection.Horizontal,
Children = new Drawable[]
{
new OsuSpriteText
{
Text = text.ToUpper(),
Font = OsuFont.GetFont(size: 12),
},
icon = new SpriteIcon
{
Size = new Vector2(8),
},
}
};
}
}
}

77
osu.Game/Graphics/UserInterface/PageSelector/PageSelectorButton.cs Normal file
View File

@ -0,0 +1,77 @@
// 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.Containers;
using osu.Framework.Graphics;
using osu.Framework.Allocation;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Extensions.Color4Extensions;
using osu.Game.Graphics.Sprites;
using osu.Framework.Graphics.Sprites;
using osuTK.Graphics;
using osuTK;
using osu.Framework.Extensions.IEnumerableExtensions;
namespace osu.Game.Graphics.UserInterface.PageSelector
{
public class PageSelectorButton : PageSelectorItem
{
private readonly Box fadeBox;
private SpriteIcon icon;
private OsuSpriteText name;
private FillFlowContainer buttonContent;
public PageSelectorButton(bool rightAligned, string text)
{
Add(fadeBox = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.Black.Opacity(100)
});
var alignment = rightAligned ? Anchor.x0 : Anchor.x2;
buttonContent.ForEach(drawable =>
{
drawable.Anchor = Anchor.y1 | alignment;
drawable.Origin = Anchor.y1 | alignment;
});
icon.Icon = alignment == Anchor.x2 ? FontAwesome.Solid.ChevronLeft : FontAwesome.Solid.ChevronRight;
name.Text = text.ToUpper();
}
protected override Drawable CreateContent() => buttonContent = new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Children = new Drawable[]
{
name = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 12),
},
icon = new SpriteIcon
{
Size = new Vector2(8),
},
}
};
[BackgroundDependencyLoader]
private void load()
{
Background.Colour = Colours.GreySeafoamDark;
name.Colour = icon.Colour = Colours.Lime;
}
protected override void LoadComplete()
{
base.LoadComplete();
Enabled.BindValueChanged(enabled => fadeBox.FadeTo(enabled.NewValue ? 0 : 1, DURATION), true);
}
protected override void UpdateHoverState() => Background.FadeColour(IsHovered ? Colours.GreySeafoam : Colours.GreySeafoamDark, DURATION, Easing.OutQuint);
}
}

75
osu.Game/Graphics/UserInterface/PageSelector/PageSelectorItem.cs Normal file
View File

@ -0,0 +1,75 @@
// 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.Containers;
using osu.Framework.Graphics;
using osu.Framework.Bindables;
using osu.Framework.Allocation;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Extensions.Color4Extensions;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites;
using osu.Framework.Input.Events;
using osu.Framework.Graphics.Sprites;
using osuTK.Graphics;
using osuTK;
using osu.Framework.Extensions.IEnumerableExtensions;
using JetBrains.Annotations;
namespace osu.Game.Graphics.UserInterface.PageSelector
{
public abstract class PageSelectorItem : OsuClickableContainer
{
protected const int DURATION = 200;
[Resolved]
protected OsuColour Colours { get; private set; }
protected override Container<Drawable> Content => content;
protected readonly Box Background;
private readonly CircularContainer content;
protected PageSelectorItem()
{
AutoSizeAxes = Axes.X;
Height = PageSelector.HEIGHT;
base.Content.Add(content = new CircularContainer
{
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
Masking = true,
Children = new Drawable[]
{
Background = new Box
{
RelativeSizeAxes = Axes.Both
},
CreateContent().With(content =>
{
content.Anchor = Anchor.Centre;
content.Origin = Anchor.Centre;
content.Margin = new MarginPadding { Horizontal = 10 };
})
}
});
}
[NotNull]
protected abstract Drawable CreateContent();
protected override bool OnHover(HoverEvent e)
{
UpdateHoverState();
return base.OnHover(e);
}
protected override void OnHoverLost(HoverLostEvent e)
{
base.OnHoverLost(e);
UpdateHoverState();
}
protected abstract void UpdateHoverState();
}
}