For a smoother user experience, use different colors for inverted text of the ListWidget, depending on whether the widget has focus or not.

svn-id: r42512
This commit is contained in:
Johannes Schickel 2009-07-15 18:05:37 +00:00
parent 6a15e14d3f
commit 6a26f1b56f
11 changed files with 376 additions and 334 deletions

View file

@ -84,7 +84,7 @@ void EditTextWidget::drawWidget() {
// Draw the text
adjustOffset();
g_gui.theme()->drawText(Common::Rect(_x+2+ _leftPadding,_y+2, _x+_leftPadding+getEditRect().width()+2, _y+_h-2), _editString, _state, Graphics::kTextAlignLeft, false, -_editScrollOffset, false, _font);
g_gui.theme()->drawText(Common::Rect(_x+2+ _leftPadding,_y+2, _x+_leftPadding+getEditRect().width()+2, _y+_h-2), _editString, _state, Graphics::kTextAlignLeft, ThemeEngine::kTextInversionNone, -_editScrollOffset, false, _font);
}
Common::Rect EditTextWidget::getEditRect() const {

View file

@ -404,11 +404,15 @@ void ListWidget::drawWidget() {
for (i = 0, pos = _currentPos; i < _entriesPerPage && pos < len; i++, pos++) {
const int y = _y + _topPadding + kLineHeight * i;
const int fontHeight = kLineHeight;
bool inverted = false;
ThemeEngine::TextInversionState inverted = ThemeEngine::kTextInversionNone;
// Draw the selected item inverted, on a highlighted background.
if (_selectedItem == pos)
inverted = true;
if (_selectedItem == pos) {
if (_hasFocus)
inverted = ThemeEngine::kTextInversionFocus;
else
inverted = ThemeEngine::kTextInversion;
}
Common::Rect r(getEditRect());
int pad = _leftPadding;

View file

@ -345,7 +345,7 @@ void PopUpDialog::drawMenuEntry(int entry, bool hilite) {
g_gui.theme()->drawLineSeparator(Common::Rect(x, y, x+w, y+kLineHeight));
} else {
g_gui.theme()->drawText(Common::Rect(x+1, y+2, x+w, y+2+kLineHeight), name, hilite ? ThemeEngine::kStateHighlight : ThemeEngine::kStateEnabled,
Graphics::kTextAlignLeft, false, _leftPadding);
Graphics::kTextAlignLeft, ThemeEngine::kTextInversionNone, _leftPadding);
}
}

View file

@ -167,6 +167,7 @@ static const DrawDataInfo kDrawDataDefaults[] = {
{kDDPlainColorBackground, "plain_bg", true, kDDNone},
{kDDDefaultBackground, "default_bg", true, kDDNone},
{kDDTextSelectionBackground, "text_selection", false, kDDNone},
{kDDTextSelectionFocusBackground, "text_selection_focus", false, kDDNone},
{kDDWidgetBackgroundDefault, "widget_default", true, kDDNone},
{kDDWidgetBackgroundSmall, "widget_small", true, kDDNone},
@ -1018,14 +1019,23 @@ void ThemeEngine::drawTab(const Common::Rect &r, int tabHeight, int tabWidth, co
}
}
void ThemeEngine::drawText(const Common::Rect &r, const Common::String &str, WidgetStateInfo state, Graphics::TextAlign align, bool inverted, int deltax, bool useEllipsis, FontStyle font) {
void ThemeEngine::drawText(const Common::Rect &r, const Common::String &str, WidgetStateInfo state, Graphics::TextAlign align, TextInversionState inverted, int deltax, bool useEllipsis, FontStyle font) {
if (!ready())
return;
if (inverted) {
switch (inverted) {
case kTextInversion:
queueDD(kDDTextSelectionBackground, r);
queueDDText(kTextDataInverted, r, str, false, useEllipsis, align, kTextAlignVCenter, deltax);
return;
case kTextInversionFocus:
queueDD(kDDTextSelectionFocusBackground, r);
queueDDText(kTextDataInverted, r, str, false, useEllipsis, align, kTextAlignVCenter, deltax);
return;
default:
break;
}
switch (font) {

View file

@ -62,6 +62,7 @@ enum DrawData {
kDDPlainColorBackground,
kDDDefaultBackground,
kDDTextSelectionBackground,
kDDTextSelectionFocusBackground,
kDDWidgetBackgroundDefault,
kDDWidgetBackgroundSmall,
@ -156,6 +157,13 @@ public:
typedef State WidgetStateInfo;
//! Text inversion state of the text to be draw
enum TextInversionState {
kTextInversionNone, //!< Indicates that the text should not be drawn inverted
kTextInversion, //!< Indicates that the text should be drawn inverted, but not focused
kTextInversionFocus //!< Indicates thte the test should be drawn inverted, and focused
};
enum ScrollbarState {
kScrollbarStateNo,
kScrollbarStateUp,
@ -302,7 +310,7 @@ public:
void drawDialogBackground(const Common::Rect &r, DialogBackground type, WidgetStateInfo state = kStateEnabled);
void drawText(const Common::Rect &r, const Common::String &str, WidgetStateInfo state = kStateEnabled, Graphics::TextAlign align = Graphics::kTextAlignCenter, bool inverted = false, int deltax = 0, bool useEllipsis = true, FontStyle font = kFontStyleBold);
void drawText(const Common::Rect &r, const Common::String &str, WidgetStateInfo state = kStateEnabled, Graphics::TextAlign align = Graphics::kTextAlignCenter, TextInversionState inverted = kTextInversionNone, int deltax = 0, bool useEllipsis = true, FontStyle font = kFontStyleBold);
void drawChar(const Common::Rect &r, byte ch, const Graphics::Font *font, WidgetStateInfo state = kStateEnabled);

View file

@ -247,7 +247,7 @@ void AboutDialog::drawDialog() {
str++;
if (*str && y > _y && y + g_gui.theme()->getFontHeight() < _y + _h)
g_gui.theme()->drawText(Common::Rect(_x + _xOff, y, _x + _w - _xOff, y + g_gui.theme()->getFontHeight()), str, state, align, false, 0, false);
g_gui.theme()->drawText(Common::Rect(_x + _xOff, y, _x + _w - _xOff, y + g_gui.theme()->getFontHeight()), str, state, align, ThemeEngine::kTextInversionNone, 0, false);
y += _lineHeight;
}
}

View file

@ -1,329 +1,4 @@
"<?xml version = '1.0'?>"
"<render_info> "
"<palette> "
"<color name='black' "
"rgb='0,0,0' "
"/> "
"<color name='lightgrey' "
"rgb='104,104,104' "
"/> "
"<color name='darkgrey' "
"rgb='64,64,64' "
"/> "
"<color name='green' "
"rgb='32,160,32' "
"/> "
"<color name='green2' "
"rgb='0,255,0' "
"/> "
"</palette> "
"<fonts> "
"<font id='text_default' "
"file='default' "
"color='green' "
"/> "
"<font id='text_hover' "
"file='default' "
"color='green2' "
"/> "
"<font id='text_disabled' "
"file='default' "
"color='lightgrey' "
"/> "
"<font id='text_inverted' "
"file='default' "
"color='black' "
"/> "
"<font id='text_button' "
"file='default' "
"color='green' "
"/> "
"<font id='text_button_hover' "
"file='default' "
"color='green2' "
"/> "
"<font id='text_normal' "
"file='default' "
"color='green' "
"/> "
"</fonts> "
"<defaults fill='foreground' fg_color='darkgrey' bg_color='black' shadow='0' bevel_color='lightgrey'/> "
"<drawdata id='text_selection' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='green' "
"/> "
"</drawdata> "
"<drawdata id='mainmenu_bg' cache='false'> "
"<drawstep func='fill' "
"fill='foreground' "
"fg_color='black' "
"/> "
"</drawdata> "
"<drawdata id='special_bg' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"/> "
"</drawdata> "
"<drawdata id='separator' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"height='2' "
"ypos='center' "
"fg_color='lightgrey' "
"/> "
"</drawdata> "
"<drawdata id='scrollbar_base' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"/> "
"</drawdata> "
"<drawdata id='scrollbar_handle_hover' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='green2' "
"/> "
"</drawdata> "
"<drawdata id='scrollbar_handle_idle' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='green' "
"/> "
"</drawdata> "
"<drawdata id='scrollbar_button_idle' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='triangle' "
"fg_color='green' "
"fill='foreground' "
"width='auto' "
"height='auto' "
"xpos='center' "
"ypos='center' "
"orientation='top' "
"/> "
"</drawdata> "
"<drawdata id='scrollbar_button_hover' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='triangle' "
"fg_color='green2' "
"fill='foreground' "
"width='auto' "
"height='auto' "
"xpos='center' "
"ypos='center' "
"orientation='top' "
"/> "
"</drawdata> "
"<drawdata id='tab_active' cache='false'> "
"<text font='text_hover' "
"vertical_align='center' "
"horizontal_align='center' "
"/> "
"<drawstep func='tab' "
"bevel='2' "
"radius='0' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='tab_inactive' cache='false'> "
"<text font='text_default' "
"vertical_align='center' "
"horizontal_align='center' "
"/> "
"<drawstep func='tab' "
"bevel='2' "
"radius='0' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='tab_background' cache='false'> "
"</drawdata> "
"<drawdata id='widget_slider' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='slider_disabled' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='lightgrey' "
"/> "
"</drawdata> "
"<drawdata id='slider_full' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='green' "
"/> "
"</drawdata> "
"<drawdata id='slider_hover' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='green2' "
"/> "
"</drawdata> "
"<drawdata id='widget_small' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='popup_idle' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='triangle' "
"fg_color='green' "
"fill='foreground' "
"width='height' "
"height='auto' "
"xpos='right' "
"ypos='center' "
"orientation='bottom' "
"/> "
"<text font='text_default' "
"vertical_align='center' "
"horizontal_align='left' "
"/> "
"</drawdata> "
"<drawdata id='popup_disabled' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='triangle' "
"fg_color='lightgrey' "
"fill='foreground' "
"width='height' "
"height='auto' "
"xpos='right' "
"ypos='center' "
"orientation='bottom' "
"/> "
"<text font='text_disabled' "
"vertical_align='center' "
"horizontal_align='left' "
"/> "
"</drawdata> "
"<drawdata id='popup_hover' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='triangle' "
"fg_color='green2' "
"fill='foreground' "
"width='height' "
"height='auto' "
"xpos='right' "
"ypos='center' "
"orientation='bottom' "
"/> "
"<text font='text_hover' "
"vertical_align='center' "
"horizontal_align='left' "
"/> "
"</drawdata> "
"<drawdata id='widget_textedit' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='plain_bg' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"/> "
"</drawdata> "
"<drawdata id='caret' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='lightgrey' "
"/> "
"</drawdata> "
"<drawdata id='default_bg' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"/> "
"</drawdata> "
"<drawdata id='button_idle' cache='false'> "
"<text font='text_button' "
"vertical_align='center' "
"horizontal_align='center' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='button_hover' cache='false'> "
"<text font='text_button_hover' "
"vertical_align='center' "
"horizontal_align='center' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='button_disabled' cache='false'> "
"<text font='text_disabled' "
"vertical_align='center' "
"horizontal_align='center' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='checkbox_disabled' cache='false'> "
"<text font='text_disabled' "
"vertical_align='top' "
"horizontal_align='left' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='checkbox_selected' cache='false'> "
"<text font='text_default' "
"vertical_align='top' "
"horizontal_align='left' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='cross' "
"fill='foreground' "
"stroke='2' "
"fg_color='green' "
"/> "
"</drawdata> "
"<drawdata id='checkbox_default' cache='false'> "
"<text font='text_default' "
"vertical_align='top' "
"horizontal_align='left' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='widget_default' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"/> "
"</drawdata> "
"</render_info> "
"<layout_info resolution='-320xY,-256x240'> "
"<globals> "
"<def var='Line.Height' value='16' /> "
@ -1834,3 +1509,334 @@
"</layout> "
"</dialog> "
"</layout_info> "
"<render_info> "
"<palette> "
"<color name='black' "
"rgb='0,0,0' "
"/> "
"<color name='lightgrey' "
"rgb='104,104,104' "
"/> "
"<color name='darkgrey' "
"rgb='64,64,64' "
"/> "
"<color name='green' "
"rgb='32,160,32' "
"/> "
"<color name='green2' "
"rgb='0,255,0' "
"/> "
"</palette> "
"<fonts> "
"<font id='text_default' "
"file='default' "
"color='green' "
"/> "
"<font id='text_hover' "
"file='default' "
"color='green2' "
"/> "
"<font id='text_disabled' "
"file='default' "
"color='lightgrey' "
"/> "
"<font id='text_inverted' "
"file='default' "
"color='black' "
"/> "
"<font id='text_button' "
"file='default' "
"color='green' "
"/> "
"<font id='text_button_hover' "
"file='default' "
"color='green2' "
"/> "
"<font id='text_normal' "
"file='default' "
"color='green' "
"/> "
"</fonts> "
"<defaults fill='foreground' fg_color='darkgrey' bg_color='black' shadow='0' bevel_color='lightgrey'/> "
"<drawdata id='text_selection' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='lightgrey' "
"/> "
"</drawdata> "
"<drawdata id='text_selection_focus' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='green' "
"/> "
"</drawdata> "
"<drawdata id='mainmenu_bg' cache='false'> "
"<drawstep func='fill' "
"fill='foreground' "
"fg_color='black' "
"/> "
"</drawdata> "
"<drawdata id='special_bg' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"/> "
"</drawdata> "
"<drawdata id='separator' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"height='2' "
"ypos='center' "
"fg_color='lightgrey' "
"/> "
"</drawdata> "
"<drawdata id='scrollbar_base' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"/> "
"</drawdata> "
"<drawdata id='scrollbar_handle_hover' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='green2' "
"/> "
"</drawdata> "
"<drawdata id='scrollbar_handle_idle' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='green' "
"/> "
"</drawdata> "
"<drawdata id='scrollbar_button_idle' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='triangle' "
"fg_color='green' "
"fill='foreground' "
"width='auto' "
"height='auto' "
"xpos='center' "
"ypos='center' "
"orientation='top' "
"/> "
"</drawdata> "
"<drawdata id='scrollbar_button_hover' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='triangle' "
"fg_color='green2' "
"fill='foreground' "
"width='auto' "
"height='auto' "
"xpos='center' "
"ypos='center' "
"orientation='top' "
"/> "
"</drawdata> "
"<drawdata id='tab_active' cache='false'> "
"<text font='text_hover' "
"vertical_align='center' "
"horizontal_align='center' "
"/> "
"<drawstep func='tab' "
"bevel='2' "
"radius='0' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='tab_inactive' cache='false'> "
"<text font='text_default' "
"vertical_align='center' "
"horizontal_align='center' "
"/> "
"<drawstep func='tab' "
"bevel='2' "
"radius='0' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='tab_background' cache='false'> "
"</drawdata> "
"<drawdata id='widget_slider' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='slider_disabled' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='lightgrey' "
"/> "
"</drawdata> "
"<drawdata id='slider_full' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='green' "
"/> "
"</drawdata> "
"<drawdata id='slider_hover' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='green2' "
"/> "
"</drawdata> "
"<drawdata id='widget_small' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='popup_idle' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='triangle' "
"fg_color='green' "
"fill='foreground' "
"width='height' "
"height='auto' "
"xpos='right' "
"ypos='center' "
"orientation='bottom' "
"/> "
"<text font='text_default' "
"vertical_align='center' "
"horizontal_align='left' "
"/> "
"</drawdata> "
"<drawdata id='popup_disabled' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='triangle' "
"fg_color='lightgrey' "
"fill='foreground' "
"width='height' "
"height='auto' "
"xpos='right' "
"ypos='center' "
"orientation='bottom' "
"/> "
"<text font='text_disabled' "
"vertical_align='center' "
"horizontal_align='left' "
"/> "
"</drawdata> "
"<drawdata id='popup_hover' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='triangle' "
"fg_color='green2' "
"fill='foreground' "
"width='height' "
"height='auto' "
"xpos='right' "
"ypos='center' "
"orientation='bottom' "
"/> "
"<text font='text_hover' "
"vertical_align='center' "
"horizontal_align='left' "
"/> "
"</drawdata> "
"<drawdata id='widget_textedit' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='plain_bg' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"/> "
"</drawdata> "
"<drawdata id='caret' cache='false'> "
"<drawstep func='square' "
"fill='foreground' "
"fg_color='lightgrey' "
"/> "
"</drawdata> "
"<drawdata id='default_bg' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"/> "
"</drawdata> "
"<drawdata id='button_idle' cache='false'> "
"<text font='text_button' "
"vertical_align='center' "
"horizontal_align='center' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='button_hover' cache='false'> "
"<text font='text_button_hover' "
"vertical_align='center' "
"horizontal_align='center' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='button_disabled' cache='false'> "
"<text font='text_disabled' "
"vertical_align='center' "
"horizontal_align='center' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='checkbox_disabled' cache='false'> "
"<text font='text_disabled' "
"vertical_align='top' "
"horizontal_align='left' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='checkbox_selected' cache='false'> "
"<text font='text_default' "
"vertical_align='top' "
"horizontal_align='left' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"<drawstep func='cross' "
"fill='foreground' "
"stroke='2' "
"fg_color='green' "
"/> "
"</drawdata> "
"<drawdata id='checkbox_default' cache='false'> "
"<text font='text_default' "
"vertical_align='top' "
"horizontal_align='left' "
"/> "
"<drawstep func='bevelsq' "
"bevel='2' "
"fill='none' "
"/> "
"</drawdata> "
"<drawdata id='widget_default' cache='false'> "
"<drawstep func='bevelsq' "
"bevel='2' "
"/> "
"</drawdata> "
"</render_info> "

Binary file not shown.

View file

@ -76,6 +76,13 @@
<defaults fill = 'foreground' fg_color = 'darkgrey' bg_color = 'black' shadow = '0' bevel_color = 'lightgrey'/>
<drawdata id = 'text_selection' cache = 'false'>
<drawstep func = 'square'
fill = 'foreground'
fg_color = 'lightgrey'
/>
</drawdata>
<drawdata id = 'text_selection_focus' cache = 'false'>
<drawstep func = 'square'
fill = 'foreground'
fg_color = 'green'

Binary file not shown.

View file

@ -140,6 +140,13 @@
<!-- Selection (text or list items) -->
<drawdata id = 'text_selection' cache = 'false'>
<drawstep func = 'square'
fill = 'foreground'
fg_color = 'darkgray'
/>
</drawdata>
<drawdata id = 'text_selection_focus' cache = 'false'>
<drawstep func = 'square'
fill = 'foreground'
fg_color = 'bgreen'