1
0
mirror of https://github.com/ppy/osu.git synced 2025-01-28 02:43:19 +08:00

Share sidebar colouring logic by splitting out SidebarIconButton

This commit is contained in:
Bartłomiej Dach 2021-10-09 20:43:18 +02:00
parent b8616bf910
commit fe26d8e8df
No known key found for this signature in database
GPG Key ID: BCECCD4FA41F6497
5 changed files with 149 additions and 124 deletions

View File

@ -16,16 +16,16 @@ using osuTK;
namespace osu.Game.Overlays.Settings
{
public class Sidebar : Container<SidebarButton>, IStateful<ExpandedState>
public class Sidebar : Container<SidebarIconButton>, IStateful<ExpandedState>
{
private readonly Box background;
private readonly FillFlowContainer<SidebarButton> content;
private readonly FillFlowContainer<SidebarIconButton> content;
public const float DEFAULT_WIDTH = 70;
public const int EXPANDED_WIDTH = 200;
public event Action<ExpandedState> StateChanged;
protected override Container<SidebarButton> Content => content;
protected override Container<SidebarIconButton> Content => content;
public Sidebar()
{
@ -41,7 +41,7 @@ namespace osu.Game.Overlays.Settings
{
Children = new[]
{
content = new FillFlowContainer<SidebarButton>
content = new FillFlowContainer<SidebarIconButton>
{
Origin = Anchor.CentreLeft,
Anchor = Anchor.CentreLeft,

View File

@ -1,144 +1,46 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// 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 osuTK;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Input.Events;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterface;
using osu.Game.Graphics.Containers;
namespace osu.Game.Overlays.Settings
{
public class SidebarButton : OsuButton
public abstract class SidebarButton : OsuButton
{
private const double fade_duration = 50;
private readonly ConstrainedIconContainer iconContainer;
private readonly SpriteText headerText;
private readonly CircularContainer selectionIndicator;
private readonly Container text;
[Resolved]
private OverlayColourProvider colourProvider { get; set; }
protected OverlayColourProvider ColourProvider { get; private set; }
// always consider as part of flow, even when not visible (for the sake of the initial animation).
public override bool IsPresent => true;
private SettingsSection section;
public SettingsSection Section
{
get => section;
set
{
section = value;
headerText.Text = value.Header;
iconContainer.Icon = value.CreateIcon();
}
}
private bool selected;
public bool Selected
{
get => selected;
set
{
selected = value;
if (IsLoaded)
updateState();
}
}
public SidebarButton()
{
RelativeSizeAxes = Axes.X;
Height = 46;
AddRange(new Drawable[]
{
text = new Container
{
Width = Sidebar.DEFAULT_WIDTH,
RelativeSizeAxes = Axes.Y,
Colour = OsuColour.Gray(0.6f),
Children = new Drawable[]
{
headerText = new OsuSpriteText
{
Position = new Vector2(Sidebar.DEFAULT_WIDTH + 10, 0),
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
},
iconContainer = new ConstrainedIconContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(20),
},
}
},
selectionIndicator = new CircularContainer
{
Alpha = 0,
Width = 3,
Height = 18,
Masking = true,
CornerRadius = 1.5f,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Margin = new MarginPadding
{
Left = 9,
},
Child = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Colour4.White
}
},
});
}
protected abstract Drawable HoverTarget { get; }
[BackgroundDependencyLoader]
private void load()
{
BackgroundColour = colourProvider.Background5;
selectionIndicator.Colour = colourProvider.Highlight1;
BackgroundColour = ColourProvider.Background5;
}
protected override void LoadComplete()
{
base.LoadComplete();
updateState();
UpdateState();
FinishTransforms(true);
}
protected override bool OnHover(HoverEvent e)
{
updateState();
UpdateState();
return false;
}
protected override void OnHoverLost(HoverLostEvent e) => updateState();
protected override void OnHoverLost(HoverLostEvent e) => UpdateState();
private void updateState()
protected virtual void UpdateState()
{
if (Selected)
{
text.FadeColour(colourProvider.Content1, fade_duration, Easing.OutQuint);
selectionIndicator.FadeIn(fade_duration, Easing.OutQuint);
return;
}
text.FadeColour(IsHovered ? colourProvider.Light1 : colourProvider.Light3, fade_duration, Easing.OutQuint);
selectionIndicator.FadeOut(fade_duration, Easing.OutQuint);
HoverTarget.FadeColour(IsHovered ? ColourProvider.Light1 : ColourProvider.Light3, fade_duration, Easing.OutQuint);
}
}
}

View File

@ -0,0 +1,126 @@
// 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 osuTK;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.Containers;
namespace osu.Game.Overlays.Settings
{
public class SidebarIconButton : SidebarButton
{
private const double fade_duration = 50;
private readonly ConstrainedIconContainer iconContainer;
private readonly SpriteText headerText;
private readonly CircularContainer selectionIndicator;
private readonly Container text;
protected override Drawable HoverTarget => text;
// always consider as part of flow, even when not visible (for the sake of the initial animation).
public override bool IsPresent => true;
private SettingsSection section;
public SettingsSection Section
{
get => section;
set
{
section = value;
headerText.Text = value.Header;
iconContainer.Icon = value.CreateIcon();
}
}
private bool selected;
public bool Selected
{
get => selected;
set
{
selected = value;
if (IsLoaded)
UpdateState();
}
}
public SidebarIconButton()
{
RelativeSizeAxes = Axes.X;
Height = 46;
AddRange(new Drawable[]
{
text = new Container
{
Width = Sidebar.DEFAULT_WIDTH,
RelativeSizeAxes = Axes.Y,
Colour = OsuColour.Gray(0.6f),
Children = new Drawable[]
{
headerText = new OsuSpriteText
{
Position = new Vector2(Sidebar.DEFAULT_WIDTH + 10, 0),
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
},
iconContainer = new ConstrainedIconContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(20),
},
}
},
selectionIndicator = new CircularContainer
{
Alpha = 0,
Width = 3,
Height = 18,
Masking = true,
CornerRadius = 1.5f,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Margin = new MarginPadding
{
Left = 9,
},
Child = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Colour4.White
}
},
});
}
[BackgroundDependencyLoader]
private void load()
{
selectionIndicator.Colour = ColourProvider.Highlight1;
}
protected override void UpdateState()
{
if (Selected)
{
text.FadeColour(ColourProvider.Content1, fade_duration, Easing.OutQuint);
selectionIndicator.FadeIn(fade_duration, Easing.OutQuint);
return;
}
selectionIndicator.FadeOut(fade_duration, Easing.OutQuint);
base.UpdateState();
}
}
}

View File

@ -44,7 +44,7 @@ namespace osu.Game.Overlays
protected override Container<Drawable> Content => ContentContainer;
protected Sidebar Sidebar;
private SidebarButton selectedSidebarButton;
private SidebarIconButton selectedSidebarButton;
public SettingsSectionsContainer SectionsContainer { get; private set; }
@ -252,11 +252,11 @@ namespace osu.Game.Overlays
});
}
private IEnumerable<SidebarButton> createSidebarButtons()
private IEnumerable<SidebarIconButton> createSidebarButtons()
{
foreach (var section in SectionsContainer)
{
yield return new SidebarButton
yield return new SidebarIconButton
{
Section = section,
Action = () =>

View File

@ -7,7 +7,6 @@ using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterface;
using osu.Game.Overlays.Settings;
using osuTK;
@ -33,22 +32,20 @@ namespace osu.Game.Overlays
protected override bool DimMainContent => false; // dimming is handled by main overlay
private class BackButton : OsuButton
private class BackButton : SidebarButton
{
[Resolved]
private OverlayColourProvider colourProvider { get; set; }
private Container content;
protected override Drawable HoverTarget => content;
[BackgroundDependencyLoader]
private void load()
{
Size = new Vector2(Sidebar.DEFAULT_WIDTH);
BackgroundColour = colourProvider.Background5;
Hover.Colour = Colour4.Transparent;
AddRange(new Drawable[]
{
new Container
content = new Container
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,