Merge pull request #28762 from frenzibyte/change-chevron-display

Change display of "expanded" chevrons in many UI components to use scale instead of rotation

osu.Game.Tests/Visual/UserInterface/TestSceneCommentRepliesButton.cs

@@ -47,9 +47,9 @@ namespace osu.Game.Tests.Visual.UserInterface
         public void TestArrowDirection()
         {
             AddStep("Set upwards", () => button.SetIconDirection(true));
-            AddAssert("Icon facing upwards", () => button.Icon.Scale.Y == -1);
+            AddUntilStep("Icon facing upwards", () => button.Icon.Scale.Y == -1);
             AddStep("Set downwards", () => button.SetIconDirection(false));
-            AddAssert("Icon facing downwards", () => button.Icon.Scale.Y == 1);
+            AddUntilStep("Icon facing downwards", () => button.Icon.Scale.Y == 1);
         }
 
         private partial class TestButton : CommentRepliesButton

osu.Game/Collections/CollectionDropdown.cs

@@ -163,8 +163,8 @@ namespace osu.Game.Collections
             public CollectionDropdownHeader()
             {
                 Height = 25;
-                Icon.Size = new Vector2(16);
+                Chevron.Size = new Vector2(12);
-                Foreground.Padding = new MarginPadding { Top = 4, Bottom = 4, Left = 8, Right = 4 };
+                Foreground.Padding = new MarginPadding { Top = 4, Bottom = 4, Left = 8, Right = 8 };
             }
         }
 

osu.Game/Graphics/UserInterface/OsuDropdown.cs

@@ -1,6 +1,7 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using System.Diagnostics;
 using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Audio;
@@ -30,6 +31,12 @@ namespace osu.Game.Graphics.UserInterface
 
         protected override DropdownMenu CreateMenu() => new OsuDropdownMenu();
 
+        public OsuDropdown()
+        {
+            if (Header is OsuDropdownHeader osuHeader)
+                osuHeader.Dropdown = this;
+        }
+
         public bool OnPressed(KeyBindingPressEvent<GlobalAction> e)
         {
             if (e.Repeat) return false;
@@ -307,7 +314,9 @@ namespace osu.Game.Graphics.UserInterface
                 set => Text.Text = value;
             }
 
-            protected readonly SpriteIcon Icon;
+            protected readonly SpriteIcon Chevron;
+
+            public OsuDropdown<T>? Dropdown { get; set; }
 
             public OsuDropdownHeader()
             {
@@ -341,7 +350,7 @@ namespace osu.Game.Graphics.UserInterface
                                 Origin = Anchor.CentreLeft,
                                 RelativeSizeAxes = Axes.X,
                             },
-                            Icon = new SpriteIcon
+                            Chevron = new SpriteIcon
                             {
                                 Icon = FontAwesome.Solid.ChevronDown,
                                 Anchor = Anchor.CentreRight,
@@ -365,6 +374,9 @@ namespace osu.Game.Graphics.UserInterface
             {
                 base.LoadComplete();
 
+                if (Dropdown != null)
+                    Dropdown.Menu.StateChanged += _ => updateChevron();
+
                 SearchBar.State.ValueChanged += _ => updateColour();
                 Enabled.BindValueChanged(_ => updateColour());
                 updateColour();
@@ -392,16 +404,23 @@ namespace osu.Game.Graphics.UserInterface
 
                 if (SearchBar.State.Value == Visibility.Visible)
                 {
-                    Icon.Colour = hovered ? hoveredColour.Lighten(0.5f) : Colour4.White;
+                    Chevron.Colour = hovered ? hoveredColour.Lighten(0.5f) : Colour4.White;
                     Background.Colour = unhoveredColour;
                 }
                 else
                 {
-                    Icon.Colour = Color4.White;
+                    Chevron.Colour = Color4.White;
                     Background.Colour = hovered ? hoveredColour : unhoveredColour;
                 }
             }
 
+            private void updateChevron()
+            {
+                Debug.Assert(Dropdown != null);
+                bool open = Dropdown.Menu.State == MenuState.Open;
+                Chevron.ScaleTo(open ? new Vector2(1f, -1f) : Vector2.One, 300, Easing.OutQuint);
+            }
+
             protected override DropdownSearchBar CreateSearchBar() => new OsuDropdownSearchBar
             {
                 Padding = new MarginPadding { Right = 26 },

osu.Game/Overlays/Comments/Buttons/ChevronButton.cs

@@ -24,6 +24,7 @@ namespace osu.Game.Overlays.Comments.Buttons
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,
                 Size = new Vector2(12),
+                Icon = FontAwesome.Solid.ChevronDown
             };
         }
 
@@ -38,11 +39,12 @@ namespace osu.Game.Overlays.Comments.Buttons
             base.LoadComplete();
             Action = Expanded.Toggle;
             Expanded.BindValueChanged(onExpandedChanged, true);
+            FinishTransforms(true);
         }
 
         private void onExpandedChanged(ValueChangedEvent<bool> expanded)
         {
-            icon.Icon = expanded.NewValue ? FontAwesome.Solid.ChevronUp : FontAwesome.Solid.ChevronDown;
+            icon.ScaleTo(expanded.NewValue ? new Vector2(1f, -1f) : Vector2.One, 300, Easing.OutQuint);
         }
     }
 }

osu.Game/Overlays/Comments/Buttons/CommentRepliesButton.cs

@@ -89,7 +89,7 @@ namespace osu.Game.Overlays.Comments.Buttons
             background.Colour = colourProvider.Background2;
         }
 
-        protected void SetIconDirection(bool upwards) => icon.ScaleTo(new Vector2(1, upwards ? -1 : 1));
+        protected void SetIconDirection(bool upwards) => icon.ScaleTo(upwards ? new Vector2(1f, -1f) : Vector2.One, 300, Easing.OutQuint);
 
         public void ToggleTextVisibility(bool visible) => text.FadeTo(visible ? 1 : 0, 200, Easing.OutQuint);
 

osu.Game/Overlays/Music/NowPlayingCollectionDropdown.cs

@@ -53,8 +53,8 @@ namespace osu.Game.Overlays.Music
             {
                 CornerRadius = 5;
                 Height = 30;
-                Icon.Size = new Vector2(14);
+                Chevron.Size = new Vector2(14);
-                Icon.Margin = new MarginPadding(0);
+                Chevron.Margin = new MarginPadding(0);
                 Foreground.Padding = new MarginPadding { Top = 4, Bottom = 4, Left = 10, Right = 10 };
                 EdgeEffect = new EdgeEffectParameters
                 {

osu.Game/Overlays/News/Sidebar/MonthSection.cs

@@ -118,7 +118,7 @@ namespace osu.Game.Overlays.News.Sidebar
 
                 Expanded.BindValueChanged(open =>
                 {
-                    icon.Scale = new Vector2(1, open.NewValue ? -1 : 1);
+                    icon.ScaleTo(open.NewValue ? new Vector2(1f, -1f) : Vector2.One, 300, Easing.OutQuint);
                 }, true);
             }
         }

osu.Game/Overlays/OverlayScrollContainer.cs

@@ -163,7 +163,7 @@ namespace osu.Game.Overlays
 
                 LastScrollTarget.BindValueChanged(target =>
                 {
-                    spriteIcon.RotateTo(target.NewValue != null ? 180 : 0, fade_duration, Easing.OutQuint);
+                    spriteIcon.ScaleTo(target.NewValue != null ? new Vector2(1f, -1f) : Vector2.One, fade_duration, Easing.OutQuint);
                     TooltipText = target.NewValue != null ? CommonStrings.ButtonsBackToPrevious : CommonStrings.ButtonsBackToTop;
                 }, true);
             }

osu.Game/Overlays/Profile/Header/Components/ToggleCoverButton.cs

@@ -50,12 +50,13 @@ namespace osu.Game.Overlays.Profile.Header.Components
             {
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,
-                Size = new Vector2(10.5f, 12)
+                Size = new Vector2(10.5f, 12),
+                Icon = FontAwesome.Solid.ChevronDown,
             };
 
             CoverExpanded.BindValueChanged(visible => updateState(visible.NewValue), true);
         }
 
-        private void updateState(bool detailsVisible) => icon.Icon = detailsVisible ? FontAwesome.Solid.ChevronUp : FontAwesome.Solid.ChevronDown;
+        private void updateState(bool detailsVisible) => icon.ScaleTo(detailsVisible ? new Vector2(1f, -1f) : Vector2.One, 300, Easing.OutQuint);
     }
 }

osu.Game/Overlays/Rankings/SpotlightSelector.cs

@@ -200,7 +200,7 @@ namespace osu.Game.Overlays.Rankings
                     Text.Font = OsuFont.GetFont(size: 15);
                     Text.Padding = new MarginPadding { Vertical = 1.5f }; // osu-web line-height difference compensation
                     Foreground.Padding = new MarginPadding { Horizontal = 10, Vertical = 15 };
-                    Margin = Icon.Margin = new MarginPadding(0);
+                    Margin = Chevron.Margin = new MarginPadding(0);
                 }
 
                 [BackgroundDependencyLoader]