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;
 
@@ -43,16 +42,10 @@ namespace osu.Game.Overlays.Changelog
             Padding = new MarginPadding(5);
 
             AddRange(new Drawable[]
-            {
-                fadeContainer = new Container
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Children = new Drawable[]
             {
                 text = new FillFlowContainer<SpriteText>
                 {
-                            AutoSizeAxes = Axes.X,
-                            RelativeSizeAxes = Axes.Y,
+                    AutoSizeAxes = Axes.Both,
                     Direction = FillDirection.Vertical,
                     Margin = new MarginPadding { Top = 6 },
                     Children = new[]
@@ -81,9 +74,7 @@ namespace osu.Game.Overlays.Changelog
                     Colour = stream.Colour,
                     ExpandedSize = 4,
                     CollapsedSize = 2,
-                            IsCollapsed = true
-                        },
-                    }
+                    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();
-        }
-
-        public void DisableDim()
+            set
             {
-            externalDimRequested = false;
+                if (value == userHoveringArea)
+                    return;
+
+                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,27 +35,18 @@ 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,
+            RelativeSizeAxes = Axes.X,
+            AutoSizeAxes = Axes.Y,
+            AllowMultiline = true,
         };
 
-            return flow;
-        }
-
         protected override Dropdown<APIUpdateStream> CreateDropdown() => null;
 
         protected override TabItem<APIUpdateStream> CreateTabItem(APIUpdateStream value) =>