diff --git a/Content.Client/UserInterface/NanoHeading.cs b/Content.Client/UserInterface/NanoHeading.cs new file mode 100644 index 0000000000..7e149b489d --- /dev/null +++ b/Content.Client/UserInterface/NanoHeading.cs @@ -0,0 +1,41 @@ +using Robust.Client.UserInterface.Controls; +using Robust.Shared.Maths; + +namespace Content.Client.UserInterface +{ + public class NanoHeading : Container + { + private readonly Label _label; + private readonly PanelContainer _panel; + + public NanoHeading() + { + _panel = new PanelContainer + { + Children = {(_label = new Label + { + StyleClasses = {NanoStyle.StyleClassLabelHeading} + })} + }; + AddChild(_panel); + + SizeFlagsHorizontal = SizeFlags.None; + } + + public string Text + { + get => _label.Text; + set => _label.Text = value; + } + + protected override Vector2 CalculateMinimumSize() + { + return _panel.CombinedMinimumSize; + } + + protected override void SortChildren() + { + FitChildInBox(_panel, SizeBox); + } + } +} diff --git a/Content.Client/UserInterface/NanoStyle.cs b/Content.Client/UserInterface/NanoStyle.cs index 250e676989..ac11a94de8 100644 --- a/Content.Client/UserInterface/NanoStyle.cs +++ b/Content.Client/UserInterface/NanoStyle.cs @@ -13,10 +13,12 @@ namespace Content.Client.UserInterface public sealed class NanoStyle { public const string StyleClassLabelHeading = "LabelHeading"; + public const string StyleClassLabelHeadingBigger = "LabelHeadingBigger"; public const string StyleClassLabelSubText = "LabelSubText"; public const string StyleClassLabelSecondaryColor = "LabelSecondaryColor"; + public const string StyleClassLabelBig = "LabelBig"; public const string StyleClassButtonBig = "ButtonBig"; - private static readonly Color NanoGold = Color.FromHex("#A88B5E"); + public static readonly Color NanoGold = Color.FromHex("#A88B5E"); //Used by the APC and SMES menus public const string StyleClassPowerStateNone = "PowerStateNone"; @@ -33,6 +35,7 @@ namespace Content.Client.UserInterface var notoSansDisplayBold14 = resCache.GetFont("/Fonts/NotoSansDisplay/NotoSansDisplay-Bold.ttf", 14); var notoSans16 = resCache.GetFont("/Nano/NotoSans/NotoSans-Regular.ttf", 16); var notoSansBold16 = resCache.GetFont("/Nano/NotoSans/NotoSans-Bold.ttf", 16); + var notoSansBold20 = resCache.GetFont("/Nano/NotoSans/NotoSans-Bold.ttf", 20); var textureCloseButton = resCache.GetTexture("/Nano/cross.svg.png"); var windowHeaderTex = resCache.GetTexture("/Nano/window_header.png"); var windowHeader = new StyleBoxTexture @@ -56,10 +59,10 @@ namespace Content.Client.UserInterface Texture = buttonTex, Modulate = Color.FromHex("#464966") }; - buttonNormal.SetPatchMargin(StyleBox.Margin.All, 8); + buttonNormal.SetPatchMargin(StyleBox.Margin.All, 10); buttonNormal.SetPadding(StyleBox.Margin.All, 1); buttonNormal.SetContentMarginOverride(StyleBox.Margin.Vertical, 2); - buttonNormal.SetContentMarginOverride(StyleBox.Margin.Horizontal, 12); + buttonNormal.SetContentMarginOverride(StyleBox.Margin.Horizontal, 14); var buttonHover = new StyleBoxTexture(buttonNormal) { @@ -150,8 +153,9 @@ namespace Content.Client.UserInterface // Placeholder var placeholderTexture = resCache.GetTexture("/Nano/placeholder.png"); var placeholder = new StyleBoxTexture {Texture = placeholderTexture}; - placeholder.SetPatchMargin(StyleBox.Margin.All, 24); + placeholder.SetPatchMargin(StyleBox.Margin.All, 19); placeholder.SetExpandMargin(StyleBox.Margin.All, -5); + placeholder.Mode = StyleBoxTexture.StretchMode.Tile; var itemListBackgroundSelected = new StyleBoxFlat {BackgroundColor = new Color(75, 75, 86)}; itemListBackgroundSelected.SetContentMarginOverride(StyleBox.Margin.Vertical, 2); @@ -163,6 +167,28 @@ namespace Content.Client.UserInterface itemListItemBackground.SetContentMarginOverride(StyleBox.Margin.Vertical, 2); itemListItemBackground.SetContentMarginOverride(StyleBox.Margin.Horizontal, 4); + // NanoHeading + var nanoHeadingTex = resCache.GetTexture("/Nano/nanoheading.svg.96dpi.png"); + var nanoHeadingBox = new StyleBoxTexture + { + Texture = nanoHeadingTex, + PatchMarginRight = 10, + PatchMarginTop = 10, + ContentMarginTopOverride = 2, + ContentMarginLeftOverride = 10, + PaddingTop = 4 + }; + + nanoHeadingBox.SetPatchMargin(StyleBox.Margin.Left | StyleBox.Margin.Bottom, 2); + + // Stripe background + var stripeBackTex = resCache.GetTexture("/Nano/stripeback.svg.96dpi.png"); + var stripeBack = new StyleBoxTexture + { + Texture = stripeBackTex, + Mode = StyleBoxTexture.StretchMode.Tile + }; + Stylesheet = new Stylesheet(new[] { // Default font. @@ -431,6 +457,13 @@ namespace Content.Client.UserInterface new StyleProperty(Label.StylePropertyFontColor, NanoGold), }), + // Bigger Label + new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassLabelHeadingBigger}, null, null), new[] + { + new StyleProperty(Label.StylePropertyFont, notoSansBold20), + new StyleProperty(Label.StylePropertyFontColor, NanoGold), + }), + // Small Label new StyleRule(new SelectorElement(typeof(Label), new[] {StyleClassLabelSubText}, null, null), new[] { @@ -518,6 +551,33 @@ namespace Content.Client.UserInterface { new StyleProperty(Control.StylePropertyModulateSelf, Color.FromHex("#00F")), }), + + // NanoHeading + + new StyleRule( + new SelectorChild( + SelectorElement.Type(typeof(NanoHeading)), + SelectorElement.Type(typeof(PanelContainer))), + new[] + { + new StyleProperty(PanelContainer.StylePropertyPanel, nanoHeadingBox), + }), + + // StripeBack + new StyleRule( + SelectorElement.Type(typeof(StripeBack)), + new [] + { + new StyleProperty(StripeBack.StylePropertyBackground, stripeBack), + }), + + // StyleClassLabelBig + new StyleRule( + SelectorElement.Class(StyleClassLabelBig), + new [] + { + new StyleProperty("font", notoSans16), + }), }); } } diff --git a/Content.Client/UserInterface/StripeBack.cs b/Content.Client/UserInterface/StripeBack.cs new file mode 100644 index 0000000000..ca538f7904 --- /dev/null +++ b/Content.Client/UserInterface/StripeBack.cs @@ -0,0 +1,104 @@ +using Robust.Client.Graphics.Drawing; +using Robust.Client.UserInterface.Controls; +using Robust.Shared.Maths; + +namespace Content.Client.UserInterface +{ + public class StripeBack : Container + { + private const float PadSize = 4; + private const float EdgeSize = 2; + private static readonly Color EdgeColor = Color.FromHex("#525252ff"); + + private bool _hasTopEdge = true; + private bool _hasBottomEdge = true; + + public const string StylePropertyBackground = "background"; + + public bool HasTopEdge + { + get => _hasTopEdge; + set + { + MinimumSizeChanged(); + _hasTopEdge = value; + } + } + + public bool HasBottomEdge + { + get => _hasBottomEdge; + set + { + _hasBottomEdge = value; + MinimumSizeChanged(); + } + } + + protected override Vector2 CalculateMinimumSize() + { + var size = Vector2.Zero; + + foreach (var child in Children) + { + size = Vector2.ComponentMax(size, child.CombinedMinimumSize); + } + + if (HasBottomEdge) + { + size += (0, PadSize + EdgeSize); + } + + if (HasTopEdge) + { + size += (0, PadSize + EdgeSize); + } + + return size; + } + + protected override void SortChildren() + { + var box = SizeBox; + + if (HasTopEdge) + { + box += (0, PadSize + EdgeSize, 0, 0); + } + + if (HasBottomEdge) + { + box += (0, 0, 0, -(PadSize + EdgeSize)); + } + + foreach (var child in Children) + { + FitChildInBox(child, box); + } + } + + protected override void Draw(DrawingHandleScreen handle) + { + UIBox2 centerBox = PixelSizeBox; + + if (HasTopEdge) + { + centerBox += (0, (PadSize + EdgeSize) * UIScale, 0, 0); + handle.DrawRect(new UIBox2(0, PadSize * UIScale, PixelWidth, centerBox.Top), EdgeColor); + } + + if (HasBottomEdge) + { + centerBox += (0, 0, 0, -((PadSize + EdgeSize) * UIScale)); + handle.DrawRect(new UIBox2(0, centerBox.Bottom, PixelWidth, PixelHeight - PadSize * UIScale), EdgeColor); + } + + GetActualStyleBox()?.Draw(handle, centerBox); + } + + private StyleBox GetActualStyleBox() + { + return TryGetStyleProperty(StylePropertyBackground, out StyleBox box) ? box : null; + } + } +} diff --git a/Resources/Nano/button.svg b/Resources/Nano/button.svg index c960a55bf7..79593185f8 100644 --- a/Resources/Nano/button.svg +++ b/Resources/Nano/button.svg @@ -9,9 +9,9 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="20" - height="20" - viewBox="0 0 5.2916665 5.2916667" + width="24" + height="24" + viewBox="0 0 6.3499998 6.35" version="1.1" id="svg1055" inkscape:version="0.92.4 5da689c313, 2019-01-14" @@ -25,9 +25,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="32" - inkscape:cx="9.1503339" - inkscape:cy="9.9668302" + inkscape:zoom="22.627417" + inkscape:cx="12.337282" + inkscape:cy="12.571025" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false" @@ -55,10 +55,10 @@ inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" - transform="translate(-79.848503,-134.99711)"> + transform="translate(-79.848503,-133.93878)"> + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/Resources/Nano/nanoheading.svg.96dpi.png b/Resources/Nano/nanoheading.svg.96dpi.png new file mode 100644 index 0000000000..1754c218da Binary files /dev/null and b/Resources/Nano/nanoheading.svg.96dpi.png differ diff --git a/Resources/Nano/placeholder.png b/Resources/Nano/placeholder.png index bdae339c2a..a55cc2cb5f 100644 Binary files a/Resources/Nano/placeholder.png and b/Resources/Nano/placeholder.png differ diff --git a/Resources/Nano/stripeback.svg b/Resources/Nano/stripeback.svg new file mode 100644 index 0000000000..730615341d --- /dev/null +++ b/Resources/Nano/stripeback.svg @@ -0,0 +1,85 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/Resources/Nano/stripeback.svg.96dpi.png b/Resources/Nano/stripeback.svg.96dpi.png new file mode 100644 index 0000000000..fb35a5634e Binary files /dev/null and b/Resources/Nano/stripeback.svg.96dpi.png differ