Unify widget state image suffixes (disabled, pressed, hover, focus)

- Add a property for arrows image collection (in drop-downs, scrollbars
and production tabs)
- Add a property for separators image collection (in drop-downs)
- Add hover and disable states to the drop-down separator
- Unify button, textfield and checkbox state suffixes
This commit is contained in:
Ivaylo Draganov
2020-05-12 00:11:45 +03:00
committed by Paul Chote
parent 2dda2d7689
commit 7943f4deb6
15 changed files with 194 additions and 94 deletions

View File

@@ -292,13 +292,10 @@ namespace OpenRA.Mods.Common.Widgets
if (string.IsNullOrEmpty(baseName))
return;
var variant = highlighted ? "-highlighted" : "";
var state = disabled ? "-disabled" :
pressed ? "-pressed" :
hover ? "-hover" :
"";
var variantName = highlighted ? baseName + "-highlighted" : baseName;
var imageName = WidgetUtils.GetStatefulImageName(variantName, disabled, pressed, hover);
WidgetUtils.DrawPanel(baseName + variant + state, rect);
WidgetUtils.DrawPanel(imageName, rect);
}
}
}

View File

@@ -44,7 +44,6 @@ namespace OpenRA.Mods.Common.Widgets
public override void Draw()
{
var disabled = IsDisabled();
var highlighted = IsHighlighted();
var font = Game.Renderer.Fonts[Font];
var color = GetColor();
var colordisabled = GetColorDisabled();
@@ -54,11 +53,8 @@ namespace OpenRA.Mods.Common.Widgets
var text = GetText();
var textSize = font.Measure(text);
var check = new Rectangle(rect.Location, new Size(Bounds.Height, Bounds.Height));
var state = disabled ? "checkbox-disabled" :
highlighted ? "checkbox-highlighted" :
Depressed && HasPressedState ? "checkbox-pressed" :
Ui.MouseOverWidget == this ? "checkbox-hover" :
"checkbox";
var baseName = IsHighlighted() ? "checkbox-highlighted" : "checkbox";
var state = WidgetUtils.GetStatefulImageName(baseName, disabled, Depressed && HasPressedState, Ui.MouseOverWidget == this);
WidgetUtils.DrawPanel(state, check);

View File

@@ -11,6 +11,7 @@
using System;
using System.Collections.Generic;
using System.Linq;
using OpenRA.Graphics;
using OpenRA.Primitives;
using OpenRA.Widgets;
@@ -19,7 +20,9 @@ namespace OpenRA.Mods.Common.Widgets
{
public class DropDownButtonWidget : ButtonWidget
{
public readonly string SeparatorCollection = "dropdown";
public readonly string Decorations = "dropdown-decorations";
public readonly string DecorationMarker = "marker";
public readonly string Separators = "dropdown-separators";
public readonly string SeparatorImage = "separator";
public readonly TextAlign PanelAlign = TextAlign.Left;
@@ -45,13 +48,20 @@ namespace OpenRA.Mods.Common.Widgets
base.Draw();
var stateOffset = Depressed ? new int2(VisualHeight, VisualHeight) : new int2(0, 0);
var image = ChromeProvider.GetImage("scrollbar", IsDisabled() ? "down_pressed" : "down_arrow");
var rb = RenderBounds;
var isDisabled = IsDisabled();
var isHover = Ui.MouseOverWidget == this || Children.Any(c => c == Ui.MouseOverWidget);
WidgetUtils.DrawRGBA(image, stateOffset + new float2(rb.Right - (int)((rb.Height + image.Size.X) / 2), rb.Top + (int)((rb.Height - image.Size.Y) / 2)));
var markerImageName = WidgetUtils.GetStatefulImageName(DecorationMarker, isDisabled, Depressed, isHover);
var arrowImage = ChromeProvider.GetImage(Decorations, markerImageName) ?? ChromeProvider.GetImage(Decorations, DecorationMarker);
var separator = ChromeProvider.GetImage(SeparatorCollection, SeparatorImage);
WidgetUtils.DrawRGBA(separator, stateOffset + new float2(-3, 0) + new float2(rb.Right - rb.Height + 4, rb.Top + (rb.Height - separator.Size.Y) / 2));
WidgetUtils.DrawRGBA(arrowImage, stateOffset + new float2(rb.Right - (int)((rb.Height + arrowImage.Size.X) / 2), rb.Top + (int)((rb.Height - arrowImage.Size.Y) / 2)));
var separatorImageName = WidgetUtils.GetStatefulImageName(SeparatorImage, isDisabled, Depressed, isHover);
var separatorImage = ChromeProvider.GetImage(Separators, separatorImageName) ?? ChromeProvider.GetImage(Separators, SeparatorImage);
if (separatorImage != null)
WidgetUtils.DrawRGBA(separatorImage, stateOffset + new float2(-3, 0) + new float2(rb.Right - rb.Height + 4, rb.Top + (int)((rb.Height - separatorImage.Size.Y) / 2)));
}
public override Widget Clone() { return new DropDownButtonWidget(this); }

View File

@@ -128,10 +128,7 @@ namespace OpenRA.Mods.Common.Widgets
var disabled = IsDisabled();
var valid = IsValid();
var state = disabled ? "textfield-disabled" :
HasKeyboardFocus ? "textfield-focused" :
Ui.MouseOverWidget == this ? "textfield-hover" :
"textfield";
var state = WidgetUtils.GetStatefulImageName("textfield", disabled, false, Ui.MouseOverWidget == this, HasKeyboardFocus);
WidgetUtils.DrawPanel(state, RenderBounds);

View File

@@ -83,6 +83,9 @@ namespace OpenRA.Mods.Common.Widgets
public string Button = "button";
public string Background = "panel-black";
public readonly string Decorations = "scrollpanel-decorations";
public readonly string DecorationScrollLeft = "left";
public readonly string DecorationScrollRight = "right";
int contentWidth = 0;
float listOffset = 0;
@@ -182,9 +185,14 @@ namespace OpenRA.Mods.Common.Widgets
ButtonWidget.DrawBackground(Button, leftButtonRect, leftDisabled, leftPressed, leftHover, false);
ButtonWidget.DrawBackground(Button, rightButtonRect, rightDisabled, rightPressed, rightHover, false);
WidgetUtils.DrawRGBA(ChromeProvider.GetImage("scrollbar", leftPressed || leftDisabled ? "left_pressed" : "left_arrow"),
var leftArrowImageName = WidgetUtils.GetStatefulImageName(DecorationScrollLeft, leftDisabled, leftPressed, leftHover);
var leftArrowImage = ChromeProvider.GetImage(Decorations, leftArrowImageName) ?? ChromeProvider.GetImage(Decorations, DecorationScrollLeft);
WidgetUtils.DrawRGBA(leftArrowImage,
new float2(leftButtonRect.Left + 2, leftButtonRect.Top + 2));
WidgetUtils.DrawRGBA(ChromeProvider.GetImage("scrollbar", rightPressed || rightDisabled ? "right_pressed" : "right_arrow"),
var rightArrowImageName = WidgetUtils.GetStatefulImageName(DecorationScrollRight, rightDisabled, rightPressed, rightHover);
var rightArrowImage = ChromeProvider.GetImage(Decorations, rightArrowImageName) ?? ChromeProvider.GetImage(Decorations, DecorationScrollRight);
WidgetUtils.DrawRGBA(rightArrowImage,
new float2(rightButtonRect.Left + 2, rightButtonRect.Top + 2));
// Draw tab buttons

View File

@@ -48,6 +48,9 @@ namespace OpenRA.Mods.Common.Widgets
public string Background = "scrollpanel-bg";
public string ScrollBarBackground = "scrollpanel-bg";
public string Button = "scrollpanel-button";
public readonly string Decorations = "scrollpanel-decorations";
public readonly string DecorationScrollUp = "up";
public readonly string DecorationScrollDown = "down";
public int ContentHeight;
public ILayout Layout;
public int MinimumThumbSize = 10;
@@ -201,9 +204,14 @@ namespace OpenRA.Mods.Common.Widgets
var upOffset = !upPressed || upDisabled ? 4 : 4 + ButtonDepth;
var downOffset = !downPressed || downDisabled ? 4 : 4 + ButtonDepth;
WidgetUtils.DrawRGBA(ChromeProvider.GetImage("scrollbar", upPressed || upDisabled ? "up_pressed" : "up_arrow"),
var upArrowImageName = WidgetUtils.GetStatefulImageName(DecorationScrollUp, upDisabled, upPressed, upHover);
var upArrowImage = ChromeProvider.GetImage(Decorations, upArrowImageName) ?? ChromeProvider.GetImage(Decorations, DecorationScrollUp);
WidgetUtils.DrawRGBA(upArrowImage,
new float2(upButtonRect.Left + upOffset, upButtonRect.Top + upOffset));
WidgetUtils.DrawRGBA(ChromeProvider.GetImage("scrollbar", downPressed || downDisabled ? "down_pressed" : "down_arrow"),
var downArrowImageName = WidgetUtils.GetStatefulImageName(DecorationScrollDown, downDisabled, downPressed, downHover);
var downArrowImage = ChromeProvider.GetImage(Decorations, downArrowImageName) ?? ChromeProvider.GetImage(Decorations, DecorationScrollDown);
WidgetUtils.DrawRGBA(downArrowImage,
new float2(downButtonRect.Left + downOffset, downButtonRect.Top + downOffset));
}

View File

@@ -566,10 +566,8 @@ namespace OpenRA.Mods.Common.Widgets
var cursorPosition = font.Measure(apparentText.Substring(0, CursorPosition));
var disabled = IsDisabled();
var state = disabled ? "textfield-disabled" :
HasKeyboardFocus ? "textfield-focused" :
Ui.MouseOverWidget == this || Children.Any(c => c == Ui.MouseOverWidget) ? "textfield-hover" :
"textfield";
var hover = Ui.MouseOverWidget == this || Children.Any(c => c == Ui.MouseOverWidget);
var state = WidgetUtils.GetStatefulImageName("textfield", disabled, false, hover, HasKeyboardFocus);
WidgetUtils.DrawPanel(state,
new Rectangle(pos.X, pos.Y, Bounds.Width, Bounds.Height));

View File

@@ -24,6 +24,17 @@ namespace OpenRA.Mods.Common.Widgets
return ChromeProvider.GetImage("chrome-" + world.LocalPlayer.Faction.InternalName, name);
}
public static string GetStatefulImageName(string baseName, bool disabled = false, bool pressed = false, bool hover = false, bool focused = false)
{
var suffix = disabled ? "-disabled" :
focused ? "-focused" :
pressed ? "-pressed" :
hover ? "-hover" :
"";
return baseName + suffix;
}
public static void DrawRGBA(Sprite s, float2 pos)
{
Game.Renderer.RgbaSpriteRenderer.DrawSprite(s, pos);

View File

@@ -201,6 +201,15 @@ checkbox-pressed:
checkbox-highlighted:
Inherits: button-highlighted-pressed
checkbox-highlighted-hover:
Inherits: button-highlighted-hover
checkbox-highlighted-disabled:
Inherits: button-highlighted-disabled
checkbox-highlighted-pressed:
Inherits: button-highlighted-pressed
#
# Panels
# ===
@@ -337,18 +346,6 @@ checkbox-bits:
crossed: 972, 0, 16, 16
crossed-disabled: 989, 0, 16, 16
scrollbar:
Inherits: ^Chrome
Regions:
down_arrow: 836, 17, 16, 16
down_pressed: 853, 17, 16, 16
up_arrow: 870, 17, 16, 16
up_pressed: 887, 17, 16, 16
right_arrow: 904, 17, 16, 16
right_pressed: 921, 17, 16, 16
left_arrow: 938, 17, 16, 16
left_pressed: 955, 17, 16, 16
flags:
Inherits: ^Chrome
Regions:
@@ -364,10 +361,36 @@ strategic:
enemy_owned: 837, 223, 22, 22
player_owned: 883, 223, 22, 22
dropdown:
scrollpanel-decorations:
Inherits: ^Chrome
Regions:
separator: 65, 1, 1, 19
down: 836, 17, 16, 16
down-pressed: 836, 17, 16, 16
down-disabled: 853, 17, 16, 16
up: 870, 17, 16, 16
up-pressed: 870, 17, 16, 16
up-disabled: 887, 17, 16, 16
right: 904, 17, 16, 16
right-pressed: 904, 17, 16, 16
right-disabled: 921, 17, 16, 16
left: 938, 17, 16, 16
left-pressed: 938, 17, 16, 16
left-disabled: 955, 17, 16, 16
dropdown-decorations:
Inherits: ^Chrome
Regions:
marker: 836, 17, 16, 16
marker-pressed: 836, 17, 16, 16
marker-disabled: 853, 17, 16, 16
dropdown-separators:
Inherits: ^Chrome
Regions:
separator: 129, 2, 1, 19
separator-hover: 161, 2, 1, 19
separator-pressed: 129, 34, 1, 19
separator-disabled: 161, 34, 1, 19
#
# Common chrome

View File

@@ -283,14 +283,6 @@ music:
prev: 68, 0, 16, 16
fastforward: 85, 0, 16, 16
scrollbar:
Inherits: ^Glyphs
Regions:
down_arrow: 119, 0, 16, 16
down_pressed: 119, 0, 16, 16
up_arrow: 102, 0, 16, 16
up_pressed: 102, 0, 16, 16
progressbar-bg:
Inherits: button-pressed
@@ -400,6 +392,12 @@ checkbox-disabled:
checkbox-highlighted:
Inherits: button-highlighted-pressed
checkbox-highlighted-hover:
Inherits: checkbox-highlighted
checkbox-highlighted-disabled:
Inherits: checkbox-disabled
scrollitem-selected:
Inherits: button-pressed
@@ -412,10 +410,24 @@ scrollheader-selected:
scrollitem-nohover:
Inherits: ^Dialog
dropdown:
scrollpanel-decorations:
Inherits: ^Glyphs
Regions:
down: 119, 0, 16, 16
up: 102, 0, 16, 16
dropdown-decorations:
Inherits: ^Glyphs
Regions:
marker: 119, 0, 16, 16
dropdown-separators:
Inherits: ^Dialog
Regions:
separator: 513, 1, 1, 19
separator: 513, 2, 1, 19
separator-hover: 513, 130, 1, 19
separator-pressed: 641, 2, 1, 19
separator-disabled: 513, 258, 1, 19
logos:
Inherits: ^LoadScreen

View File

@@ -616,8 +616,8 @@ Container@PLAYER_WIDGETS:
Image@ICON:
X: 5
Y: 5
ImageCollection: scrollbar
ImageName: up_arrow
ImageCollection: scrollpanel-decorations
ImageName: up
Button@SCROLL_DOWN_BUTTON:
Y: 248
Width: 25
@@ -630,5 +630,5 @@ Container@PLAYER_WIDGETS:
Image@ICON:
X: 5
Y: 5
ImageCollection: scrollbar
ImageName: down_arrow
ImageCollection: scrollpanel-decorations
ImageName: down

View File

@@ -102,10 +102,10 @@ scrollpanel-button-disabled:
scrollpanel-button-pressed:
Inherits: panel-thinborder-light
scrollbar:
scrollpanel-decorations:
Inherits: ^Chrome
Regions:
down_arrow: 453, 512, 16, 16
down_pressed: 453, 512, 16, 16
up_arrow: 470, 512, 16, 16
up_pressed: 470, 512, 16, 16
down: 453, 512, 16, 16
down-pressed: 453, 512, 16, 16
up: 470, 512, 16, 16
up-pressed: 470, 512, 16, 16

View File

@@ -394,18 +394,6 @@ music:
prev: 68, 0, 16, 16
fastforward: 85, 0, 16, 16
scrollbar:
Inherits: ^Glyphs
Regions:
down_arrow: 68, 17, 16, 16
down_pressed: 85, 17, 16, 16
up_arrow: 102, 17, 16, 16
up_pressed: 119, 17, 16, 16
right_arrow: 136, 17, 16, 16
right_pressed: 153, 17, 16, 16
left_arrow: 170, 17, 16, 16
left_pressed: 187, 17, 16, 16
progressbar-bg:
Inherits: button-pressed
@@ -533,6 +521,12 @@ checkbox-highlighted:
Inherits: ^Dialog
PanelRegion: 897, 1, 2, 2, 122, 122, 2, 2
checkbox-highlighted-hover:
Inherits: checkbox-highlighted
checkbox-highlighted-disabled:
Inherits: checkbox-disabled
scrollitem-selected:
Inherits: button-pressed
@@ -559,8 +553,34 @@ mainmenu-border:
PanelRegion: 650, 389, 39, 39, 38, 38, 39, 39
PanelSides: Edges
dropdown:
scrollpanel-decorations:
Inherits: ^Glyphs
Regions:
down: 68, 17, 16, 16
down-pressed: 68, 17, 16, 16
down-disabled: 85, 17, 16, 16
up: 102, 17, 16, 16
up-pressed: 102, 17, 16, 16
up-disabled: 119, 17, 16, 16
right: 136, 17, 16, 16
right-pressed: 136, 17, 16, 16
right-disabled: 153, 17, 16, 16
left: 170, 17, 16, 16
left-pressed: 170, 17, 16, 16
left-disabled: 187, 17, 16, 16
dropdown-decorations:
Inherits: ^Glyphs
Regions:
marker: 68, 17, 16, 16
marker-pressed: 68, 17, 16, 16
marker-disabled: 85, 17, 16, 16
dropdown-separators:
Inherits: ^Dialog
Regions:
separator: 513, 2, 1, 19
observer-separator: 769, 257, 1, 19
separator-hover: 513, 130, 1, 19
separator-pressed: 766, 2, 1, 19
separator-disabled: 513, 258, 1, 19
observer-separator: 769, 258, 1, 19

View File

@@ -572,8 +572,8 @@ Container@PLAYER_WIDGETS:
Image@ICON:
X: 6
Y: 3
ImageCollection: scrollbar
ImageName: up_arrow
ImageCollection: scrollpanel-decorations
ImageName: up
Button@SCROLL_DOWN_BUTTON:
Logic: AddFactionSuffixLogic
Y: 211
@@ -587,8 +587,8 @@ Container@PLAYER_WIDGETS:
Image@ICON:
X: 6
Y: 3
ImageCollection: scrollbar
ImageName: down_arrow
ImageCollection: scrollpanel-decorations
ImageName: down
Image@SIDEBAR_MONEYBIN:
Logic: AddFactionSuffixLogic
X: WINDOW_RIGHT - 250

View File

@@ -500,18 +500,6 @@ music:
prev: 68, 0, 16, 16
fastforward: 85, 0, 16, 16
scrollbar:
Inherits: ^Glyphs
Regions:
down_arrow: 68, 17, 16, 16
down_pressed: 85, 17, 16, 16
up_arrow: 102, 17, 16, 16
up_pressed: 119, 17, 16, 16
right_arrow: 136, 17, 16, 16
right_pressed: 153, 17, 16, 16
left_arrow: 170, 17, 16, 16
left_pressed: 187, 17, 16, 16
# ----------------------------------------------------------------------
# Other UI stuff
# ----------------------------------------------------------------------
@@ -666,6 +654,12 @@ checkbox-highlighted:
Inherits: ^Dialog
PanelRegion: 897, 1, 2, 2, 122, 122, 2, 2
checkbox-highlighted-hover:
Inherits: checkbox-highlighted
checkbox-highlighted-disabled:
Inherits: checkbox-disabled
scrollitem-selected:
Inherits: button-pressed
@@ -681,10 +675,36 @@ scrollheader-selected:
mainmenu-border:
Inherits: ^Dialog
dropdown:
scrollpanel-decorations:
Inherits: ^Glyphs
Regions:
down: 68, 17, 16, 16
down-pressed: 68, 17, 16, 16
down-disabled: 85, 17, 16, 16
up: 102, 17, 16, 16
up-pressed: 102, 17, 16, 16
up-disabled: 119, 17, 16, 16
right: 136, 17, 16, 16
right-pressed: 136, 17, 16, 16
right-disabled: 153, 17, 16, 16
left: 170, 17, 16, 16
left-pressed: 170, 17, 16, 16
left-disabled: 187, 17, 16, 16
dropdown-decorations:
Inherits: ^Glyphs
Regions:
marker: 68, 17, 16, 16
marker-pressed: 68, 17, 16, 16
marker-disabled: 85, 17, 16, 16
dropdown-separators:
Inherits: ^Dialog
Regions:
separator: 513, 1, 1, 19
separator: 513, 2, 1, 19
separator-hover: 513, 130, 1, 19
separator-pressed: 766, 2, 1, 19
separator-disabled: 513, 258, 1, 19
logos:
Inherits: ^LoadScreen