Skip to content

Change toolbar buttons tooltips to be more visible #308

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

Merged
peppy merged 3 commits into from
May 19, 2026
Merged

Change toolbar buttons tooltips to be more visible #308

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cd66f37
Change toolbar buttons tooltips to be more visible
stanriders May 18, 2026
7ac7a47
Fix variables access
stanriders May 18, 2026
3c6e539
readonly
stanriders May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 205 additions & 5 deletions PerformanceCalculatorGUI/Components/ScreenSelectionButton.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,221 @@
// 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.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Cursor;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Input.Bindings;
using osu.Framework.Input.Events;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterface;
using osu.Game.Input.Bindings;
using osu.Game.Overlays.Toolbar;
using osuTK;
using osuTK.Graphics;

namespace PerformanceCalculatorGUI.Components
{
public partial class ScreenSelectionButton : ToolbarButton
public partial class ScreenSelectionButton : OsuClickableContainer, IKeyBindingHandler<GlobalAction>, IHasCustomTooltip<(string, GlobalAction?)>
{
private readonly string title;
private readonly GlobalAction? hotkey;

public const float PADDING = 3;

protected Box HoverBackground;
private readonly Box flashBackground;

public ScreenSelectionButton(string title, IconUsage? icon = null, GlobalAction? hotkey = null)
{
Hotkey = hotkey;
TooltipMain = title;
this.title = title;
this.hotkey = hotkey;

AutoSizeAxes = Axes.X;
RelativeSizeAxes = Axes.Y;

Children = new Drawable[]
{
new Container
{
Width = PerformanceCalculatorSceneManager.CONTROL_AREA_HEIGHT,
RelativeSizeAxes = Axes.Y,
Padding = new MarginPadding(PADDING),
Children = new Drawable[]
{
new Container
{
RelativeSizeAxes = Axes.Both,
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
{
Direction = FillDirection.Horizontal,
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
Padding = new MarginPadding { Horizontal = PerformanceCalculatorSceneManager.CONTROL_AREA_HEIGHT / 2 },
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
Children = new Drawable[]
{
new ConstrainedIconContainer
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Size = new Vector2(25),
Icon = new ScreenSelectionButtonIcon(icon) { IconSize = new Vector2(20) }
},
},
},
},
},
};
}

protected override bool OnMouseDown(MouseDownEvent e) => false;

protected override bool OnClick(ClickEvent e)
{
flashBackground.FadeIn(50).Then().FadeOutFromOne(800, Easing.OutQuint);
return base.OnClick(e);
}

protected override bool OnHover(HoverEvent e)
{
HoverBackground.FadeIn(300, Easing.OutQuint);
return true;
}

protected override void OnHoverLost(HoverLostEvent e)
{
HoverBackground.FadeOut(200, Easing.Out);
}

public bool OnPressed(KeyBindingPressEvent<GlobalAction> e)
{
if (e.Action == hotkey && !e.Repeat)
{
TriggerClick();
return true;
}

return false;
}

public void OnReleased(KeyBindingReleaseEvent<GlobalAction> e)
{
}

public ITooltip<(string, GlobalAction?)> GetCustomTooltip()
{
return new ScreenSelectionButtonTooltip();
}

public (string, GlobalAction?) TooltipContent => (title, hotkey);

public partial class ScreenSelectionButtonTooltip : VisibilityContainer, ITooltip<(string, GlobalAction?)>
{
private (string, GlobalAction?)? currentData;

private FillFlowContainer subTooltipFlow;
Comment thread
github-advanced-security[bot] marked this conversation as resolved.
Fixed
private OsuSpriteText text;
Comment thread
github-advanced-security[bot] marked this conversation as resolved.
Fixed

public ScreenSelectionButtonTooltip()
{
AutoSizeAxes = Axes.Both;
Masking = true;
CornerRadius = 5;

EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Shadow,
Colour = Color4.Black.Opacity(0.2f),
Radius = 10f,
};

Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColour.Gray(0.1f),
},
new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Padding = new MarginPadding(8f),
Direction = FillDirection.Vertical,
Spacing = new Vector2(5),
Children = new Drawable[]
{
text = new OsuSpriteText
{
Anchor = Anchor.TopLeft,
Origin = Anchor.TopLeft,
Shadow = true,
Font = OsuFont.GetFont(size: 18, weight: FontWeight.Bold),
},
subTooltipFlow = new FillFlowContainer

@peppy peppy May 19, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this hotkey stuff actually used in this project?

@stanriders stanriders May 19, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Settings can be opened using ctrl+o

@peppy peppy May 19, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feels like a lot of faff to be inlining for one usage most people already know, dunno.

@stanriders stanriders May 19, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True, but I do want to add screen switching hotkeys at some point too and those definitely will need a tooltip

{
AutoSizeAxes = Axes.Both,
Anchor = Anchor.TopLeft,
Origin = Anchor.TopLeft,
Direction = FillDirection.Horizontal,
}
}
}
};
}

protected override void PopIn() => this.FadeIn(300, Easing.OutQuint);
protected override void PopOut() => this.FadeOut(200, Easing.Out);

public void SetContent((string, GlobalAction?) data)
{
if (currentData == data)
return;

currentData = data;
subTooltipFlow.Clear();

text.Text = data.Item1;

if (data.Item2 != null)
{
subTooltipFlow.Add(new HotkeyDisplay
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Hotkey = new Hotkey(data.Item2.Value),
Margin = new MarginPadding { Left = 3 },
});
}
}

SetIcon(new ScreenSelectionButtonIcon(icon) { IconSize = new Vector2(25) });
public void Move(Vector2 pos) => Position = pos;
}
}
}
12 changes: 2 additions & 10 deletions PerformanceCalculatorGUI/Components/SettingsButton.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,19 @@
// See the LICENCE file in the repository root for full licence text.

using osu.Framework.Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Cursor;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Graphics.UserInterface;
using osu.Framework.Input.Events;
using osu.Game.Input.Bindings;
using osu.Game.Overlays.Toolbar;
using osuTK;

namespace PerformanceCalculatorGUI.Components
{
public partial class SettingsButton : ToolbarButton, IHasPopover
public partial class SettingsButton : ScreenSelectionButton, IHasPopover
{
protected override Anchor TooltipAnchor => Anchor.TopRight;

public SettingsButton()
: base("Settings", FontAwesome.Solid.Cog, GlobalAction.ToggleSettings)
{
Hotkey = GlobalAction.ToggleSettings;
TooltipMain = "Settings";

SetIcon(new ScreenSelectionButtonIcon(FontAwesome.Solid.Cog) { IconSize = new Vector2(70) });
}

public Popover GetPopover() => new SettingsPopover();
Expand Down
36 changes: 4 additions & 32 deletions PerformanceCalculatorGUI/PerformanceCalculatorSceneManager.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,19 @@

using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Cursor;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Screens;
using osu.Game.Beatmaps.Drawables.Cards;
using osu.Game.Configuration;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Overlays;
using osu.Game.Overlays.Dialog;
using osu.Game.Overlays.Toolbar;
using osu.Game.Rulesets;
using osuTK;
using osuTK.Graphics;
using PerformanceCalculatorGUI.Components;
using PerformanceCalculatorGUI.Screens;

Expand All @@ -33,8 +28,6 @@ public partial class PerformanceCalculatorSceneManager : CompositeDrawable

private ToolbarRulesetSelector rulesetSelector = null!;

private Box hoverGradientBox = null!;

public const float CONTROL_AREA_HEIGHT = 45;

[Resolved]
Expand Down Expand Up @@ -68,19 +61,10 @@ private void load(OsuColour colours)
{
new Drawable[]
{
new HoverHandlingContainer
new Container
{
RelativeSizeAxes = Axes.X,
Height = CONTROL_AREA_HEIGHT,
Hovered = e =>
{
hoverGradientBox.FadeIn(100);
return false;
},
Unhovered = e =>
{
hoverGradientBox.FadeOut(100);
},
Children = new Drawable[]
{
new Box
Expand Down Expand Up @@ -124,7 +108,6 @@ private void load(OsuColour colours)
Direction = FillDirection.Horizontal,
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
Spacing = new Vector2(5),
Children = new Drawable[]
{
rulesetSelector = new ToolbarRulesetSelector(),
Expand All @@ -138,21 +121,10 @@ private void load(OsuColour colours)
{
new ScalingContainer(ScalingMode.Everything)
{
Depth = 1,
Children = new Drawable[]
Child = screenStack = new ScreenStack
{
screenStack = new ScreenStack
{
RelativeSizeAxes = Axes.Both
},
hoverGradientBox = new Box
{
Colour = ColourInfo.GradientVertical(Color4.Black.Opacity(1.0f), Color4.Black.Opacity(1)),
RelativeSizeAxes = Axes.X,
Height = 100,
Alpha = 0
}
}
RelativeSizeAxes = Axes.Both
},
}
}
}
Expand Down
Loading