From 743ede22438319c74c0ba0e41d389d86b9ecd637 Mon Sep 17 00:00:00 2001 From: Pieter-Jan Briers Date: Fri, 18 Oct 2019 14:28:24 +0200 Subject: [PATCH] Implement more new styling stuff. --- Content.Client/UserInterface/NanoHeading.cs | 41 ++++++++ Content.Client/UserInterface/NanoStyle.cs | 68 ++++++++++++- Content.Client/UserInterface/StripeBack.cs | 104 ++++++++++++++++++++ Resources/Nano/button.svg | 16 +-- Resources/Nano/button.svg.96dpi.png | Bin 222 -> 237 bytes Resources/Nano/nanoheading.svg | 71 +++++++++++++ Resources/Nano/nanoheading.svg.96dpi.png | Bin 0 -> 394 bytes Resources/Nano/placeholder.png | Bin 271 -> 372 bytes Resources/Nano/stripeback.svg | 85 ++++++++++++++++ Resources/Nano/stripeback.svg.96dpi.png | Bin 0 -> 322 bytes 10 files changed, 373 insertions(+), 12 deletions(-) create mode 100644 Content.Client/UserInterface/NanoHeading.cs create mode 100644 Content.Client/UserInterface/StripeBack.cs create mode 100644 Resources/Nano/nanoheading.svg create mode 100644 Resources/Nano/nanoheading.svg.96dpi.png create mode 100644 Resources/Nano/stripeback.svg create mode 100644 Resources/Nano/stripeback.svg.96dpi.png 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)"> BeE82`-P^LntyI+ggYSpphxP~M`?qVe%A62bp(MNRci^WT TbD!@8+RotV>gTe~DWM4fkn%n5 delta 154 zcmaFMc#l!BGr-TCmrII^fq{Y7)59eQNQ;0l2OE&=?Ud!6sOVb|?djqeV$pl`(rMlX z0|Dm1<`C?cTaJB zS;`p6;9|16^Dq0IToZ@QyB070wdB{YU%p@6U*5N86gR3}_4>~i6`*wtp00i_>zopr E0K2(4l>h($ diff --git a/Resources/Nano/nanoheading.svg b/Resources/Nano/nanoheading.svg new file mode 100644 index 0000000000..c0b1ff9b61 --- /dev/null +++ b/Resources/Nano/nanoheading.svg @@ -0,0 +1,71 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/Resources/Nano/nanoheading.svg.96dpi.png b/Resources/Nano/nanoheading.svg.96dpi.png new file mode 100644 index 0000000000000000000000000000000000000000..1754c218da1765a594bf3cf755a9c75912ec8516 GIT binary patch literal 394 zcmV;50d@X~P)>CJ^4NCLym@~j0pItX;>7(P;(D#w ziIQ?o(qP7YSVn4q+EL&wWfoML?Nh^cfDyz=H>fXums679gD9wl$TopzNu|}TgPTkO zGZcm1zF-~bTWkxJ?auA5FMM7QmYaUrFyj!Il%tENRh>;O04SG_-};5I8t5FD61wV! z^Gl8e}STwHvmS5-2ZzA@1{0N{)I`ftpET307*qoM6N<$g7DX&dH?_b literal 0 HcmV?d00001 diff --git a/Resources/Nano/placeholder.png b/Resources/Nano/placeholder.png index bdae339c2aab400c239fb499382fd3dc39d5d19d..a55cc2cb5fd7aff3174612b50f4dd7a761114a98 100644 GIT binary patch delta 325 zcmV-L0lNN=0`vlqIDY{qNklT98k5_*U|P)B*&M`xb?W00IagfB^EQX;|b_S6f76K);1z2Lup6 z0MYwq&;LTDQnDSyCN>~|bQHU~f^Mni8>s~dAb);pnFq%@6dbA{wbX*h1RP@1{2dkI Z7&f<>Ep;W8j6VPX002ovPDHLkV1lf^UF-k= 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 0000000000000000000000000000000000000000..fb35a5634e2ffb84fe95345d9dbd3fda9535737b GIT binary patch literal 322 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8wRq z_>O=u<5X=vX`rBFiEBhjaDG}zd16s2LwR|*US?i)adKios$PCk`s{Z$Qb0xfJzX3_ zB3h4L3*>76T9J@EXL0+xdY5q9htIqmpYiWe`w$r>^SshFRp?B}jLdB*Qd{pWy;fZj zyLOG}1*h8$nb{sKKkqFP@a7k9jIfK{Ex7LSUg3lHl$bv3TQtf2MERX2g)i-H+(MpW zi%QQrmB<o3KFe*(!}AL9Q%GJ8$K+tiI&eQY|OY z@LgS{vPEX6E{D_kzfluBHVNozb6-qNQLtORSa83#vf$y+zz%VroBI~-kbK+%^a_Kg LtDnm{r-UW|Mjdxz literal 0 HcmV?d00001