RepoMirrors/osu
1
0
Fork 0
mirror of https://github.com/ppy/osu synced 2025-01-16 02:51:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #26168 from peppy/toolbar-design-iteration

Browse Source 
Toolbar design iteration
This commit is contained in:
Bartłomiej Dach 2023-12-28 00:13:09 +01:00 committed by GitHub
commit 62e68716a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 98 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
osu.Game/Overlays/Toolbar/Toolbar.cs
View File

@ -224,9 +224,9 @@ namespace osu.Game.Overlays.Toolbar
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)),
},
};
}
@ -241,9 +241,9 @@ namespace osu.Game.Overlays.Toolbar
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);
}
}

45
osu.Game/Overlays/Toolbar/ToolbarButton.cs
View File

@ -7,7 +7,6 @@ using osu.Framework.Extensions.Color4Extensions;
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;
@ -74,6 +73,8 @@ namespace osu.Game.Overlays.Toolbar
private readonly SpriteText keyBindingTooltip;
protected FillFlowContainer Flow;
protected readonly Container BackgroundContent;
[Resolved]
private RealmAccess realm { get; set; } = null!;
@ -82,21 +83,33 @@ namespace osu.Game.Overlays.Toolbar
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
{
@ -219,14 +232,6 @@ namespace osu.Game.Overlays.Toolbar
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[]
{

34
osu.Game/Overlays/Toolbar/ToolbarClock.cs
View File

@ -42,21 +42,33 @@ namespace osu.Game.Overlays.Toolbar
clockDisplayMode = config.GetBindable<ToolbarClockDisplayMode>(OsuSetting.ToolbarClockDisplayMode);
prefer24HourTime = config.GetBindable<bool>(OsuSetting.Prefer24HourTime);
Padding = new MarginPadding(3);
Children = new Drawable[]
{
hoverBackground = new Box
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,
},
}
},
new FillFlowContainer
{

10
osu.Game/Overlays/Toolbar/ToolbarOverlayToggleButton.cs
View File

@ -3,6 +3,7 @@
#nullable disable
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
@ -14,7 +15,7 @@ namespace osu.Game.Overlays.Toolbar
{
public partial class ToolbarOverlayToggleButton : ToolbarButton
{
private readonly Box stateBackground;
private Box stateBackground;
private OverlayContainer stateContainer;
@ -44,12 +45,13 @@ namespace osu.Game.Overlays.Toolbar
}
}
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,

44
osu.Game/Overlays/Toolbar/ToolbarRulesetSelector.cs
View File

@ -4,20 +4,19 @@
#nullable disable
using System.Collections.Generic;
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 osuTK.Input;
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.Shapes;
using osu.Framework.Graphics.UserInterface;
using osu.Framework.Input.Events;
using osu.Game.Rulesets;
using osuTK;
using osuTK.Graphics;
using osuTK.Input;
namespace osu.Game.Overlays.Toolbar
{
@ -41,25 +40,24 @@ namespace osu.Game.Overlays.Toolbar
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)
@ -89,7 +87,7 @@ namespace osu.Game.Overlays.Toolbar
{
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();

30
osu.Game/Overlays/Toolbar/ToolbarRulesetTabButton.cs
View File

@ -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
{
@ -41,27 +43,31 @@ namespace osu.Game.Overlays.Toolbar
{
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)

2
osu.Game/Overlays/Toolbar/ToolbarUserButton.cs
View File

@ -40,7 +40,7 @@ namespace osu.Game.Overlays.Toolbar
[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
{