From ee2c7c50adc0160648a8c097b9fd688d056ffcef Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 13 Jul 2018 16:28:18 +0900 Subject: [PATCH] Tidy up button hierarchy --- osu.Game.Tests/Visual/TestCaseIconButton.cs | 15 ++- osu.Game/Graphics/UserInterface/IconButton.cs | 111 +++--------------- .../UserInterface/OsuAnimatedButton.cs | 109 +++++++++++++++++ osu.Game/Overlays/Direct/DownloadButton.cs | 62 ++-------- osu.Game/Overlays/MusicController.cs | 18 ++- .../Compose/Timeline/TimelineButton.cs | 24 ++-- 6 files changed, 175 insertions(+), 164 deletions(-) create mode 100644 osu.Game/Graphics/UserInterface/OsuAnimatedButton.cs diff --git a/osu.Game.Tests/Visual/TestCaseIconButton.cs b/osu.Game.Tests/Visual/TestCaseIconButton.cs index 16363da527..14cba71ec8 100644 --- a/osu.Game.Tests/Visual/TestCaseIconButton.cs +++ b/osu.Game.Tests/Visual/TestCaseIconButton.cs @@ -25,11 +25,7 @@ namespace osu.Game.Tests.Visual 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 @@ namespace osu.Game.Tests.Visual }; } + 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) diff --git a/osu.Game/Graphics/UserInterface/IconButton.cs b/osu.Game/Graphics/UserInterface/IconButton.cs index 5a25fe641d..eca7bf57c8 100644 --- a/osu.Game/Graphics/UserInterface/IconButton.cs +++ b/osu.Game/Graphics/UserInterface/IconButton.cs @@ -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; - /// - /// The colour that should be flashed when the is clicked. - /// - public Color4 FlashColour - { - get { return flashColour ?? Color4.White; } - set { flashColour = value; } - } - private Color4? iconColour; + /// /// The icon colour. This does not affect . /// @@ -42,6 +28,7 @@ namespace osu.Game.Graphics.UserInterface } private Color4? iconHoverColour; + /// /// The icon colour while the is hovered. /// @@ -51,20 +38,6 @@ namespace osu.Game.Graphics.UserInterface set { iconHoverColour = value; } } - private Color4? hoverColour; - /// - /// The background colour of the while it is hovered. - /// - public Color4 HoverColour - { - get { return hoverColour ?? Color4.White; } - set - { - hoverColour = value; - hover.Colour = value; - } - } - /// /// The icon. /// @@ -88,93 +61,39 @@ namespace osu.Game.Graphics.UserInterface /// 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); - } } } diff --git a/osu.Game/Graphics/UserInterface/OsuAnimatedButton.cs b/osu.Game/Graphics/UserInterface/OsuAnimatedButton.cs new file mode 100644 index 0000000000..990a2f20a9 --- /dev/null +++ b/osu.Game/Graphics/UserInterface/OsuAnimatedButton.cs @@ -0,0 +1,109 @@ +// Copyright (c) 2007-2018 ppy Pty Ltd . +// 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 +{ + /// + /// Highlight on hover, bounce on click. + /// + public class OsuAnimatedButton : OsuClickableContainer + { + /// + /// The colour that should be flashed when the is clicked. + /// + protected Color4 FlashColour = Color4.White.Opacity(0.3f); + + private Color4 hoverColour = Color4.White.Opacity(0.1f); + + /// + /// The background colour of the while it is hovered. + /// + protected Color4 HoverColour + { + get => hoverColour; + set + { + hoverColour = value; + hover.Colour = value; + } + } + + protected override Container 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); + } + } +} diff --git a/osu.Game/Overlays/Direct/DownloadButton.cs b/osu.Game/Overlays/Direct/DownloadButton.cs index 2d678c572c..5c5e4907ed 100644 --- a/osu.Game/Overlays/Direct/DownloadButton.cs +++ b/osu.Game/Overlays/Direct/DownloadButton.cs @@ -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 @@ namespace osu.Game.Overlays.Direct 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 @@ namespace osu.Game.Overlays.Direct 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 @@ namespace osu.Game.Overlays.Direct 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); diff --git a/osu.Game/Overlays/MusicController.cs b/osu.Game/Overlays/MusicController.cs index a57d5fd183..56af04c498 100644 --- a/osu.Game/Overlays/MusicController.cs +++ b/osu.Game/Overlays/MusicController.cs @@ -142,14 +142,14 @@ namespace osu.Game.Overlays 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 @@ namespace osu.Game.Overlays Action = play, Icon = FontAwesome.fa_play_circle_o, }, - nextButton = new IconButton + nextButton = new MusicIconButton { Anchor = Anchor.Centre, Origin = Anchor.Centre, @@ -167,7 +167,7 @@ namespace osu.Game.Overlays }, } }, - playlistButton = new IconButton + playlistButton = new MusicIconButton { Origin = Anchor.Centre, Anchor = Anchor.CentreRight, @@ -405,6 +405,16 @@ namespace osu.Game.Overlays 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; diff --git a/osu.Game/Screens/Edit/Screens/Compose/Timeline/TimelineButton.cs b/osu.Game/Screens/Edit/Screens/Compose/Timeline/TimelineButton.cs index f46cc7ef9d..5928fbaa1b 100644 --- a/osu.Game/Screens/Edit/Screens/Compose/Timeline/TimelineButton.cs +++ b/osu.Game/Screens/Edit/Screens/Compose/Timeline/TimelineButton.cs @@ -27,16 +27,7 @@ namespace osu.Game.Screens.Edit.Screens.Compose.Timeline 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 @@ namespace osu.Game.Screens.Edit.Screens.Compose.Timeline 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); + } + } } }