Implement InfoColumn component

osu.Game/Overlays/Rankings/SpotlightSelector.cs

@@ -2,14 +2,18 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Allocation;
+using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Online.API;
 using osu.Game.Online.API.Requests;
 using osu.Game.Online.API.Requests.Responses;
+using osuTK;
+using System;
 
 namespace osu.Game.Overlays.Rankings
 {
@@ -22,23 +26,49 @@ namespace osu.Game.Overlays.Rankings
         [Resolved]
         private IAPIProvider api { get; set; }
 
+        public readonly Bindable<APISpotlight> SelectedSpotlight = new Bindable<APISpotlight>();
+
+        private readonly InfoCoulmn startDateColumn;
+        private readonly InfoCoulmn endDateColumn;
+
         public SpotlightSelector()
         {
             RelativeSizeAxes = Axes.X;
-            Height = 200;
+            Height = 100;
             Children = new Drawable[]
             {
                 background = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
                 },
-                dropdown = new SpotlightsDropdown
+                new Container
                 {
-                    Anchor = Anchor.TopCentre,
+                    RelativeSizeAxes = Axes.Both,
-                    Origin = Anchor.TopCentre,
+                    Padding = new MarginPadding { Horizontal = UserProfileOverlay.CONTENT_X_MARGIN, Vertical = 10 },
-                    RelativeSizeAxes = Axes.X,
+                    Children = new Drawable[]
-                    Width = 0.8f,
+                    {
-                    Margin = new MarginPadding { Top = 10 }
+                        dropdown = new SpotlightsDropdown
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                            RelativeSizeAxes = Axes.X,
+                            Current = SelectedSpotlight,
+                            Depth = -float.MaxValue
+                        },
+                        new FillFlowContainer
+                        {
+                            Anchor = Anchor.BottomRight,
+                            Origin = Anchor.BottomRight,
+                            AutoSizeAxes = Axes.Both,
+                            Direction = FillDirection.Horizontal,
+                            Spacing = new Vector2(15, 0),
+                            Children = new Drawable[]
+                            {
+                                startDateColumn = new InfoCoulmn(@"Start Date"),
+                                endDateColumn = new InfoCoulmn(@"End Date"),
+                            }
+                        }
+                    }
                 },
                 loading = new DimmedLoadingLayer(),
             };
@@ -48,7 +78,12 @@ namespace osu.Game.Overlays.Rankings
         private void load(OsuColour colours)
         {
             background.Colour = colours.GreySeafoam;
-            dropdown.AccentColour = colours.GreySeafoamDarker;
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            SelectedSpotlight.BindValueChanged(onSelectionChanged);
         }
 
         public void FetchSpotlights()
@@ -64,9 +99,67 @@ namespace osu.Game.Overlays.Rankings
             api.Queue(request);
         }
 
+        private void onSelectionChanged(ValueChangedEvent<APISpotlight> spotlight)
+        {
+            startDateColumn.Value = dateToString(spotlight.NewValue.StartDate);
+            endDateColumn.Value = dateToString(spotlight.NewValue.EndDate);
+        }
+
+        private string dateToString(DateTimeOffset date) => $"{date.Year}-{date.Month:D2}-{date.Day:D2}";
+
+        private class InfoCoulmn : FillFlowContainer
+        {
+            public string Value
+            {
+                set => valueText.Text = value;
+            }
+
+            private readonly OsuSpriteText valueText;
+
+            public InfoCoulmn(string name)
+            {
+                AutoSizeAxes = Axes.Both;
+                Direction = FillDirection.Vertical;
+                Children = new Drawable[]
+                {
+                    new OsuSpriteText
+                    {
+                        Text = name,
+                        Font = OsuFont.GetFont(size: 10),
+                    },
+                    new Container
+                    {
+                        AutoSizeAxes = Axes.X,
+                        Height = 20,
+                        Child = valueText = new OsuSpriteText
+                        {
+                            Anchor = Anchor.BottomLeft,
+                            Origin = Anchor.BottomLeft,
+                            Font = OsuFont.GetFont(size: 18, weight: FontWeight.Light),
+                        }
+                    }
+                };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                valueText.Colour = colours.GreySeafoamLighter;
+            }
+        }
+
         private class SpotlightsDropdown : OsuDropdown<APISpotlight>
         {
-            protected override DropdownMenu CreateMenu() => base.CreateMenu().With(menu => menu.MaxHeight = 400);
+            private DropdownMenu menu;
+
+            protected override DropdownMenu CreateMenu() => menu = base.CreateMenu().With(m => m.MaxHeight = 400);
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                menu.BackgroundColour = colours.Gray1;
+                AccentColour = colours.GreySeafoamDarker;
+            }
         }
     }
 }