Tab control

osu.Desktop.VisualTests/Tests/TestCaseBeatmapDetailArea.cs

@@ -0,0 +1,27 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using OpenTK;
+using osu.Framework.Graphics;
+using osu.Framework.Screens.Testing;
+using osu.Game.Screens.Select;
+
+namespace osu.Desktop.VisualTests.Tests
+{
+    internal class TestCaseBeatmapDetailArea : TestCase
+    {
+        public override string Description => @"Beatmap details in song select";
+
+        public override void Reset()
+        {
+            base.Reset();
+
+            Add(new BeatmapDetailArea
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Size = new Vector2(550f, 450f),
+            });
+        }
+    }
+}

osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj

@@ -206,6 +206,7 @@
     <Compile Include="Tests\TestCaseBeatmapOptionsOverlay.cs" />
     <Compile Include="Tests\TestCaseLeaderboard.cs" />
     <Compile Include="Beatmaps\TestWorkingBeatmap.cs" />
+    <Compile Include="Tests\TestCaseBeatmapDetailArea.cs" />
   </ItemGroup>
   <ItemGroup />
   <ItemGroup />

osu.Game/Graphics/UserInterface/OsuTabControl.cs

@@ -28,6 +28,8 @@ namespace osu.Game.Graphics.UserInterface
 
         public OsuTabControl()
         {
+            TabContainer.Spacing = new Vector2(10f, 0f);
+
             if (!typeof(T).IsEnum)
                 throw new InvalidOperationException("OsuTabControl only supports enums as the generic type argument");
 
@@ -142,7 +144,7 @@ namespace osu.Game.Graphics.UserInterface
                 {
                 text = new OsuSpriteText
                 {
-                    Margin = new MarginPadding(5),
+                    Margin = new MarginPadding { Top = 5, Bottom = 5 },
                     Origin = Anchor.BottomLeft,
                     Anchor = Anchor.BottomLeft,
                     TextSize = 14,

osu.Game/Graphics/UserInterface/OsuTabControlCheckBox.cs

@@ -0,0 +1,134 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using System;
+using OpenTK;
+using OpenTK.Graphics;
+using osu.Framework.Allocation;
+using osu.Framework.Configuration;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Primitives;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Transforms;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Input;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    /// <summary>
+    /// A checkbox styled to be placed in line with an <see cref="OsuTabControl"/>
+    /// </summary>
+    public class OsuTabControlCheckBox : CheckBox
+    {
+        private const float transition_length = 500;
+
+        public event EventHandler<CheckBoxState> Action;
+
+        private Color4 accentColour;
+        public Color4 AccentColour
+        {
+            get { return accentColour; }
+            set
+            {
+                accentColour = value;
+
+                if (State == CheckBoxState.Unchecked)
+                {
+                    text.Colour = accentColour;
+                    icon.Colour = accentColour;
+                }
+            }
+        }
+
+        public string Text
+        {
+            get { return text.Text; }
+            set { text.Text = value; }
+        }
+
+        private Box box;
+        private SpriteText text;
+        private TextAwesome icon;
+
+        private void fadeIn()
+        {
+            box.FadeIn(transition_length, EasingTypes.OutQuint);
+            text.FadeColour(Color4.White, transition_length, EasingTypes.OutQuint);
+        }
+
+        private void fadeOut()
+        {
+            box.FadeOut(transition_length, EasingTypes.OutQuint);
+            text.FadeColour(accentColour, transition_length, EasingTypes.OutQuint);
+        }
+
+        protected override void OnChecked()
+        {
+            fadeIn();
+            icon.Icon = FontAwesome.fa_check_circle_o;
+            Action?.Invoke(this, State);
+        }
+
+        protected override void OnUnchecked()
+        {
+            fadeOut();
+            icon.Icon = FontAwesome.fa_circle_o;
+            Action?.Invoke(this, State);
+        }
+
+        protected override bool OnHover(InputState state)
+        {
+            fadeIn();
+            return base.OnHover(state);
+        }
+
+        protected override void OnHoverLost(InputState state)
+        {
+            if (State == CheckBoxState.Unchecked)
+                fadeOut();
+
+            base.OnHoverLost(state);
+        }
+
+        public OsuTabControlCheckBox()
+        {
+            AutoSizeAxes = Axes.Both;
+
+            Children = new Drawable[]
+            {
+                new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Margin = new MarginPadding { Top = 5, Bottom = 5, },
+                    Spacing = new Vector2(5f, 0f),
+                    Direction = FillDirection.Horizontal,
+                    Children = new Drawable[]
+                    {
+                        text = new OsuSpriteText
+                        {
+                            TextSize = 14,
+                            Font = @"Exo2.0-Bold",
+                        },
+                        icon = new TextAwesome
+                        {
+                            TextSize = 14,
+                            Icon = FontAwesome.fa_circle_o,
+                            Shadow = true,
+                        },
+                    },
+                },
+                box = new Box
+                {
+                    RelativeSizeAxes = Axes.X,
+                    Height = 1,
+                    Alpha = 0,
+                    Colour = Color4.White,
+                    Origin = Anchor.BottomLeft,
+                    Anchor = Anchor.BottomLeft,
+                }
+            };
+        }
+    }
+}

osu.Game/Screens/Select/BeatmapDetailArea.cs

@@ -0,0 +1,27 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Primitives;
+
+namespace osu.Game.Screens.Select
+{
+    public class BeatmapDetailArea : Container
+    {
+        public BeatmapDetailArea()
+        {
+            Children = new Drawable[]
+            {
+                new BeatmapDetailAreaTabControl
+                {
+                    RelativeSizeAxes = Axes.X,
+                },
+                new Container
+                {
+                    Padding = new MarginPadding { Top = BeatmapDetailAreaTabControl.HEIGHT },
+                },
+            };
+        }
+    }
+}

osu.Game/Screens/Select/BeatmapDetailAreaTabControl.cs

@@ -0,0 +1,75 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using OpenTK.Graphics;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+using osu.Game.Graphics.UserInterface;
+
+namespace osu.Game.Screens.Select
+{
+    public class BeatmapDetailAreaTabControl : Container
+    {
+        public static readonly float HEIGHT = 24;
+        private OsuTabControlCheckBox modsCheckbox;
+        private OsuTabControl<BeatmapDetailTab> tabs;
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colour)
+        {
+            modsCheckbox.AccentColour = tabs.AccentColour = colour.YellowLight;
+        }
+
+        public BeatmapDetailAreaTabControl()
+        {
+            Height = HEIGHT;
+
+            Children = new Drawable[]
+            {
+                new Box
+                {
+                    Anchor = Anchor.BottomLeft,
+                    Origin = Anchor.BottomLeft,
+                    RelativeSizeAxes = Axes.X,
+                    Height = 1,
+                    Colour = Color4.White.Opacity(0.2f),
+                },
+                tabs = new OsuTabControl<BeatmapDetailTab>
+                {
+                    Anchor = Anchor.BottomLeft,
+                    Origin = Anchor.BottomLeft,
+                    RelativeSizeAxes = Axes.Both,
+                },
+                modsCheckbox = new OsuTabControlCheckBox
+                {
+                    Anchor = Anchor.BottomRight,
+                    Origin = Anchor.BottomRight,
+                    Text = @"Mods",
+                },
+            };
+
+            tabs.ItemChanged += (sender, e) =>
+            {
+                
+            };
+
+            modsCheckbox.Action += (sender, e) =>
+            {
+                
+            };
+        }
+    }
+
+    public enum BeatmapDetailTab
+    {
+        Details,
+        Local,
+        Country,
+        Global,
+        Friends
+    }
+}

osu.Game/osu.Game.csproj

@@ -362,6 +362,9 @@
     <Compile Include="Users\Avatar.cs" />
     <Compile Include="Screens\Select\Leaderboards\DrawableRank.cs" />
     <Compile Include="Graphics\UserInterface\OsuTabControl.cs" />
+    <Compile Include="Screens\Select\BeatmapDetailArea.cs" />
+    <Compile Include="Graphics\UserInterface\OsuTabControlCheckBox.cs" />
+    <Compile Include="Screens\Select\BeatmapDetailAreaTabControl.cs" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="$(SolutionDir)\osu-framework\osu.Framework\osu.Framework.csproj">