RepoMirrors
/
osu
mirror of https://github.com/ppy/osu
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Tidy up button hierarchy

This commit is contained in:
Dean Herbert 2018-07-13 16:28:18 +09:00
parent 0676919496
commit ee2c7c50ad
6 changed files with 175 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
osu.Game.Tests/Visual/TestCaseIconButton.cs
View File

@ -25,11 +25,7 @@ public TestCaseIconButton()
Children = new[]
{
new NamedIconButton("No change", new IconButton()),
new NamedIconButton("Background colours", new IconButton
{
FlashColour = Color4.DarkGreen,
HoverColour = Color4.Green,
}),
new NamedIconButton("Background colours", new ColouredIconButton()),
new NamedIconButton("Full-width", new IconButton { ButtonSize = new Vector2(200, 30) }),
new NamedIconButton("Unchanging size", new IconButton(), false),
new NamedIconButton("Icon colours", new IconButton
@ -41,6 +37,15 @@ public TestCaseIconButton()
};
}
private class ColouredIconButton : IconButton
{
public ColouredIconButton()
{
FlashColour = Color4.DarkGreen;
HoverColour = Color4.Green;
}
}
private class NamedIconButton : Container
{
public NamedIconButton(string name, IconButton button, bool allowSizeChange = true)

111
osu.Game/Graphics/UserInterface/IconButton.cs
View File

@ -3,31 +3,17 @@
using OpenTK;
using OpenTK.Graphics;
using osu.Framework.Allocation;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Input;
using osu.Game.Graphics.Containers;
namespace osu.Game.Graphics.UserInterface
{
public class IconButton : OsuClickableContainer
public class IconButton : OsuAnimatedButton
{
public const float BUTTON_SIZE = 30;
private Color4? flashColour;
/// <summary>
/// The colour that should be flashed when the <see cref="IconButton"/> is clicked.
/// </summary>
public Color4 FlashColour
{
get { return flashColour ?? Color4.White; }
set { flashColour = value; }
}
private Color4? iconColour;
/// <summary>
/// The icon colour. This does not affect <see cref="IconButton.Colour"/>.
/// </summary>
@ -42,6 +28,7 @@ public Color4 IconColour
}
private Color4? iconHoverColour;
/// <summary>
/// The icon colour while the <see cref="IconButton"/> is hovered.
/// </summary>
@ -51,20 +38,6 @@ public Color4 IconHoverColour
set { iconHoverColour = value; }
}
private Color4? hoverColour;
/// <summary>
/// The background colour of the <see cref="IconButton"/> while it is hovered.
/// </summary>
public Color4 HoverColour
{
get { return hoverColour ?? Color4.White; }
set
{
hoverColour = value;
hover.Colour = value;
}
}
/// <summary>
/// The icon.
/// </summary>
@ -88,93 +61,39 @@ public Vector2 IconScale
/// </summary>
public Vector2 ButtonSize
{
get { return content.Size; }
set { content.Size = value; }
get => Content.Size;
set
{
Content.RelativeSizeAxes = Axes.None;
Content.Size = value;
}
}
private readonly Container content;
private readonly SpriteIcon icon;
private readonly Box hover;
public IconButton()
{
AutoSizeAxes = Axes.Both;
ButtonSize = new Vector2(BUTTON_SIZE);
Children = new Drawable[]
Add(icon = new SpriteIcon
{
content = new Container
{
Origin = Anchor.Centre,
Anchor = Anchor.Centre,
Size = new Vector2(BUTTON_SIZE),
CornerRadius = 5,
Masking = true,
EdgeEffect = new EdgeEffectParameters
{
Colour = Color4.Black.Opacity(0.04f),
Type = EdgeEffectType.Shadow,
Radius = 5,
},
Children = new Drawable[]
{
hover = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0,
},
icon = new SpriteIcon
{
Origin = Anchor.Centre,
Anchor = Anchor.Centre,
Size = new Vector2(18),
}
}
}
};
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
if (hoverColour == null)
HoverColour = colours.Yellow.Opacity(0.6f);
if (flashColour == null)
FlashColour = colours.Yellow;
Enabled.ValueChanged += enabled => this.FadeColour(enabled ? Color4.White : colours.Gray9, 200, Easing.OutQuint);
Origin = Anchor.Centre,
Anchor = Anchor.Centre,
Size = new Vector2(18),
});
}
protected override bool OnHover(InputState state)
{
hover.FadeIn(500, Easing.OutQuint);
icon.FadeColour(IconHoverColour, 500, Easing.OutQuint);
return base.OnHover(state);
}
protected override void OnHoverLost(InputState state)
{
hover.FadeOut(500, Easing.OutQuint);
icon.FadeColour(IconColour, 500, Easing.OutQuint);
base.OnHoverLost(state);
}
protected override bool OnClick(InputState state)
{
hover.FlashColour(FlashColour, 800, Easing.OutQuint);
return base.OnClick(state);
}
protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
{
content.ScaleTo(0.75f, 2000, Easing.OutQuint);
return base.OnMouseDown(state, args);
}
protected override bool OnMouseUp(InputState state, MouseUpEventArgs args)
{
content.ScaleTo(1, 1000, Easing.OutElastic);
return base.OnMouseUp(state, args);
}
}
}

109
osu.Game/Graphics/UserInterface/OsuAnimatedButton.cs Normal file
View File

@ -0,0 +1,109 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using osu.Framework.Allocation;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Input;
using osu.Game.Graphics.Containers;
using OpenTK.Graphics;
namespace osu.Game.Graphics.UserInterface
{
/// <summary>
/// Highlight on hover, bounce on click.
/// </summary>
public class OsuAnimatedButton : OsuClickableContainer
{
/// <summary>
/// The colour that should be flashed when the <see cref="IconButton"/> is clicked.
/// </summary>
protected Color4 FlashColour = Color4.White.Opacity(0.3f);
private Color4 hoverColour = Color4.White.Opacity(0.1f);
/// <summary>
/// The background colour of the <see cref="IconButton"/> while it is hovered.
/// </summary>
protected Color4 HoverColour
{
get => hoverColour;
set
{
hoverColour = value;
hover.Colour = value;
}
}
protected override Container<Drawable> Content => content;
private readonly Container content;
private readonly Box hover;
public OsuAnimatedButton()
{
base.Content.Add(content = new Container
{
Origin = Anchor.Centre,
Anchor = Anchor.Centre,
RelativeSizeAxes = Axes.Both,
CornerRadius = 5,
Masking = true,
EdgeEffect = new EdgeEffectParameters
{
Colour = Color4.Black.Opacity(0.04f),
Type = EdgeEffectType.Shadow,
Radius = 5,
},
Children = new Drawable[]
{
hover = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = HoverColour,
Blending = BlendingMode.Additive,
Alpha = 0,
},
}
});
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
Enabled.BindValueChanged(enabled => this.FadeColour(enabled ? Color4.White : colours.Gray9, 200, Easing.OutQuint), true);
}
protected override bool OnHover(InputState state)
{
hover.FadeIn(500, Easing.OutQuint);
return base.OnHover(state);
}
protected override void OnHoverLost(InputState state)
{
hover.FadeOut(500, Easing.OutQuint);
base.OnHoverLost(state);
}
protected override bool OnClick(InputState state)
{
hover.FlashColour(FlashColour, 800, Easing.OutQuint);
return base.OnClick(state);
}
protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
{
Content.ScaleTo(0.75f, 2000, Easing.OutQuint);
return base.OnMouseDown(state, args);
}
protected override bool OnMouseUp(InputState state, MouseUpEventArgs args)
{
Content.ScaleTo(1, 1000, Easing.OutElastic);
return base.OnMouseUp(state, args);
}
}
}

62
osu.Game/Overlays/Direct/DownloadButton.cs
View File

@ -3,19 +3,16 @@
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Input;
using osu.Game.Beatmaps;
using osu.Game.Beatmaps.Drawables;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.UserInterface;
using OpenTK;
using OpenTK.Graphics;
namespace osu.Game.Overlays.Direct
{
public class DownloadButton : OsuClickableContainer
public class DownloadButton : OsuAnimatedButton
{
private readonly SpriteIcon icon;
private readonly SpriteIcon checkmark;
@ -26,17 +23,13 @@ public class DownloadButton : OsuClickableContainer
public DownloadButton(BeatmapSetInfo set, bool noVideo = false)
{
Children = new Drawable[]
AddRange(new Drawable[]
{
downloader = new BeatmapSetDownloader(set, noVideo),
new CircularContainer
background = new Box
{
RelativeSizeAxes = Axes.Both,
Masking = true,
Child = background = new Box
{
RelativeSizeAxes = Axes.Both,
},
Depth = float.MaxValue
},
icon = new SpriteIcon
{
@ -53,18 +46,19 @@ public DownloadButton(BeatmapSetInfo set, bool noVideo = false)
Size = Vector2.Zero,
Icon = FontAwesome.fa_check,
}
};
});
Action = () =>
{
if (downloader.DownloadState.Value == BeatmapSetDownloader.DownloadStatus.Downloading)
if (downloader.DownloadState == BeatmapSetDownloader.DownloadStatus.Downloading)
{
// todo: replace with ShakeContainer after https://github.com/ppy/osu/pull/2909 is merged.
Content.MoveToX(-5, 50, Easing.OutSine).Then()
.MoveToX(5, 100, Easing.InOutSine).Then()
.MoveToX(-5, 100, Easing.InOutSine).Then()
.MoveToX(0, 50, Easing.InSine);
}
else if (downloader.DownloadState.Value == BeatmapSetDownloader.DownloadStatus.Downloaded)
else if (downloader.DownloadState == BeatmapSetDownloader.DownloadStatus.Downloaded)
{
// TODO: Jump to song select with this set when the capability is implemented
}
@ -73,54 +67,24 @@ public DownloadButton(BeatmapSetInfo set, bool noVideo = false)
downloader.Download();
}
};
downloader.DownloadState.ValueChanged += _ => updateState();
Colour = Color4.White;
}
protected override void LoadComplete()
{
base.LoadComplete();
updateState();
downloader.DownloadState.BindValueChanged(updateState, true);
}
[BackgroundDependencyLoader(permitNulls:true)]
[BackgroundDependencyLoader(permitNulls: true)]
private void load(OsuColour colours)
{
this.colours = colours;
}
protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
private void updateState(BeatmapSetDownloader.DownloadStatus state)
{
Content.ScaleTo(0.9f, 1000, Easing.Out);
return base.OnMouseDown(state, args);
}
protected override bool OnMouseUp(InputState state, MouseUpEventArgs args)
{
Content.ScaleTo(1f, 500, Easing.OutElastic);
return base.OnMouseUp(state, args);
}
protected override bool OnHover(InputState state)
{
Content.ScaleTo(1.1f, 500, Easing.OutElastic);
return base.OnHover(state);
}
protected override void OnHoverLost(InputState state)
{
Content.ScaleTo(1f, 500, Easing.OutElastic);
}
private void updateState()
{
if (!IsLoaded)
return;
switch (downloader.DownloadState.Value)
switch (state)
{
case BeatmapSetDownloader.DownloadStatus.NotDownloaded:
background.FadeColour(colours.Gray4, 500, Easing.InOutExpo);

18
osu.Game/Overlays/MusicController.cs
View File

@ -142,14 +142,14 @@ private void load(BindableBeatmap beatmap, BeatmapManager beatmaps, OsuColour co
Anchor = Anchor.Centre,
Children = new[]
{
prevButton = new IconButton
prevButton = new MusicIconButton
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Action = prev,
Icon = FontAwesome.fa_step_backward,
},
playButton = new IconButton
playButton = new MusicIconButton
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
@ -158,7 +158,7 @@ private void load(BindableBeatmap beatmap, BeatmapManager beatmaps, OsuColour co
Action = play,
Icon = FontAwesome.fa_play_circle_o,
},
nextButton = new IconButton
nextButton = new MusicIconButton
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
@ -167,7 +167,7 @@ private void load(BindableBeatmap beatmap, BeatmapManager beatmaps, OsuColour co
},
}
},
playlistButton = new IconButton
playlistButton = new MusicIconButton
{
Origin = Anchor.Centre,
Anchor = Anchor.CentreRight,
@ -405,6 +405,16 @@ private enum TransformDirection
Prev
}
private class MusicIconButton : IconButton
{
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
HoverColour = colours.YellowDark.Opacity(0.6f);
FlashColour = colours.Yellow;
}
}
private class Background : BufferedContainer
{
private readonly Sprite sprite;

24
osu.Game/Screens/Edit/Screens/Compose/Timeline/TimelineButton.cs
View File

@ -27,16 +27,7 @@ public FontAwesome Icon
public TimelineButton()
{
InternalChild = button = new IconButton
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
IconColour = OsuColour.Gray(0.35f),
IconHoverColour = Color4.White,
HoverColour = OsuColour.Gray(0.25f),
FlashColour = OsuColour.Gray(0.5f),
Action = () => Action?.Invoke()
};
InternalChild = button = new TimelineIconButton { Action = () => Action?.Invoke() };
button.Enabled.BindTo(Enabled);
Width = button.ButtonSize.X;
@ -48,5 +39,18 @@ protected override void Update()
button.ButtonSize = new Vector2(button.ButtonSize.X, DrawHeight);
}
private class TimelineIconButton : IconButton
{
public TimelineIconButton()
{
Anchor = Anchor.Centre;
Origin = Anchor.Centre;
IconColour = OsuColour.Gray(0.35f);
IconHoverColour = Color4.White;
HoverColour = OsuColour.Gray(0.25f);
FlashColour = OsuColour.Gray(0.5f);
}
}
}
}