From a1c1769d23aa203c303859d92a6d801586ca7ff4 Mon Sep 17 00:00:00 2001 From: Pieter-Jan Briers Date: Mon, 7 Sep 2020 10:52:54 +0200 Subject: [PATCH] Rework button styling to add a "caution" button type. It's red. --- .../UserInterface/Stylesheets/StyleBase.cs | 2 + .../UserInterface/Stylesheets/StyleNano.cs | 136 +++++++----------- .../UserInterface/Stylesheets/StyleSpace.cs | 105 +++++--------- 3 files changed, 88 insertions(+), 155 deletions(-) diff --git a/Content.Client/UserInterface/Stylesheets/StyleBase.cs b/Content.Client/UserInterface/Stylesheets/StyleBase.cs index 939c23ecb5..eaa74072ec 100644 --- a/Content.Client/UserInterface/Stylesheets/StyleBase.cs +++ b/Content.Client/UserInterface/Stylesheets/StyleBase.cs @@ -17,6 +17,8 @@ namespace Content.Client.UserInterface.Stylesheets public const string ButtonOpenLeft = "OpenLeft"; public const string ButtonOpenBoth = "OpenBoth"; + public const string ButtonCaution = "Caution"; + public abstract Stylesheet Stylesheet { get; } protected StyleRule[] BaseRules { get; } diff --git a/Content.Client/UserInterface/Stylesheets/StyleNano.cs b/Content.Client/UserInterface/Stylesheets/StyleNano.cs index 475ba6d33f..d71f56a74e 100644 --- a/Content.Client/UserInterface/Stylesheets/StyleNano.cs +++ b/Content.Client/UserInterface/Stylesheets/StyleNano.cs @@ -31,6 +31,11 @@ namespace Content.Client.UserInterface.Stylesheets public static readonly Color ButtonColorPressed = Color.FromHex("#3e6c45"); public static readonly Color ButtonColorDisabled = Color.FromHex("#30313c"); + public static readonly Color ButtonColorCautionDefault = Color.FromHex("#d31a1a"); + public static readonly Color ButtonColorCautionHovered = Color.FromHex("#e83838"); + public static readonly Color ButtonColorCautionPressed = Color.FromHex("#3e6c45"); + public static readonly Color ButtonColorCautionDisabled = Color.FromHex("#822626"); + //Used by the APC and SMES menus public const string StyleClassPowerStateNone = "PowerStateNone"; public const string StyleClassPowerStateLow = "PowerStateLow"; @@ -70,30 +75,6 @@ namespace Content.Client.UserInterface.Stylesheets var textureInvertedTriangle = resCache.GetTexture("/Textures/Interface/Nano/inverted_triangle.svg.png"); - static (StyleBox, StyleBox, StyleBox, StyleBox) ButtonPermutations(StyleBoxTexture @base) - { - var normal = new StyleBoxTexture(@base) {Modulate = ButtonColorDefault}; - var hover = new StyleBoxTexture(@base) {Modulate = ButtonColorHovered}; - var pressed = new StyleBoxTexture(@base) {Modulate = ButtonColorPressed}; - var disabled = new StyleBoxTexture(@base) {Modulate = ButtonColorDisabled}; - - return (normal, hover, pressed, disabled); - } - - // Button styles. - var (buttonNormal, buttonHover, buttonPressed, buttonDisabled) - = ButtonPermutations(BaseButton); - - var (buttonRNormal, buttonRHover, buttonRPressed, buttonRDisabled) - = ButtonPermutations(BaseButtonOpenRight); - - var (buttonLNormal, buttonLHover, buttonLPressed, buttonLDisabled) - = ButtonPermutations(BaseButtonOpenLeft); - - var (buttonBNormal, buttonBHover, buttonBPressed, buttonBDisabled) - = ButtonPermutations(BaseButtonOpenBoth); - - var lineEditTex = resCache.GetTexture("/Textures/Interface/Nano/lineedit.png"); var lineEdit = new StyleBoxTexture { @@ -297,80 +278,60 @@ namespace Content.Client.UserInterface.Stylesheets new StyleProperty(Control.StylePropertyModulateSelf, Color.FromHex("#753131")), }), - // Regular buttons! - new StyleRule(new SelectorElement(typeof(ContainerButton), new[] { ContainerButton.StyleClassButton }, null, new[] {ContainerButton.StylePseudoClassNormal}), new[] - { - new StyleProperty(ContainerButton.StylePropertyStyleBox, buttonNormal), - }), - new StyleRule(new SelectorElement(typeof(ContainerButton), new[] { ContainerButton.StyleClassButton }, null, new[] {ContainerButton.StylePseudoClassHover}), new[] - { - new StyleProperty(ContainerButton.StylePropertyStyleBox, buttonHover), - }), - new StyleRule(new SelectorElement(typeof(ContainerButton), new[] { ContainerButton.StyleClassButton }, null, new[] {ContainerButton.StylePseudoClassPressed}), new[] - { - new StyleProperty(ContainerButton.StylePropertyStyleBox, buttonPressed), - }), - new StyleRule(new SelectorElement(typeof(ContainerButton), new[] { ContainerButton.StyleClassButton }, null, new[] {ContainerButton.StylePseudoClassDisabled}), new[] - { - new StyleProperty(ContainerButton.StylePropertyStyleBox, buttonDisabled), - }), + // Shapes for the buttons. + Element().Class(ContainerButton.StyleClassButton) + .Prop(ContainerButton.StylePropertyStyleBox, BaseButton), + + Element().Class(ContainerButton.StyleClassButton) + .Class(ButtonOpenRight) + .Prop(ContainerButton.StylePropertyStyleBox, BaseButtonOpenRight), + + Element().Class(ContainerButton.StyleClassButton) + .Class(ButtonOpenLeft) + .Prop(ContainerButton.StylePropertyStyleBox, BaseButtonOpenLeft), + + Element().Class(ContainerButton.StyleClassButton) + .Class(ButtonOpenBoth) + .Prop(ContainerButton.StylePropertyStyleBox, BaseButtonOpenBoth), new StyleRule(new SelectorElement(typeof(Label), new[] { Button.StyleClassButton }, null, null), new[] { new StyleProperty(Label.StylePropertyAlignMode, Label.AlignMode.Center), }), - // Right open buttons. - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenRight) + // Colors for the buttons. + Element().Class(ContainerButton.StyleClassButton) .Pseudo(ContainerButton.StylePseudoClassNormal) - .Prop(ContainerButton.StylePropertyStyleBox, buttonRNormal), + .Prop(Control.StylePropertyModulateSelf, ButtonColorDefault), - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenRight) + Element().Class(ContainerButton.StyleClassButton) .Pseudo(ContainerButton.StylePseudoClassHover) - .Prop(ContainerButton.StylePropertyStyleBox, buttonRHover), + .Prop(Control.StylePropertyModulateSelf, ButtonColorHovered), - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenRight) + Element().Class(ContainerButton.StyleClassButton) .Pseudo(ContainerButton.StylePseudoClassPressed) - .Prop(ContainerButton.StylePropertyStyleBox, buttonRPressed), + .Prop(Control.StylePropertyModulateSelf, ButtonColorPressed), - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenRight) + Element().Class(ContainerButton.StyleClassButton) .Pseudo(ContainerButton.StylePseudoClassDisabled) - .Prop(ContainerButton.StylePropertyStyleBox, buttonRDisabled), + .Prop(Control.StylePropertyModulateSelf, ButtonColorDisabled), - // Left open buttons. - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenLeft) + // Colors for the caution buttons. + Element().Class(ContainerButton.StyleClassButton).Class(ButtonCaution) .Pseudo(ContainerButton.StylePseudoClassNormal) - .Prop(ContainerButton.StylePropertyStyleBox, buttonLNormal), + .Prop(Control.StylePropertyModulateSelf, ButtonColorCautionDefault), - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenLeft) + Element().Class(ContainerButton.StyleClassButton).Class(ButtonCaution) .Pseudo(ContainerButton.StylePseudoClassHover) - .Prop(ContainerButton.StylePropertyStyleBox, buttonLHover), + .Prop(Control.StylePropertyModulateSelf, ButtonColorCautionHovered), - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenLeft) + Element().Class(ContainerButton.StyleClassButton).Class(ButtonCaution) .Pseudo(ContainerButton.StylePseudoClassPressed) - .Prop(ContainerButton.StylePropertyStyleBox, buttonLPressed), + .Prop(Control.StylePropertyModulateSelf, ButtonColorCautionPressed), - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenLeft) + Element().Class(ContainerButton.StyleClassButton).Class(ButtonCaution) .Pseudo(ContainerButton.StylePseudoClassDisabled) - .Prop(ContainerButton.StylePropertyStyleBox, buttonLDisabled), - - // "Both" open buttons - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenBoth) - .Pseudo(ContainerButton.StylePseudoClassNormal) - .Prop(ContainerButton.StylePropertyStyleBox, buttonBNormal), - - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenBoth) - .Pseudo(ContainerButton.StylePseudoClassHover) - .Prop(ContainerButton.StylePropertyStyleBox, buttonBHover), - - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenBoth) - .Pseudo(ContainerButton.StylePseudoClassPressed) - .Prop(ContainerButton.StylePropertyStyleBox, buttonBPressed), - - Element().Class(ContainerButton.StyleClassButton).Class(ButtonOpenBoth) - .Pseudo(ContainerButton.StylePseudoClassDisabled) - .Prop(ContainerButton.StylePropertyStyleBox, buttonBDisabled), - + .Prop(Control.StylePropertyModulateSelf, ButtonColorCautionDisabled), new StyleRule(new SelectorChild( new SelectorElement(typeof(Button), null, null, new[] {ContainerButton.StylePseudoClassDisabled}), @@ -649,25 +610,28 @@ namespace Content.Client.UserInterface.Stylesheets }), // Those top menu buttons. + Element() + .Prop(Button.StylePropertyStyleBox, BaseButton), + new StyleRule( new SelectorElement(typeof(GameHud.TopButton), null, null, new[] {Button.StylePseudoClassNormal}), new[] { - new StyleProperty(Button.StylePropertyStyleBox, buttonNormal), + new StyleProperty(Button.StylePropertyModulateSelf, ButtonColorDefault), }), new StyleRule( new SelectorElement(typeof(GameHud.TopButton), null, null, new[] {Button.StylePseudoClassPressed}), new[] { - new StyleProperty(Button.StylePropertyStyleBox, buttonPressed), + new StyleProperty(Button.StylePropertyModulateSelf, ButtonColorPressed), }), new StyleRule( new SelectorElement(typeof(GameHud.TopButton), null, null, new[] {Button.StylePseudoClassHover}), new[] { - new StyleProperty(Button.StylePropertyStyleBox, buttonHover), + new StyleProperty(Button.StylePropertyModulateSelf, ButtonColorHovered), }), new StyleRule( @@ -758,21 +722,25 @@ namespace Content.Client.UserInterface.Stylesheets }), // OptionButton + new StyleRule(new SelectorElement(typeof(OptionButton), null, null, null), new[] + { + new StyleProperty(ContainerButton.StylePropertyStyleBox, BaseButton), + }), new StyleRule(new SelectorElement(typeof(OptionButton), null, null, new[] {ContainerButton.StylePseudoClassNormal}), new[] { - new StyleProperty(ContainerButton.StylePropertyStyleBox, buttonNormal), + new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorDefault), }), new StyleRule(new SelectorElement(typeof(OptionButton), null, null, new[] {ContainerButton.StylePseudoClassHover}), new[] { - new StyleProperty(ContainerButton.StylePropertyStyleBox, buttonHover), + new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorHovered), }), new StyleRule(new SelectorElement(typeof(OptionButton), null, null, new[] {ContainerButton.StylePseudoClassPressed}), new[] { - new StyleProperty(ContainerButton.StylePropertyStyleBox, buttonPressed), + new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorPressed), }), new StyleRule(new SelectorElement(typeof(OptionButton), null, null, new[] {ContainerButton.StylePseudoClassDisabled}), new[] { - new StyleProperty(ContainerButton.StylePropertyStyleBox, buttonDisabled), + new StyleProperty(Control.StylePropertyModulateSelf, ButtonColorDisabled), }), new StyleRule(new SelectorElement(typeof(TextureRect), new[] {OptionButton.StyleClassOptionTriangle}, null, null), new[] diff --git a/Content.Client/UserInterface/Stylesheets/StyleSpace.cs b/Content.Client/UserInterface/Stylesheets/StyleSpace.cs index 696321ab7c..29a0676a20 100644 --- a/Content.Client/UserInterface/Stylesheets/StyleSpace.cs +++ b/Content.Client/UserInterface/Stylesheets/StyleSpace.cs @@ -18,6 +18,11 @@ namespace Content.Client.UserInterface.Stylesheets public static readonly Color ButtonColorPressed = Color.FromHex("#3e6c45"); public static readonly Color ButtonColorDisabled = Color.FromHex("#30313c"); + public static readonly Color ButtonColorCautionDefault = Color.FromHex("#d31a1a"); + public static readonly Color ButtonColorCautionHovered = Color.FromHex("#e83838"); + public static readonly Color ButtonColorCautionPressed = Color.FromHex("#3e6c45"); + public static readonly Color ButtonColorCautionDisabled = Color.FromHex("#822626"); + public override Stylesheet Stylesheet { get; } public StyleSpace(IResourceCache resCache) : base(resCache) @@ -25,29 +30,6 @@ namespace Content.Client.UserInterface.Stylesheets var notoSans10 = resCache.GetFont("/Textures/Interface/Nano/NotoSans/NotoSans-Regular.ttf", 10); var notoSansBold16 = resCache.GetFont("/Textures/Interface/Nano/NotoSans/NotoSans-Bold.ttf", 16); - static (StyleBox, StyleBox, StyleBox, StyleBox) ButtonPermutations(StyleBoxTexture @base) - { - var normal = new StyleBoxTexture(@base) {Modulate = ButtonColorDefault}; - var hover = new StyleBoxTexture(@base) {Modulate = ButtonColorHovered}; - var pressed = new StyleBoxTexture(@base) {Modulate = ButtonColorPressed}; - var disabled = new StyleBoxTexture(@base) {Modulate = ButtonColorDisabled}; - - return (normal, hover, pressed, disabled); - } - - // Button styles. - var (buttonNormal, buttonHover, buttonPressed, buttonDisabled) - = ButtonPermutations(BaseButton); - - var (buttonRNormal, buttonRHover, buttonRPressed, buttonRDisabled) - = ButtonPermutations(BaseButtonOpenRight); - - var (buttonLNormal, buttonLHover, buttonLPressed, buttonLDisabled) - = ButtonPermutations(BaseButtonOpenLeft); - - var (buttonBNormal, buttonBHover, buttonBPressed, buttonBDisabled) - = ButtonPermutations(BaseButtonOpenBoth); - Stylesheet = new Stylesheet(BaseRules.Concat(new StyleRule[] { Element