h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2025-01-27 14:12:56 +08:00
Code Issues Releases Wiki Activity

Visually improve settings transitions and back button

Browse Source
This commit is contained in:
Dean Herbert 2017-08-17 17:31:14 +09:00
parent 18980bc26e
commit a19fc28cff
3 changed files with 66 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
osu.Game/OsuGame.cs
View File

@ -182,7 +182,11 @@ namespace osu.Game
LoadComponentAsync(direct = new DirectOverlay { Depth = -1 }, mainContent.Add); LoadComponentAsync(direct = new DirectOverlay { Depth = -1 }, mainContent.Add);
LoadComponentAsync(social = new SocialOverlay { Depth = -1 }, mainContent.Add); LoadComponentAsync(social = new SocialOverlay { Depth = -1 }, mainContent.Add);
LoadComponentAsync(chat = new ChatOverlay { Depth = -1 }, mainContent.Add); LoadComponentAsync(chat = new ChatOverlay { Depth = -1 }, mainContent.Add);
LoadComponentAsync(settings = new MainSettings { Depth = -1 }, overlayContent.Add); LoadComponentAsync(settings = new MainSettings
{
GetToolbarHeight = () => ToolbarOffset,
Depth = -1
}, overlayContent.Add);
LoadComponentAsync(userProfile = new UserProfileOverlay { Depth = -2 }, mainContent.Add); LoadComponentAsync(userProfile = new UserProfileOverlay { Depth = -2 }, mainContent.Add);
LoadComponentAsync(musicController = new MusicController LoadComponentAsync(musicController = new MusicController
{ {

88
osu.Game/Overlays/MainSettings.cs
View File

@ -13,6 +13,7 @@ using osu.Game.Overlays.Settings;
using osu.Game.Overlays.Settings.Sections; using osu.Game.Overlays.Settings.Sections;
using osu.Game.Screens.Ranking; using osu.Game.Screens.Ranking;
using OpenTK; using OpenTK;
using OpenTK.Graphics;
namespace osu.Game.Overlays namespace osu.Game.Overlays
{ {
@ -40,27 +41,34 @@ namespace osu.Game.Overlays
public MainSettings() public MainSettings()
: base(true) : base(true)
{ {
keyBindingOverlay = new KeyBindingOverlay { Depth = 1 }; keyBindingOverlay = new KeyBindingOverlay {
Depth = 1,
Anchor = Anchor.TopRight,
};
keyBindingOverlay.StateChanged += keyBindingOverlay_StateChanged; keyBindingOverlay.StateChanged += keyBindingOverlay_StateChanged;
} }
public override bool AcceptsFocus => keyBindingOverlay.State != Visibility.Visible; public override bool AcceptsFocus => keyBindingOverlay.State != Visibility.Visible;
private const float hidden_width = 120;
private void keyBindingOverlay_StateChanged(VisibilityContainer container, Visibility visibility) private void keyBindingOverlay_StateChanged(VisibilityContainer container, Visibility visibility)
{ {
const float hidden_width = 120;
switch (visibility) switch (visibility)
{ {
case Visibility.Visible: case Visibility.Visible:
Background.FadeTo(0.9f, 500, Easing.OutQuint); Background.FadeTo(0.9f, 300, Easing.OutQuint);
SectionsContainer.FadeOut(100); Sidebar?.FadeColour(Color4.DarkGray, 300, Easing.OutQuint);
ContentContainer.MoveToX(hidden_width - ContentContainer.DrawWidth, 500, Easing.OutQuint);
SectionsContainer.FadeOut(300, Easing.OutQuint);
ContentContainer.MoveToX(hidden_width - WIDTH, 500, Easing.OutQuint);
backButton.Delay(100).FadeIn(100); backButton.Delay(100).FadeIn(100);
break; break;
case Visibility.Hidden: case Visibility.Hidden:
Background.FadeTo(0.6f, 500, Easing.OutQuint); Background.FadeTo(0.6f, 500, Easing.OutQuint);
Sidebar?.FadeColour(Color4.White, 300, Easing.OutQuint);
SectionsContainer.FadeIn(500, Easing.OutQuint); SectionsContainer.FadeIn(500, Easing.OutQuint);
ContentContainer.MoveToX(0, 500, Easing.OutQuint); ContentContainer.MoveToX(0, 500, Easing.OutQuint);
@ -69,39 +77,26 @@ namespace osu.Game.Overlays
} }
} }
protected override void PopOut() protected override float ExpandedPosition => keyBindingOverlay.State == Visibility.Visible ? hidden_width - WIDTH : base.ExpandedPosition;
{
base.PopOut();
keyBindingOverlay.State = Visibility.Hidden;
}
[BackgroundDependencyLoader] [BackgroundDependencyLoader]
private void load() private void load()
{ {
AddInternal(keyBindingOverlay); ContentContainer.Add(keyBindingOverlay);
AddInternal(backButton = new BackButton
ContentContainer.Add(backButton = new BackButton
{ {
Alpha = 0, Alpha = 0,
Height = 150, Width = hidden_width,
Anchor = Anchor.CentreLeft, RelativeSizeAxes = Axes.Y,
Origin = Anchor.CentreLeft, Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Action = () => keyBindingOverlay.Hide() Action = () => keyBindingOverlay.Hide()
}); });
} }
protected override void UpdateAfterChildren()
{
base.UpdateAfterChildren();
keyBindingOverlay.Margin = new MarginPadding { Left = ContentContainer.Margin.Left + ContentContainer.DrawWidth + ContentContainer.X };
backButton.Margin = new MarginPadding { Left = ContentContainer.Margin.Left };
backButton.Width = ContentContainer.DrawWidth + ContentContainer.X;
}
private class BackButton : OsuClickableContainer private class BackButton : OsuClickableContainer
{ {
private FillFlowContainer flow;
private AspectContainer aspect; private AspectContainer aspect;
[BackgroundDependencyLoader] [BackgroundDependencyLoader]
@ -116,29 +111,22 @@ namespace osu.Game.Overlays
RelativeSizeAxes = Axes.Y, RelativeSizeAxes = Axes.Y,
Children = new Drawable[] Children = new Drawable[]
{ {
flow = new FillFlowContainer new SpriteIcon
{ {
Anchor = Anchor.TopCentre, Anchor = Anchor.Centre,
RelativePositionAxes = Axes.Y,
Y = 0.4f,
AutoSizeAxes = Axes.Both,
Origin = Anchor.Centre, Origin = Anchor.Centre,
Direction = FillDirection.Horizontal, Y = -15,
Children = new[] Size = new Vector2(15),
{ Shadow = true,
new SpriteIcon { Size = new Vector2(15), Shadow = true, Icon = FontAwesome.fa_chevron_left }, Icon = FontAwesome.fa_chevron_left
new SpriteIcon { Size = new Vector2(15), Shadow = true, Icon = FontAwesome.fa_chevron_left },
new SpriteIcon { Size = new Vector2(15), Shadow = true, Icon = FontAwesome.fa_chevron_left },
}
}, },
new OsuSpriteText new OsuSpriteText
{ {
Anchor = Anchor.TopCentre, Anchor = Anchor.Centre,
RelativePositionAxes = Axes.Y, Origin = Anchor.Centre,
Y = 0.7f, Y = 15,
TextSize = 12, TextSize = 12,
Font = @"Exo2.0-Bold", Font = @"Exo2.0-Bold",
Origin = Anchor.Centre,
Text = @"back", Text = @"back",
}, },
} }
@ -146,18 +134,6 @@ namespace osu.Game.Overlays
}; };
} }
protected override bool OnHover(InputState state)
{
flow.TransformSpacingTo(new Vector2(5), 500, Easing.OutQuint);
return base.OnHover(state);
}
protected override void OnHoverLost(InputState state)
{
flow.TransformSpacingTo(new Vector2(0), 500, Easing.OutQuint);
base.OnHoverLost(state);
}
protected override bool OnMouseDown(InputState state, MouseDownEventArgs args) protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
{ {
aspect.ScaleTo(0.75f, 2000, Easing.OutQuint); aspect.ScaleTo(0.75f, 2000, Easing.OutQuint);
@ -171,4 +147,4 @@ namespace osu.Game.Overlays
} }
} }
} }
} }

49
osu.Game/Overlays/SettingsOverlay.cs
View File

@ -4,6 +4,7 @@
using System; using System;
using System.Collections.Generic; using System.Collections.Generic;
using System.Linq; using System.Linq;
using OpenTK;
using OpenTK.Graphics; using OpenTK.Graphics;
using osu.Framework.Allocation; using osu.Framework.Allocation;
using osu.Framework.Extensions.IEnumerableExtensions; using osu.Framework.Extensions.IEnumerableExtensions;
@ -25,7 +26,7 @@ namespace osu.Game.Overlays
public const float SIDEBAR_WIDTH = Sidebar.DEFAULT_WIDTH; public const float SIDEBAR_WIDTH = Sidebar.DEFAULT_WIDTH;
private const float width = 400; protected const float WIDTH = 400;
private const float sidebar_padding = 10; private const float sidebar_padding = 10;
@ -33,14 +34,17 @@ namespace osu.Game.Overlays
protected override Container<Drawable> Content => ContentContainer; protected override Container<Drawable> Content => ContentContainer;
private Sidebar sidebar; protected Sidebar Sidebar;
private SidebarButton selectedSidebarButton; private SidebarButton selectedSidebarButton;
protected SettingsSectionsContainer SectionsContainer; protected SettingsSectionsContainer SectionsContainer;
private SearchTextBox searchTextBox; private SearchTextBox searchTextBox;
private Func<float> getToolbarHeight; /// <summary>
/// Provide a source for the toolbar height.
/// </summary>
public Func<float> GetToolbarHeight;
private readonly bool showSidebar; private readonly bool showSidebar;
@ -60,12 +64,15 @@ namespace osu.Game.Overlays
{ {
InternalChild = ContentContainer = new Container InternalChild = ContentContainer = new Container
{ {
Width = width, Width = WIDTH,
RelativeSizeAxes = Axes.Y, RelativeSizeAxes = Axes.Y,
Children = new Drawable[] Children = new Drawable[]
{ {
Background = new Box Background = new Box
{ {
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
Scale = new Vector2(2, 1), // over-extend to the left for transitions
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Colour = Color4.Black, Colour = Color4.Black,
Alpha = 0.6f, Alpha = 0.6f,
@ -94,20 +101,18 @@ namespace osu.Game.Overlays
if (showSidebar) if (showSidebar)
{ {
AddInternal(sidebar = new Sidebar { Width = SIDEBAR_WIDTH }); AddInternal(Sidebar = new Sidebar { Width = SIDEBAR_WIDTH });
SectionsContainer.SelectedSection.ValueChanged += section => SectionsContainer.SelectedSection.ValueChanged += section =>
{ {
selectedSidebarButton.Selected = false; selectedSidebarButton.Selected = false;
selectedSidebarButton = sidebar.Children.Single(b => b.Section == section); selectedSidebarButton = Sidebar.Children.Single(b => b.Section == section);
selectedSidebarButton.Selected = true; selectedSidebarButton.Selected = true;
}; };
} }
searchTextBox.Current.ValueChanged += newValue => SectionsContainer.SearchContainer.SearchTerm = newValue; searchTextBox.Current.ValueChanged += newValue => SectionsContainer.SearchContainer.SearchTerm = newValue;
getToolbarHeight = () => game?.ToolbarOffset ?? 0;
CreateSections()?.ForEach(AddSection); CreateSections()?.ForEach(AddSection);
} }
@ -115,7 +120,7 @@ namespace osu.Game.Overlays
{ {
SectionsContainer.Add(section); SectionsContainer.Add(section);
if (sidebar != null) if (Sidebar != null)
{ {
var button = new SidebarButton var button = new SidebarButton
{ {
@ -123,15 +128,15 @@ namespace osu.Game.Overlays
Action = s => Action = s =>
{ {
SectionsContainer.ScrollTo(s); SectionsContainer.ScrollTo(s);
sidebar.State = ExpandedState.Contracted; Sidebar.State = ExpandedState.Contracted;
}, },
}; };
sidebar.Add(button); Sidebar.Add(button);
if (selectedSidebarButton == null) if (selectedSidebarButton == null)
{ {
selectedSidebarButton = sidebar.Children.First(); selectedSidebarButton = Sidebar.Children.First();
selectedSidebarButton.Selected = true; selectedSidebarButton.Selected = true;
} }
} }
@ -145,20 +150,24 @@ namespace osu.Game.Overlays
{ {
base.PopIn(); base.PopIn();
ContentContainer.MoveToX(0, TRANSITION_LENGTH, Easing.OutQuint); ContentContainer.MoveToX(ExpandedPosition, TRANSITION_LENGTH, Easing.OutQuint);
sidebar?.MoveToX(0, TRANSITION_LENGTH, Easing.OutQuint);
this.FadeTo(1, TRANSITION_LENGTH / 2); Sidebar?.MoveToX(0, TRANSITION_LENGTH, Easing.OutQuint);
this.FadeTo(1, TRANSITION_LENGTH, Easing.OutQuint);
searchTextBox.HoldFocus = true; searchTextBox.HoldFocus = true;
} }
protected virtual float ExpandedPosition => 0;
protected override void PopOut() protected override void PopOut()
{ {
base.PopOut(); base.PopOut();
ContentContainer.MoveToX(-width, TRANSITION_LENGTH, Easing.OutQuint); ContentContainer.MoveToX(-WIDTH, TRANSITION_LENGTH, Easing.OutQuint);
sidebar?.MoveToX(-SIDEBAR_WIDTH, TRANSITION_LENGTH, Easing.OutQuint);
this.FadeTo(0, TRANSITION_LENGTH / 2); Sidebar?.MoveToX(-SIDEBAR_WIDTH, TRANSITION_LENGTH, Easing.OutQuint);
this.FadeTo(0, TRANSITION_LENGTH, Easing.OutQuint);
searchTextBox.HoldFocus = false; searchTextBox.HoldFocus = false;
if (searchTextBox.HasFocus) if (searchTextBox.HasFocus)
@ -179,8 +188,8 @@ namespace osu.Game.Overlays
{ {
base.UpdateAfterChildren(); base.UpdateAfterChildren();
ContentContainer.Margin = new MarginPadding { Left = sidebar?.DrawWidth ?? 0 }; ContentContainer.Margin = new MarginPadding { Left = Sidebar?.DrawWidth ?? 0 };
ContentContainer.Padding = new MarginPadding { Top = getToolbarHeight() }; ContentContainer.Padding = new MarginPadding { Top = GetToolbarHeight?.Invoke() ?? 0 };
} }
protected class SettingsSectionsContainer : SectionsContainer<SettingsSection> protected class SettingsSectionsContainer : SectionsContainer<SettingsSection>