slight adjustments to user interface (#220)

+ remove `Backgrounds` namespace
+ use framework's `ScreenStack` and `Screen`
+ reorder namespacing
+ adjust settings tab
+ adjust home tab
- remove help tab

Vignette.Game.Tests/Visual/Screens/ScreenTestScene.cs

@@ -6,13 +6,12 @@
 using osu.Framework.Screens;
 using osu.Framework.Testing;
 using Vignette.Game.Graphics.Containers;
-using Vignette.Game.Screens;
 
 namespace Vignette.Game.Tests.Visual.Screens
 {
     public abstract class ScreenTestScene : VignetteManualInputManagerTestScene
     {
-        protected readonly VignetteScreenStack Stack;
+        protected readonly ScreenStack Stack;
 
         private readonly Container content;
 
@@ -28,7 +27,7 @@ public ScreenTestScene()
                     Child = new FluentTooltipContainer
                     {
                         RelativeSizeAxes = Axes.Both,
-                        Child = Stack = new VignetteScreenStack { RelativeSizeAxes = Axes.Both },
+                        Child = Stack = new ScreenStack { RelativeSizeAxes = Axes.Both },
                     },
                 },
                 content = new Container { RelativeSizeAxes = Axes.Both },

Vignette.Game.Tests/Visual/Screens/TestSceneMainMenu.cs

@@ -3,6 +3,7 @@
 
 using NUnit.Framework;
 using Vignette.Game.Screens.Menu;
+using Vignette.Game.Screens.Menu.Help;
 
 namespace Vignette.Game.Tests.Visual.Screens
 {
@@ -20,7 +21,7 @@ public override void SetupSteps()
         public void TestMenuNavigationControls()
         {
             AddStep("toggle side panel", () => menu.ToggleNavigationView());
-            AddStep("select help tab", () => menu.SelectTab(typeof(HelpScreen)));
+            AddStep("select help tab", () => menu.SelectTab<HelpPage>());
         }
     }
 }

Vignette.Game/Graphics/Containers/FluentScrollContainer.cs

@@ -33,7 +33,7 @@ protected class FluentScrollbar : ScrollbarContainer
             public FluentScrollbar(Direction direction)
                 : base(direction)
             {
-                Child = new ThemableMaskedBox
+                Child = new ThemableEffectBox
                 {
                     RelativeSizeAxes = Axes.Both,
                     CornerRadius = 2.5f,

Vignette.Game/Graphics/Containers/FluentTooltipContainer.cs

@@ -26,7 +26,7 @@ public FluentTooltip()
 
                 Children = new Drawable[]
                 {
-                    new ThemableMaskedBox
+                    new ThemableEffectBox
                     {
                         Colour = ThemeSlot.Gray10,
                         BorderColour = ThemeSlot.Gray30,

Vignette.Game/Graphics/Shapes/ThemableMaskedBox.cs → Vignette.Game/Graphics/Shapes/ThemableEffectBox.cs

@@ -3,12 +3,14 @@
 
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
+using osuTK;
 using Vignette.Game.Themeing;
 
 namespace Vignette.Game.Graphics.Shapes
 {
-    public class ThemableMaskedBox : ThemableDrawable<Container>
+    public class ThemableEffectBox : ThemableDrawable<Container>
     {
         private ThemeSlot borderColour;
 
@@ -37,7 +39,22 @@ public class ThemableMaskedBox : ThemableDrawable<Container>
             set => Target.CornerRadius = value;
         }
 
-        public ThemableMaskedBox(bool attached = true)
+        private bool shadow;
+
+        public bool Shadow
+        {
+            get => shadow;
+            set
+            {
+                if (shadow == value)
+                    return;
+
+                shadow = value;
+                ScheduleThemeChange();
+            }
+        }
+
+        public ThemableEffectBox(bool attached = true)
             : base(attached)
         {
         }
@@ -56,6 +73,19 @@ protected override void ThemeChanged(Theme theme)
         {
             Target.Child.Colour = theme.GetColour(Colour);
             Target.BorderColour = theme.GetColour(BorderColour);
+
+            if (!shadow)
+                return;
+
+            Target.EdgeEffect = new EdgeEffectParameters
+            {
+                Type = EdgeEffectType.Shadow,
+                Offset = new Vector2(0, 2),
+                Colour = theme.GetColour(ThemeSlot.Black).Opacity(0.1f),
+                Hollow = true,
+                Radius = 5,
+                Roundness = 5,
+            };
         }
     }
 }

Vignette.Game/Graphics/UserInterface/FluentButton.cs

@@ -118,7 +118,7 @@ public float IconSize
 
         protected readonly FillFlowContainer Label;
 
-        private readonly ThemableMaskedBox background;
+        private readonly ThemableEffectBox background;
 
         private ThemableSpriteText text;
 
@@ -129,7 +129,7 @@ public FluentButton()
             Height = 32;
             InternalChildren = new Drawable[]
             {
-                background = new ThemableMaskedBox
+                background = new ThemableEffectBox
                 {
                     RelativeSizeAxes = Axes.Both,
                     BorderColour = ThemeSlot.Gray110,

Vignette.Game/Graphics/UserInterface/FluentCheckbox.cs

@@ -20,7 +20,7 @@ namespace Vignette.Game.Graphics.UserInterface
     /// </summary>
     public class FluentCheckbox : Checkbox, IHasText
     {
-        private readonly ThemableMaskedBox box;
+        private readonly ThemableEffectBox box;
 
         private readonly ThemableSpriteIcon check;
 
@@ -64,7 +64,7 @@ public FluentCheckbox()
                     Size = new Vector2(20),
                     Children = new Drawable[]
                     {
-                        box = new ThemableMaskedBox
+                        box = new ThemableEffectBox
                         {
                             CornerRadius = 2.5f,
                             RelativeSizeAxes = Axes.Both,

Vignette.Game/Graphics/UserInterface/FluentDropdown.cs

@@ -40,9 +40,9 @@ protected override DropdownMenu CreateMenu()
 
         protected class FluentDropdownHeader : DropdownHeader
         {
-            private ThemableMaskedBox background;
+            private ThemableEffectBox background;
 
-            private ThemableMaskedBox border;
+            private ThemableEffectBox border;
 
             private ThemableSpriteIcon chevron;
 
@@ -97,11 +97,11 @@ public FluentDropdownHeader()
 
                 Background.Children = new Drawable[]
                 {
-                    background = new ThemableMaskedBox
+                    background = new ThemableEffectBox
                     {
                         RelativeSizeAxes = Axes.Both,
                     },
-                    border = new ThemableMaskedBox(),
+                    border = new ThemableEffectBox(),
                 };
 
                 Foreground.Padding = new MarginPadding { Horizontal = 8 };
@@ -224,7 +224,7 @@ public FluentDropdownMenu()
                 ScrollbarVisible = false;
                 BackgroundColour = Colour4.Transparent;
                 ItemsContainer.Padding = new MarginPadding(1);
-                AddInternal(new ThemableMaskedBox
+                AddInternal(new ThemableEffectBox
                 {
                     Depth = 1,
                     Colour = ThemeSlot.White,

Vignette.Game/Graphics/UserInterface/FluentMenu.cs

@@ -20,7 +20,7 @@ public FluentMenu(Direction direction, bool topLevelMenu = false)
             ScrollbarVisible = false;
             BackgroundColour = Colour4.Transparent;
             ItemsContainer.Padding = new MarginPadding(1);
-            AddInternal(new ThemableMaskedBox
+            AddInternal(new ThemableEffectBox
             {
                 Depth = 1,
                 Colour = ThemeSlot.White,

Vignette.Game/Graphics/UserInterface/FluentTextInput.cs

@@ -24,9 +24,9 @@ namespace Vignette.Game.Graphics.UserInterface
     /// </summary>
     public abstract class FluentTextInput : CompositeDrawable, IHasCurrentValue<string>
     {
-        private readonly ThemableMaskedBox background;
+        private readonly ThemableEffectBox background;
 
-        private readonly ThemableMaskedBox border;
+        private readonly ThemableEffectBox border;
 
         protected TextInputContainer Input { get; private set; }
 
@@ -125,12 +125,12 @@ public FluentTextInput()
 
             InternalChildren = new Drawable[]
             {
-                background = new ThemableMaskedBox
+                background = new ThemableEffectBox
                 {
                     Depth = 1,
                     RelativeSizeAxes = Axes.Both,
                 },
-                border = new ThemableMaskedBox
+                border = new ThemableEffectBox
                 {
                     Depth = -1,
                 }

Vignette.Game/Screens/Menu/HelpScreen.cs → Vignette.Game/Screens/Menu/Help/HelpPage.cs

@@ -9,12 +9,11 @@
 using Vignette.Game.Graphics.Containers;
 using Vignette.Game.Graphics.Shapes;
 using Vignette.Game.Graphics.Typesets;
-using Vignette.Game.Screens.Menu.Help;
 using Vignette.Game.Themeing;
 
-namespace Vignette.Game.Screens.Menu
+namespace Vignette.Game.Screens.Menu.Help
 {
-    public class HelpScreen : MenuScreen
+    public class HelpPage : MenuPage
     {
         public override LocalisableString Title => "Knowledgebase";
 
@@ -26,7 +25,7 @@ public class HelpScreen : MenuScreen
 
         private SearchContainer articleFlow;
 
-        public HelpScreen()
+        public HelpPage()
         {
             Child = new GridContainer
             {

Vignette.Game/Screens/Menu/Home/HomeBanner.cs

@@ -22,7 +22,6 @@ public class HomeBanner : Container
 
         public HomeBanner()
         {
-            AutoSizeAxes = Axes.Y;
             RelativeSizeAxes = Axes.X;
         }
 
@@ -38,11 +37,9 @@ private void load(TextureStore textures)
                 },
                 new Container
                 {
-                    Margin = new MarginPadding { Vertical = 40, Left = 20 },
+                    Margin = new MarginPadding { Top = 50, Left = 20 },
                     RelativeSizeAxes = Axes.X,
                     AutoSizeAxes = Axes.Y,
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
                     Children = new Drawable[]
                     {
                         new Sprite

Vignette.Game/Screens/Menu/Home/HomeButton.cs

@@ -19,7 +19,7 @@ namespace Vignette.Game.Screens.Menu.Home
 {
     public class HomeButton : FluentButtonBase
     {
-        private ThemableMaskedBox border;
+        private ThemableEffectBox background;
 
         private ThemableSpriteIcon icon;
 
@@ -49,33 +49,42 @@ public LocalisableString SubText
 
         public HomeButton()
         {
-            Size = new Vector2(240, 80);
-            BackgroundResting = ThemeSlot.Transparent;
+            Size = new Vector2(320, 80);
+            BackgroundResting = ThemeSlot.White;
             BackgroundHovered = ThemeSlot.Gray20;
             BackgroundPressed = ThemeSlot.Gray30;
             BackgroundDisabled = ThemeSlot.Transparent;
             Children = new Drawable[]
             {
-                border = new ThemableMaskedBox
+                background = new ThemableEffectBox
                 {
-                    BorderThickness = 3.0f,
+                    Shadow = true,
                     RelativeSizeAxes = Axes.Both,
-                    Colour = ThemeSlot.Transparent,
                 },
                 new Container
                 {
                     RelativeSizeAxes = Axes.Both,
                     Padding = new MarginPadding(15),
                     Children = new Drawable[]
                     {
-                        icon = new ThemableSpriteIcon
+                        new Container
                         {
-                            Colour = ThemeSlot.AccentPrimary,
-                            Size = new Vector2(28),
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Size = new Vector2(80),
+                            Child = icon = new ThemableSpriteIcon
+                            {
+                                Colour = ThemeSlot.AccentPrimary,
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                Size = new Vector2(28),
+                            },
                         },
                         new FillFlowContainer
                         {
-                            Margin = new MarginPadding { Left = 40 },
+                            Margin = new MarginPadding { Left = 100 },
+                            AutoSizeAxes = Axes.X,
+                            RelativeSizeAxes = Axes.Y,
                             Direction = FillDirection.Vertical,
                             Children = new Drawable[]
                             {
@@ -97,7 +106,7 @@ public HomeButton()
         }
 
         protected override void UpdateBackground(ThemeSlot slot)
-            => border.BorderColour = slot;
+            => background.Colour = slot;
 
         [BackgroundDependencyLoader]
         private void load(GameHost host)