Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Toolbar design iteration #26168

Merged
merged 4 commits into from
Dec 27, 2023
Merged

Toolbar design iteration #26168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
70aa067
Adjust gradient visibility and transition
peppy Dec 27, 2023
92c4c20
Adjust paddings and fills of toolbar buttons
peppy Dec 27, 2023
cf5e3e8
Breathe some colour and life into the toolbar
peppy Dec 27, 2023
3fd713e
Merge branch 'master' into toolbar-design-iteration
bdach Dec 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions osu.Game/Overlays/Toolbar/Toolbar.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,9 +224,9 @@ public ToolbarBackground()
RelativeSizeAxes = Axes.X,
Anchor = Anchor.BottomLeft,
Alpha = 0,
Height = 100,
Height = 80,
Colour = ColourInfo.GradientVertical(
OsuColour.Gray(0).Opacity(0.9f), OsuColour.Gray(0).Opacity(0)),
OsuColour.Gray(0f).Opacity(0.7f), OsuColour.Gray(0).Opacity(0)),
},
};
}
Expand All @@ -241,9 +241,9 @@ protected override void LoadComplete()
private void updateState()
{
if (ShowGradient.Value)
gradientBackground.FadeIn(transition_time, Easing.OutQuint);
gradientBackground.FadeIn(2500, Easing.OutQuint);
else
gradientBackground.FadeOut(transition_time, Easing.OutQuint);
gradientBackground.FadeOut(200, Easing.OutQuint);
}
}

Expand Down
45 changes: 25 additions & 20 deletions osu.Game/Overlays/Toolbar/ToolbarButton.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
using osu.Framework.Extensions.EnumExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Input;
Expand Down Expand Up @@ -74,6 +73,8 @@ public LocalisableString TooltipSub
private readonly SpriteText keyBindingTooltip;
protected FillFlowContainer Flow;

protected readonly Container BackgroundContent;

[Resolved]
private RealmAccess realm { get; set; } = null!;

Expand All @@ -82,21 +83,33 @@ protected ToolbarButton()
Width = Toolbar.HEIGHT;
RelativeSizeAxes = Axes.Y;

Padding = new MarginPadding(3);

Children = new Drawable[]
{
HoverBackground = new Box
BackgroundContent = new Container
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColour.Gray(80).Opacity(180),
Blending = BlendingParameters.Additive,
Alpha = 0,
},
flashBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0,
Colour = Color4.White.Opacity(100),
Blending = BlendingParameters.Additive,
Masking = true,
CornerRadius = 6,
CornerExponent = 3f,
Children = new Drawable[]
{
HoverBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColour.Gray(80).Opacity(180),
Blending = BlendingParameters.Additive,
Alpha = 0,
},
flashBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0,
Colour = Color4.White.Opacity(100),
Blending = BlendingParameters.Additive,
},
}
},
Flow = new FillFlowContainer
{
Expand Down Expand Up @@ -219,14 +232,6 @@ public partial class OpaqueBackground : Container
public OpaqueBackground()
{
RelativeSizeAxes = Axes.Both;
Masking = true;
MaskingSmoothness = 0;
EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Shadow,
Colour = Color4.Black.Opacity(40),
Radius = 5,
};

Children = new Drawable[]
{
Expand Down
34 changes: 23 additions & 11 deletions osu.Game/Overlays/Toolbar/ToolbarClock.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,21 +42,33 @@ private void load(OsuConfigManager config)
clockDisplayMode = config.GetBindable<ToolbarClockDisplayMode>(OsuSetting.ToolbarClockDisplayMode);
prefer24HourTime = config.GetBindable<bool>(OsuSetting.Prefer24HourTime);

Padding = new MarginPadding(3);

Children = new Drawable[]
{
hoverBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColour.Gray(80).Opacity(180),
Blending = BlendingParameters.Additive,
Alpha = 0,
},
flashBackground = new Box
new Container
{
RelativeSizeAxes = Axes.Both,
Alpha = 0,
Colour = Color4.White.Opacity(100),
Blending = BlendingParameters.Additive,
Masking = true,
CornerRadius = 6,
CornerExponent = 3f,
Children = new Drawable[]
{
hoverBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColour.Gray(80).Opacity(180),
Blending = BlendingParameters.Additive,
Alpha = 0,
},
flashBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0,
Colour = Color4.White.Opacity(100),
Blending = BlendingParameters.Additive,
},
}
},
new FillFlowContainer
{
Expand Down
10 changes: 6 additions & 4 deletions osu.Game/Overlays/Toolbar/ToolbarOverlayToggleButton.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

#nullable disable

using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
Expand All @@ -14,7 +15,7 @@ namespace osu.Game.Overlays.Toolbar
{
public partial class ToolbarOverlayToggleButton : ToolbarButton
{
private readonly Box stateBackground;
private Box stateBackground;

private OverlayContainer stateContainer;

Expand Down Expand Up @@ -44,12 +45,13 @@ public OverlayContainer StateContainer
}
}

public ToolbarOverlayToggleButton()
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
Add(stateBackground = new Box
BackgroundContent.Add(stateBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColour.Gray(150).Opacity(180),
Colour = colours.Carmine.Opacity(180),
Blending = BlendingParameters.Additive,
Depth = 2,
Alpha = 0,
Expand Down
40 changes: 19 additions & 21 deletions osu.Game/Overlays/Toolbar/ToolbarRulesetSelector.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,19 @@
#nullable disable

using System.Collections.Generic;
using System.Linq;
using osu.Framework.Allocation;
using osu.Framework.Audio;
using osu.Framework.Audio.Sample;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osuTK;
using osuTK.Graphics;
using osu.Framework.Graphics.Shapes;
using osu.Game.Rulesets;
using osu.Framework.Graphics.UserInterface;
using osu.Framework.Input.Events;
using osu.Game.Rulesets;
using osuTK;
using osuTK.Graphics;
using osuTK.Input;
using System.Linq;
using osu.Framework.Allocation;
using osu.Framework.Audio;
using osu.Framework.Audio.Sample;

namespace osu.Game.Overlays.Toolbar
{
Expand All @@ -41,25 +40,24 @@ private void load(AudioManager audio)
new OpaqueBackground
{
Depth = 1,
Masking = true,
},
ModeButtonLine = new Container
{
Size = new Vector2(Toolbar.HEIGHT, 3),
Anchor = Anchor.BottomLeft,
Origin = Anchor.TopLeft,
Masking = true,
EdgeEffect = new EdgeEffectParameters
Origin = Anchor.BottomLeft,
Y = -1,
Children = new Drawable[]
{
Type = EdgeEffectType.Glow,
Colour = new Color4(255, 194, 224, 100),
Radius = 15,
Roundness = 15,
},
Child = new Box
{
RelativeSizeAxes = Axes.Both,
new Circle
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(18, 3),
}
}
}
},
});

foreach (var ruleset in Rulesets.AvailableRulesets)
Expand Down Expand Up @@ -89,7 +87,7 @@ private void moveLineToCurrent()
{
if (SelectedTab != null)
{
ModeButtonLine.MoveToX(SelectedTab.DrawPosition.X, !hasInitialPosition ? 0 : 200, Easing.OutQuint);
ModeButtonLine.MoveToX(SelectedTab.DrawPosition.X, !hasInitialPosition ? 0 : 500, Easing.OutElasticQuarter);

if (hasInitialPosition)
selectionSamples[SelectedTab.Value.ShortName]?.Play();
Expand Down
30 changes: 18 additions & 12 deletions osu.Game/Overlays/Toolbar/ToolbarRulesetTabButton.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// See the LICENCE file in the repository root for full licence text.

using osu.Framework.Allocation;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.UserInterface;
using osu.Framework.Input.Events;
using osu.Game.Graphics;
using osu.Game.Graphics.UserInterface;
using osu.Game.Localisation;
using osu.Game.Rulesets;
using osuTK.Graphics;

namespace osu.Game.Overlays.Toolbar
{
Expand Down Expand Up @@ -41,27 +43,31 @@ private partial class RulesetButton : ToolbarButton
{
protected override HoverSounds CreateHoverSounds(HoverSampleSet sampleSet) => new HoverSounds();

[Resolved]
private OsuColour colours { get; set; } = null!;

public RulesetButton()
{
Padding = new MarginPadding(3)
{
Bottom = 5
};
}

public bool Active
{
set
set => Scheduler.AddOnce(() =>
{
if (value)
{
IconContainer.Colour = Color4.White;
IconContainer.EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Glow,
Colour = new Color4(255, 194, 224, 100),
Radius = 15,
Roundness = 15,
};
IconContainer.Colour = Color4Extensions.FromHex("#00FFAA");
}
else
{
IconContainer.Colour = new Color4(255, 194, 224, 255);
IconContainer.Colour = colours.GrayF;
IconContainer.EdgeEffect = new EdgeEffectParameters();
}
}
});
}

protected override bool OnClick(ClickEvent e)
Expand Down
2 changes: 1 addition & 1 deletion osu.Game/Overlays/Toolbar/ToolbarUserButton.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ public ToolbarUserButton()
[BackgroundDependencyLoader]
private void load(OsuColour colours, IAPIProvider api, LoginOverlay? login)
{
Add(new OpaqueBackground { Depth = 1 });
BackgroundContent.Add(new OpaqueBackground { Depth = 1 });

Flow.Add(new Container
{
Expand Down