Rework button styling to add a "caution" button type.

It's red.
This commit is contained in:
Pieter-Jan Briers
2020-09-07 10:52:54 +02:00
parent 08e9fad4e1
commit a1c1769d23
3 changed files with 88 additions and 155 deletions

View File

@@ -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<Label>().Class(StyleClassLabelHeading)
@@ -63,74 +45,55 @@ namespace Content.Client.UserInterface.Stylesheets
{
BackgroundColor = SpaceRed, ContentMarginBottomOverride = 2, ContentMarginLeftOverride = 2
}),
// Shapes for the buttons.
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Prop(ContainerButton.StylePropertyStyleBox, BaseButton),
// Normal buttons.
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Class(ButtonOpenRight)
.Prop(ContainerButton.StylePropertyStyleBox, BaseButtonOpenRight),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Class(ButtonOpenLeft)
.Prop(ContainerButton.StylePropertyStyleBox, BaseButtonOpenLeft),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Class(ButtonOpenBoth)
.Prop(ContainerButton.StylePropertyStyleBox, BaseButtonOpenBoth),
// Colors for the buttons.
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(ContainerButton.StylePropertyStyleBox, buttonNormal),
.Prop(Control.StylePropertyModulateSelf, ButtonColorDefault),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(ContainerButton.StylePropertyStyleBox, buttonHover),
.Prop(Control.StylePropertyModulateSelf, ButtonColorHovered),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(ContainerButton.StylePropertyStyleBox, buttonPressed),
.Prop(Control.StylePropertyModulateSelf, ButtonColorPressed),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton)
.Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(ContainerButton.StylePropertyStyleBox, buttonDisabled),
.Prop(Control.StylePropertyModulateSelf, ButtonColorDisabled),
// Right open buttons.
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenRight)
// Colors for the caution buttons.
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonCaution)
.Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(ContainerButton.StylePropertyStyleBox, buttonRNormal),
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionDefault),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenRight)
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonCaution)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(ContainerButton.StylePropertyStyleBox, buttonRHover),
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionHovered),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenRight)
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonCaution)
.Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(ContainerButton.StylePropertyStyleBox, buttonRPressed),
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionPressed),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenRight)
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonCaution)
.Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(ContainerButton.StylePropertyStyleBox, buttonRDisabled),
// Left open buttons.
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenLeft)
.Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(ContainerButton.StylePropertyStyleBox, buttonLNormal),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenLeft)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(ContainerButton.StylePropertyStyleBox, buttonLHover),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenLeft)
.Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(ContainerButton.StylePropertyStyleBox, buttonLPressed),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenLeft)
.Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(ContainerButton.StylePropertyStyleBox, buttonLDisabled),
// "Both" open buttons
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenBoth)
.Pseudo(ContainerButton.StylePseudoClassNormal)
.Prop(ContainerButton.StylePropertyStyleBox, buttonBNormal),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenBoth)
.Pseudo(ContainerButton.StylePseudoClassHover)
.Prop(ContainerButton.StylePropertyStyleBox, buttonBHover),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenBoth)
.Pseudo(ContainerButton.StylePseudoClassPressed)
.Prop(ContainerButton.StylePropertyStyleBox, buttonBPressed),
Element<ContainerButton>().Class(ContainerButton.StyleClassButton).Class(ButtonOpenBoth)
.Pseudo(ContainerButton.StylePseudoClassDisabled)
.Prop(ContainerButton.StylePropertyStyleBox, buttonBDisabled),
.Prop(Control.StylePropertyModulateSelf, ButtonColorCautionDisabled),
Element<Label>().Class(ContainerButton.StyleClassButton)