sim1222/osukey
1
1
Fork 0
mirror of https://github.com/osukey/osukey.git synced 2025-08-03 06:36:31 +09:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15020 from bdach/settings-sidebar-redesign

Browse Source 
Update settings sidebar colour scheme and general appearance
This commit is contained in:
Dean Herbert
2021-10-10 15:05:20 +09:00
committed by GitHub
parent 941b14b988 49b341daff
commit 85821e4473
13 changed files with 244 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
osu.Game/Overlays/Settings/Sections/Input/KeyBindingRow.cs
View File

@ -78,7 +78,7 @@ namespace osu.Game.Overlays.Settings.Sections.Input
private RealmContextFactory realmFactory { get; set; }
[BackgroundDependencyLoader]
private void load(OsuColour colours)
private void load(OverlayColourProvider colourProvider)
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
@ -101,7 +101,7 @@ namespace osu.Game.Overlays.Settings.Sections.Input
EdgeEffect = new EdgeEffectParameters
{
Radius = 2,
Colour = colours.YellowDark.Opacity(0),
Colour = colourProvider.Highlight1.Opacity(0),
Type = EdgeEffectType.Shadow,
Hollow = true,
},
@ -110,13 +110,12 @@ namespace osu.Game.Overlays.Settings.Sections.Input
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.Black,
Alpha = 0.6f,
Colour = colourProvider.Background5,
},
text = new OsuSpriteText
{
Text = action.GetLocalisableDescription(),
Margin = new MarginPadding(padding),
Margin = new MarginPadding(1.5f * padding),
},
buttons = new FillFlowContainer<KeyButton>
{
@ -405,7 +404,8 @@ namespace osu.Game.Overlays.Settings.Sections.Input
private readonly Box box;
public readonly OsuSpriteText Text;
private Color4 hoverColour;
[Resolved]
private OverlayColourProvider colourProvider { get; set; }
private bool isBinding;
@ -448,7 +448,6 @@ namespace osu.Game.Overlays.Settings.Sections.Input
box = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.Black
},
Text = new OsuSpriteText
{
@ -463,9 +462,9 @@ namespace osu.Game.Overlays.Settings.Sections.Input
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
private void load()
{
hoverColour = colours.YellowDark;
updateHoverState();
}
protected override bool OnHover(HoverEvent e)
@ -484,12 +483,12 @@ namespace osu.Game.Overlays.Settings.Sections.Input
{
if (isBinding)
{
box.FadeColour(Color4.White, transition_time, Easing.OutQuint);
box.FadeColour(colourProvider.Light2, transition_time, Easing.OutQuint);
Text.FadeColour(Color4.Black, transition_time, Easing.OutQuint);
}
else
{
box.FadeColour(IsHovered ? hoverColour : Color4.Black, transition_time, Easing.OutQuint);
box.FadeColour(IsHovered ? colourProvider.Light4 : colourProvider.Background6, transition_time, Easing.OutQuint);
Text.FadeColour(IsHovered ? Color4.Black : Color4.White, transition_time, Easing.OutQuint);
}
}

3
osu.Game/Overlays/Settings/Sections/Input/KeyBindingsSubsection.cs
View File

@ -27,8 +27,7 @@ namespace osu.Game.Overlays.Settings.Sections.Input
{
this.variant = variant;
FlowContent.Spacing = new Vector2(0, 1);
FlowContent.Padding = new MarginPadding { Left = SettingsPanel.CONTENT_MARGINS, Right = SettingsPanel.CONTENT_MARGINS };
FlowContent.Spacing = new Vector2(0, 3);
}
[BackgroundDependencyLoader]

8
osu.Game/Overlays/Settings/Sections/Input/TabletSettings.cs
View File

@ -165,7 +165,13 @@ namespace osu.Game.Overlays.Settings.Sections.Input
LabelText = TabletSettingsStrings.Rotation,
Current = rotation
},
new RotationPresetButtons(tabletHandler),
new RotationPresetButtons(tabletHandler)
{
Padding = new MarginPadding
{
Horizontal = SettingsPanel.CONTENT_MARGINS
}
},
new SettingsSlider<float>
{
TransferValueOnCommit = true,

2
osu.Game/Overlays/Settings/Sections/MaintenanceSection.cs
View File

@ -6,7 +6,6 @@ using osu.Framework.Graphics.Sprites;
using osu.Framework.Localisation;
using osu.Game.Localisation;
using osu.Game.Overlays.Settings.Sections.Maintenance;
using osuTK;
namespace osu.Game.Overlays.Settings.Sections
{
@ -21,7 +20,6 @@ namespace osu.Game.Overlays.Settings.Sections
public MaintenanceSection()
{
FlowContent.Spacing = new Vector2(0, 5);
Children = new Drawable[]
{
new GeneralSettings()

3
osu.Game/Overlays/Settings/Sections/SkinSection.cs
View File

@ -16,7 +16,6 @@ using osu.Game.Graphics.UserInterface;
using osu.Game.Localisation;
using osu.Game.Skinning;
using osu.Game.Skinning.Editor;
using osuTK;
namespace osu.Game.Overlays.Settings.Sections
{
@ -63,8 +62,6 @@ namespace osu.Game.Overlays.Settings.Sections
[BackgroundDependencyLoader(permitNulls: true)]
private void load(OsuConfigManager config, [CanBeNull] SkinEditorOverlay skinEditor)
{
FlowContent.Spacing = new Vector2(0, 5);
Children = new Drawable[]
{
skinDropdown = new SkinSettingsDropdown(),

6
osu.Game/Overlays/Settings/SettingsHeader.cs
View File

@ -22,7 +22,7 @@ namespace osu.Game.Overlays.Settings
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
private void load(OverlayColourProvider colourProvider)
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
@ -39,7 +39,7 @@ namespace osu.Game.Overlays.Settings
new OsuSpriteText
{
Text = heading,
Font = OsuFont.GetFont(size: 40),
Font = OsuFont.TorusAlternate.With(size: 40),
Margin = new MarginPadding
{
Left = SettingsPanel.CONTENT_MARGINS,
@ -48,7 +48,7 @@ namespace osu.Game.Overlays.Settings
},
new OsuSpriteText
{
Colour = colours.Pink,
Colour = colourProvider.Content2,
Text = subheading,
Font = OsuFont.GetFont(size: 18),
Margin = new MarginPadding

26
osu.Game/Overlays/Settings/SettingsSection.cs
View File

@ -12,7 +12,7 @@ using osu.Framework.Input.Events;
using osu.Framework.Localisation;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osuTK.Graphics;
using osuTK;
namespace osu.Game.Overlays.Settings
{
@ -31,9 +31,10 @@ namespace osu.Game.Overlays.Settings
public IEnumerable<IFilterable> FilterableChildren => Children.OfType<IFilterable>();
public virtual IEnumerable<string> FilterTerms => new[] { Header.ToString() };
private const int header_size = 26;
private const int margin = 20;
private const int border_size = 2;
public const int ITEM_SPACING = 14;
private const int header_size = 24;
private const int border_size = 4;
public bool MatchingFilter
{
@ -54,8 +55,9 @@ namespace osu.Game.Overlays.Settings
{
Margin = new MarginPadding
{
Top = header_size
Top = 36
},
Spacing = new Vector2(0, ITEM_SPACING),
Direction = FillDirection.Vertical,
AutoSizeAxes = Axes.Y,
RelativeSizeAxes = Axes.X,
@ -63,14 +65,14 @@ namespace osu.Game.Overlays.Settings
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
private void load(OverlayColourProvider colourProvider, OsuColour colours)
{
AddRangeInternal(new Drawable[]
{
new Box
{
Name = "separator",
Colour = new Color4(0, 0, 0, 255),
Colour = colourProvider.Background6,
RelativeSizeAxes = Axes.X,
Height = border_size,
},
@ -78,8 +80,8 @@ namespace osu.Game.Overlays.Settings
{
Padding = new MarginPadding
{
Top = margin + border_size,
Bottom = margin + 10,
Top = 28,
Bottom = 40,
},
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
@ -87,13 +89,11 @@ namespace osu.Game.Overlays.Settings
{
header = new OsuSpriteText
{
Font = OsuFont.GetFont(size: header_size),
Font = OsuFont.TorusAlternate.With(size: header_size),
Text = Header,
Colour = colours.Yellow,
Margin = new MarginPadding
{
Left = SettingsPanel.CONTENT_MARGINS,
Right = SettingsPanel.CONTENT_MARGINS
Horizontal = SettingsPanel.CONTENT_MARGINS
}
},
FlowContent

12
osu.Game/Overlays/Settings/SettingsSubsection.cs
View File

@ -46,13 +46,17 @@ namespace osu.Game.Overlays.Settings
FlowContent = new FillFlowContainer
{
Margin = new MarginPadding { Top = SettingsSection.ITEM_SPACING },
Direction = FillDirection.Vertical,
Spacing = new Vector2(0, 8),
Spacing = new Vector2(0, SettingsSection.ITEM_SPACING),
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
};
}
private const int header_height = 43;
private const int header_font_size = 20;
[BackgroundDependencyLoader]
private void load()
{
@ -60,9 +64,9 @@ namespace osu.Game.Overlays.Settings
{
new OsuSpriteText
{
Text = Header.ToString().ToUpper(), // TODO: Add localisation support after https://github.com/ppy/osu-framework/pull/4603 is merged.
Margin = new MarginPadding { Vertical = 30, Left = SettingsPanel.CONTENT_MARGINS, Right = SettingsPanel.CONTENT_MARGINS },
Font = OsuFont.GetFont(weight: FontWeight.Bold),
Text = Header,
Margin = new MarginPadding { Vertical = (header_height - header_font_size) * 0.5f, Horizontal = SettingsPanel.CONTENT_MARGINS },
Font = OsuFont.GetFont(size: header_font_size),
},
FlowContent
});

22
osu.Game/Overlays/Settings/Sidebar.cs
View File

@ -4,6 +4,7 @@
using System;
using System.Linq;
using osu.Framework;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
@ -15,22 +16,23 @@ using osuTK;
namespace osu.Game.Overlays.Settings
{
public class Sidebar : Container<SidebarButton>, IStateful<ExpandedState>
public class Sidebar : Container<SidebarIconButton>, IStateful<ExpandedState>
{
private readonly FillFlowContainer<SidebarButton> content;
public const float DEFAULT_WIDTH = Toolbar.Toolbar.HEIGHT * 1.4f;
private readonly Box background;
private readonly FillFlowContainer<SidebarIconButton> content;
public const float DEFAULT_WIDTH = 70;
public const int EXPANDED_WIDTH = 200;
public event Action<ExpandedState> StateChanged;
protected override Container<SidebarButton> Content => content;
protected override Container<SidebarIconButton> Content => content;
public Sidebar()
{
RelativeSizeAxes = Axes.Y;
InternalChildren = new Drawable[]
{
new Box
background = new Box
{
Colour = OsuColour.Gray(0.02f),
RelativeSizeAxes = Axes.Both,
@ -39,7 +41,7 @@ namespace osu.Game.Overlays.Settings
{
Children = new[]
{
content = new FillFlowContainer<SidebarButton>
content = new FillFlowContainer<SidebarIconButton>
{
Origin = Anchor.CentreLeft,
Anchor = Anchor.CentreLeft,
@ -52,6 +54,12 @@ namespace osu.Game.Overlays.Settings
};
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
background.Colour = colourProvider.Background5;
}
private ScheduledDelegate expandEvent;
private ExpandedState state;
@ -80,8 +88,6 @@ namespace osu.Game.Overlays.Settings
{
public SidebarScrollContainer()
{
Content.Anchor = Anchor.CentreLeft;
Content.Origin = Anchor.CentreLeft;
RelativeSizeAxes = Axes.Both;
ScrollbarVisible = false;
}

120
osu.Game/Overlays/Settings/SidebarButton.cs
View File

@ -1,110 +1,40 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// 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 osuTK;
using osuTK.Graphics;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Framework.Input.Events;
using osu.Game.Graphics.UserInterface;
using osu.Game.Graphics.Containers;
namespace osu.Game.Overlays.Settings
{
public class SidebarButton : OsuButton
public abstract class SidebarButton : OsuButton
{
private readonly ConstrainedIconContainer iconContainer;
private readonly SpriteText headerText;
private readonly Box selectionIndicator;
private readonly Container text;
protected const double FADE_DURATION = 500;
// always consider as part of flow, even when not visible (for the sake of the initial animation).
public override bool IsPresent => true;
private SettingsSection section;
public SettingsSection Section
{
get => section;
set
{
section = value;
headerText.Text = value.Header;
iconContainer.Icon = value.CreateIcon();
}
}
private bool selected;
public bool Selected
{
get => selected;
set
{
selected = value;
if (selected)
{
selectionIndicator.FadeIn(50);
text.FadeColour(Color4.White, 50);
}
else
{
selectionIndicator.FadeOut(50);
text.FadeColour(OsuColour.Gray(0.6f), 50);
}
}
}
public SidebarButton()
{
Height = Sidebar.DEFAULT_WIDTH;
RelativeSizeAxes = Axes.X;
BackgroundColour = Color4.Black;
AddRange(new Drawable[]
{
text = new Container
{
Width = Sidebar.DEFAULT_WIDTH,
RelativeSizeAxes = Axes.Y,
Colour = OsuColour.Gray(0.6f),
Children = new Drawable[]
{
headerText = new OsuSpriteText
{
Position = new Vector2(Sidebar.DEFAULT_WIDTH + 10, 0),
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
},
iconContainer = new ConstrainedIconContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(20),
},
}
},
selectionIndicator = new Box
{
Alpha = 0,
RelativeSizeAxes = Axes.Y,
Width = 5,
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
},
});
}
[Resolved]
protected OverlayColourProvider ColourProvider { get; private set; }
[BackgroundDependencyLoader]
private void load(OsuColour colours)
private void load()
{
selectionIndicator.Colour = colours.Yellow;
BackgroundColour = ColourProvider.Background5;
}
protected override void LoadComplete()
{
base.LoadComplete();
UpdateState();
FinishTransforms(true);
}
protected override bool OnHover(HoverEvent e)
{
UpdateState();
return false;
}
protected override void OnHoverLost(HoverLostEvent e) => UpdateState();
protected abstract void UpdateState();
}
}

130
osu.Game/Overlays/Settings/SidebarIconButton.cs Normal file
View File

@ -0,0 +1,130 @@
// 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 osuTK;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.Containers;
namespace osu.Game.Overlays.Settings
{
public class SidebarIconButton : SidebarButton
{
private const float selection_indicator_height_active = 18;
private const float selection_indicator_height_inactive = 4;
private readonly ConstrainedIconContainer iconContainer;
private readonly SpriteText headerText;
private readonly CircularContainer selectionIndicator;
private readonly Container textIconContent;
// always consider as part of flow, even when not visible (for the sake of the initial animation).
public override bool IsPresent => true;
private SettingsSection section;
public SettingsSection Section
{
get => section;
set
{
section = value;
headerText.Text = value.Header;
iconContainer.Icon = value.CreateIcon();
}
}
private bool selected;
public bool Selected
{
get => selected;
set
{
selected = value;
if (IsLoaded)
UpdateState();
}
}
public SidebarIconButton()
{
RelativeSizeAxes = Axes.X;
Height = 46;
AddRange(new Drawable[]
{
textIconContent = new Container
{
Width = Sidebar.DEFAULT_WIDTH,
RelativeSizeAxes = Axes.Y,
Colour = OsuColour.Gray(0.6f),
Children = new Drawable[]
{
headerText = new OsuSpriteText
{
Position = new Vector2(Sidebar.DEFAULT_WIDTH + 10, 0),
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
},
iconContainer = new ConstrainedIconContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(20),
},
}
},
selectionIndicator = new CircularContainer
{
Alpha = 0,
Width = 4,
Height = selection_indicator_height_inactive,
Masking = true,
CornerRadius = 1.5f,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Margin = new MarginPadding
{
Left = 9,
},
Child = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Colour4.White
}
},
});
}
[BackgroundDependencyLoader]
private void load()
{
selectionIndicator.Colour = ColourProvider.Highlight1;
}
protected override void UpdateState()
{
if (Selected)
{
textIconContent.FadeColour(ColourProvider.Content1, FADE_DURATION, Easing.OutQuint);
selectionIndicator.FadeIn(FADE_DURATION, Easing.OutQuint);
selectionIndicator.ResizeHeightTo(selection_indicator_height_active, FADE_DURATION, Easing.OutElasticHalf);
}
else
{
textIconContent.FadeColour(IsHovered ? ColourProvider.Light1 : ColourProvider.Light3, FADE_DURATION, Easing.OutQuint);
selectionIndicator.FadeOut(FADE_DURATION, Easing.OutQuint);
selectionIndicator.ResizeHeightTo(selection_indicator_height_inactive, FADE_DURATION, Easing.OutQuint);
}
}
}
}

40
osu.Game/Overlays/SettingsPanel.cs
View File

@ -6,7 +6,6 @@ using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using osuTK;
using osuTK.Graphics;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.IEnumerableExtensions;
@ -15,7 +14,6 @@ using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Primitives;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Input.Events;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.UserInterface;
using osu.Game.Overlays.Settings;
@ -25,7 +23,7 @@ namespace osu.Game.Overlays
[Cached]
public abstract class SettingsPanel : OsuFocusedOverlayContainer
{
public const float CONTENT_MARGINS = 15;
public const float CONTENT_MARGINS = 20;
public const float TRANSITION_LENGTH = 600;
@ -46,7 +44,7 @@ namespace osu.Game.Overlays
protected override Container<Drawable> Content => ContentContainer;
protected Sidebar Sidebar;
private SidebarButton selectedSidebarButton;
private SidebarIconButton selectedSidebarButton;
public SettingsSectionsContainer SectionsContainer { get; private set; }
@ -64,6 +62,9 @@ namespace osu.Game.Overlays
public IBindable<SettingsSection> CurrentSection = new Bindable<SettingsSection>();
[Cached]
private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
protected SettingsPanel(bool showSidebar)
{
this.showSidebar = showSidebar;
@ -89,7 +90,7 @@ namespace osu.Game.Overlays
Origin = Anchor.TopRight,
Scale = new Vector2(2, 1), // over-extend to the left for transitions
RelativeSizeAxes = Axes.Both,
Colour = OsuColour.Gray(0.05f),
Colour = colourProvider.Background4,
Alpha = 1,
},
loading = new LoadingLayer
@ -105,17 +106,23 @@ namespace osu.Game.Overlays
RelativeSizeAxes = Axes.Both,
ExpandableHeader = CreateHeader(),
SelectedSection = { BindTarget = CurrentSection },
FixedHeader = searchTextBox = new SeekLimitedSearchTextBox
FixedHeader = new Container
{
RelativeSizeAxes = Axes.X,
Origin = Anchor.TopCentre,
Anchor = Anchor.TopCentre,
Width = 0.95f,
Margin = new MarginPadding
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding
{
Top = 20,
Bottom = 20
Vertical = 20,
Horizontal = CONTENT_MARGINS
},
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
Child = searchTextBox = new SeekLimitedSearchTextBox
{
RelativeSizeAxes = Axes.X,
Origin = Anchor.TopCentre,
Anchor = Anchor.TopCentre,
}
},
Footer = CreateFooter().With(f => f.Alpha = 0)
});
@ -245,11 +252,11 @@ namespace osu.Game.Overlays
});
}
private IEnumerable<SidebarButton> createSidebarButtons()
private IEnumerable<SidebarIconButton> createSidebarButtons()
{
foreach (var section in SectionsContainer)
{
yield return new SidebarButton
yield return new SidebarIconButton
{
Section = section,
Action = () =>
@ -292,11 +299,12 @@ namespace osu.Game.Overlays
Direction = FillDirection.Vertical,
};
public SettingsSectionsContainer()
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
HeaderBackground = new Box
{
Colour = Color4.Black,
Colour = colourProvider.Background4,
RelativeSizeAxes = Axes.Both
};
}

15
osu.Game/Overlays/SettingsSubPanel.cs
View File

@ -7,10 +7,8 @@ using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterface;
using osu.Game.Overlays.Settings;
using osuTK;
using osuTK.Graphics;
namespace osu.Game.Overlays
{
@ -34,18 +32,18 @@ namespace osu.Game.Overlays
protected override bool DimMainContent => false; // dimming is handled by main overlay
private class BackButton : OsuButton
private class BackButton : SidebarButton
{
private Container content;
[BackgroundDependencyLoader]
private void load()
{
Size = new Vector2(Sidebar.DEFAULT_WIDTH);
BackgroundColour = Color4.Black;
AddRange(new Drawable[]
{
new Container
content = new Container
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
@ -71,6 +69,11 @@ namespace osu.Game.Overlays
}
});
}
protected override void UpdateState()
{
content.FadeColour(IsHovered ? ColourProvider.Light1 : ColourProvider.Light3, FADE_DURATION, Easing.OutQuint);
}
}
}
}