1
0
mirror of https://github.com/ppy/osu.git synced 2024-12-14 13:22:55 +08:00

Reduce editor opacity of several editor components when hovering over composer

Addresses https://github.com/ppy/osu/discussions/24384.
This commit is contained in:
Bartłomiej Dach 2024-06-17 12:11:19 +02:00
parent cc0ef20afd
commit 7cfe8d8df2
No known key found for this signature in database
7 changed files with 92 additions and 30 deletions

View File

@ -7,6 +7,7 @@ using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Linq;
using JetBrains.Annotations;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.EnumExtensions;
@ -78,14 +79,16 @@ namespace osu.Game.Rulesets.Edit
protected InputManager InputManager { get; private set; }
private Box leftToolboxBackground;
private Box rightToolboxBackground;
private EditorRadioButtonCollection toolboxCollection;
private FillFlowContainer togglesCollection;
private FillFlowContainer sampleBankTogglesCollection;
private IBindable<bool> hasTiming;
private Bindable<bool> autoSeekOnPlacement;
private readonly Bindable<bool> composerFocusMode = new Bindable<bool>();
protected DrawableRuleset<TObject> DrawableRuleset { get; private set; }
@ -97,11 +100,14 @@ namespace osu.Game.Rulesets.Edit
protected override IReadOnlyDependencyContainer CreateChildDependencies(IReadOnlyDependencyContainer parent) =>
dependencies = new DependencyContainer(base.CreateChildDependencies(parent));
[BackgroundDependencyLoader]
private void load(OsuConfigManager config)
[BackgroundDependencyLoader(true)]
private void load(OsuConfigManager config, [CanBeNull] Editor editor)
{
autoSeekOnPlacement = config.GetBindable<bool>(OsuSetting.EditorAutoSeekOnPlacement);
if (editor != null)
composerFocusMode.BindTo(editor.ComposerFocusMode);
Config = Dependencies.Get<IRulesetConfigCache>().GetConfigFor(Ruleset);
try
@ -126,7 +132,7 @@ namespace osu.Game.Rulesets.Edit
InternalChildren = new[]
{
PlayfieldContentContainer = new Container
PlayfieldContentContainer = new ContentContainer
{
Name = "Playfield content",
RelativeSizeAxes = Axes.Y,
@ -146,7 +152,7 @@ namespace osu.Game.Rulesets.Edit
AutoSizeAxes = Axes.X,
Children = new Drawable[]
{
new Box
leftToolboxBackground = new Box
{
Colour = colourProvider.Background5,
RelativeSizeAxes = Axes.Both,
@ -191,7 +197,7 @@ namespace osu.Game.Rulesets.Edit
AutoSizeAxes = Axes.X,
Children = new Drawable[]
{
new Box
rightToolboxBackground = new Box
{
Colour = colourProvider.Background5,
RelativeSizeAxes = Axes.Both,
@ -260,6 +266,13 @@ namespace osu.Game.Rulesets.Edit
item.Selected.Disabled = !hasTiming.NewValue;
}
}, true);
composerFocusMode.BindValueChanged(_ =>
{
float targetAlpha = composerFocusMode.Value ? 0.5f : 1;
leftToolboxBackground.FadeTo(targetAlpha, 400, Easing.OutQuint);
rightToolboxBackground.FadeTo(targetAlpha, 400, Easing.OutQuint);
}, true);
}
protected override void Update()
@ -507,6 +520,31 @@ namespace osu.Game.Rulesets.Edit
}
#endregion
private partial class ContentContainer : Container
{
public override bool HandlePositionalInput => true;
private readonly Bindable<bool> composerFocusMode = new Bindable<bool>();
[BackgroundDependencyLoader(true)]
private void load([CanBeNull] Editor editor)
{
if (editor != null)
composerFocusMode.BindTo(editor.ComposerFocusMode);
}
protected override bool OnHover(HoverEvent e)
{
composerFocusMode.Value = true;
return false;
}
protected override void OnHoverLost(HoverLostEvent e)
{
composerFocusMode.Value = false;
}
}
}
/// <summary>

View File

@ -1,16 +1,13 @@
// 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.
#nullable disable
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Game.Overlays;
using osu.Framework.Testing;
using osu.Game.Rulesets.Edit;
using osu.Game.Screens.Edit.Components;
using osu.Game.Screens.Edit.Components.Timelines.Summary;
@ -21,12 +18,13 @@ namespace osu.Game.Screens.Edit
{
internal partial class BottomBar : CompositeDrawable
{
public TestGameplayButton TestGameplayButton { get; private set; }
public TestGameplayButton TestGameplayButton { get; private set; } = null!;
private IBindable<bool> saveInProgress;
private IBindable<bool> saveInProgress = null!;
private Bindable<bool> composerFocusMode = null!;
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider, Editor editor)
private void load(Editor editor)
{
Anchor = Anchor.BottomLeft;
Origin = Anchor.BottomLeft;
@ -45,11 +43,6 @@ namespace osu.Game.Screens.Edit
InternalChildren = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background4,
},
new GridContainer
{
RelativeSizeAxes = Axes.Both,
@ -79,6 +72,7 @@ namespace osu.Game.Screens.Edit
};
saveInProgress = editor.MutationTracker.InProgress.GetBoundCopy();
composerFocusMode = editor.ComposerFocusMode.GetBoundCopy();
}
protected override void LoadComplete()
@ -86,6 +80,13 @@ namespace osu.Game.Screens.Edit
base.LoadComplete();
saveInProgress.BindValueChanged(_ => TestGameplayButton.Enabled.Value = !saveInProgress.Value, true);
composerFocusMode.BindValueChanged(_ =>
{
float targetAlpha = composerFocusMode.Value ? 0.5f : 1;
foreach (var c in this.ChildrenOfType<BottomBarContainer>())
c.Background.FadeTo(targetAlpha, 400, Easing.OutQuint);
}, true);
}
}
}

View File

@ -20,7 +20,7 @@ namespace osu.Game.Screens.Edit.Components
protected readonly IBindable<Track> Track = new Bindable<Track>();
protected readonly Drawable Background;
public readonly Drawable Background;
private readonly Container content;
protected override Container<Drawable> Content => content;

View File

@ -32,8 +32,10 @@ namespace osu.Game.Screens.Edit.Components
private readonly BindableNumber<double> freqAdjust = new BindableDouble(1);
[BackgroundDependencyLoader]
private void load()
private void load(OverlayColourProvider colourProvider)
{
Background.Colour = colourProvider.Background4;
Children = new Drawable[]
{
playButton = new IconButton

View File

@ -2,6 +2,7 @@
// See the LICENCE file in the repository root for full licence text.
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
@ -19,6 +20,9 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
private readonly Drawable userContent;
private Box timelineBackground = null!;
private readonly Bindable<bool> composerFocusMode = new Bindable<bool>();
public TimelineArea(Drawable? content = null)
{
RelativeSizeAxes = Axes.X;
@ -28,12 +32,20 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider, OsuColour colours)
private void load(OverlayColourProvider colourProvider, OsuColour colours, Editor? editor)
{
const float padding = 10;
InternalChildren = new Drawable[]
{
new Box
{
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
Width = 35 + HitObjectComposer.TOOLBOX_CONTRACTED_SIZE_RIGHT,
RelativeSizeAxes = Axes.Y,
Colour = colourProvider.Background4
},
new GridContainer
{
RelativeSizeAxes = Axes.X,
@ -58,7 +70,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
AutoSizeAxes = Axes.Y,
Children = new Drawable[]
{
new Box
timelineBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Depth = float.MaxValue,
@ -111,6 +123,16 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
},
}
};
if (editor != null)
composerFocusMode.BindTo(editor.ComposerFocusMode);
}
protected override void LoadComplete()
{
base.LoadComplete();
composerFocusMode.BindValueChanged(_ => timelineBackground.FadeTo(composerFocusMode.Value ? 0.5f : 1, 400, Easing.OutQuint), true);
}
}
}

View File

@ -214,6 +214,12 @@ namespace osu.Game.Screens.Edit
private Bindable<bool> editorTimelineShowTimingChanges;
private Bindable<bool> editorTimelineShowTicks;
/// <summary>
/// This controls the opacity of components like the timelines, sidebars, etc.
/// In "composer focus" mode the opacity of the aforementioned components is reduced so that the user can focus on the composer better.
/// </summary>
public Bindable<bool> ComposerFocusMode { get; } = new Bindable<bool>();
public Editor(EditorLoader loader = null)
{
this.loader = loader;
@ -323,7 +329,6 @@ namespace osu.Game.Screens.Edit
Child = screenContainer = new Container<EditorScreen>
{
RelativeSizeAxes = Axes.Both,
Masking = true
}
},
new Container

View File

@ -4,7 +4,6 @@
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics.UserInterface;
using osu.Game.Overlays;
using osu.Game.Screens.Edit.Compose.Components.Timeline;
@ -52,11 +51,6 @@ namespace osu.Game.Screens.Edit
AutoSizeAxes = Axes.Y,
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background4
},
new GridContainer
{
Name = "Timeline content",