From 40bcc63a9091aa1878b95ae56310a311a6d1f9eb Mon Sep 17 00:00:00 2001 From: Kelvin <2yangk23@gmail.com> Date: Wed, 8 Mar 2017 01:19:00 -0800 Subject: [PATCH] Added and styled FilterTabControls --- .../Tests/TestCaseTabControl.cs | 60 +++++++++++++++++++ .../osu.Desktop.VisualTests.csproj | 1 + osu.Game/Screens/Select/FilterControl.cs | 53 +++++++++------- .../Screens/Select/Tab/FilterTabControl.cs | 8 +++ .../Select/Tab/FilterTabDropDownHeader.cs | 7 --- .../Select/Tab/FilterTabDropDownMenu.cs | 20 +++++-- .../Select/Tab/FilterTabDropDownMenuItem.cs | 25 ++++++-- osu.Game/Screens/Select/Tab/FilterTabItem.cs | 22 ++++--- 8 files changed, 148 insertions(+), 48 deletions(-) create mode 100644 osu.Desktop.VisualTests/Tests/TestCaseTabControl.cs diff --git a/osu.Desktop.VisualTests/Tests/TestCaseTabControl.cs b/osu.Desktop.VisualTests/Tests/TestCaseTabControl.cs new file mode 100644 index 0000000000..d534acbdc8 --- /dev/null +++ b/osu.Desktop.VisualTests/Tests/TestCaseTabControl.cs @@ -0,0 +1,60 @@ +// Copyright (c) 2007-2017 ppy Pty Ltd . +// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu-framework/master/LICENCE + +using System; +using System.Collections.Generic; +using System.Diagnostics; +using System.Linq; +using System.Text; +using System.Threading.Tasks; +using osu.Framework.Allocation; +using osu.Framework.Graphics; +using osu.Framework.Graphics.Containers; +using osu.Framework.Graphics.Primitives; +using osu.Framework.Graphics.UserInterface.Tab; +using osu.Framework.Screens.Testing; +using osu.Game.Graphics; +using osu.Game.Graphics.Sprites; +using osu.Game.Screens.Select.Filter; +using osu.Game.Screens.Select.Tab; + +namespace osu.Desktop.VisualTests.Tests +{ + public class TestCaseTabControl : TestCase + { + public override string Description => @"Filter for song select"; + + public override void Reset() + { + base.Reset(); + + OsuSpriteText text; + FilterTabControl filter; + + Add(new FillFlowContainer + { + Direction = FillDirection.Horizontal, + AutoSizeAxes = Axes.Both, + Children = new Drawable[] + { + filter = new FilterTabControl(GroupMode.All, GroupMode.RecentlyPlayed) + { + Width = 229, + AutoSort = true + }, + text = new OsuSpriteText + { + Text = "None", + Margin = new MarginPadding(4) + } + } + }); + + filter.ValueChanged += (sender, mode) => + { + Debug.WriteLine($"Selected {mode}"); + text.Text = mode.ToString(); + }; + } + } +} diff --git a/osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj b/osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj index 81ee7185bb..68aed38b34 100644 --- a/osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj +++ b/osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj @@ -193,6 +193,7 @@ + diff --git a/osu.Game/Screens/Select/FilterControl.cs b/osu.Game/Screens/Select/FilterControl.cs index 2d1ab6cf7b..06e909924a 100644 --- a/osu.Game/Screens/Select/FilterControl.cs +++ b/osu.Game/Screens/Select/FilterControl.cs @@ -93,16 +93,12 @@ namespace osu.Game.Screens.Select { private TabControl groupTabs; private TabControl sortTabs; + private OsuSpriteText spriteText; public GroupSortTabs() { RelativeSizeAxes = Axes.X; AutoSizeAxes = Axes.Y; - } - - [BackgroundDependencyLoader] - private void load(OsuColour colours) - { Children = new Drawable[] { new Box @@ -114,29 +110,42 @@ namespace osu.Game.Screens.Select Anchor = Anchor.TopLeft, Position = new Vector2(0, 23) }, - groupTabs = new FilterTabControl + groupTabs = new FilterTabControl(GroupMode.All, GroupMode.RecentlyPlayed) { - Width = 210 + Width = 230, + AutoSort = true }, - sortTabs = new FilterTabControl + new Container { - Width = 180, + AutoSizeAxes = Axes.Both, Anchor = Anchor.TopRight, - Origin = Anchor.TopRight + Origin = Anchor.TopRight, + Children = new Drawable[] + { + spriteText = new OsuSpriteText + { + Font = @"Exo2.0-Bold", + Text = "Sort results by", + TextSize = 14, + Margin = new MarginPadding + { + Top = 5, + Bottom = 5 + }, + }, + sortTabs = new FilterTabControl(87) + { + Width = 191, + AutoSort = true + } + } } }; - sortTabs.Prefix.Children = new Drawable[] - { - new OsuSpriteText - { - Font = @"Exo2.0-Bold", - Text = "Sort results by", - TextSize = 14, - Margin = new MarginPadding { Top = 5, Bottom = 5 }, - } - }; - groupTabs.Pin(GroupMode.All); - groupTabs.Pin(GroupMode.RecentlyPlayed); + } + + [BackgroundDependencyLoader] + private void load(OsuColour colours) { + spriteText.Colour = colours.GreenLight; } } } diff --git a/osu.Game/Screens/Select/Tab/FilterTabControl.cs b/osu.Game/Screens/Select/Tab/FilterTabControl.cs index b076f66bde..f36c088cf3 100644 --- a/osu.Game/Screens/Select/Tab/FilterTabControl.cs +++ b/osu.Game/Screens/Select/Tab/FilterTabControl.cs @@ -10,5 +10,13 @@ namespace osu.Game.Screens.Select.Tab protected override TabDropDownMenu CreateDropDownMenu() => new FilterTabDropDownMenu(); protected override TabItem CreateTabItem(T value) => new FilterTabItem { Value = value }; + + public FilterTabControl(float offset, params T[] pinned) : base(offset, pinned) + { + } + + public FilterTabControl(params T[] pinned) : base(pinned) + { + } } } diff --git a/osu.Game/Screens/Select/Tab/FilterTabDropDownHeader.cs b/osu.Game/Screens/Select/Tab/FilterTabDropDownHeader.cs index 7d90dea594..df4766c3e7 100644 --- a/osu.Game/Screens/Select/Tab/FilterTabDropDownHeader.cs +++ b/osu.Game/Screens/Select/Tab/FilterTabDropDownHeader.cs @@ -1,7 +1,6 @@ // Copyright (c) 2007-2017 ppy Pty Ltd . // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu-framework/master/LICENCE -using osu.Framework.Allocation; using osu.Framework.Graphics; using osu.Framework.Graphics.Primitives; using osu.Framework.Graphics.UserInterface; @@ -30,11 +29,5 @@ namespace osu.Game.Screens.Select.Tab } }; } - - [BackgroundDependencyLoader] - private void load(OsuColour colours) - { - ellipses.Colour = colours.Blue; - } } } diff --git a/osu.Game/Screens/Select/Tab/FilterTabDropDownMenu.cs b/osu.Game/Screens/Select/Tab/FilterTabDropDownMenu.cs index 7555a59d25..20f211aaa2 100644 --- a/osu.Game/Screens/Select/Tab/FilterTabDropDownMenu.cs +++ b/osu.Game/Screens/Select/Tab/FilterTabDropDownMenu.cs @@ -7,10 +7,12 @@ using System.Linq; using osu.Framework.Allocation; using osu.Framework.Extensions; using osu.Framework.Extensions.Color4Extensions; +using osu.Framework.Graphics.Primitives; using osu.Framework.Graphics.Transforms; using osu.Framework.Graphics.UserInterface; using osu.Framework.Graphics.UserInterface.Tab; using osu.Game.Graphics; +using osu.Game.Screens.Select.Filter; using OpenTK; using OpenTK.Graphics; @@ -18,6 +20,9 @@ namespace osu.Game.Screens.Select.Tab { public class FilterTabDropDownMenu : TabDropDownMenu { + public override float HeaderWidth => 14; + public override float HeaderHeight => 24; + protected override BasicDropDownHeader CreateHeader() => new FilterTabDropDownHeader(); protected override IEnumerable> GetDropDownItems(IEnumerable> values) @@ -25,9 +30,11 @@ namespace osu.Game.Screens.Select.Tab public FilterTabDropDownMenu() { - ContentContainer.CornerRadius = 4; MaxDropDownHeight = int.MaxValue; - ContentBackground.Colour = Color4.Black.Opacity(0.5f); + ContentContainer.CornerRadius = 4; + ContentBackground.Colour = Color4.Black.Opacity(0.9f); + ScrollContainer.ScrollDraggerVisible = false; + DropDownItemsContainer.Padding = new MarginPadding { Left = 5, Bottom = 7, Right = 5, Top = 7 }; if (!typeof(T).IsEnum) throw new InvalidOperationException("TabControl only supports enums as the generic type argument"); @@ -62,9 +69,12 @@ namespace osu.Game.Screens.Select.Tab } [BackgroundDependencyLoader] - private void load(OsuColour colours) { - //Colour = colours.White; - //SelectedItem.Colour = colours.Blue; + private void load(OsuColour colours) + { + if (typeof(T) == typeof(SortMode)) + Header.Colour = colours.GreenLight; + else + Header.Colour = colours.Blue; } } } diff --git a/osu.Game/Screens/Select/Tab/FilterTabDropDownMenuItem.cs b/osu.Game/Screens/Select/Tab/FilterTabDropDownMenuItem.cs index 42ab12e1e4..6747fd3eee 100644 --- a/osu.Game/Screens/Select/Tab/FilterTabDropDownMenuItem.cs +++ b/osu.Game/Screens/Select/Tab/FilterTabDropDownMenuItem.cs @@ -9,6 +9,7 @@ using osu.Framework.Graphics.UserInterface; using osu.Game.Graphics; using OpenTK.Graphics; using osu.Game.Graphics.Sprites; +using osu.Game.Screens.Select.Filter; namespace osu.Game.Screens.Select.Tab { @@ -16,9 +17,11 @@ namespace osu.Game.Screens.Select.Tab { public FilterTabDropDownMenuItem(string text, T value) : base(text, value) { - Foreground.Padding = new MarginPadding(5); - Background.Colour = Color4.Red; + Foreground.Padding = new MarginPadding { Top = 4, Bottom = 4 }; Foreground.Margin = new MarginPadding { Left = 7 }; + + Masking = true; + CornerRadius = 6; Foreground.Add(new OsuSpriteText { Text = text, @@ -30,10 +33,20 @@ namespace osu.Game.Screens.Select.Tab [BackgroundDependencyLoader] private void load(OsuColour colours) { - BackgroundColour = Color4.Black.Opacity(0.8f); - BackgroundColourHover = new Color4(124, 200, 253, 255); - BackgroundColourSelected = new Color4(124, 200, 253, 255); - //BackgroundColourSelected = new Color4(163, 196, 36, 255); // Green + BackgroundColour = Color4.Black.Opacity(0f); + ForegroundColourHover = Color4.Black; + ForegroundColourSelected = Color4.Black; + + if (typeof(T) == typeof(SortMode)) + { + BackgroundColourHover = new Color4(163, 196, 36, 255); + BackgroundColourSelected = new Color4(163, 196, 36, 255); + } + else + { + BackgroundColourHover = new Color4(124, 200, 253, 255); + BackgroundColourSelected = new Color4(124, 200, 253, 255); + } } } } diff --git a/osu.Game/Screens/Select/Tab/FilterTabItem.cs b/osu.Game/Screens/Select/Tab/FilterTabItem.cs index c24dbd7e15..3847c84c92 100644 --- a/osu.Game/Screens/Select/Tab/FilterTabItem.cs +++ b/osu.Game/Screens/Select/Tab/FilterTabItem.cs @@ -2,6 +2,7 @@ // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE using System; +using OpenTK.Graphics; using osu.Framework.Allocation; using osu.Framework.Extensions; using osu.Framework.Graphics; @@ -11,7 +12,7 @@ using osu.Framework.Graphics.UserInterface.Tab; using osu.Framework.Input; using osu.Game.Graphics; using osu.Game.Graphics.Sprites; -using OpenTK.Graphics; +using osu.Game.Screens.Select.Filter; namespace osu.Game.Screens.Select.Tab { @@ -90,16 +91,21 @@ namespace osu.Game.Screens.Select.Tab }; } - // TODO: Remove this (for debugging) - public override string ToString() { - return Value.ToString(); - } - [BackgroundDependencyLoader] private void load(OsuColour colours) { - fadeColour = colours.Blue; - text.Colour = colours.Blue; + if (typeof(T) == typeof(SortMode)) + { + fadeColour = colours.GreenLight; + if (!Active) + text.Colour = colours.GreenLight; + } + else + { + fadeColour = colours.Blue; + if (!Active) + text.Colour = colours.Blue; + } } } }