tommy/tbd-station-14
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI styling improvements.

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

11
Content.Client/UserInterface/LobbyGui.cs
View File

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

23
Content.Client/UserInterface/NanoStyle.cs
View File

@@ -12,6 +12,8 @@ namespace Content.Client.UserInterface
{
public sealed class NanoStyle
{
public const string StyleClassLabelHeading = "LabelHeading";
public const string StyleClassButtonBig = "ButtonBig";
private static readonly Color NanoGold = Color.FromHex("#A88B5E");
public Stylesheet Stylesheet { get; }
@@ -44,7 +46,7 @@ namespace Content.Client.UserInterface
Texture = buttonNormalTex,
};
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 buttonHover = new StyleBoxTexture
@@ -52,7 +54,7 @@ namespace Content.Client.UserInterface
Texture = buttonHoverTex,
};
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 buttonPressed = new StyleBoxTexture
@@ -60,7 +62,7 @@ namespace Content.Client.UserInterface
Texture = buttonPressedTex,
};
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 buttonDisabled = new StyleBoxTexture
@@ -68,7 +70,7 @@ namespace Content.Client.UserInterface
Texture = buttonDisabledTex,
};
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 lineEdit = new StyleBoxTexture
@@ -395,6 +397,19 @@ namespace Content.Client.UserInterface
new StyleProperty(Label.StylePropertyFont, notoSans16),
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)
}),
});
}
}