Merge pull request #8031 from EVAST9919/changelog-stream-area-refactor

Fix double-dimming in changelog stream badge area

osu.Game/Graphics/UserInterface/ExpandingBar.cs

@@ -13,17 +13,17 @@ namespace osu.Game.Graphics.UserInterface
     /// </summary>
     public class ExpandingBar : Circle
     {
-        private bool isCollapsed;
+        private bool expanded = true;
 
-        public bool IsCollapsed
+        public bool Expanded
         {
-            get => isCollapsed;
+            get => expanded;
             set
             {
-                if (value == isCollapsed)
+                if (value == expanded)
                     return;
 
-                isCollapsed = value;
+                expanded = value;
                 updateState();
             }
         }
@@ -83,19 +83,21 @@ namespace osu.Game.Graphics.UserInterface
             updateState();
         }
 
-        public void Collapse() => IsCollapsed = true;
+        public void Collapse() => Expanded = false;
 
-        public void Expand() => IsCollapsed = false;
+        public void Expand() => Expanded = true;
 
         private void updateState()
         {
-            float newSize = IsCollapsed ? CollapsedSize : ExpandedSize;
-            Easing easingType = IsCollapsed ? Easing.Out : Easing.OutElastic;
+            float newSize = expanded ? ExpandedSize : CollapsedSize;
+            Easing easingType = expanded ? Easing.OutElastic : Easing.Out;
 
             if (RelativeSizeAxes == Axes.X)
                 this.ResizeHeightTo(newSize, 400, easingType);
             else
                 this.ResizeWidthTo(newSize, 400, easingType);
+
+            this.FadeTo(expanded ? 1 : 0.5f, 100, Easing.OutQuint);
         }
     }
 }

osu.Game/Overlays/Changelog/ChangelogHeader.cs

@@ -4,9 +4,11 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
+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.UserInterface;
 using osu.Game.Online.API.Requests.Responses;
 
@@ -22,6 +24,8 @@ namespace osu.Game.Overlays.Changelog
 
         private const string listing_string = "listing";
 
+        private Box streamsBackground;
+
         public ChangelogHeader()
         {
             TabControl.AddItem(listing_string);
@@ -40,6 +44,12 @@ namespace osu.Game.Overlays.Changelog
             };
         }
 
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            streamsBackground.Colour = colourProvider.Background5;
+        }
+
         private ChangelogHeaderTitle title;
 
         private void showBuild(ValueChangedEvent<APIChangelogBuild> e)
@@ -72,7 +82,21 @@ namespace osu.Game.Overlays.Changelog
             AutoSizeAxes = Axes.Y,
             Children = new Drawable[]
             {
-                Streams = new UpdateStreamBadgeArea(),
+                streamsBackground = new Box
+                {
+                    RelativeSizeAxes = Axes.Both
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Padding = new MarginPadding
+                    {
+                        Horizontal = 65,
+                        Vertical = 20
+                    },
+                    Child = Streams = new UpdateStreamBadgeArea()
+                }
             }
         };
 

osu.Game/Overlays/Changelog/UpdateStreamBadge.cs

@@ -26,7 +26,6 @@ namespace osu.Game.Overlays.Changelog
 
         private readonly APIUpdateStream stream;
 
-        private Container fadeContainer;
         private FillFlowContainer<SpriteText> text;
         private ExpandingBar expandingBar;
 
@@ -44,47 +43,39 @@ namespace osu.Game.Overlays.Changelog
 
             AddRange(new Drawable[]
             {
-                fadeContainer = new Container
+                text = new FillFlowContainer<SpriteText>
                 {
-                    RelativeSizeAxes = Axes.Both,
-                    Children = new Drawable[]
+                    AutoSizeAxes = Axes.Both,
+                    Direction = FillDirection.Vertical,
+                    Margin = new MarginPadding { Top = 6 },
+                    Children = new[]
                     {
-                        text = new FillFlowContainer<SpriteText>
+                        new OsuSpriteText
                         {
-                            AutoSizeAxes = Axes.X,
-                            RelativeSizeAxes = Axes.Y,
-                            Direction = FillDirection.Vertical,
-                            Margin = new MarginPadding { Top = 6 },
-                            Children = new[]
-                            {
-                                new OsuSpriteText
-                                {
-                                    Text = stream.DisplayName,
-                                    Font = OsuFont.GetFont(size: 12, weight: FontWeight.Black),
-                                },
-                                new OsuSpriteText
-                                {
-                                    Text = stream.LatestBuild.DisplayVersion,
-                                    Font = OsuFont.GetFont(size: 16, weight: FontWeight.Regular),
-                                },
-                                new OsuSpriteText
-                                {
-                                    Text = stream.LatestBuild.Users > 0 ? $"{"user".ToQuantity(stream.LatestBuild.Users, "N0")} online" : null,
-                                    Font = OsuFont.GetFont(size: 10),
-                                    Colour = colourProvider.Foreground1
-                                },
-                            }
+                            Text = stream.DisplayName,
+                            Font = OsuFont.GetFont(size: 12, weight: FontWeight.Black),
                         },
-                        expandingBar = new ExpandingBar
+                        new OsuSpriteText
                         {
-                            Anchor = Anchor.TopCentre,
-                            Colour = stream.Colour,
-                            ExpandedSize = 4,
-                            CollapsedSize = 2,
-                            IsCollapsed = true
+                            Text = stream.LatestBuild.DisplayVersion,
+                            Font = OsuFont.GetFont(size: 16, weight: FontWeight.Regular),
+                        },
+                        new OsuSpriteText
+                        {
+                            Text = stream.LatestBuild.Users > 0 ? $"{"user".ToQuantity(stream.LatestBuild.Users, "N0")} online" : null,
+                            Font = OsuFont.GetFont(size: 10),
+                            Colour = colourProvider.Foreground1
                         },
                     }
                 },
+                expandingBar = new ExpandingBar
+                {
+                    Anchor = Anchor.TopCentre,
+                    Colour = stream.Colour,
+                    ExpandedSize = 4,
+                    CollapsedSize = 2,
+                    Expanded = true
+                },
                 new HoverClickSounds()
             });
 
@@ -109,38 +100,41 @@ namespace osu.Game.Overlays.Changelog
 
         private void updateState()
         {
-            // Expand based on the local state
-            bool shouldExpand = Active.Value || IsHovered;
+            // highlighted regardless if we are hovered
+            bool textHighlighted = IsHovered;
+            bool barExpanded = IsHovered;
 
-            // Expand based on whether no build is selected and the badge area is hovered
-            shouldExpand |= SelectedTab.Value == null && !externalDimRequested;
-
-            if (shouldExpand)
+            if (SelectedTab.Value == null)
             {
-                expandingBar.Expand();
-                fadeContainer.FadeTo(1, transition_duration);
+                // at listing, all badges are highlighted when user is not hovering any badge.
+                textHighlighted |= !userHoveringArea;
+                barExpanded |= !userHoveringArea;
             }
             else
             {
-                expandingBar.Collapse();
-                fadeContainer.FadeTo(0.5f, transition_duration);
+                // bar is always expanded when active
+                barExpanded |= Active.Value;
+
+                // text is highlighted only when hovered or active (but not if in selection mode)
+                textHighlighted |= Active.Value && !userHoveringArea;
             }
 
-            text.FadeTo(externalDimRequested && !IsHovered ? 0.5f : 1, transition_duration);
+            expandingBar.Expanded = barExpanded;
+            text.FadeTo(textHighlighted ? 1 : 0.5f, transition_duration, Easing.OutQuint);
         }
 
-        private bool externalDimRequested;
+        private bool userHoveringArea;
 
-        public void EnableDim()
+        public bool UserHoveringArea
         {
-            externalDimRequested = true;
-            updateState();
-        }
+            set
+            {
+                if (value == userHoveringArea)
+                    return;
 
-        public void DisableDim()
-        {
-            externalDimRequested = false;
-            updateState();
+                userHoveringArea = value;
+                updateState();
+            }
         }
     }
 }

osu.Game/Overlays/Changelog/UpdateStreamBadgeArea.cs

@@ -6,25 +6,16 @@ using osu.Framework.Input.Events;
 using osu.Game.Online.API.Requests.Responses;
 using System.Collections.Generic;
 using System.Linq;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
-using osu.Framework.Allocation;
 
 namespace osu.Game.Overlays.Changelog
 {
     public class UpdateStreamBadgeArea : TabControl<APIUpdateStream>
     {
-        [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider colourProvider)
+        public UpdateStreamBadgeArea()
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
-
-            AddInternal(new Box
-            {
-                RelativeSizeAxes = Axes.Both,
-                Colour = colourProvider.Background5,
-            });
         }
 
         public void Populate(List<APIUpdateStream> streams)
@@ -36,7 +27,7 @@ namespace osu.Game.Overlays.Changelog
         protected override bool OnHover(HoverEvent e)
         {
             foreach (var streamBadge in TabContainer.Children.OfType<UpdateStreamBadge>())
-                streamBadge.EnableDim();
+                streamBadge.UserHoveringArea = true;
 
             return base.OnHover(e);
         }
@@ -44,26 +35,17 @@ namespace osu.Game.Overlays.Changelog
         protected override void OnHoverLost(HoverLostEvent e)
         {
             foreach (var streamBadge in TabContainer.Children.OfType<UpdateStreamBadge>())
-                streamBadge.DisableDim();
+                streamBadge.UserHoveringArea = false;
 
             base.OnHoverLost(e);
         }
 
-        protected override TabFillFlowContainer CreateTabFlow()
+        protected override TabFillFlowContainer CreateTabFlow() => new TabFillFlowContainer
         {
-            var flow = base.CreateTabFlow();
-
-            flow.RelativeSizeAxes = Axes.X;
-            flow.AutoSizeAxes = Axes.Y;
-            flow.AllowMultiline = true;
-            flow.Padding = new MarginPadding
-            {
-                Vertical = 20,
-                Horizontal = 85,
-            };
-
-            return flow;
-        }
+            RelativeSizeAxes = Axes.X,
+            AutoSizeAxes = Axes.Y,
+            AllowMultiline = true,
+        };
 
         protected override Dropdown<APIUpdateStream> CreateDropdown() => null;