Styling for Slider.
This commit is contained in:
Pieter-Jan Briers
@@ -12,6 +12,10 @@ namespace Content.Client.UserInterface
|
|||||||
{
|
{
|
||||||
public sealed class NanoStyle
|
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 StyleClassLabelHeading = "LabelHeading";
|
||||||
public const string StyleClassLabelHeadingBigger = "LabelHeadingBigger";
|
public const string StyleClassLabelHeadingBigger = "LabelHeadingBigger";
|
||||||
public const string StyleClassLabelSubText = "LabelSubText";
|
public const string StyleClassLabelSubText = "LabelSubText";
|
||||||
@@ -205,6 +209,43 @@ namespace Content.Client.UserInterface
|
|||||||
Mode = StyleBoxTexture.StretchMode.Tile
|
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[]
|
Stylesheet = new Stylesheet(new[]
|
||||||
{
|
{
|
||||||
// Default font.
|
// Default font.
|
||||||
@@ -620,6 +661,30 @@ namespace Content.Client.UserInterface
|
|||||||
{
|
{
|
||||||
new StyleProperty("font", notoSans10),
|
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),
|
||||||
|
})
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
92
Resources/Nano/slider_fill.svg
Normal file
92
Resources/Nano/slider_fill.svg
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
<?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="26"
|
||||||
|
height="26"
|
||||||
|
viewBox="0 0 6.8791667 6.8791667"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5439"
|
||||||
|
inkscape:version="0.92.4 5da689c313, 2019-01-14"
|
||||||
|
sodipodi:docname="slider_fill.svg"
|
||||||
|
inkscape:export-filename="/ssdhome/pj/Projects/space-station-14-content/Resources/Nano/slider_fill.svg.96dpi.png"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96">
|
||||||
|
<defs
|
||||||
|
id="defs5433" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="22.4"
|
||||||
|
inkscape:cx="5.1334613"
|
||||||
|
inkscape:cy="10.941183"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:pagecheckerboard="true"
|
||||||
|
inkscape:snap-page="true"
|
||||||
|
showguides="true"
|
||||||
|
inkscape:guide-bbox="true"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1043"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1">
|
||||||
|
<sodipodi:guide
|
||||||
|
position="0.52929668,2.8661867"
|
||||||
|
orientation="0.38434749,-0.9231885"
|
||||||
|
id="guide6001"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="4.0127107,6.3518167"
|
||||||
|
orientation="-0.92251822,0.38595354"
|
||||||
|
id="guide6003"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="6.3498697,4.0145767"
|
||||||
|
orientation="-0.38195006,0.92418296"
|
||||||
|
id="guide6005"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="2.6458337,-3.3e-06"
|
||||||
|
orientation="-0.92297701,0.38485508"
|
||||||
|
id="guide6007"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata5436">
|
||||||
|
<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 />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(0,-290.12083)">
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="m 0.26458333,290.38541 v 3.85861 l 2.49157547,2.49139 3.8584246,-2e-5 V 292.876 l -2.4919391,-2.49059 z"
|
||||||
|
id="path5999"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="ccccccc" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
BIN
Resources/Nano/slider_fill.svg.96dpi.png
Normal file
BIN
Resources/Nano/slider_fill.svg.96dpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
89
Resources/Nano/slider_grabber.svg
Normal file
89
Resources/Nano/slider_grabber.svg
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<?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="24"
|
||||||
|
height="26"
|
||||||
|
viewBox="0 0 6.3499999 6.8791669"
|
||||||
|
version="1.1"
|
||||||
|
id="svg825"
|
||||||
|
inkscape:version="0.92.4 5da689c313, 2019-01-14"
|
||||||
|
sodipodi:docname="slider_grabber.svg"
|
||||||
|
inkscape:export-filename="/ssdhome/pj/Projects/space-station-14-content/Resources/Nano/slider_grabber.svg.96dpi.png"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96">
|
||||||
|
<defs
|
||||||
|
id="defs819" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="22.4"
|
||||||
|
inkscape:cx="16.023968"
|
||||||
|
inkscape:cy="8.6816776"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:pagecheckerboard="true"
|
||||||
|
showguides="true"
|
||||||
|
inkscape:guide-bbox="true"
|
||||||
|
inkscape:snap-bbox="true"
|
||||||
|
inkscape:bbox-paths="true"
|
||||||
|
inkscape:bbox-nodes="true"
|
||||||
|
units="px"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1043"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:snap-page="true">
|
||||||
|
<sodipodi:guide
|
||||||
|
position="60.854165,93.927086"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide1373"
|
||||||
|
inkscape:locked="false" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="6.0854167,0"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide1403"
|
||||||
|
inkscape:locked="false"
|
||||||
|
inkscape:label=""
|
||||||
|
inkscape:color="rgb(0,0,255)" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata822">
|
||||||
|
<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,-290.12081)">
|
||||||
|
<path
|
||||||
|
style="fill:#303030;fill-opacity:1;stroke:#494949;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 0.26458334,290.38539 v 3.85861 l 2.49157536,2.49139 3.329258,-2e-5 v -3.85939 l -2.4919389,-2.49059 z"
|
||||||
|
id="path5999"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="ccccccc"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
BIN
Resources/Nano/slider_grabber.svg.96dpi.png
Normal file
BIN
Resources/Nano/slider_grabber.svg.96dpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 B |
91
Resources/Nano/slider_outline.svg
Normal file
91
Resources/Nano/slider_outline.svg
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<?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="26"
|
||||||
|
height="26"
|
||||||
|
viewBox="0 0 6.8791659 6.8791669"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="0.92.4 5da689c313, 2019-01-14"
|
||||||
|
sodipodi:docname="slider_outline.svg"
|
||||||
|
inkscape:export-filename="/home/pj/Projects/space-station-14/Resources/Nano/slider_outline.svg.96dpi.png"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<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.376173"
|
||||||
|
inkscape:cy="11.073013"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="g3446"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:pagecheckerboard="true"
|
||||||
|
units="px"
|
||||||
|
showguides="true"
|
||||||
|
inkscape:guide-bbox="true"
|
||||||
|
inkscape:snap-page="true"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1043"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1">
|
||||||
|
<sodipodi:guide
|
||||||
|
position="4.2333332,5.7880559"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide5429"
|
||||||
|
inkscape:locked="false"
|
||||||
|
inkscape:label=""
|
||||||
|
inkscape:color="rgb(0,0,255)" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="7.3198434,4.2333332"
|
||||||
|
orientation="0,1"
|
||||||
|
id="guide5431"
|
||||||
|
inkscape:locked="false"
|
||||||
|
inkscape:label=""
|
||||||
|
inkscape:color="rgb(0,0,255)" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<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 />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-2.074635,-286.42231)">
|
||||||
|
<g
|
||||||
|
id="g3446"
|
||||||
|
inkscape:label="Charge Bar"
|
||||||
|
transform="translate(13.249331,26.983438)">
|
||||||
|
<path
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||||
|
d="m -11.174696,259.43888 v 4.23333 l 2.6458332,2.64583 h 4.2333332 v -4.23333 l -2.6458332,-2.64583 z m 0.529297,0.52734 h 3.4834139 l 2.3371585,2.33724 v 3.48528 h -3.4833332 l -2.3372392,-2.33689 z"
|
||||||
|
id="rect1684-3-3"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccccccccccccc" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
BIN
Resources/Nano/slider_outline.svg.96dpi.png
Normal file
BIN
Resources/Nano/slider_outline.svg.96dpi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 B |
Reference in New Issue
Block a user