UI styling improvements.

Especially for the lobby.

CSS really paying off here.
This commit is contained in:
Pieter-Jan Briers
2019-05-14 09:57:51 +02:00
parent ad3b3c9f4f
commit a78a07d0c4
2 changed files with 28 additions and 6 deletions

View File

@@ -19,6 +19,7 @@ namespace Content.Client.UserInterface
public LobbyGui(ILocalizationManager localization, IResourceCache resourceCache) public LobbyGui(ILocalizationManager localization, IResourceCache resourceCache)
{ {
PanelOverride = new StyleBoxFlat { BackgroundColor = new Color(37, 37, 45)}; PanelOverride = new StyleBoxFlat { BackgroundColor = new Color(37, 37, 45)};
PanelOverride.SetContentMarginOverride(StyleBox.Margin.All, 4);
var vBox = new VBoxContainer(); var vBox = new VBoxContainer();
AddChild(vBox); AddChild(vBox);
@@ -28,22 +29,26 @@ namespace Content.Client.UserInterface
var titleContainer = new HBoxContainer(); var titleContainer = new HBoxContainer();
vBox.AddChild(titleContainer); vBox.AddChild(titleContainer);
titleContainer.AddChild(new Label var lobbyTitle = new Label
{ {
Text = localization.GetString("Lobby"), Text = localization.GetString("Lobby"),
SizeFlagsHorizontal = SizeFlags.None SizeFlagsHorizontal = SizeFlags.None
}); };
lobbyTitle.AddStyleClass(NanoStyle.StyleClassLabelHeading);
titleContainer.AddChild(lobbyTitle);
titleContainer.AddChild(ServerName = new Label titleContainer.AddChild(ServerName = new Label
{ {
SizeFlagsHorizontal = SizeFlags.ShrinkCenter | SizeFlags.Expand SizeFlagsHorizontal = SizeFlags.ShrinkCenter | SizeFlags.Expand
}); });
ServerName.AddStyleClass(NanoStyle.StyleClassLabelHeading);
titleContainer.AddChild(LeaveButton = new Button titleContainer.AddChild(LeaveButton = new Button
{ {
SizeFlagsHorizontal = SizeFlags.ShrinkEnd, SizeFlagsHorizontal = SizeFlags.ShrinkEnd,
Text = localization.GetString("Leave") Text = localization.GetString("Leave")
}); });
LeaveButton.AddStyleClass(NanoStyle.StyleClassButtonBig);
} }
var hBox = new HBoxContainer {SizeFlagsVertical = SizeFlags.FillExpand}; var hBox = new HBoxContainer {SizeFlagsVertical = SizeFlags.FillExpand};
@@ -66,6 +71,7 @@ namespace Content.Client.UserInterface
{ {
Text = localization.GetString("Observe") Text = localization.GetString("Observe")
}); });
ObserveButton.AddStyleClass(NanoStyle.StyleClassButtonBig);
readyButtons.AddChild(StartTime = new Label readyButtons.AddChild(StartTime = new Label
{ {
@@ -78,6 +84,7 @@ namespace Content.Client.UserInterface
ToggleMode = true, ToggleMode = true,
Text = localization.GetString("Ready Up") Text = localization.GetString("Ready Up")
}); });
ReadyButton.AddStyleClass(NanoStyle.StyleClassButtonBig);
leftVBox.AddChild(Chat = new ChatBox {SizeFlagsVertical = SizeFlags.FillExpand}); leftVBox.AddChild(Chat = new ChatBox {SizeFlagsVertical = SizeFlags.FillExpand});
Chat.Input.PlaceHolder = localization.GetString("Talk!"); Chat.Input.PlaceHolder = localization.GetString("Talk!");

View File

@@ -12,6 +12,8 @@ namespace Content.Client.UserInterface
{ {
public sealed class NanoStyle public sealed class NanoStyle
{ {
public const string StyleClassLabelHeading = "LabelHeading";
public const string StyleClassButtonBig = "ButtonBig";
private static readonly Color NanoGold = Color.FromHex("#A88B5E"); private static readonly Color NanoGold = Color.FromHex("#A88B5E");
public Stylesheet Stylesheet { get; } public Stylesheet Stylesheet { get; }
@@ -44,7 +46,7 @@ namespace Content.Client.UserInterface
Texture = buttonNormalTex, Texture = buttonNormalTex,
}; };
buttonNormal.SetPatchMargin(StyleBox.Margin.All, 2); buttonNormal.SetPatchMargin(StyleBox.Margin.All, 2);
buttonNormal.SetContentMarginOverride(StyleBox.Margin.Left | StyleBox.Margin.Right, 4); buttonNormal.SetContentMarginOverride(StyleBox.Margin.Horizontal, 8);
var buttonHoverTex = resCache.GetTexture("/Nano/button_hover.png"); var buttonHoverTex = resCache.GetTexture("/Nano/button_hover.png");
var buttonHover = new StyleBoxTexture var buttonHover = new StyleBoxTexture
@@ -52,7 +54,7 @@ namespace Content.Client.UserInterface
Texture = buttonHoverTex, Texture = buttonHoverTex,
}; };
buttonHover.SetPatchMargin(StyleBox.Margin.All, 2); buttonHover.SetPatchMargin(StyleBox.Margin.All, 2);
buttonHover.SetContentMarginOverride(StyleBox.Margin.Left | StyleBox.Margin.Right, 4); buttonHover.SetContentMarginOverride(StyleBox.Margin.Horizontal, 8);
var buttonPressedTex = resCache.GetTexture("/Nano/button_pressed.png"); var buttonPressedTex = resCache.GetTexture("/Nano/button_pressed.png");
var buttonPressed = new StyleBoxTexture var buttonPressed = new StyleBoxTexture
@@ -60,7 +62,7 @@ namespace Content.Client.UserInterface
Texture = buttonPressedTex, Texture = buttonPressedTex,
}; };
buttonPressed.SetPatchMargin(StyleBox.Margin.All, 2); buttonPressed.SetPatchMargin(StyleBox.Margin.All, 2);
buttonPressed.SetContentMarginOverride(StyleBox.Margin.Left | StyleBox.Margin.Right, 4); buttonPressed.SetContentMarginOverride(StyleBox.Margin.Horizontal, 8);
var buttonDisabledTex = resCache.GetTexture("/Nano/button_disabled.png"); var buttonDisabledTex = resCache.GetTexture("/Nano/button_disabled.png");
var buttonDisabled = new StyleBoxTexture var buttonDisabled = new StyleBoxTexture
@@ -68,7 +70,7 @@ namespace Content.Client.UserInterface
Texture = buttonDisabledTex, Texture = buttonDisabledTex,
}; };
buttonDisabled.SetPatchMargin(StyleBox.Margin.All, 2); buttonDisabled.SetPatchMargin(StyleBox.Margin.All, 2);
buttonDisabled.SetContentMarginOverride(StyleBox.Margin.Left | StyleBox.Margin.Right, 4); buttonDisabled.SetContentMarginOverride(StyleBox.Margin.Horizontal, 8);
var lineEditTex = resCache.GetTexture("/Nano/lineedit.png"); var lineEditTex = resCache.GetTexture("/Nano/lineedit.png");
var lineEdit = new StyleBoxTexture var lineEdit = new StyleBoxTexture
@@ -395,6 +397,19 @@ namespace Content.Client.UserInterface
new StyleProperty(Label.StylePropertyFont, notoSans16), new StyleProperty(Label.StylePropertyFont, notoSans16),
new StyleProperty(Label.StylePropertyFontColor, new Color(103, 103, 103, 128)), new StyleProperty(Label.StylePropertyFontColor, new Color(103, 103, 103, 128)),
}), }),
// Big Label
new StyleRule(new SelectorElement(typeof(Label), new []{StyleClassLabelHeading}, null, null), new []
{
new StyleProperty(Label.StylePropertyFont, notoSansBold16),
new StyleProperty(Label.StylePropertyFontColor, NanoGold),
} ),
// Big Button
new StyleRule(new SelectorElement(typeof(Button), new []{StyleClassButtonBig}, null, null), new []
{
new StyleProperty("font", notoSans16)
}),
}); });
} }
} }