gui2/tslider: Improved color scheme for slider grooves

This makes it so the "selected" segment of the groove (towards the
slider origin) is drawn with a brighter color than the "empty" segment
(opposite from the origin). Since this obviously wouldn't work with
RGB #FFFFFF, and the color is too distracting anyway (it was pretty much
the only widget using the general *text* color), we now use the standard
UI border colors to match buttons, checkboxes and so on. This should
hopefully help with harmonizing Wesnoth's UI color scheme across the
board.

For this purpose we also introduce a macro for a darker/shaded disabled
text color, used for the unselected segment of disabled sliders.
This commit is contained in:
Ignacio R. Morelle 2016-10-11 23:38:19 -03:00
parent 860325d3df
commit 7531e7ef2e
3 changed files with 52 additions and 10 deletions

View file

@ -70,6 +70,10 @@
"128, 128, 128, 255"
#enddef
#define GUI__FONT_COLOR_DISABLED_DARK__DEFAULT
"96, 96, 96, 255"
#enddef
# This gold color is used for the
# - title labels
# - button captions

View file

@ -3,7 +3,7 @@
### Definition of a slider.
###
#define _GUI_STATE IMAGE_SUFFIX GROOVE_COLOR TEXT_COLOR RIGHT_OFFSET FONT_SIZE
#define _GUI_STATE IMAGE_SUFFIX GROOVE_SELECTED_COLOR GROOVE_UNSELECTED_COLOR TEXT_COLOR RIGHT_OFFSET FONT_SIZE
[draw]
#
@ -13,10 +13,20 @@
[line]
x1 = 0
y1 = "(height / 2)"
x2 = "(positioner_offset - 1)"
y2 = "(height / 2)"
color = {GROOVE_SELECTED_COLOR}
thickness = 1
[/line]
[line]
x1 = "(positioner_offset)"
y1 = "(height / 2)"
x2 = "(width - ({RIGHT_OFFSET} + 1))"
y2 = "(height / 2)"
color = {GROOVE_COLOR}
color = {GROOVE_UNSELECTED_COLOR}
thickness = 1
[/line]
@ -74,7 +84,8 @@
[state_enabled]
{_GUI_STATE
".png"
({GUI__FONT_COLOR_ENABLED__DEFAULT})
({GUI__BORDER_COLOR})
({GUI__BORDER_COLOR_DARK})
({GUI__FONT_COLOR_ENABLED__DEFAULT})
({RIGHT_OFFSET})
({FONT_SIZE})
@ -85,6 +96,7 @@
{_GUI_STATE
".png~GS()"
({GUI__FONT_COLOR_DISABLED__DEFAULT})
({GUI__FONT_COLOR_DISABLED_DARK__DEFAULT})
({GUI__FONT_COLOR_DISABLED__DEFAULT})
({RIGHT_OFFSET})
({FONT_SIZE})
@ -94,7 +106,8 @@
[state_pressed]
{_GUI_STATE
"-pressed.png"
({GUI__FONT_COLOR_ENABLED__DEFAULT})
({GUI__BORDER_COLOR})
({GUI__BORDER_COLOR_DARK})
({GUI__FONT_COLOR_ENABLED__DEFAULT})
({RIGHT_OFFSET})
({FONT_SIZE})
@ -104,7 +117,8 @@
[state_focused]
{_GUI_STATE
"-active.png"
({GUI__FONT_COLOR_ENABLED__DEFAULT})
({GUI__BORDER_COLOR})
({GUI__BORDER_COLOR_DARK})
({GUI__FONT_COLOR_ENABLED__DEFAULT})
({RIGHT_OFFSET})
({FONT_SIZE})

View file

@ -5,7 +5,7 @@
### necessary and I (shadowm) can't deal with all the magic numbers in it.
###
#define _GUI_STATE IMAGE_SUFFIX GROOVE_COLOR
#define _GUI_STATE IMAGE_SUFFIX GROOVE_SELECTED_COLOR GROOVE_UNSELECTED_COLOR
[draw]
#
@ -15,10 +15,20 @@
[line]
x1 = 0
y1 = "(height / 2)"
x2 = "(positioner_offset - 1)"
y2 = "(height / 2)"
color = {GROOVE_SELECTED_COLOR}
thickness = 1
[/line]
[line]
x1 = "(positioner_offset)"
y1 = "(height / 2)"
x2 = "(width - 4)"
y2 = "(height / 2)"
color = {GROOVE_COLOR}
color = {GROOVE_UNSELECTED_COLOR}
thickness = 1
[/line]
@ -35,6 +45,14 @@
[/draw]
#enddef
#define _GUI_SLIDER_GROOVE_SELECTED_COLOR
162, 127, 68, 255
#enddef
#define _GUI_SLIDER_GROOVE_UNSELECTED_COLOR
114, 79, 46, 255
#enddef
#define _GUI_RESOLUTION RESOLUTION MIN_WIDTH DEFAULT_WIDTH HEIGHT POSITIONER_LENGTH
[resolution]
@ -60,7 +78,8 @@
[state_enabled]
{_GUI_STATE
".png"
({GUI__FONT_COLOR_ENABLED__DEFAULT})
({GUI__BORDER_COLOR})
({GUI__BORDER_COLOR_DARK})
}
[/state_enabled]
@ -68,20 +87,23 @@
{_GUI_STATE
".png~GS()"
({GUI__FONT_COLOR_DISABLED__DEFAULT})
({GUI__FONT_COLOR_DISABLED_DARK__DEFAULT})
}
[/state_disabled]
[state_pressed]
{_GUI_STATE
"-pressed.png"
({GUI__FONT_COLOR_ENABLED__DEFAULT})
({GUI__BORDER_COLOR})
({GUI__BORDER_COLOR_DARK})
}
[/state_pressed]
[state_focused]
{_GUI_STATE
"-active.png"
({GUI__FONT_COLOR_ENABLED__DEFAULT})
({GUI__BORDER_COLOR})
({GUI__BORDER_COLOR_DARK})
}
[/state_focused]
@ -98,3 +120,5 @@
#undef _GUI_STATE
#undef _GUI_RESOLUTION
#undef _GUI_SLIDER_GROOVE_SELECTED_COLOR
#undef _GUI_SLIDER_GROOVE_UNSELECTED_COLOR