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

Implement more new styling stuff.

Browse Source
This commit is contained in:
Pieter-Jan Briers
2019-10-18 14:28:24 +02:00
parent 0edccd8934
commit 743ede2243
10 changed files with 373 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
Content.Client/UserInterface/NanoHeading.cs Normal file
View File

@@ -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);
}
}
}

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

@@ -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),
}),
});
}
}

104
Content.Client/UserInterface/StripeBack.cs Normal file
View File

@@ -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;
}
}
}

16
Resources/Nano/button.svg
View File

@@ -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)">
<path
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.6723063;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 79.848503,134.99711 v 3.175 l 2.116667,2.11667 h 3.175 v -3.175 l -2.116667,-2.11667 z"
d="m 79.848503,133.93878 v 3.70416 l 2.645833,2.64584 h 3.704167 v -3.70417 l -2.645833,-2.64583 z"
id="rect1684"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
Resources/Nano/button.svg.96dpi.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 222 B

After

Width:  |  Height:  |  Size: 237 B

71
Resources/Nano/nanoheading.svg Normal file
View File

@@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
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="16"
height="16"
viewBox="0 0 4.2333334 4.233333"
version="1.1"
id="svg2250"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="nanoheading.svg"
inkscape:export-filename="/ssdhome/pj/Projects/space-station-14-content/Resources/Nano/nanoheading.svg.96dpi.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<defs
id="defs2244" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="22.627417"
inkscape:cx="6.8190858"
inkscape:cy="11.996709"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:pagecheckerboard="true"
inkscape:window-width="1920"
inkscape:window-height="1043"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata2247">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-133.09333,-142.98537)">
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path894-7-2-9"
d="m 133.10097,146.95412 h 3.9603 v -1.60219 l -2.07525,-2.17674"
style="fill:none;stroke:#a88b5e;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:export-filename="/ssdhome/pj/Projects/space-station-14-content/Resources/Nano/nanoheading.svg.96dpi.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
Resources/Nano/nanoheading.svg.96dpi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 394 B

BIN
Resources/Nano/placeholder.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 271 B

After

Width:  |  Height:  |  Size: 372 B

85
Resources/Nano/stripeback.svg Normal file
View File

@@ -0,0 +1,85 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
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="32"
height="32"
viewBox="0 0 8.4666666 8.4666669"
version="1.1"
id="svg1057"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="stripback.svg"
inkscape:export-filename="/ssdhome/pj/Projects/space-station-14-content/Resources/Nano/stripeback.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<defs
id="defs1051" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="22.627417"
inkscape:cx="15.032227"
inkscape:cy="17.599459"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:pagecheckerboard="true"
inkscape:window-width="1920"
inkscape:window-height="1043"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata1054">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-288.53331)">
<rect
style="opacity:1;vector-effect:none;fill:#1e1e22;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.44710034;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect1707"
width="8.4666672"
height="8.4666672"
x="0"
y="288.53329" />
<g
id="g1697"
style="fill:#262626;fill-opacity:1">
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="rect1602"
d="m 0,294.88331 v -4.23333 l 6.3500001,6.34999 H 2.1166667 Z"
style="opacity:1;vector-effect:none;fill:#262626;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.18526772;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
style="opacity:1;vector-effect:none;fill:#262626;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.18526772;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 8.4666667,290.64998 v 4.23333 l -6.35,-6.35 h 4.2333334 z"
id="path1665"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
Resources/Nano/stripeback.svg.96dpi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 B