1
0
mirror of https://github.com/ppy/osu.git synced 2025-01-13 09:23:06 +08:00

Implement mode selector highlight line.

This commit is contained in:
Dean Herbert 2016-10-04 19:41:18 +09:00
parent c2d4672b8d
commit cc52580568
5 changed files with 348 additions and 189 deletions

View File

@ -17,17 +17,17 @@ using osu.Framework.Extensions;
namespace osu.Game.Overlays
{
public class Toolbar : Container
public partial class Toolbar : Container
{
const float height = 50;
private FlowContainer leftFlow;
private FlowContainer rightFlow;
private FlowContainer modeButtons;
public Action OnSettings;
public Action OnHome;
public Action<PlayMode> OnPlayModeChange;
private ToolbarModeSelector modeSelector;
public override void Load()
{
@ -36,51 +36,35 @@ namespace osu.Game.Overlays
RelativeSizeAxes = Axes.X;
Size = new Vector2(1, height);
modeButtons = new FlowContainer
{
RelativeSizeAxes = Axes.Y,
Direction = FlowDirection.HorizontalOnly
};
foreach (PlayMode m in Enum.GetValues(typeof(PlayMode)))
{
var localMode = m;
modeButtons.Add(new ToolbarModeButton
{
Mode = m,
Action = delegate
{
SetGameMode(localMode);
OnPlayModeChange?.Invoke(localMode);
}
});
}
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = new Color4(0.1f, 0.1f, 0.1f, 0.9f)
Colour = new Color4(0.1f, 0.1f, 0.1f, 0.4f)
},
leftFlow = new FlowContainer
{
Direction = FlowDirection.HorizontalOnly,
RelativeSizeAxes = Axes.Y,
Children = new []
Children = new Drawable[]
{
new ToolbarButton
{
Icon = FontAwesome.gear,
Action = OnSettings
Action = OnSettings,
TooltipMain = "Settings"
},
new ToolbarButton
{
Icon = FontAwesome.home,
TooltipMain = "Home",
Action = OnHome
},
modeButtons
modeSelector = new ToolbarModeSelector
{
OnPlayModeChange = this.OnPlayModeChange
}
}
},
rightFlow = new FlowContainer
@ -110,167 +94,6 @@ namespace osu.Game.Overlays
};
}
public void SetGameMode(PlayMode mode)
{
foreach (var m in modeButtons.Children.Cast<ToolbarModeButton>())
{
m.Active = m.Mode == mode;
}
}
public class ToolbarModeButton : ToolbarButton
{
private PlayMode mode;
public PlayMode Mode
{
get { return mode; }
set
{
mode = value;
Text = mode.GetDescription();
Icon = getModeIcon(mode);
}
}
public bool Active
{
set
{
Background.Colour = value ? new Color4(100, 100, 100, 140) : new Color4(20, 20, 20, 140);
}
}
private FontAwesome getModeIcon(PlayMode mode)
{
switch (mode)
{
default: return FontAwesome.fa_osu_osu_o;
case PlayMode.Taiko: return FontAwesome.fa_osu_taiko_o;
case PlayMode.Catch: return FontAwesome.fa_osu_fruits_o;
case PlayMode.Mania: return FontAwesome.fa_osu_mania_o;
}
}
public override void Load()
{
base.Load();
DrawableIcon.TextSize = height * 0.7f;
}
}
public class ToolbarButton : FlowContainer
{
public FontAwesome Icon
{
get { return DrawableIcon.Icon; }
set { DrawableIcon.Icon = value; }
}
public string Text
{
get { return DrawableText.Text; }
set
{
DrawableText.Text = value;
paddingIcon.Alpha = string.IsNullOrEmpty(value) ? 0 : 1;
}
}
public Action Action;
protected TextAwesome DrawableIcon;
protected SpriteText DrawableText;
protected Box Background;
protected Box HoverBackground;
private Drawable paddingLeft;
private Drawable paddingRight;
private Drawable paddingIcon;
public new float Padding
{
get { return paddingLeft.Size.X; }
set
{
paddingLeft.Size = new Vector2(value, 1);
paddingRight.Size = new Vector2(value, 1);
}
}
public ToolbarButton()
{
Background = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = new Color4(20, 20, 20, 140),
};
HoverBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Additive = true,
Colour = new Color4(20, 20, 20, 0),
Alpha = 0,
};
DrawableIcon = new TextAwesome()
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
};
DrawableText = new SpriteText
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
};
paddingLeft = new Container { RelativeSizeAxes = Axes.Y };
paddingRight = new Container { RelativeSizeAxes = Axes.Y };
paddingIcon = new Container
{
Size = new Vector2(5, 0),
Alpha = 0
};
Padding = 10;
}
protected override bool OnClick(InputState state)
{
Action?.Invoke();
return base.OnClick(state);
}
protected override bool OnHover(InputState state)
{
HoverBackground.FadeTo(0.4f, 200);
return base.OnHover(state);
}
protected override void OnHoverLost(InputState state)
{
HoverBackground.FadeTo(0, 200);
base.OnHoverLost(state);
}
public override void Load()
{
base.Load();
RelativeSizeAxes = Axes.Y;
Direction = FlowDirection.HorizontalOnly;
Children = new Drawable[]
{
Background,
HoverBackground,
paddingLeft,
DrawableIcon,
paddingIcon,
DrawableText,
paddingRight,
};
}
}
public void SetGameMode(PlayMode mode) => modeSelector.SetGameMode(mode);
}
}

View File

@ -0,0 +1,177 @@
//Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
//Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using System;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Drawables;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Input;
using osu.Game.Graphics;
using OpenTK;
using OpenTK.Graphics;
namespace osu.Game.Overlays
{
public class ToolbarButton : Container
{
public const float WIDTH = 60;
public FontAwesome Icon
{
get { return DrawableIcon.Icon; }
set { DrawableIcon.Icon = value; }
}
public string Text
{
get { return DrawableText.Text; }
set
{
DrawableText.Text = value;
paddingIcon.Alpha = string.IsNullOrEmpty(value) ? 0 : 1;
}
}
public string TooltipMain
{
get { return tooltip1.Text; }
set
{
tooltip1.Text = value;
}
}
public string TooltipSub
{
get { return tooltip2.Text; }
set
{
tooltip2.Text = value;
}
}
public Action Action;
protected TextAwesome DrawableIcon;
protected SpriteText DrawableText;
protected Box HoverBackground;
private Drawable paddingLeft;
private Drawable paddingRight;
private Drawable paddingIcon;
private FlowContainer tooltipContainer;
private SpriteText tooltip1;
private SpriteText tooltip2;
public new float Padding
{
get { return paddingLeft.Size.X; }
set
{
paddingLeft.Size = new Vector2(value, 1);
paddingRight.Size = new Vector2(value, 1);
tooltipContainer.Position = new Vector2(value, tooltipContainer.Position.Y);
}
}
public ToolbarButton()
{
HoverBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Additive = true,
Colour = new Color4(60, 60, 60, 255),
Alpha = 0,
};
DrawableIcon = new TextAwesome
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
};
DrawableText = new SpriteText
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
};
tooltipContainer = new FlowContainer
{
Direction = FlowDirection.VerticalOnly,
Anchor = Anchor.BottomLeft,
Position = new Vector2(0, -5),
Alpha = 0,
Children = new[]
{
tooltip1 = new SpriteText()
{
TextSize = 22,
},
tooltip2 = new SpriteText
{
TextSize = 15
}
}
};
paddingLeft = new Container { RelativeSizeAxes = Axes.Y };
paddingRight = new Container { RelativeSizeAxes = Axes.Y };
paddingIcon = new Container
{
Size = new Vector2(5, 0),
Alpha = 0
};
Padding = 10;
RelativeSizeAxes = Axes.Y;
Size = new Vector2(WIDTH, 1);
}
public override void Load()
{
base.Load();
Children = new Drawable[]
{
HoverBackground,
new FlowContainer
{
Direction = FlowDirection.HorizontalOnly,
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
RelativeSizeAxes = Axes.Y,
Children = new Drawable[]
{
paddingLeft,
DrawableIcon,
paddingIcon,
DrawableText,
paddingRight
},
},
tooltipContainer
};
}
protected override bool OnClick(InputState state)
{
Action?.Invoke();
HoverBackground.FlashColour(Color4.White, 400);
return base.OnClick(state);
}
protected override bool OnHover(InputState state)
{
HoverBackground.FadeTo(0.4f, 200);
tooltipContainer.FadeIn(100);
return base.OnHover(state);
}
protected override void OnHoverLost(InputState state)
{
HoverBackground.FadeTo(0, 200);
tooltipContainer.FadeOut(100);
base.OnHoverLost(state);
}
}
}

View File

@ -0,0 +1,51 @@
//Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
//Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using osu.Framework.Extensions;
using osu.Game.GameModes.Play;
using osu.Game.Graphics;
using OpenTK.Graphics;
namespace osu.Game.Overlays
{
public class ToolbarModeButton : ToolbarButton
{
private PlayMode mode;
public PlayMode Mode
{
get { return mode; }
set
{
mode = value;
TooltipMain = mode.GetDescription();
TooltipSub = $"Play some {mode.GetDescription()}";
Icon = getModeIcon(mode);
}
}
public bool Active
{
set
{
//Background.Colour = value ? new Color4(100, 100, 100, 255) : new Color4(20, 20, 20, 255);
}
}
private FontAwesome getModeIcon(PlayMode mode)
{
switch (mode)
{
default: return FontAwesome.fa_osu_osu_o;
case PlayMode.Taiko: return FontAwesome.fa_osu_taiko_o;
case PlayMode.Catch: return FontAwesome.fa_osu_fruits_o;
case PlayMode.Mania: return FontAwesome.fa_osu_mania_o;
}
}
public override void Load()
{
base.Load();
DrawableIcon.TextSize *= 1.4f;
}
}
}

View File

@ -0,0 +1,105 @@
//Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
//Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using osu.Framework.Cached;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Drawables;
using osu.Framework.Graphics.Transformations;
using osu.Game.GameModes.Play;
using OpenTK;
using OpenTK.Graphics;
namespace osu.Game.Overlays
{
class ToolbarModeSelector : Container
{
const float padding = 10;
private FlowContainer modeButtons;
private Box modeButtonLine;
private ToolbarModeButton activeButton;
public Action<PlayMode> OnPlayModeChange;
public ToolbarModeSelector()
{
RelativeSizeAxes = Axes.Y;
}
public override void Load()
{
base.Load();
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = new Color4(20, 20, 20, 255)
},
modeButtons = new FlowContainer
{
RelativeSizeAxes = Axes.Y,
Direction = FlowDirection.HorizontalOnly,
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
},
modeButtonLine = new Box
{
RelativeSizeAxes = Axes.X,
Size = new Vector2(0.3f, 3),
Anchor = Anchor.BottomLeft,
Origin = Anchor.TopCentre,
Colour = Color4.White
}
};
foreach (PlayMode m in Enum.GetValues(typeof(PlayMode)))
{
var localMode = m;
modeButtons.Add(new ToolbarModeButton
{
Mode = m,
Action = delegate
{
SetGameMode(localMode);
OnPlayModeChange?.Invoke(localMode);
}
});
}
RelativeSizeAxes = Axes.Y;
Size = new Vector2(modeButtons.Children.Count() * ToolbarButton.WIDTH + padding * 2, 1);
}
public void SetGameMode(PlayMode mode)
{
foreach (ToolbarModeButton m in modeButtons.Children.Cast<ToolbarModeButton>())
{
bool isActive = m.Mode == mode;
m.Active = isActive;
if (isActive)
activeButton = m;
}
activeMode.Invalidate();
}
Cached<Drawable> activeMode = new Cached<Drawable>();
protected override void UpdateLayout()
{
base.UpdateLayout();
if (!activeMode.EnsureValid())
activeMode.Refresh(() => modeButtonLine.MoveToX(activeButton.Position.X + activeButton.Size.X / 2 + padding, 200, EasingTypes.OutQuint));
}
}
}

View File

@ -120,6 +120,9 @@
<Compile Include="OsuGameBase.cs" />
<Compile Include="Overlays\Options.cs" />
<Compile Include="Overlays\Toolbar.cs" />
<Compile Include="Overlays\ToolbarButton.cs" />
<Compile Include="Overlays\ToolbarModeButton.cs" />
<Compile Include="Overlays\ToolbarModeSelector.cs" />
<Compile Include="Properties\AssemblyInfo.cs" />
<Compile Include="Users\User.cs" />
</ItemGroup>