mirror of
https://github.com/ppy/osu.git
synced 2025-01-15 16:42:57 +08:00
Merge pull request #603 from peppy/music-controller-improvements
Improve clickability and visuals of MusicController buttons.
This commit is contained in:
Dan Balasescu
GitHub
commit
f5f65fa230
@ -30,7 +30,9 @@ namespace osu.Desktop.VisualTests.Tests
|
||||
Anchor = Anchor.Centre
|
||||
};
|
||||
Add(mc);
|
||||
AddToggleStep(@"Show", state => mc.State = state ? Visibility.Visible : Visibility.Hidden);
|
||||
|
||||
AddToggleStep(@"toggle visibility", state => mc.State = state ? Visibility.Visible : Visibility.Hidden);
|
||||
AddStep(@"show", () => mc.State = Visibility.Visible);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,9 @@ using System;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Containers;
|
||||
using osu.Framework.Graphics.Sprites;
|
||||
using osu.Framework.Graphics.Transforms;
|
||||
using osu.Framework.Input;
|
||||
using OpenTK;
|
||||
|
||||
namespace osu.Game.Overlays
|
||||
{
|
||||
@ -14,9 +16,10 @@ namespace osu.Game.Overlays
|
||||
private readonly Box fill;
|
||||
|
||||
public Action<float> SeekRequested;
|
||||
private bool isDragging;
|
||||
|
||||
private bool enabled;
|
||||
public bool IsSeeking { get; private set; }
|
||||
|
||||
private bool enabled = true;
|
||||
public bool IsEnabled
|
||||
{
|
||||
get { return enabled; }
|
||||
@ -46,9 +49,9 @@ namespace osu.Game.Overlays
|
||||
|
||||
public void UpdatePosition(float position)
|
||||
{
|
||||
if (isDragging || !IsEnabled) return;
|
||||
if (IsSeeking || !IsEnabled) return;
|
||||
|
||||
fill.Width = position;
|
||||
updatePosition(position);
|
||||
}
|
||||
|
||||
private void seek(InputState state)
|
||||
@ -56,7 +59,13 @@ namespace osu.Game.Overlays
|
||||
if (!IsEnabled) return;
|
||||
float seekLocation = state.Mouse.Position.X / DrawWidth;
|
||||
SeekRequested?.Invoke(seekLocation);
|
||||
fill.Width = seekLocation;
|
||||
updatePosition(seekLocation);
|
||||
}
|
||||
|
||||
private void updatePosition(float position)
|
||||
{
|
||||
position = MathHelper.Clamp(position, 0, 1);
|
||||
fill.TransformTo(fill.Width, position, 200, EasingTypes.OutQuint, new TransformSeek());
|
||||
}
|
||||
|
||||
protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
|
||||
@ -71,12 +80,21 @@ namespace osu.Game.Overlays
|
||||
return true;
|
||||
}
|
||||
|
||||
protected override bool OnDragStart(InputState state) => isDragging = true;
|
||||
protected override bool OnDragStart(InputState state) => IsSeeking = true;
|
||||
|
||||
protected override bool OnDragEnd(InputState state)
|
||||
{
|
||||
isDragging = false;
|
||||
IsSeeking = false;
|
||||
return true;
|
||||
}
|
||||
|
||||
private class TransformSeek : TransformFloat
|
||||
{
|
||||
public override void Apply(Drawable d)
|
||||
{
|
||||
base.Apply(d);
|
||||
d.Width = CurrentValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ namespace osu.Game.Overlays
|
||||
{
|
||||
private Drawable currentBackground;
|
||||
private DragBar progress;
|
||||
private TextAwesome playButton;
|
||||
private Button playButton;
|
||||
private SpriteText title, artist;
|
||||
|
||||
private List<BeatmapSetInfo> playList;
|
||||
@ -46,6 +46,10 @@ namespace osu.Game.Overlays
|
||||
|
||||
private Container dragContainer;
|
||||
|
||||
private const float progress_height = 10;
|
||||
|
||||
private const float bottom_black_area_height = 50;
|
||||
|
||||
public MusicController()
|
||||
{
|
||||
Width = 400;
|
||||
@ -115,12 +119,32 @@ namespace osu.Game.Overlays
|
||||
Text = @"Nothing to play",
|
||||
Font = @"Exo2.0-BoldItalic"
|
||||
},
|
||||
new ClickableContainer
|
||||
new Container
|
||||
{
|
||||
Padding = new MarginPadding { Bottom = progress_height },
|
||||
Height = bottom_black_area_height,
|
||||
RelativeSizeAxes = Axes.X,
|
||||
Origin = Anchor.BottomCentre,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new FillFlowContainer<Button>
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(5),
|
||||
Origin = Anchor.Centre,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
Position = new Vector2(0, -30),
|
||||
Anchor = Anchor.Centre,
|
||||
Children = new[]
|
||||
{
|
||||
new Button
|
||||
{
|
||||
Action = prev,
|
||||
Icon = FontAwesome.fa_step_backward,
|
||||
},
|
||||
playButton = new Button
|
||||
{
|
||||
//Scale = new Vector2(1.3f),
|
||||
Action = () =>
|
||||
{
|
||||
if (current?.Track == null) return;
|
||||
@ -129,75 +153,29 @@ namespace osu.Game.Overlays
|
||||
else
|
||||
current.Track.Start();
|
||||
},
|
||||
Children = new Drawable[]
|
||||
{
|
||||
playButton = new TextAwesome
|
||||
{
|
||||
TextSize = 30,
|
||||
Icon = FontAwesome.fa_play_circle_o,
|
||||
Origin = Anchor.Centre,
|
||||
Anchor = Anchor.Centre
|
||||
}
|
||||
}
|
||||
},
|
||||
new ClickableContainer
|
||||
new Button
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Origin = Anchor.Centre,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
Position = new Vector2(-30, -30),
|
||||
Action = prev,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new TextAwesome
|
||||
{
|
||||
TextSize = 15,
|
||||
Icon = FontAwesome.fa_step_backward,
|
||||
Origin = Anchor.Centre,
|
||||
Anchor = Anchor.Centre
|
||||
}
|
||||
}
|
||||
},
|
||||
new ClickableContainer
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Origin = Anchor.Centre,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
Position = new Vector2(30, -30),
|
||||
Action = next,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new TextAwesome
|
||||
{
|
||||
TextSize = 15,
|
||||
Icon = FontAwesome.fa_step_forward,
|
||||
Origin = Anchor.Centre,
|
||||
Anchor = Anchor.Centre
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
new ClickableContainer
|
||||
new Button
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Origin = Anchor.Centre,
|
||||
Anchor = Anchor.BottomRight,
|
||||
Position = new Vector2(20, -30),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new TextAwesome
|
||||
{
|
||||
TextSize = 15,
|
||||
Anchor = Anchor.CentreRight,
|
||||
Position = new Vector2(-bottom_black_area_height / 2, 0),
|
||||
Icon = FontAwesome.fa_bars,
|
||||
Origin = Anchor.Centre,
|
||||
Anchor = Anchor.Centre
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
progress = new DragBar
|
||||
{
|
||||
Origin = Anchor.BottomCentre,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
Height = 10,
|
||||
Height = progress_height,
|
||||
Colour = colours.Yellow,
|
||||
SeekRequested = seek
|
||||
}
|
||||
@ -237,7 +215,7 @@ namespace osu.Game.Overlays
|
||||
|
||||
if (current?.TrackLoaded ?? false)
|
||||
{
|
||||
progress.UpdatePosition((float)(current.Track.CurrentTime / current.Track.Length));
|
||||
progress.UpdatePosition(current.Track.Length == 0 ? 0 : (float)(current.Track.CurrentTime / current.Track.Length));
|
||||
playButton.Icon = current.Track.IsRunning ? FontAwesome.fa_pause_circle_o : FontAwesome.fa_play_circle_o;
|
||||
|
||||
if (current.Track.HasCompleted && !current.Track.Looping) next();
|
||||
@ -416,7 +394,7 @@ namespace osu.Game.Overlays
|
||||
new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.X,
|
||||
Height = 50,
|
||||
Height = bottom_black_area_height,
|
||||
Origin = Anchor.BottomCentre,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
Colour = Color4.Black.Opacity(0.5f)
|
||||
@ -430,5 +408,91 @@ namespace osu.Game.Overlays
|
||||
sprite.Texture = beatmap?.Background ?? textures.Get(@"Backgrounds/bg4");
|
||||
}
|
||||
}
|
||||
|
||||
private class Button : ClickableContainer
|
||||
{
|
||||
private readonly TextAwesome icon;
|
||||
private readonly Box hover;
|
||||
private readonly Container content;
|
||||
|
||||
public FontAwesome Icon
|
||||
{
|
||||
get { return icon.Icon; }
|
||||
set { icon.Icon = value; }
|
||||
}
|
||||
|
||||
private const float button_size = 30;
|
||||
|
||||
public Button()
|
||||
{
|
||||
AutoSizeAxes = Axes.Both;
|
||||
|
||||
Origin = Anchor.Centre;
|
||||
Anchor = Anchor.Centre;
|
||||
|
||||
Children = new Drawable[]
|
||||
{
|
||||
content = new Container
|
||||
{
|
||||
Size = new Vector2(button_size),
|
||||
CornerRadius = 5,
|
||||
Masking = true,
|
||||
|
||||
Origin = Anchor.Centre,
|
||||
Anchor = Anchor.Centre,
|
||||
EdgeEffect = new EdgeEffect
|
||||
{
|
||||
Colour = Color4.Black.Opacity(0.04f),
|
||||
Type = EdgeEffectType.Shadow,
|
||||
Radius = 5,
|
||||
},
|
||||
Children = new Drawable[]
|
||||
{
|
||||
hover = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Alpha = 0,
|
||||
},
|
||||
icon = new TextAwesome
|
||||
{
|
||||
TextSize = 18,
|
||||
Origin = Anchor.Centre,
|
||||
Anchor = Anchor.Centre
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(OsuColour colours)
|
||||
{
|
||||
hover.Colour = colours.Yellow.Opacity(0.6f);
|
||||
}
|
||||
|
||||
protected override bool OnHover(InputState state)
|
||||
{
|
||||
hover.FadeIn(500, EasingTypes.OutQuint);
|
||||
return base.OnHover(state);
|
||||
}
|
||||
|
||||
protected override void OnHoverLost(InputState state)
|
||||
{
|
||||
hover.FadeOut(500, EasingTypes.OutQuint);
|
||||
base.OnHoverLost(state);
|
||||
}
|
||||
|
||||
protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
|
||||
{
|
||||
content.ScaleTo(1, 2000, EasingTypes.OutQuint);
|
||||
return base.OnMouseDown(state, args);
|
||||
}
|
||||
|
||||
protected override bool OnMouseUp(InputState state, MouseUpEventArgs args)
|
||||
{
|
||||
content.ScaleTo(1, 1000, EasingTypes.OutElastic);
|
||||
return base.OnMouseUp(state, args);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user