2022-04-26 08:31:55 +00:00
// 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 osu.Framework.Allocation ;
using osu.Framework.Graphics ;
using osu.Framework.Graphics.Colour ;
2022-05-21 18:49:29 +00:00
using osu.Framework.Graphics.Containers ;
2022-04-26 08:31:55 +00:00
using osu.Framework.Graphics.Shapes ;
using osu.Framework.Input.Events ;
using osu.Framework.Localisation ;
using osu.Game.Graphics.Containers ;
using osu.Game.Graphics.Sprites ;
using osu.Game.Overlays ;
using osuTK ;
namespace osu.Game.Graphics.UserInterface
{
public partial class ShearedButton : OsuClickableContainer
{
public LocalisableString Text
{
get = > text . Text ;
set = > text . Text = value ;
}
2022-04-26 09:14:57 +00:00
public float TextSize
{
get = > text . Font . Size ;
set = > text . Font = OsuFont . TorusAlternate . With ( size : value ) ;
}
2022-04-26 08:31:55 +00:00
public Colour4 DarkerColour
{
set
{
darkerColour = value ;
Scheduler . AddOnce ( updateState ) ;
}
}
public Colour4 LighterColour
{
set
{
lighterColour = value ;
Scheduler . AddOnce ( updateState ) ;
}
}
public Colour4 TextColour
{
set
{
textColour = value ;
Scheduler . AddOnce ( updateState ) ;
}
}
[Resolved]
protected OverlayColourProvider ColourProvider { get ; private set ; } = null ! ;
private readonly Box background ;
private readonly OsuSpriteText text ;
private const float shear = 0.2f ;
private Colour4 ? darkerColour ;
private Colour4 ? lighterColour ;
private Colour4 ? textColour ;
2022-05-21 18:49:29 +00:00
private readonly Container backgroundLayer ;
2022-04-26 09:03:34 +00:00
private readonly Box flashLayer ;
2022-04-26 08:31:55 +00:00
/// <summary>
/// Creates a new <see cref="ShearedToggleButton"/>
/// </summary>
/// <param name="width">
/// The width of the button.
/// <list type="bullet">
/// <item>If a non-<see langword="null"/> value is provided, this button will have a fixed width equal to the provided value.</item>
/// <item>If a <see langword="null"/> value is provided (or the argument is omitted entirely), the button will autosize in width to fit the text.</item>
/// </list>
/// </param>
public ShearedButton ( float? width = null )
{
Height = 50 ;
Padding = new MarginPadding { Horizontal = shear * 50 } ;
2022-05-21 18:49:29 +00:00
const float corner_radius = 7 ;
Content . CornerRadius = corner_radius ;
2022-04-26 08:31:55 +00:00
Content . Shear = new Vector2 ( shear , 0 ) ;
Content . Masking = true ;
Content . Anchor = Content . Origin = Anchor . Centre ;
Children = new Drawable [ ]
{
2022-05-21 18:49:29 +00:00
backgroundLayer = new Container
2022-04-26 08:31:55 +00:00
{
2022-07-22 19:40:24 +00:00
RelativeSizeAxes = Axes . Y ,
2022-05-21 18:49:29 +00:00
CornerRadius = corner_radius ,
Masking = true ,
BorderThickness = 2 ,
Children = new Drawable [ ]
{
background = new Box
{
RelativeSizeAxes = Axes . Both
} ,
text = new OsuSpriteText
{
Anchor = Anchor . Centre ,
Origin = Anchor . Centre ,
Font = OsuFont . TorusAlternate . With ( size : 17 ) ,
Shear = new Vector2 ( - shear , 0 )
} ,
}
2022-04-26 09:03:34 +00:00
} ,
flashLayer = new Box
{
RelativeSizeAxes = Axes . Both ,
Colour = Colour4 . White . Opacity ( 0.9f ) ,
Blending = BlendingParameters . Additive ,
Alpha = 0 ,
} ,
2022-04-26 08:31:55 +00:00
} ;
if ( width ! = null )
{
Width = width . Value ;
2022-07-22 19:40:24 +00:00
backgroundLayer . RelativeSizeAxes = Axes . Both ;
2022-04-26 08:31:55 +00:00
}
else
{
AutoSizeAxes = Axes . X ;
2022-07-22 19:40:24 +00:00
backgroundLayer . AutoSizeAxes = Axes . X ;
2022-04-26 08:31:55 +00:00
text . Margin = new MarginPadding { Horizontal = 15 } ;
}
}
2022-11-03 08:44:54 +00:00
protected override HoverSounds CreateHoverSounds ( HoverSampleSet sampleSet ) = > new HoverClickSounds ( sampleSet ) { Enabled = { BindTarget = Enabled } } ;
2022-04-26 08:31:55 +00:00
protected override void LoadComplete ( )
{
base . LoadComplete ( ) ;
Enabled . BindValueChanged ( _ = > Scheduler . AddOnce ( updateState ) ) ;
updateState ( ) ;
FinishTransforms ( true ) ;
}
2022-04-26 09:03:34 +00:00
protected override bool OnClick ( ClickEvent e )
{
if ( Enabled . Value )
flashLayer . FadeOutFromOne ( 800 , Easing . OutQuint ) ;
return base . OnClick ( e ) ;
}
2022-04-26 08:31:55 +00:00
protected override bool OnHover ( HoverEvent e )
{
Scheduler . AddOnce ( updateState ) ;
return base . OnHover ( e ) ;
}
protected override void OnHoverLost ( HoverLostEvent e )
{
Scheduler . AddOnce ( updateState ) ;
base . OnHoverLost ( e ) ;
}
protected override bool OnMouseDown ( MouseDownEvent e )
{
2022-05-02 11:30:36 +00:00
Content . ScaleTo ( 0.9f , 2000 , Easing . OutQuint ) ;
2022-04-26 08:31:55 +00:00
return base . OnMouseDown ( e ) ;
}
protected override void OnMouseUp ( MouseUpEvent e )
{
Content . ScaleTo ( 1 , 1000 , Easing . OutElastic ) ;
base . OnMouseUp ( e ) ;
}
private void updateState ( )
{
var colourDark = darkerColour ? ? ColourProvider . Background3 ;
var colourLight = lighterColour ? ? ColourProvider . Background1 ;
var colourText = textColour ? ? ColourProvider . Content1 ;
if ( ! Enabled . Value )
{
2022-05-02 11:30:03 +00:00
colourDark = colourDark . Darken ( 1f ) ;
colourLight = colourLight . Darken ( 1f ) ;
2022-04-26 08:31:55 +00:00
}
else if ( IsHovered )
{
2022-04-26 09:11:03 +00:00
colourDark = colourDark . Lighten ( 0.2f ) ;
colourLight = colourLight . Lighten ( 0.2f ) ;
2022-04-26 08:31:55 +00:00
}
background . FadeColour ( colourDark , 150 , Easing . OutQuint ) ;
2022-05-21 18:49:29 +00:00
backgroundLayer . TransformTo ( nameof ( BorderColour ) , ColourInfo . GradientVertical ( colourDark , colourLight ) , 150 , Easing . OutQuint ) ;
2022-04-26 08:31:55 +00:00
if ( ! Enabled . Value )
colourText = colourText . Opacity ( 0.6f ) ;
text . FadeColour ( colourText , 150 , Easing . OutQuint ) ;
}
}
}