From fb20ad1ba17ec33c6e735e0be2867eb99ddafc5a Mon Sep 17 00:00:00 2001 From: Eduardo Bart Date: Thu, 5 Jan 2012 16:02:27 -0200 Subject: [PATCH] improve combobox and menu design --- modules/client_entergame/characterlist.otui | 2 +- modules/core_styles/images/combobox.png | Bin 291 -> 457 bytes modules/core_styles/images/menubox.png | Bin 227 -> 241 bytes modules/core_styles/styles/buttons.otui | 8 +-- modules/core_styles/styles/checkboxes.otui | 12 ++-- modules/core_styles/styles/comboboxes.otui | 61 +++++++++++++++++++- modules/core_styles/styles/popupmenus.otui | 11 ++-- modules/core_widgets/uicombobox.lua | 2 + modules/core_widgets/uipopupmenu.lua | 9 ++- src/framework/const.h | 5 +- src/framework/graphics/borderimage.cpp | 25 ++++---- src/framework/graphics/image.cpp | 2 +- src/framework/luafunctions.cpp | 7 ++- src/framework/ui/uicheckbox.cpp | 11 ---- src/framework/ui/uicheckbox.h | 3 - src/framework/ui/uiwidget.cpp | 33 ++++++++++- src/framework/ui/uiwidget.h | 6 ++ 17 files changed, 137 insertions(+), 60 deletions(-) diff --git a/modules/client_entergame/characterlist.otui b/modules/client_entergame/characterlist.otui index c678ea75..bfbeea74 100644 --- a/modules/client_entergame/characterlist.otui +++ b/modules/client_entergame/characterlist.otui @@ -2,7 +2,7 @@ CharacterListLabel < Label image: /core_styles/images/empty_rect.png font: verdana-11px-monochrome background-color: #00000000 - offset: 2 0 + text-offset: 2 0 focusable: true margin-left: 1 margin-right: 1 diff --git a/modules/core_styles/images/combobox.png b/modules/core_styles/images/combobox.png index 068d7ed906eebcdf8f69777d7268222f43096af3..a630bd06672625c2538b8430c289f6f8a6a8c078 100644 GIT binary patch delta 360 zcmV-u0hj)x0?7lA7Ya}a1^@s6as=6Dks%fd{{a60|De66laW9k3fut&5gRJZ|73lU zXe)mKAW1|)RCwC$+dT@xFc^U0DE=W1UO)tK5fQwAr}qMagNutda1hZt=;&gC#l)r0 zJ63Rb21(Z*Ol$dDlmGGxdqFej^Cr{g~Q+jPFN zl5_M4GIbqtCg>P2$dH@; z#FyjkzY@sT%bCJIR!i#8 delta 193 zcmV;y06zc81ET_v7YY;z1^@s6=FO2Eks%fd000000Qp0^e~~~Q3fl}71rZ<40O0PC zXe)mJdPzhUQ;B;}?>!stBq&udgL#s@OUAQQ+SgG>SUWO~=OF6LZ6&g^85o*+x(AUi=@z#uz8 vmw-VIJUT$;3I{TQ4D!EUd>+65WOoDJ6AclRn+f*g00000NkvXXu0mjf!1PRD diff --git a/modules/core_styles/images/menubox.png b/modules/core_styles/images/menubox.png index 5cca43c6ead9c61be55aac87ada27cb07fa59795..8f660b80203e667016c7c5ab20117f735809f89b 100644 GIT binary patch delta 155 zcmaFN_>pl!T>TwJRzX<~|D#Rv3=9l~o-U3d5r^MiH{^2&5Ma5WXs@W(aOAxB#g5cepBaLA-|RymO$Tmnr$Um64gZD;Uw^>bP0l+XkK DS)4xp delta 141 zcmey!_?U4*T>Whxc|lpD;2#q43=9m(o-U3d5r>mSriT4FZ_v=t+Su6W=;&JPpi^J) z-0BFU0iP}7naesSnjTFuD%tqw>1Xuzopr0FD_qdjJ3c diff --git a/modules/core_styles/styles/buttons.otui b/modules/core_styles/styles/buttons.otui index c801377e..fc168a7c 100644 --- a/modules/core_styles/styles/buttons.otui +++ b/modules/core_styles/styles/buttons.otui @@ -30,22 +30,20 @@ TopButton < UIButton text-translate: 0 0 border-image: source: /core_styles/images/top_button.png - size: 26 26 + clip: 0 0 26 26 border: 3 $hover: border-image: source: /core_styles/images/top_button.png - size: 26 26 - offset: 26 0 + clip: 26 0 26 26 border: 3 $pressed: text-translate: 1 1 border-image: source: /core_styles/images/top_button.png - size: 26 26 - offset: 52 0 + clip: 52 0 26 26 border: 3 $disabled: diff --git a/modules/core_styles/styles/checkboxes.otui b/modules/core_styles/styles/checkboxes.otui index 67552384..dad43c63 100644 --- a/modules/core_styles/styles/checkboxes.otui +++ b/modules/core_styles/styles/checkboxes.otui @@ -12,22 +12,22 @@ CheckBox < UICheckBox $!checked: image: source: /core_styles/images/checkbox.png - coords: 0 0 12 12 + clip: 0 0 12 12 $hover !checked: image: source: /core_styles/images/checkbox.png - coords: 0 12 12 12 + clip: 0 12 12 12 $checked: image: source: /core_styles/images/checkbox.png - coords: 0 24 12 12 + clip: 0 24 12 12 $hover checked: image: source: /core_styles/images/checkbox.png - coords: 0 36 12 12 + clip: 0 36 12 12 $disabled: background-color: #ffffff88 @@ -41,12 +41,12 @@ ColorBox < UICheckBox $checked: image: source: /core_styles/images/colorbox.png - coords: 16 0 16 16 + clip: 16 0 16 16 $!checked: image: source: /core_styles/images/colorbox.png - coords: 0 0 16 16 + clip: 0 0 16 16 ButtonBox < UICheckBox font: verdana-11px-antialised diff --git a/modules/core_styles/styles/comboboxes.otui b/modules/core_styles/styles/comboboxes.otui index a612e632..2323ac5b 100644 --- a/modules/core_styles/styles/comboboxes.otui +++ b/modules/core_styles/styles/comboboxes.otui @@ -1,6 +1,46 @@ -ComboBoxPopupMenuSeparator < PopupMenuSeparator -ComboBoxPopupMenuButton < PopupMenuButton -ComboBoxPopupMenu < PopupMenu +ComboBoxPopupMenuButton < UIButton + font: verdana-11px-antialised + background-color: alpha + color: #aaaaaa + height: 18 + margin-left: 1 + margin-right: 1 + margin-top: 0 + margin-bottom: 0 + + image: + source: /core_styles/images/empty_rect.png + repeated: true + + $hover: + color: #ffffff + background-color: #ffffff44 + + $disabled: + color: #555555 + + $first: + margin-top: 1 + + $last: + margin-bottom: 1 + +ComboBoxPopupMenuSeparator < UIWidget + margin-left: 1 + margin-right: 1 + image: + source: /core_styles/images/combobox.png + repeated: true + clip: 1 59 89 1 + height: 1 + phantom: true + +ComboBoxPopupMenu < UIPopupMenu + border-image: + source: /core_styles/images/combobox.png + clip: 0 60 89 20 + border: 1 + border.top: 0 ComboBox < UIComboBox font: verdana-11px-antialised @@ -12,3 +52,18 @@ ComboBox < UIComboBox source: /core_styles/images/combobox.png border: 1 border.right: 17 + size: 89 20 + + $hover: + border-image: + source: /core_styles/images/combobox.png + border: 1 + border.right: 17 + clip: 0 20 89 20 + + $on: + border-image: + source: /core_styles/images/combobox.png + border: 1 + border.right: 17 + clip: 0 40 89 20 \ No newline at end of file diff --git a/modules/core_styles/styles/popupmenus.otui b/modules/core_styles/styles/popupmenus.otui index db89ac37..c11c5622 100644 --- a/modules/core_styles/styles/popupmenus.otui +++ b/modules/core_styles/styles/popupmenus.otui @@ -5,6 +5,8 @@ PopupMenuButton < UIButton height: 18 margin-left: 3 margin-right: 3 + margin-top: 0 + margin-bottom: 0 image: source: /core_styles/images/empty_rect.png @@ -26,11 +28,12 @@ PopupMenuButton < UIButton PopupMenuSeparator < UIWidget margin-left: 2 margin-right: 2 - image: + border-image: source: /core_styles/images/menubox.png - repeated: true - coords: 3 0 26 3 - height: 3 + border.left: 1 + border.right: 1 + clip: 0 0 32 2 + height: 2 phantom: true PopupMenu < UIPopupMenu diff --git a/modules/core_widgets/uicombobox.lua b/modules/core_widgets/uicombobox.lua index 988ad67f..a6f13e7e 100644 --- a/modules/core_widgets/uicombobox.lua +++ b/modules/core_widgets/uicombobox.lua @@ -33,6 +33,8 @@ function UIComboBox:onMousePress(mousePos, mouseButton) end menu:setWidth(self:getWidth()) menu:display({ x = self:getX(), y = self:getY() + self:getHeight() }) + connect(menu, { onDestroy = function() self:setOn(false) end }) + self:setOn(true) return true end diff --git a/modules/core_widgets/uipopupmenu.lua b/modules/core_widgets/uipopupmenu.lua index ba9c8ae3..8b51053d 100644 --- a/modules/core_widgets/uipopupmenu.lua +++ b/modules/core_widgets/uipopupmenu.lua @@ -10,11 +10,6 @@ function UIPopupMenu.create() return menu end -function UIPopupMenu:destroy() - table.removevalue(displayedMenuList, self) - UIWidget.destroy(self) -end - function UIPopupMenu:display(pos) -- don't display if not options was added if self:getChildCount() == 0 then @@ -45,6 +40,10 @@ function UIPopupMenu:addSeparator() createWidget(self:getStyleName() .. 'Separator', self) end +function UIPopupMenu:onDestroy() + table.removevalue(displayedMenuList, self) +end + function UIPopupMenu:onMousePress(mousePos, mouseButton) -- clicks outside self area destroys the self if not self:containsPoint(mousePos) then diff --git a/src/framework/const.h b/src/framework/const.h index 283541bc..5275e3fb 100644 --- a/src/framework/const.h +++ b/src/framework/const.h @@ -268,8 +268,9 @@ namespace Fw OnState = 64, FirstState = 128, MiddleState = 256, - AlternateState = 512, - LastState = 1024, + LastState = 512, + AlternateState = 1024, + LastWidgetState = 2048, }; enum AppicationFlags { diff --git a/src/framework/graphics/borderimage.cpp b/src/framework/graphics/borderimage.cpp index a156dbb9..66ecc2fd 100644 --- a/src/framework/graphics/borderimage.cpp +++ b/src/framework/graphics/borderimage.cpp @@ -71,7 +71,7 @@ BorderImagePtr BorderImage::loadFromOTML(const OTMLNodePtr& borderImageNode) Rect bottomLeftCorner; Rect bottomRightCorner; Rect center; - Rect subRect; + Rect clipRect; int top, bottom, left, right, border; Size size; Point offset; @@ -81,11 +81,8 @@ BorderImagePtr BorderImage::loadFromOTML(const OTMLNodePtr& borderImageNode) TexturePtr texture = g_textures.getTexture(source); // load basic border confs - size = texture->getSize(); - size = borderImageNode->valueAt("size", size); - offset = borderImageNode->valueAt("offset", offset); border = borderImageNode->valueAt("border", 0); - subRect = Rect(offset, size); + clipRect = borderImageNode->valueAt("clip", Rect(0, 0, texture->getSize())); // load border margins top = bottom = left = right = border; @@ -95,15 +92,15 @@ BorderImagePtr BorderImage::loadFromOTML(const OTMLNodePtr& borderImageNode) right = borderImageNode->valueAt("border.right", right); // calculates border coords - leftBorder = Rect(subRect.left(), subRect.top() + top, left, subRect.height() - top - bottom); - rightBorder = Rect(subRect.right() - right + 1, subRect.top() + top, right, subRect.height() - top - bottom); - topBorder = Rect(subRect.left() + left, subRect.top(), subRect.width() - right - left, top); - bottomBorder = Rect(subRect.left() + left, subRect.bottom() - bottom + 1, subRect.width() - right - left, bottom); - topLeftCorner = Rect(subRect.left(), subRect.top(), left, top); - topRightCorner = Rect(subRect.right() - right + 1, subRect.top(), right, top); - bottomLeftCorner = Rect(subRect.left(), subRect.bottom() - bottom + 1, left, bottom); - bottomRightCorner = Rect(subRect.right() - right + 1, subRect.bottom() - bottom + 1, right, bottom); - center = Rect(subRect.left() + left, subRect.top() + top, subRect.width() - right - left, subRect.height() - top - bottom); + leftBorder = Rect(clipRect.left(), clipRect.top() + top, left, clipRect.height() - top - bottom); + rightBorder = Rect(clipRect.right() - right + 1, clipRect.top() + top, right, clipRect.height() - top - bottom); + topBorder = Rect(clipRect.left() + left, clipRect.top(), clipRect.width() - right - left, top); + bottomBorder = Rect(clipRect.left() + left, clipRect.bottom() - bottom + 1, clipRect.width() - right - left, bottom); + topLeftCorner = Rect(clipRect.left(), clipRect.top(), left, top); + topRightCorner = Rect(clipRect.right() - right + 1, clipRect.top(), right, top); + bottomLeftCorner = Rect(clipRect.left(), clipRect.bottom() - bottom + 1, left, bottom); + bottomRightCorner = Rect(clipRect.right() - right + 1, clipRect.bottom() - bottom + 1, right, bottom); + center = Rect(clipRect.left() + left, clipRect.top() + top, clipRect.width() - right - left, clipRect.height() - top - bottom); // load individual border conf if supplied /* diff --git a/src/framework/graphics/image.cpp b/src/framework/graphics/image.cpp index 05d1da05..63ca9775 100644 --- a/src/framework/graphics/image.cpp +++ b/src/framework/graphics/image.cpp @@ -43,7 +43,7 @@ void Image::loadFromOTML(const OTMLNodePtr& imageNode) // load texture m_texture = g_textures.getTexture(source); - m_textureCoords = imageNode->valueAt("coords", Rect(Point(0,0),m_texture->getSize())); + m_textureCoords = imageNode->valueAt("clip", Rect(0, 0, m_texture->getSize())); // enable texture bilinear filter if(smooth) diff --git a/src/framework/luafunctions.cpp b/src/framework/luafunctions.cpp index b72509ab..fed39515 100644 --- a/src/framework/luafunctions.cpp +++ b/src/framework/luafunctions.cpp @@ -39,6 +39,8 @@ void Application::registerLuaFunctions() g_lua.bindClassMemberFunction("destroy", &UIWidget::destroy); g_lua.bindClassMemberFunction("setVisible", &UIWidget::setVisible); g_lua.bindClassMemberFunction("setEnabled", &UIWidget::setEnabled); + g_lua.bindClassMemberFunction("setChecked", &UICheckBox::setChecked); + g_lua.bindClassMemberFunction("setOn", &UICheckBox::setOn); g_lua.bindClassMemberFunction("setPressed", &UIWidget::setPressed); g_lua.bindClassMemberFunction("setId", &UIWidget::setId); g_lua.bindClassMemberFunction("setFocusable", &UIWidget::setFocusable); @@ -52,7 +54,6 @@ void Application::registerLuaFunctions() g_lua.bindClassMemberFunction("setY", &UIWidget::setY); g_lua.bindClassMemberFunction("setWidth", &UIWidget::setWidth); g_lua.bindClassMemberFunction("setHeight", &UIWidget::setHeight); - //g_lua.bindClassMemberFunction("setImage", &UIWidget::setImage); g_lua.bindClassMemberFunction("setIcon", &UIWidget::setIcon); g_lua.bindClassMemberFunction("setOpacity", &UIWidget::setOpacity); g_lua.bindClassMemberFunction("setBackgroundColor", &UIWidget::setBackgroundColor); @@ -94,6 +95,8 @@ void Application::registerLuaFunctions() g_lua.bindClassMemberFunction("isLast", &UIWidget::isLast); g_lua.bindClassMemberFunction("isAlternate", &UIWidget::isAlternate); g_lua.bindClassMemberFunction("isVisible", &UIWidget::isVisible); + g_lua.bindClassMemberFunction("isOn", &UICheckBox::isOn); + g_lua.bindClassMemberFunction("isChecked", &UICheckBox::isChecked); g_lua.bindClassMemberFunction("isHidden", &UIWidget::isHidden); g_lua.bindClassMemberFunction("isExplicitlyEnabled", &UIWidget::isExplicitlyEnabled); g_lua.bindClassMemberFunction("isExplicitlyVisible", &UIWidget::isExplicitlyVisible); @@ -206,8 +209,6 @@ void Application::registerLuaFunctions() // UICheckBox g_lua.registerClass(); g_lua.bindClassStaticFunction("create", &UIWidget::create); - g_lua.bindClassMemberFunction("isChecked", &UICheckBox::isChecked); - g_lua.bindClassMemberFunction("setChecked", &UICheckBox::setChecked); // UIWindow g_lua.registerClass(); diff --git a/src/framework/ui/uicheckbox.cpp b/src/framework/ui/uicheckbox.cpp index 94e4e446..be090755 100644 --- a/src/framework/ui/uicheckbox.cpp +++ b/src/framework/ui/uicheckbox.cpp @@ -77,14 +77,3 @@ void UICheckBox::onStyleApply(const std::string& styleName, const OTMLNodePtr& s } } } - -bool UICheckBox::isChecked() -{ - return hasState(Fw::CheckedState); -} - -void UICheckBox::setChecked(bool checked) -{ - if(setState(Fw::CheckedState, checked)) - callLuaField("onCheckChange", checked); -} diff --git a/src/framework/ui/uicheckbox.h b/src/framework/ui/uicheckbox.h index aed81e61..e7c92bf1 100644 --- a/src/framework/ui/uicheckbox.h +++ b/src/framework/ui/uicheckbox.h @@ -31,9 +31,6 @@ public: UICheckBox(); void render(); - bool isChecked(); - void setChecked(bool checked); - void setText(const std::string& text) { m_text = text; } std::string getText() { return m_text; } diff --git a/src/framework/ui/uiwidget.cpp b/src/framework/ui/uiwidget.cpp index 3b120c23..7d784ed0 100644 --- a/src/framework/ui/uiwidget.cpp +++ b/src/framework/ui/uiwidget.cpp @@ -69,6 +69,8 @@ void UIWidget::destroy() if(parent->hasChild(asUIWidget())) parent->removeChild(asUIWidget()); } + + callLuaField("onDestroy"); } void UIWidget::render() @@ -200,6 +202,17 @@ void UIWidget::setPressed(bool pressed) } } +void UIWidget::setOn(bool on) +{ + setState(Fw::OnState, on); +} + +void UIWidget::setChecked(bool checked) +{ + if(setState(Fw::CheckedState, checked)) + callLuaField("onCheckChange", checked); +} + void UIWidget::setFocusable(bool focusable) { if(m_focusable != focusable) { @@ -278,8 +291,8 @@ void UIWidget::setRect(const Rect& rect) self->m_updateEventScheduled = false; self->onGeometryChange(oldRect, self->getRect()); }); + m_updateEventScheduled = true; } - m_updateEventScheduled = true; } void UIWidget::setIcon(const std::string& iconFile) @@ -769,8 +782,10 @@ void UIWidget::updateLayout() void UIWidget::applyStyle(const OTMLNodePtr& styleNode) { try { + m_loadingStyle = true; onStyleApply(styleNode->tag(), styleNode); callLuaField("onStyleApply", styleNode->tag(), styleNode); + m_loadingStyle = false; } catch(Exception& e) { logError("Failed to apply style to widget '", m_id, "' style: ", e.what()); } @@ -896,7 +911,7 @@ void UIWidget::updateState(Fw::WidgetState state) void UIWidget::updateStates() { - for(int state = 1; state != Fw::LastState; state <<= 1) + for(int state = 1; state != Fw::LastWidgetState; state <<= 1) updateState((Fw::WidgetState)state); } @@ -912,6 +927,16 @@ void UIWidget::updateChildrenIndexStates() void UIWidget::updateStyle() { + if(m_loadingStyle && !m_updateStyleScheduled) { + UIWidgetPtr self = asUIWidget(); + g_dispatcher.addEvent([self] { + self->m_updateStyleScheduled = false; + self->updateStyle(); + }); + m_updateStyleScheduled = true; + return; + } + if(!m_style) return; @@ -995,6 +1020,10 @@ void UIWidget::onStyleApply(const std::string& styleName, const OTMLNodePtr& sty setEnabled(node->value()); else if(node->tag() == "visible") setVisible(node->value()); + else if(node->tag() == "checked") + setChecked(node->value()); + else if(node->tag() == "on") + setOn(node->value()); else if(node->tag() == "focusable") setFocusable(node->value()); else if(node->tag() == "phantom") diff --git a/src/framework/ui/uiwidget.h b/src/framework/ui/uiwidget.h index 38fa2654..77c136a9 100644 --- a/src/framework/ui/uiwidget.h +++ b/src/framework/ui/uiwidget.h @@ -57,6 +57,8 @@ public: void setVisible(bool visible); void setEnabled(bool enabled); void setPressed(bool pressed); + void setOn(bool on); + void setChecked(bool checked); void setId(const std::string& id) { m_id = id; } void setFocusable(bool focusable); void setPhantom(bool phantom) { m_phantom = phantom; } @@ -112,6 +114,8 @@ public: bool isMiddle() { return hasState(Fw::MiddleState); } bool isLast() { return hasState(Fw::LastState); } bool isAlternate() { return hasState(Fw::AlternateState); } + bool isChecked() { return hasState(Fw::CheckedState); } + bool isOn() { return hasState(Fw::OnState); } bool isVisible(); bool isHidden() { return !isVisible(); } bool isExplicitlyEnabled() { return m_enabled; } @@ -226,6 +230,8 @@ protected: Boolean m_pressed; Boolean m_phantom; Boolean m_updateEventScheduled; + Boolean m_loadingStyle; + Boolean m_updateStyleScheduled; Boolean m_firstOnStyle; Rect m_rect; UILayoutPtr m_layout;