From da932c5caa0948eb5652fd9ee554a38d50aab01c Mon Sep 17 00:00:00 2001 From: Pieter-Jan Briers Date: Wed, 15 Jan 2020 14:27:47 +0100 Subject: [PATCH] Styling for Slider. --- Content.Client/UserInterface/NanoStyle.cs | 65 ++++++++++++++ Resources/Nano/slider_fill.svg | 92 ++++++++++++++++++++ Resources/Nano/slider_fill.svg.96dpi.png | Bin 0 -> 267 bytes Resources/Nano/slider_grabber.svg | 89 +++++++++++++++++++ Resources/Nano/slider_grabber.svg.96dpi.png | Bin 0 -> 285 bytes Resources/Nano/slider_outline.svg | 91 +++++++++++++++++++ Resources/Nano/slider_outline.svg.96dpi.png | Bin 0 -> 284 bytes 7 files changed, 337 insertions(+) create mode 100644 Resources/Nano/slider_fill.svg create mode 100644 Resources/Nano/slider_fill.svg.96dpi.png create mode 100644 Resources/Nano/slider_grabber.svg create mode 100644 Resources/Nano/slider_grabber.svg.96dpi.png create mode 100644 Resources/Nano/slider_outline.svg create mode 100644 Resources/Nano/slider_outline.svg.96dpi.png diff --git a/Content.Client/UserInterface/NanoStyle.cs b/Content.Client/UserInterface/NanoStyle.cs index 1dbd34fff6..da1ef41482 100644 --- a/Content.Client/UserInterface/NanoStyle.cs +++ b/Content.Client/UserInterface/NanoStyle.cs @@ -12,6 +12,10 @@ namespace Content.Client.UserInterface { public sealed class NanoStyle { + public const string StyleClassSliderRed = "Red"; + public const string StyleClassSliderGreen = "Green"; + public const string StyleClassSliderBlue = "Blue"; + public const string StyleClassLabelHeading = "LabelHeading"; public const string StyleClassLabelHeadingBigger = "LabelHeadingBigger"; public const string StyleClassLabelSubText = "LabelSubText"; @@ -205,6 +209,43 @@ namespace Content.Client.UserInterface Mode = StyleBoxTexture.StretchMode.Tile }; + // Slider + var sliderOutlineTex = resCache.GetTexture("/Nano/slider_outline.svg.96dpi.png"); + var sliderFillTex = resCache.GetTexture("/Nano/slider_fill.svg.96dpi.png"); + var sliderGrabTex = resCache.GetTexture("/Nano/slider_grabber.svg.96dpi.png"); + + var sliderFillBox = new StyleBoxTexture + { + Texture = sliderFillTex, + Modulate = Color.FromHex("#3E6C45") + }; + + var sliderBackBox = new StyleBoxTexture + { + Texture = sliderFillTex, + Modulate = Color.FromHex("#1E1E22") + }; + + var sliderForeBox = new StyleBoxTexture + { + Texture = sliderOutlineTex, + Modulate = Color.FromHex("#494949") + }; + + var sliderGrabBox = new StyleBoxTexture + { + Texture = sliderGrabTex, + }; + + sliderFillBox.SetPatchMargin(StyleBox.Margin.All, 12); + sliderBackBox.SetPatchMargin(StyleBox.Margin.All, 12); + sliderForeBox.SetPatchMargin(StyleBox.Margin.All, 12); + sliderGrabBox.SetPatchMargin(StyleBox.Margin.All, 12); + + var sliderFillGreen = new StyleBoxTexture(sliderFillBox) {Modulate = Color.Green}; + var sliderFillRed = new StyleBoxTexture(sliderFillBox) {Modulate = Color.Red}; + var sliderFillBlue = new StyleBoxTexture(sliderFillBox) {Modulate = Color.Blue}; + Stylesheet = new Stylesheet(new[] { // Default font. @@ -620,6 +661,30 @@ namespace Content.Client.UserInterface { new StyleProperty("font", notoSans10), }), + + // Slider + new StyleRule(SelectorElement.Type(typeof(Slider)), new [] + { + new StyleProperty(Slider.StylePropertyBackground, sliderBackBox), + new StyleProperty(Slider.StylePropertyForeground, sliderForeBox), + new StyleProperty(Slider.StylePropertyGrabber, sliderGrabBox), + new StyleProperty(Slider.StylePropertyFill, sliderFillBox), + }), + + new StyleRule(new SelectorElement(typeof(Slider), new []{StyleClassSliderRed}, null, null), new [] + { + new StyleProperty(Slider.StylePropertyFill, sliderFillRed), + }), + + new StyleRule(new SelectorElement(typeof(Slider), new []{StyleClassSliderGreen}, null, null), new [] + { + new StyleProperty(Slider.StylePropertyFill, sliderFillGreen), + }), + + new StyleRule(new SelectorElement(typeof(Slider), new []{StyleClassSliderBlue}, null, null), new [] + { + new StyleProperty(Slider.StylePropertyFill, sliderFillBlue), + }) }); } } diff --git a/Resources/Nano/slider_fill.svg b/Resources/Nano/slider_fill.svg new file mode 100644 index 0000000000..c162e329bf --- /dev/null +++ b/Resources/Nano/slider_fill.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/Resources/Nano/slider_fill.svg.96dpi.png b/Resources/Nano/slider_fill.svg.96dpi.png new file mode 100644 index 0000000000000000000000000000000000000000..05a780078f98dcb1cdee34c2c165698c9e31d691 GIT binary patch literal 267 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI23?!pd0{;Rj=3*z$5DpHG+YkL80J)q69+AZi z417mGm~pB$pEOWVvcxr_Bsf2(yEr+qAXP8FD1G)j8<44@0X`wF zK>9xh@Hn5#0+e7Y3GxeO(9nJM^3{6h-)TURFi#i95Q*@qCpYpoIPf?JDl3X5H2OH6 z<(aAAyXQZL$i=yDCf&EKJ+RAT(whK7U*qX%d8I36EaMZsd}ZOI>{aqszQ-3I%AFK> g0R}Cjinsh`5VKE+y;)!^1hj#{)78&qol`;+0DJ9Y`Tzg` literal 0 HcmV?d00001 diff --git a/Resources/Nano/slider_grabber.svg b/Resources/Nano/slider_grabber.svg new file mode 100644 index 0000000000..77eb03c29a --- /dev/null +++ b/Resources/Nano/slider_grabber.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/Resources/Nano/slider_grabber.svg.96dpi.png b/Resources/Nano/slider_grabber.svg.96dpi.png new file mode 100644 index 0000000000000000000000000000000000000000..557d1ca819b3fe792405d8491ad150e49c84211a GIT binary patch literal 285 zcmeAS@N?(olHy`uVBq!ia0vp^5(#!^6wV3&=1qFtD(&u(Y%UvUwK;t^!K4mIV0)GnCgibZkDSv;ZiO?CIhd zA`#wuVJB~c1CL8!zIaPZ%M=G;Gf{ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/Resources/Nano/slider_outline.svg.96dpi.png b/Resources/Nano/slider_outline.svg.96dpi.png new file mode 100644 index 0000000000000000000000000000000000000000..de74c2dee04cecabc4b0e8afaa87d93d481a07bc GIT binary patch literal 284 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI11|(N{`J4k%EX7WqAsj$Z!;#Vf4nJ z@ErkR#;MwT(m+AU64!{5;QX|b^2DN4hVt@qz0ADq;^f4FRK5J7^x5xhK*rAWba4#v z=)8NykngYo53|F{e4Yt>f8FOkena-&Mag*7D+JdxF`^q&TwP7*$TWk$YsNftI(ZgzPQ$H6d?8Qr~b- Y`8L1({BIi(pd%SPUHx3vIVCg!0B=QNH2?qr literal 0 HcmV?d00001