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

Change display of "expanded" chevrons in many UI components to use scale instead of rotation
ppy · Jul 8, 2024 · c0a1696 · c0a1696
2 parents b2bdb67 + 910153c
commit c0a1696
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 17 deletions.
diff --git a/osu.Game.Tests/Visual/UserInterface/TestSceneCommentRepliesButton.cs b/osu.Game.Tests/Visual/UserInterface/TestSceneCommentRepliesButton.cs
@@ -47,9 +47,9 @@ public TestSceneCommentRepliesButton()
  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

diff --git a/osu.Game/Collections/CollectionDropdown.cs b/osu.Game/Collections/CollectionDropdown.cs
@@ -163,8 +163,8 @@ public partial class CollectionDropdownHeader : OsuDropdownHeader
  public CollectionDropdownHeader()
  {
  Height = 25;
- Icon.Size = new Vector2(16);
- Foreground.Padding = new MarginPadding { Top = 4, Bottom = 4, Left = 8, Right = 4 };
+ Chevron.Size = new Vector2(12);
+ Foreground.Padding = new MarginPadding { Top = 4, Bottom = 4, Left = 8, Right = 8 };
  }
  }
 

diff --git a/osu.Game/Graphics/UserInterface/OsuDropdown.cs b/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 @@ public partial class OsuDropdown<T> : Dropdown<T>, IKeyBindingHandler<GlobalActi
 
  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 @@ protected override LocalisableString Label
  set => Text.Text = value;
  }
 
- protected readonly SpriteIcon Icon;
+ protected readonly SpriteIcon Chevron;
+
+ public OsuDropdown<T>? Dropdown { get; set; }
 
  public OsuDropdownHeader()
  {
@@ -341,7 +350,7 @@ public OsuDropdownHeader()
  Origin = Anchor.CentreLeft,
  RelativeSizeAxes = Axes.X,
  },
- Icon = new SpriteIcon
+ Chevron = new SpriteIcon
  {
  Icon = FontAwesome.Solid.ChevronDown,
  Anchor = Anchor.CentreRight,
@@ -365,6 +374,9 @@ protected override void LoadComplete()
  {
  base.LoadComplete();
 
+ if (Dropdown != null)
+ Dropdown.Menu.StateChanged += _ => updateChevron();
+
  SearchBar.State.ValueChanged += _ => updateColour();
  Enabled.BindValueChanged(_ => updateColour());
  updateColour();
@@ -392,16 +404,23 @@ private void updateColour()
 
  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 },

diff --git a/osu.Game/Overlays/Comments/Buttons/ChevronButton.cs b/osu.Game/Overlays/Comments/Buttons/ChevronButton.cs
@@ -24,6 +24,7 @@ public ChevronButton()
  Anchor = Anchor.Centre,
  Origin = Anchor.Centre,
  Size = new Vector2(12),
+ Icon = FontAwesome.Solid.ChevronDown
  };
  }
 
@@ -38,11 +39,12 @@ protected override void LoadComplete()
  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);
  }
  }
 }
diff --git a/osu.Game/Overlays/Comments/Buttons/CommentRepliesButton.cs b/osu.Game/Overlays/Comments/Buttons/CommentRepliesButton.cs
@@ -89,7 +89,7 @@ private void load()
  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);
 

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

diff --git a/osu.Game/Overlays/News/Sidebar/MonthSection.cs b/osu.Game/Overlays/News/Sidebar/MonthSection.cs
@@ -118,7 +118,7 @@ protected override void LoadComplete()
 
  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);
  }
  }

diff --git a/osu.Game/Overlays/OverlayScrollContainer.cs b/osu.Game/Overlays/OverlayScrollContainer.cs
@@ -163,7 +163,7 @@ protected override void LoadComplete()
 
  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);
  }

diff --git a/osu.Game/Overlays/Profile/Header/Components/ToggleCoverButton.cs b/osu.Game/Overlays/Profile/Header/Components/ToggleCoverButton.cs
@@ -50,12 +50,13 @@ private void load(OverlayColourProvider colourProvider, AudioManager audio)
  {
  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);
  }
 }
diff --git a/osu.Game/Overlays/Rankings/SpotlightSelector.cs b/osu.Game/Overlays/Rankings/SpotlightSelector.cs
@@ -200,7 +200,7 @@ public SpotlightsDropdownHeader()
  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]