gui2: Restyle comboboxes to look like buttons rather than textboxes
This commit is contained in:
Iris Morelle
parent
3cbe0a5ef7
commit
220c3f5752
3 changed files with 91 additions and 42 deletions
|
|
@ -57,6 +57,7 @@
|
|||
* Set the correct default text color for in-game UI elements instead of #ffffff white for consistency with other UI elements.
|
||||
* Increased font sizes in Help and some legacy UI elements.
|
||||
* Minor clean-up of game menus display.
|
||||
* Restyled dropdown menu buttons to look like buttons rather than textboxes.
|
||||
* Fixed missing display resolution ratios in Preferences -> Display (regression introduced in 1.15.10).
|
||||
### WML Engine
|
||||
* Standard Location Filters now support gives_income=yes|no to make it simpler to match villages regardless of owner
|
||||
|
|
|
|||
|
|
@ -3,27 +3,51 @@
|
|||
### Definition of the default button.
|
||||
###
|
||||
|
||||
#define _GUI_DRAW_BORDER _COLOR
|
||||
[rectangle]
|
||||
x = 0
|
||||
y = 0
|
||||
w = "(width)"
|
||||
h = "(height)"
|
||||
#define _GUI_DRAW_BORDER BORDER_COLOR BORDER_COLOR_DARK HIGHLIGHT_LINE_COLOR IPF
|
||||
#
|
||||
# Dark background borders
|
||||
#
|
||||
|
||||
border_thickness = 1
|
||||
border_color = {_COLOR}
|
||||
{GUI_LINE 0 1 0 "(height - 2)" "1, 10, 16, 255"}
|
||||
{GUI_LINE 2 1 "(width - 2)" 1 "1, 10, 16, 255"}
|
||||
{GUI_LINE 1 "(height - 1)" "(width - 2)" "(height - 1)" "1, 10, 16, 255"}
|
||||
{GUI_LINE "(width - 2)" 1 "(width - 2)" "(height - 1)" "1, 10, 16, 255"}
|
||||
|
||||
[/rectangle]
|
||||
#
|
||||
# Gold colored borders
|
||||
#
|
||||
|
||||
{GUI_LINE 2 0 "(width - 2)" 0 {BORDER_COLOR}}
|
||||
{GUI_LINE "(width - 1)" 1 "(width - 1)" "(height - 3)" {BORDER_COLOR}}
|
||||
|
||||
{GUI_LINE 1 1 1 "(height - 3)" {BORDER_COLOR_DARK}}
|
||||
{GUI_LINE 2 "(height - 2)" "(width - 2)" "(height - 2)" {BORDER_COLOR_DARK}}
|
||||
|
||||
#
|
||||
# Blue tint lines on the top and right
|
||||
#
|
||||
|
||||
{GUI_LINE 3 2 "(width - 3)" 2 {HIGHLIGHT_LINE_COLOR}}
|
||||
{GUI_LINE "(width - 3)" 2 "(width - 3)" "(height - 4)" {HIGHLIGHT_LINE_COLOR}}
|
||||
|
||||
#
|
||||
# Round the corners
|
||||
#
|
||||
|
||||
{GUI_POINT 2 1 {BORDER_COLOR_DARK}}
|
||||
{GUI_POINT 2 "(height - 3)" {BORDER_COLOR_DARK}}
|
||||
|
||||
{GUI_POINT "(width - 2)" 1 {BORDER_COLOR}}
|
||||
{GUI_POINT "(width - 2)" "(height - 3)" {BORDER_COLOR}}
|
||||
#enddef
|
||||
|
||||
#define _GUI_TEXT FONT_SIZE FONT_COLOR
|
||||
[text]
|
||||
x = 5
|
||||
x = 8 # 3px border + 5px padding inside
|
||||
y = {GUI__TEXT_VERTICALLY_CENTRED}
|
||||
w = "(text_width)"
|
||||
h = "(text_height)"
|
||||
# 25 offset to accommodate the arrow
|
||||
maximum_width = "(width - 25)"
|
||||
maximum_width = "(width - 33)" # substract 25px arrow and text x offset
|
||||
font_size = {FONT_SIZE}
|
||||
color = {FONT_COLOR}
|
||||
text = "(text)"
|
||||
|
|
@ -59,14 +83,14 @@
|
|||
name = "buttons/{BASE_NAME}.png{IPF}"
|
||||
[/image]
|
||||
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR_DARK})}
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR}) ({GUI__BORDER_COLOR_DARK}) ("21, 79, 109, 255") {IPF}}
|
||||
|
||||
{_GUI_TEXT ({FONT_SIZE}) ({GUI__FONT_COLOR_ENABLED__TITLE})}
|
||||
|
||||
[image]
|
||||
x = "(width - 25)"
|
||||
y = 2
|
||||
name = "icons/arrows/short_arrow_left_25.png~ROTATE(-90)"
|
||||
name = "icons/arrows/short_arrow_ornate_left_25.png~ROTATE(-90)"
|
||||
[/image]
|
||||
[/draw]
|
||||
|
||||
|
|
@ -82,14 +106,14 @@
|
|||
name = "buttons/{BASE_NAME}.png~GS(){IPF}"
|
||||
[/image]
|
||||
|
||||
{_GUI_DRAW_BORDER ({GUI__FONT_COLOR_DISABLED__DEFAULT})}
|
||||
{_GUI_DRAW_BORDER ({GUI__FONT_COLOR_DISABLED__DEFAULT}) ("89, 89, 89, 255") ("60, 60, 60, 255") "~GS(){IPF}"}
|
||||
|
||||
{_GUI_TEXT ({FONT_SIZE}) ({GUI__FONT_COLOR_DISABLED__TITLE})}
|
||||
|
||||
[image]
|
||||
x = "(width - 25)"
|
||||
y = 2
|
||||
name = "icons/arrows/short_arrow_left_25.png~ROTATE(-90)~GS()"
|
||||
name = "icons/arrows/short_arrow_ornate_left_25.png~ROTATE(-90)~GS()"
|
||||
[/image]
|
||||
[/draw]
|
||||
|
||||
|
|
@ -102,17 +126,17 @@
|
|||
[image]
|
||||
w = "(width)"
|
||||
h = "(height)"
|
||||
name = "buttons/{BASE_NAME}-pressed.png{IPF}"
|
||||
name = "buttons/{BASE_NAME}.png{IPF}"
|
||||
[/image]
|
||||
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR_DARK})}
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR}) ({GUI__BORDER_COLOR_DARK}) ("1, 10, 16, 255") {IPF}}
|
||||
|
||||
{_GUI_TEXT ({FONT_SIZE}) ({GUI__FONT_COLOR_ENABLED__TITLE})}
|
||||
|
||||
[image]
|
||||
x = "(width - 25)"
|
||||
y = 2
|
||||
name = "icons/arrows/short_arrow_left_25-pressed.png~ROTATE(-90)"
|
||||
name = "icons/arrows/short_arrow_ornate_left_25-pressed.png~ROTATE(-90)"
|
||||
[/image]
|
||||
[/draw]
|
||||
|
||||
|
|
@ -129,14 +153,14 @@
|
|||
name = "buttons/{BASE_NAME}-pressed.png{IPF}"
|
||||
[/image]
|
||||
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR_DARK})}
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR}) ({GUI__BORDER_COLOR_DARK}) ("12, 108, 157, 255") {IPF}}
|
||||
|
||||
{_GUI_TEXT ({FONT_SIZE}) ({GUI__FONT_COLOR_ENABLED__TITLE})}
|
||||
|
||||
[image]
|
||||
x = "(width - 25)"
|
||||
y = 2
|
||||
name = "icons/arrows/short_arrow_left_25-active.png~ROTATE(-90)"
|
||||
name = "icons/arrows/short_arrow_ornate_left_25-active.png~ROTATE(-90)"
|
||||
[/image]
|
||||
[/draw]
|
||||
|
||||
|
|
|
|||
|
|
@ -3,27 +3,51 @@
|
|||
### Definition of the default button.
|
||||
###
|
||||
|
||||
#define _GUI_DRAW_BORDER _COLOR
|
||||
[rectangle]
|
||||
x = 0
|
||||
y = 0
|
||||
w = "(width)"
|
||||
h = "(height)"
|
||||
#define _GUI_DRAW_BORDER BORDER_COLOR BORDER_COLOR_DARK HIGHLIGHT_LINE_COLOR IPF
|
||||
#
|
||||
# Dark background borders
|
||||
#
|
||||
|
||||
border_thickness = 1
|
||||
border_color = {_COLOR}
|
||||
{GUI_LINE 0 1 0 "(height - 2)" "1, 10, 16, 255"}
|
||||
{GUI_LINE 2 1 "(width - 2)" 1 "1, 10, 16, 255"}
|
||||
{GUI_LINE 1 "(height - 1)" "(width - 2)" "(height - 1)" "1, 10, 16, 255"}
|
||||
{GUI_LINE "(width - 2)" 1 "(width - 2)" "(height - 1)" "1, 10, 16, 255"}
|
||||
|
||||
[/rectangle]
|
||||
#
|
||||
# Gold colored borders
|
||||
#
|
||||
|
||||
{GUI_LINE 2 0 "(width - 2)" 0 {BORDER_COLOR}}
|
||||
{GUI_LINE "(width - 1)" 1 "(width - 1)" "(height - 3)" {BORDER_COLOR}}
|
||||
|
||||
{GUI_LINE 1 1 1 "(height - 3)" {BORDER_COLOR_DARK}}
|
||||
{GUI_LINE 2 "(height - 2)" "(width - 2)" "(height - 2)" {BORDER_COLOR_DARK}}
|
||||
|
||||
#
|
||||
# Blue tint lines on the top and right
|
||||
#
|
||||
|
||||
{GUI_LINE 3 2 "(width - 3)" 2 {HIGHLIGHT_LINE_COLOR}}
|
||||
{GUI_LINE "(width - 3)" 2 "(width - 3)" "(height - 4)" {HIGHLIGHT_LINE_COLOR}}
|
||||
|
||||
#
|
||||
# Round the corners
|
||||
#
|
||||
|
||||
{GUI_POINT 2 1 {BORDER_COLOR_DARK}}
|
||||
{GUI_POINT 2 "(height - 3)" {BORDER_COLOR_DARK}}
|
||||
|
||||
{GUI_POINT "(width - 2)" 1 {BORDER_COLOR}}
|
||||
{GUI_POINT "(width - 2)" "(height - 3)" {BORDER_COLOR}}
|
||||
#enddef
|
||||
|
||||
#define _GUI_TEXT FONT_SIZE FONT_COLOR
|
||||
[text]
|
||||
x = 5
|
||||
x = 8 # 3px border + 5px padding inside
|
||||
y = {GUI__TEXT_VERTICALLY_CENTRED}
|
||||
w = "(text_width)"
|
||||
h = "(text_height)"
|
||||
# 25 offset to accommodate the arrow
|
||||
maximum_width = "(width - 25)"
|
||||
maximum_width = "(width - 33)" # substract 25px arrow and text x offset
|
||||
font_size = {FONT_SIZE}
|
||||
color = {FONT_COLOR}
|
||||
text = "(text)"
|
||||
|
|
@ -59,14 +83,14 @@
|
|||
name = "buttons/{BASE_NAME}.png{IPF}"
|
||||
[/image]
|
||||
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR_DARK})}
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR}) ({GUI__BORDER_COLOR_DARK}) ("21, 79, 109, 255") {IPF}}
|
||||
|
||||
{_GUI_TEXT ({FONT_SIZE}) ({GUI__FONT_COLOR_ENABLED__TITLE})}
|
||||
|
||||
[image]
|
||||
x = "(width - 25)"
|
||||
y = 2
|
||||
name = "icons/arrows/short_arrow_left_25.png~ROTATE(-90)"
|
||||
name = "icons/arrows/short_arrow_ornate_left_25.png~ROTATE(-90)"
|
||||
[/image]
|
||||
[/draw]
|
||||
|
||||
|
|
@ -82,14 +106,14 @@
|
|||
name = "buttons/{BASE_NAME}.png~GS(){IPF}"
|
||||
[/image]
|
||||
|
||||
{_GUI_DRAW_BORDER ({GUI__FONT_COLOR_DISABLED__DEFAULT})}
|
||||
{_GUI_DRAW_BORDER ({GUI__FONT_COLOR_DISABLED__DEFAULT}) ("89, 89, 89, 255") ("60, 60, 60, 255") "~GS(){IPF}"}
|
||||
|
||||
{_GUI_TEXT ({FONT_SIZE}) ({GUI__FONT_COLOR_DISABLED__TITLE})}
|
||||
|
||||
[image]
|
||||
x = "(width - 25)"
|
||||
y = 2
|
||||
name = "icons/arrows/short_arrow_left_25.png~ROTATE(-90)~GS()"
|
||||
name = "icons/arrows/short_arrow_ornate_left_25.png~ROTATE(-90)~GS()"
|
||||
[/image]
|
||||
[/draw]
|
||||
|
||||
|
|
@ -102,17 +126,17 @@
|
|||
[image]
|
||||
w = "(width)"
|
||||
h = "(height)"
|
||||
name = "buttons/{BASE_NAME}-pressed.png{IPF}"
|
||||
name = "buttons/{BASE_NAME}.png{IPF}"
|
||||
[/image]
|
||||
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR_DARK})}
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR}) ({GUI__BORDER_COLOR_DARK}) ("1, 10, 16, 255") {IPF}}
|
||||
|
||||
{_GUI_TEXT ({FONT_SIZE}) ({GUI__FONT_COLOR_ENABLED__TITLE})}
|
||||
|
||||
[image]
|
||||
x = "(width - 25)"
|
||||
y = 2
|
||||
name = "icons/arrows/short_arrow_left_25-pressed.png~ROTATE(-90)"
|
||||
name = "icons/arrows/short_arrow_ornate_left_25-pressed.png~ROTATE(-90)"
|
||||
[/image]
|
||||
[/draw]
|
||||
|
||||
|
|
@ -129,14 +153,14 @@
|
|||
name = "buttons/{BASE_NAME}-pressed.png{IPF}"
|
||||
[/image]
|
||||
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR_DARK})}
|
||||
{_GUI_DRAW_BORDER ({GUI__BORDER_COLOR}) ({GUI__BORDER_COLOR_DARK}) ("12, 108, 157, 255") {IPF}}
|
||||
|
||||
{_GUI_TEXT ({FONT_SIZE}) ({GUI__FONT_COLOR_ENABLED__TITLE})}
|
||||
|
||||
[image]
|
||||
x = "(width - 25)"
|
||||
y = 2
|
||||
name = "icons/arrows/short_arrow_left_25-active.png~ROTATE(-90)"
|
||||
name = "icons/arrows/short_arrow_ornate_left_25-active.png~ROTATE(-90)"
|
||||
[/image]
|
||||
[/draw]
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue