Header2

osu.Game.Tests/Visual/TestCaseChangelog.cs

@@ -17,13 +17,11 @@ namespace osu.Game.Tests.Visual
             base.LoadComplete();
 
             Add(changelog = new ChangelogOverlay());
-            changelog.ToggleVisibility();
+            
-
+            AddStep(@"Show", changelog.Show);
-            //AddStep(@"toggle", changelog.ToggleVisibility);
+            AddStep(@"Stable Release Stream", () => changelog.header.ShowReleaseStream("Stable", "Stable 20180626.1"));
-            AddStep(@"toggle text 1", () => changelog.header.ActivateRelease("Release 20180626.1"));
+            AddStep(@"Lazer Release Stream", () => changelog.header.ShowReleaseStream("Lazer", "Lazer 2018.713.1"));
-            AddStep(@"toggle text 2", () => changelog.header.ActivateRelease("Lazer 2018.713.1"));
+            AddStep(@"Listing", changelog.header.ActivateListing);
-            AddStep(@"toggle text 3", () => changelog.header.ActivateRelease("Beta 20180626"));
-            AddStep(@"go to listing", changelog.header.ActivateListing);
         }
 
         public TestCaseChangelog()

osu.Game.Tests/Visual/TestCaseTextBadgePair.cs

@@ -52,10 +52,10 @@ namespace osu.Game.Tests.Visual
             
             AddStep(@"deactivate", () => textBadgePair.Deactivate());
             AddStep(@"activate", () => textBadgePair.Activate());
-            AddStep(@"purple text", () => textBadgePair.SetTextColor(Color4.Purple, 100));
+            AddStep(@"purple text", () => textBadgePair.SetTextColour(Color4.Purple, 100));
-            AddStep(@"white text", () => textBadgePair.SetTextColor(Color4.White, 100));
+            AddStep(@"white text", () => textBadgePair.SetTextColour(Color4.White, 100));
-            AddStep(@"purple badge", () => textBadgePair.SetBadgeColor(Color4.Purple, 100));
+            AddStep(@"purple badge", () => textBadgePair.SetBadgeColour(Color4.Purple, 100));
-            AddStep(@"white badge", () => textBadgePair.SetBadgeColor(Color4.White, 100));
+            AddStep(@"white badge", () => textBadgePair.SetBadgeColour(Color4.White, 100));
             AddStep(@"hide text", () => textBadgePair.HideText(250));
             AddStep(@"show text", () => textBadgePair.ShowText(250));
         }

osu.Game/Input/Bindings/GlobalActionContainer.cs

@@ -63,6 +63,8 @@ namespace osu.Game.Input.Bindings
         ToggleChat,
         [Description("Toggle social overlay")]
         ToggleSocial,
+        [Description("Toggle changelog")]
+        ToggleChangelog,
         [Description("Reset input settings")]
         ResetInputSettings,
         [Description("Toggle toolbar")]

osu.Game/OsuGame.cs

@@ -53,6 +53,8 @@ namespace osu.Game
 
         private DialogOverlay dialogOverlay;
 
+        private ChangelogOverlay changelog;
+
         private DirectOverlay direct;
 
         private SocialOverlay social;
@@ -110,6 +112,8 @@ namespace osu.Game
 
         public void ToggleDirect() => direct.ToggleVisibility();
 
+        public void ToggleChangelog() => changelog.ToggleVisibility();
+
         /// <summary>
         /// Close all game-wide overlays.
         /// </summary>
@@ -281,6 +285,7 @@ namespace osu.Game
             loadComponentSingleFile(screenshotManager, Add);
 
             //overlay elements
+            loadComponentSingleFile(changelog = new ChangelogOverlay { Depth = -1 }, mainContent.Add);
             loadComponentSingleFile(direct = new DirectOverlay { Depth = -1 }, mainContent.Add);
             loadComponentSingleFile(social = new SocialOverlay { Depth = -1 }, mainContent.Add);
             loadComponentSingleFile(chat = new ChatOverlay { Depth = -1 }, mainContent.Add);
@@ -315,6 +320,7 @@ namespace osu.Game
             dependencies.Cache(settings);
             dependencies.Cache(onscreenDisplay);
             dependencies.Cache(social);
+            dependencies.Cache(changelog);
             dependencies.Cache(direct);
             dependencies.Cache(chat);
             dependencies.Cache(userProfile);
@@ -349,7 +355,7 @@ namespace osu.Game
             }
 
             // ensure only one of these overlays are open at once.
-            var singleDisplayOverlays = new OverlayContainer[] { chat, social, direct };
+            var singleDisplayOverlays = new OverlayContainer[] { chat, social, direct, changelog };
             overlays.AddRange(singleDisplayOverlays);
 
             foreach (var overlay in singleDisplayOverlays)
@@ -459,6 +465,9 @@ namespace osu.Game
                 case GlobalAction.ToggleSocial:
                     social.ToggleVisibility();
                     return true;
+                case GlobalAction.ToggleChangelog:
+                    changelog.ToggleVisibility();
+                    return true;
                 case GlobalAction.ResetInputSettings:
                     var sensitivity = frameworkConfig.GetBindable<double>(FrameworkSetting.CursorSensitivity);
 

osu.Game/Overlays/Changelog/ChangelogHeader.cs

@@ -1,6 +1,7 @@
 // Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
+using OpenTK;
 using OpenTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Extensions.Color4Extensions;
@@ -10,6 +11,7 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.Textures;
+using osu.Game.Graphics;
 using osu.Game.Graphics.Backgrounds;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Overlays.Changelog.Header;
@@ -55,13 +57,16 @@ namespace osu.Game.Overlays.Changelog
                         {
                             RelativeSizeAxes = Axes.Both,
                             Size = new OpenTK.Vector2(1),
+                            FillMode = FillMode.Fill,
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
                         },
-                        new Container // cover
+                        //new Container
-                        {
+                        //{
-                            RelativeSizeAxes = Axes.X,
+                        //    RelativeSizeAxes = Axes.X,
-                            Height = cover_height,
+                        //    Height = cover_height,
-                            Children = new Drawable[]
+                        //    Children = new Drawable[]
-                            {
+                        //    {
                                 new Container // this is the line badge-Changelog-Stream
                                 {
                                     Height = title_height,
@@ -108,12 +113,14 @@ namespace osu.Game.Overlays.Changelog
                                                 title = new OsuSpriteText
                                                 {
                                                     Text = "Changelog ",
-                                                    TextSize = 30,
+                                                    Font = @"Exo2.0-Light",
+                                                    TextSize = 38, // web: 30
                                                 },
                                                 titleStream = new OsuSpriteText
                                                 {
                                                     Text = "Listing",
-                                                    TextSize = 30,
+                                                    TextSize = 38, // web: 30
+                                                    Font = @"Exo2.0-Light",
                                                     Colour = purple,
                                                 },
                                             }
@@ -122,7 +129,7 @@ namespace osu.Game.Overlays.Changelog
                                 },
                                 breadcrumbContainer = new FillFlowContainer // Listing > Lazer 2018.713.1
                                 {
-                                    X = 2 * icon_margin + icon_size - 10,
+                                    X = 2 * icon_margin + icon_size - 8, // for some reason off by 3px
                                     Height = version_height,
                                     Anchor = Anchor.BottomLeft,
                                     Origin = Anchor.BottomLeft,
@@ -130,6 +137,21 @@ namespace osu.Game.Overlays.Changelog
                                     Children = new Drawable[]
                                     {
                                         listing = new TextBadgePairListing(purple),
+                                        new SpriteIcon
+                                        {
+                                            Anchor = Anchor.CentreLeft,
+                                            Origin = Anchor.CentreLeft,
+                                            Size = new Vector2(7),
+                                            Colour = OsuColour.FromHex(@"bf04ff"),
+                                            Icon = FontAwesome.fa_chevron_right,
+                                            Margin = new MarginPadding()
+                                            {
+                                                Top = 8,
+                                                Left = 5,
+                                                Right = 5,
+                                                Bottom = 15,
+                                            },
+                                        },
                                         releaseStream = new TextBadgePairRelease(purple, "Lazer")
                                     },
                                 },
@@ -141,42 +163,37 @@ namespace osu.Game.Overlays.Changelog
                                     Anchor = Anchor.BottomLeft,
                                     Origin = Anchor.CentreLeft,
                                 },
-                            }
+                        //    }
-                        }
+                        //}
                     }
                 }
             };
-            breadcrumbContainer.OnLoadComplete = d =>
+
+            // is this a bad way to do this?
+            OnLoadComplete = d =>
             {
                 releaseStream.OnActivation = listing.Deactivate;
-                listing.OnActivation = releaseStream.Deactivate;
+                listing.OnActivation = () =>
-            };
+                {
-            listing.text.OnUpdate = d =>
+                    releaseStream.Deactivate();
-            {
+                    ChangeHeaderText("Listing");
-                listing.lineBadge.ResizeWidthTo(listing.text.DrawWidth);
+                };
             };
         }
-        
+
-        public void ListingActivation()
+        public void ShowReleaseStream(string headerText, string breadcrumbText)
         {
-            releaseStream.Deactivate();
+            releaseStream.Activate(breadcrumbText);
+            ChangeHeaderText(headerText);
         }
 
-        public void ReleaseActivation()
+        private void ChangeHeaderText(string headerText)
         {
-            listing.Deactivate();
+            titleStream.Text = headerText;
+            titleStream.FlashColour(Color4.White, 500, Easing.OutQuad);
         }
 
-        public void ActivateRelease(string displayText)
+        public void ActivateListing() => listing.Activate();
-        {
-            releaseStream.Activate(displayText);
-            titleStream.Text = displayText;
-        }
-
-        public void ActivateListing()
-        {
-            listing.Activate();
-        }
         
         [BackgroundDependencyLoader]
         private void load(TextureStore textures)

osu.Game/Overlays/Changelog/Header/LineBadge.cs

@@ -30,6 +30,11 @@ namespace osu.Game.Overlays.Changelog.Header
             IsCollapsed = startCollapsed;
             Anchor = Anchor.BottomCentre;
             Origin = Anchor.Centre;
+            Margin = new MarginPadding()
+            {
+                Left = 10,
+                Right = 10,
+            };
         }
     }
 }

osu.Game/Overlays/Changelog/Header/TextBadgePair.cs

@@ -1,6 +1,7 @@
 // Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
+using OpenTK;
 using OpenTK.Graphics;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Colour;
@@ -8,6 +9,7 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Input;
+using osu.Game.Graphics;
 using osu.Game.Overlays.Changelog;
 using System;
 
@@ -16,23 +18,18 @@ namespace osu.Game.Overlays.Changelog.Header
 
     public class TextBadgePair : ClickableContainer
     {
-        // When in listing, "Listing" is white and doesn't change on mouseover
+        protected SpriteText text;
-        // when release stream is chosen, "Listing" turns purple, and lighter font
+        protected LineBadge lineBadge;
-        // on mouseover, the badge scales up
-        // Version name steals "Listing"'s styling
-
-        public SpriteText text;
-        public LineBadge lineBadge;
 
         public Action OnActivation;
         public Action OnDeactivation;
 
-        public void SetTextColor(ColourInfo newColour, double duration = 0, Easing easing = Easing.None)
+        public void SetTextColour(ColourInfo newColour, double duration = 0, Easing easing = Easing.None)
         {
             text.FadeColour(newColour, duration, easing);
         }
 
-        public void SetBadgeColor(ColourInfo newColour, double duration = 0, Easing easing = Easing.None)
+        public void SetBadgeColour(ColourInfo newColour, double duration = 0, Easing easing = Easing.None)
         {
             lineBadge.FadeColour(newColour, duration, easing);
         }
@@ -44,30 +41,42 @@ namespace osu.Game.Overlays.Changelog.Header
                 .FadeOut(duration, easing);
         }
 
-        public void ShowText(double duration = 0, Easing easing = Easing.InOutCubic)
+        public void ShowText(double duration = 0, string displayText = null, Easing easing = Easing.InOutCubic)
         {
-            lineBadge.IsCollapsed = false;
+            if (!string.IsNullOrEmpty(displayText)) text.Text = displayText;
             text.MoveToY(0, duration, easing)
                 .FadeIn(duration, easing)
-                .Finally(d => lineBadge.ResizeWidthTo(text.DrawWidth, 250));
+                .Finally(d => {
+                    // waiting until text is drawn to use its DrawWidth
+                    UpdateBadgeWidth();
+                    lineBadge.IsCollapsed = false;
+                });
         }
 
+        /// <param name="duration">
+        /// The duration of popping in and popping out not combined.
+        /// Full change takes double this time.</param>
         public void ChangeText(double duration = 0, string displayText = null, Easing easing = Easing.InOutCubic)
         {
             lineBadge.IsCollapsed = true;
             text.MoveToY(20, duration, easing)
                 .FadeOut(duration, easing)
-                .Finally(d =>
+                .Then()
-                {
+                .MoveToY(0, duration, easing)
-                    lineBadge.ResizeWidthTo(0);
+                .FadeIn(duration, easing)
-                    if (!string.IsNullOrEmpty(displayText)) text.Text = displayText;
+                .OnComplete(dd => {
-                    text.MoveToY(0, duration, easing)
+                    UpdateBadgeWidth();
-                        .FadeIn(duration, easing)
+                    lineBadge.IsCollapsed = false;
-                        .OnComplete(dd => {
-                            lineBadge.ResizeWidthTo(text.DrawWidth);
-                            lineBadge.IsCollapsed = false;
-                        });
                 });
+
+            // since using .finally/.oncomplete after first fadeout made the badge
+            // not hide sometimes in visual tests(because FinishTransforms()/CancelTransforms()
+            // didn't apply to transforms that come after the .finally), I'm using a scheduler here
+            Scheduler.AddDelayed(() =>
+            {
+                lineBadge.ResizeWidthTo(0); // resizes when not visible
+                if (!string.IsNullOrEmpty(displayText)) text.Text = displayText;
+            }, duration);
         }
 
         public TextBadgePair(ColourInfo badgeColour, string displayText = "Listing")
@@ -78,10 +87,10 @@ namespace osu.Game.Overlays.Changelog.Header
             {
                 text = new SpriteText
                 {
-                    TextSize = 20,
+                    TextSize = 21, // web is 16, but here it looks too small?
                     Text = displayText,
-                    Anchor = Anchor.TopCentre,
+                    Anchor = Anchor.TopLeft,
-                    Origin = Anchor.TopCentre,
+                    Origin = Anchor.TopLeft,
                     AlwaysPresent = true,
                     Margin = new MarginPadding()
                     {
@@ -109,5 +118,7 @@ namespace osu.Game.Overlays.Changelog.Header
             lineBadge.IsCollapsed = false;
             text.Font = "Exo2.0-Bold";
         }
+
+        public void UpdateBadgeWidth() => lineBadge.ResizeWidthTo(text.DrawWidth);
     }
 }

osu.Game/Overlays/Changelog/Header/TextBadgePairListing.cs

@@ -11,29 +11,33 @@ namespace osu.Game.Overlays.Changelog.Header
 {
     public class TextBadgePairListing : TextBadgePair
     {
-        private TextBadgePairRelease releaseBadge;
         private ColourInfo badgeColour;
 
         public TextBadgePairListing(ColourInfo badgeColour) : base(badgeColour, "Listing")
         {
-            this.releaseBadge = releaseBadge;
             this.badgeColour = badgeColour;
             text.Font = "Exo2.0-Bold";
+            text.Anchor = Anchor.TopCentre;
+            text.Origin = Anchor.TopCentre;
+
+            // this doesn't work without the scheduler
+            // (because the text isn't yet fully drawn when it's loaded?)
+            text.OnLoadComplete = d => Scheduler.Add(UpdateBadgeWidth);
         }
 
         public override void Activate()
         {
             lineBadge.IsCollapsed = false;
             text.Font = "Exo2.0-Bold";
-            SetTextColor(Color4.White, 100);
+            SetTextColour(Color4.White, 100);
             OnActivation?.Invoke();
         }
 
         public override void Deactivate()
         {
             lineBadge.IsCollapsed = true;
-            //text.Font = "Exo2.0-Regular"; // commented out since it makes bad resize-jumping
+            text.Font = "Exo2.0-Regular"; // commented out since it makes bad resize-jumping
-            SetTextColor(badgeColour, 100);
+            SetTextColour(badgeColour, 100);
             OnDeactivation?.Invoke();
         }
 

osu.Game/Overlays/Changelog/Header/TextBadgePairRelease.cs

@@ -10,6 +10,7 @@ namespace osu.Game.Overlays.Changelog.Header
     public class TextBadgePairRelease : TextBadgePair
     {
         private TextBadgePairListing listingBadge;
+        private const float transition_duration = 125;
 
         public TextBadgePairRelease(ColourInfo badgeColour, string displayText) : base(badgeColour, displayText)
         {
@@ -27,15 +28,15 @@ namespace osu.Game.Overlays.Changelog.Header
         public void Activate(string displayText = null)
         {
             ClearTransforms();
-            if (text.IsPresent) ChangeText(250, displayText);
+            if (!lineBadge.IsCollapsed) ChangeText(transition_duration, displayText);
-            else ShowText();
+            else ShowText(transition_duration, displayText);
             OnActivation?.Invoke();
         }
 
         public override void Deactivate()
         {
             FinishTransforms(true);
-            HideText(250);
+            HideText(transition_duration);
             OnDeactivation?.Invoke();
         }
     }

osu.Game/Overlays/Toolbar/ToolbarChangelogButton.cs

@@ -0,0 +1,22 @@
+// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Allocation;
+using osu.Game.Graphics;
+
+namespace osu.Game.Overlays.Toolbar
+{
+    public class ToolbarChangelogButton : ToolbarOverlayToggleButton
+    {
+        public ToolbarChangelogButton()
+        {
+            SetIcon(FontAwesome.fa_list);
+        }
+
+        [BackgroundDependencyLoader(true)]
+        private void load(ChangelogOverlay changelog)
+        {
+            StateContainer = changelog;
+        }
+    }
+}