From 59bb6b8f7cbbde0078a51c88e51245bdc9ea88c3 Mon Sep 17 00:00:00 2001 From: Salman Ahmed Date: Thu, 14 Apr 2022 13:43:09 +0300 Subject: [PATCH 1/4] Add background dim effect to inactive settings sections --- osu.Game/Overlays/Settings/SettingsSection.cs | 53 +++++++++++++------ 1 file changed, 36 insertions(+), 17 deletions(-) diff --git a/osu.Game/Overlays/Settings/SettingsSection.cs b/osu.Game/Overlays/Settings/SettingsSection.cs index 2539c32806..50a82b3d96 100644 --- a/osu.Game/Overlays/Settings/SettingsSection.cs +++ b/osu.Game/Overlays/Settings/SettingsSection.cs @@ -13,6 +13,7 @@ using osu.Framework.Localisation; using osu.Game.Graphics; using osu.Game.Graphics.Sprites; using osuTK; +using osuTK.Graphics; namespace osu.Game.Overlays.Settings { @@ -23,6 +24,8 @@ namespace osu.Game.Overlays.Settings private IBindable selectedSection; + private Box dim; + private OsuSpriteText header; public abstract Drawable CreateIcon(); @@ -78,25 +81,40 @@ namespace osu.Game.Overlays.Settings }, new Container { - Padding = new MarginPadding - { - Top = 28, - Bottom = 40, - }, + Padding = new MarginPadding { Top = border_size }, RelativeSizeAxes = Axes.X, AutoSizeAxes = Axes.Y, Children = new Drawable[] { - header = new OsuSpriteText + dim = new Box { - Font = OsuFont.TorusAlternate.With(size: header_size), - Text = Header, - Margin = new MarginPadding - { - Horizontal = SettingsPanel.CONTENT_MARGINS - } + RelativeSizeAxes = Axes.Both, + Colour = Color4.Black, + Alpha = 0f, }, - FlowContent + new Container + { + RelativeSizeAxes = Axes.X, + AutoSizeAxes = Axes.Y, + Padding = new MarginPadding + { + Top = 24, + Bottom = 40, + }, + Children = new Drawable[] + { + header = new OsuSpriteText + { + Font = OsuFont.TorusAlternate.With(size: header_size), + Text = Header, + Margin = new MarginPadding + { + Horizontal = SettingsPanel.CONTENT_MARGINS + } + }, + FlowContent + } + } } }, }); @@ -135,15 +153,16 @@ namespace osu.Game.Overlays.Settings private void updateContentFade() { float contentFade = 1; - float headerFade = 1; + float dimFade = 0; if (!isCurrentSection) { - contentFade = 0.25f; - headerFade = IsHovered ? 0.5f : 0.25f; + contentFade = IsHovered ? 0.5f : 0.25f; + dimFade = IsHovered ? 0.125f : 0.25f; } - header.FadeTo(headerFade, 500, Easing.OutQuint); + dim.FadeTo(dimFade, 500, Easing.OutQuint); + header.FadeTo(contentFade, 500, Easing.OutQuint); FlowContent.FadeTo(contentFade, 500, Easing.OutQuint); } } From f19208a2451d26a7973f2361b3d7e4250964ffed Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Thu, 14 Apr 2022 21:04:52 +0900 Subject: [PATCH 2/4] Move dim layer to top and only apply dimming at one location --- osu.Game/Overlays/Settings/SettingsSection.cs | 29 +++++++------------ 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/osu.Game/Overlays/Settings/SettingsSection.cs b/osu.Game/Overlays/Settings/SettingsSection.cs index 50a82b3d96..49f0d5c153 100644 --- a/osu.Game/Overlays/Settings/SettingsSection.cs +++ b/osu.Game/Overlays/Settings/SettingsSection.cs @@ -13,7 +13,6 @@ using osu.Framework.Localisation; using osu.Game.Graphics; using osu.Game.Graphics.Sprites; using osuTK; -using osuTK.Graphics; namespace osu.Game.Overlays.Settings { @@ -26,8 +25,6 @@ namespace osu.Game.Overlays.Settings private Box dim; - private OsuSpriteText header; - public abstract Drawable CreateIcon(); public abstract LocalisableString Header { get; } @@ -86,12 +83,6 @@ namespace osu.Game.Overlays.Settings AutoSizeAxes = Axes.Y, Children = new Drawable[] { - dim = new Box - { - RelativeSizeAxes = Axes.Both, - Colour = Color4.Black, - Alpha = 0f, - }, new Container { RelativeSizeAxes = Axes.X, @@ -103,7 +94,7 @@ namespace osu.Game.Overlays.Settings }, Children = new Drawable[] { - header = new OsuSpriteText + new OsuSpriteText { Font = OsuFont.TorusAlternate.With(size: header_size), Text = Header, @@ -114,7 +105,13 @@ namespace osu.Game.Overlays.Settings }, FlowContent } - } + }, + dim = new Box + { + RelativeSizeAxes = Axes.Both, + Colour = colourProvider.Background5, + Alpha = 0f, + }, } }, }); @@ -152,18 +149,12 @@ namespace osu.Game.Overlays.Settings private void updateContentFade() { - float contentFade = 1; float dimFade = 0; if (!isCurrentSection) - { - contentFade = IsHovered ? 0.5f : 0.25f; - dimFade = IsHovered ? 0.125f : 0.25f; - } + dimFade = IsHovered ? 0.5f : 0.8f; - dim.FadeTo(dimFade, 500, Easing.OutQuint); - header.FadeTo(contentFade, 500, Easing.OutQuint); - FlowContent.FadeTo(contentFade, 500, Easing.OutQuint); + dim.FadeTo(dimFade, 300, Easing.OutQuint); } } } From 9240148c8e817869fcddc59f093f2eeb916c13dc Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Thu, 14 Apr 2022 21:16:54 +0900 Subject: [PATCH 3/4] Avoid initial fade of dim layer --- osu.Game/Overlays/Settings/SettingsSection.cs | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/osu.Game/Overlays/Settings/SettingsSection.cs b/osu.Game/Overlays/Settings/SettingsSection.cs index 49f0d5c153..6645d20dbe 100644 --- a/osu.Game/Overlays/Settings/SettingsSection.cs +++ b/osu.Game/Overlays/Settings/SettingsSection.cs @@ -25,6 +25,8 @@ namespace osu.Game.Overlays.Settings private Box dim; + private const float inactive_alpha = 0.8f; + public abstract Drawable CreateIcon(); public abstract LocalisableString Header { get; } @@ -110,7 +112,7 @@ namespace osu.Game.Overlays.Settings { RelativeSizeAxes = Axes.Both, Colour = colourProvider.Background5, - Alpha = 0f, + Alpha = inactive_alpha, }, } }, @@ -152,7 +154,9 @@ namespace osu.Game.Overlays.Settings float dimFade = 0; if (!isCurrentSection) - dimFade = IsHovered ? 0.5f : 0.8f; + { + dimFade = IsHovered ? 0.5f : inactive_alpha; + } dim.FadeTo(dimFade, 300, Easing.OutQuint); } From b0889590458b16f1c43acb3ec5966af00e72a196 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Thu, 14 Apr 2022 21:17:06 +0900 Subject: [PATCH 4/4] Reduce settings fade in duration to higher alpha/colour cross-talk --- osu.Game/Overlays/SettingsPanel.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/osu.Game/Overlays/SettingsPanel.cs b/osu.Game/Overlays/SettingsPanel.cs index b11b6fde27..d5b36713f3 100644 --- a/osu.Game/Overlays/SettingsPanel.cs +++ b/osu.Game/Overlays/SettingsPanel.cs @@ -197,7 +197,7 @@ namespace osu.Game.Overlays ContentContainer.Margin = new MarginPadding { Left = Sidebar?.DrawWidth ?? 0 }; } - private const double fade_in_duration = 1000; + private const double fade_in_duration = 500; private void loadSections() {