Implement proper PageSelectorItem

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

@@ -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);

osu.Game/Graphics/UserInterface/PageSelector/DrawablePage.cs

@@ -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]
+        public int Page { get; private set; }
-        private OsuColour colours { get; set; }
 
-        private readonly Box background;
+        private OsuSpriteText text;
-        private readonly OsuSpriteText text;
 
         public DrawablePage(int page)
         {
-            AutoSizeAxes = Axes.X;
+            Page = page;
-            Height = PageSelector.HEIGHT;
+            text.Text = page.ToString();
-            Child = new CircularContainer
+
+            Background.Alpha = 0;
+
+            Action = () =>
             {
-                RelativeSizeAxes = Axes.Y,
+                if (!selected.Value)
-                AutoSizeAxes = Axes.X,
+                    selected.Value = true;
-                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 }
-                    }
-                }
             };
         }
 
+        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);
+            Background.FadeTo(selected.NewValue ? 1 : 0, DURATION, Easing.OutQuint);
-            text.FadeColour(selected.NewValue ? colours.GreySeafoamDarker : colours.Lime, duration, Easing.OutQuint);
+            text.FadeColour(selected.NewValue ? Colours.GreySeafoamDarker : Colours.Lime, DURATION, Easing.OutQuint);
         }
 
-        protected override bool OnClick(ClickEvent e)
+        protected override void UpdateHoverState()
-        {
-            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()
         {
             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);
         }
     }
 }

osu.Game/Graphics/UserInterface/PageSelector/PageSelector.cs

@@ -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 PageSelectorButton previousPageButton;
-        private readonly Button nextPageButton;
+        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);
+            MaxPages.BindValueChanged(_ => redraw());
-            CurrentPage.BindValueChanged(page => onCurrentPageChanged(page.NewValue), true);
+            CurrentPage.BindValueChanged(page => onCurrentPageChanged(page.NewValue));
-        }
-
-        private void onMaxPagesChanged(int pagesAmount)
-        {
-            if (pagesAmount < 1)
-            {
-                MaxPages.Value = 1;
-                return;
-            }
-
-            if (CurrentPage.Value > pagesAmount)
-            {
-                CurrentPage.Value = pagesAmount;
-                return;
-            }
-
             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),
-                    },
-                }
-            };
-        }
     }
 }

osu.Game/Graphics/UserInterface/PageSelector/PageSelectorButton.cs

@@ -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);
+    }
+}

osu.Game/Graphics/UserInterface/PageSelector/PageSelectorItem.cs

@@ -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();
+    }
+}