improve combobox and menu design

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

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:

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

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

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

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
 

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

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 {

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
     /*

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)

src/framework/luafunctions.cpp

@@ -39,6 +39,8 @@ void Application::registerLuaFunctions()
     g_lua.bindClassMemberFunction<UIWidget>("destroy", &UIWidget::destroy);
     g_lua.bindClassMemberFunction<UIWidget>("setVisible", &UIWidget::setVisible);
     g_lua.bindClassMemberFunction<UIWidget>("setEnabled", &UIWidget::setEnabled);
+    g_lua.bindClassMemberFunction<UIWidget>("setChecked", &UICheckBox::setChecked);
+    g_lua.bindClassMemberFunction<UIWidget>("setOn", &UICheckBox::setOn);
     g_lua.bindClassMemberFunction<UIWidget>("setPressed", &UIWidget::setPressed);
     g_lua.bindClassMemberFunction<UIWidget>("setId", &UIWidget::setId);
     g_lua.bindClassMemberFunction<UIWidget>("setFocusable", &UIWidget::setFocusable);
@@ -52,7 +54,6 @@ void Application::registerLuaFunctions()
     g_lua.bindClassMemberFunction<UIWidget>("setY", &UIWidget::setY);
     g_lua.bindClassMemberFunction<UIWidget>("setWidth", &UIWidget::setWidth);
     g_lua.bindClassMemberFunction<UIWidget>("setHeight", &UIWidget::setHeight);
-    //g_lua.bindClassMemberFunction<UIWidget>("setImage", &UIWidget::setImage);
     g_lua.bindClassMemberFunction<UIWidget>("setIcon", &UIWidget::setIcon);
     g_lua.bindClassMemberFunction<UIWidget>("setOpacity", &UIWidget::setOpacity);
     g_lua.bindClassMemberFunction<UIWidget>("setBackgroundColor", &UIWidget::setBackgroundColor);
@@ -94,6 +95,8 @@ void Application::registerLuaFunctions()
     g_lua.bindClassMemberFunction<UIWidget>("isLast", &UIWidget::isLast);
     g_lua.bindClassMemberFunction<UIWidget>("isAlternate", &UIWidget::isAlternate);
     g_lua.bindClassMemberFunction<UIWidget>("isVisible", &UIWidget::isVisible);
+    g_lua.bindClassMemberFunction<UIWidget>("isOn", &UICheckBox::isOn);
+    g_lua.bindClassMemberFunction<UIWidget>("isChecked", &UICheckBox::isChecked);
     g_lua.bindClassMemberFunction<UIWidget>("isHidden", &UIWidget::isHidden);
     g_lua.bindClassMemberFunction<UIWidget>("isExplicitlyEnabled", &UIWidget::isExplicitlyEnabled);
     g_lua.bindClassMemberFunction<UIWidget>("isExplicitlyVisible", &UIWidget::isExplicitlyVisible);
@@ -206,8 +209,6 @@ void Application::registerLuaFunctions()
     // UICheckBox
     g_lua.registerClass<UICheckBox, UIWidget>();
     g_lua.bindClassStaticFunction<UICheckBox>("create", &UIWidget::create<UICheckBox>);
-    g_lua.bindClassMemberFunction<UICheckBox>("isChecked", &UICheckBox::isChecked);
-    g_lua.bindClassMemberFunction<UICheckBox>("setChecked", &UICheckBox::setChecked);
 
     // UIWindow
     g_lua.registerClass<UIWindow, UIWidget>();

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);
-}

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; }
 

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<bool>());
         else if(node->tag() == "visible")
             setVisible(node->value<bool>());
+        else if(node->tag() == "checked")
+            setChecked(node->value<bool>());
+        else if(node->tag() == "on")
+            setOn(node->value<bool>());
         else if(node->tag() == "focusable")
             setFocusable(node->value<bool>());
         else if(node->tag() == "phantom")

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<false> m_pressed;
     Boolean<false> m_phantom;
     Boolean<false> m_updateEventScheduled;
+    Boolean<false> m_loadingStyle;
+    Boolean<false> m_updateStyleScheduled;
     Boolean<true> m_firstOnStyle;
     Rect m_rect;
     UILayoutPtr m_layout;