expand skills percent progress bar

modules/skills/skills.lua

@@ -17,13 +17,18 @@ function Skills.create()
 
   -- create skills
   for i=1,#skills,1 do
+    local skillButton = UIButton.create()
+    skillPanel:addChild(skillButton)
+    skillButton:setStyle('SkillButton')
+
     local nameLabel = UILabel.create()
-    skillPanel:addChild(nameLabel)
+    skillButton :addChild(nameLabel)
     nameLabel:setStyle('SkillNameLabel')
     nameLabel:setText(skills[i])
+    nameLabel:resizeToText()
 
     local levelLabel = UILabel.create()
-    skillPanel:addChild(levelLabel)
+    skillButton :addChild(levelLabel)
     levelLabel:setStyle('SkillLevelLabel')
     levelLabel:setId('skillLevelId' .. i)
     levelLabel:setText('0')
@@ -32,6 +37,12 @@ function Skills.create()
     skillPanel:addChild(percentBar)
     percentBar:setStyle('SkillPercentPanel')
     percentBar:setId('skillPercentId' .. i)
+
+    skillButton.onClick = function(self)
+      percentBar:setVisible(not percentBar:isVisible())
+      self:updateParentLayout()
+      return true
+    end
   end
 end
 
@@ -42,9 +53,9 @@ end
 
 -- hooked events
 function Game.onSkillUpdate(id, level, percent)
-  local skillPanel = skillWindow:getChildById('skillPanel')
+  local skillPanel = skillWindow:recursiveGetChildById('skillPanel')
 
-  local levelLabel = skillPanel:getChildById('skillLevelId' .. (id + 1))
+  local levelLabel = skillPanel:recursiveGetChildById('skillLevelId' .. (id + 1))
   levelLabel:setText(level)
 
   local percentBar = skillPanel:getChildById('skillPercentId' .. (id + 1))

modules/skills/skills.otui

@@ -1,24 +1,23 @@
 SkillFirstWidget < UIWidget
-  anchors.top: parent.top
-
-SkillNameLabel < Label
-  font: verdana-11px-monochrome
 
+SkillButton < UIButton
+  height: 14
   margin.top: 4
   margin.left: 10
   margin.right: 10
-  anchors.top: prev.bottom
+
+SkillNameLabel < Label
+  font: verdana-11px-monochrome
   anchors.left: parent.left
-  anchors.right: parent.right
+  anchors.top: parent.top
+  anchors.bottom: parent.bottom
 
 SkillLevelLabel < Label
   font: verdana-11px-monochrome
   align: right
-  margin.left: 10
-  margin.right: 10
-  anchors.top: prev.top
-  anchors.left: parent.left
   anchors.right: parent.right
+  anchors.top: parent.top
+  anchors.bottom: parent.bottom
 
 SkillPercentPanel < UIProgressBar
   color: black
@@ -28,9 +27,6 @@ SkillPercentPanel < UIProgressBar
   margin.top: 3
   margin.left: 10
   margin.right: 10
-  anchors.top: prev.bottom
-  anchors.left: parent.left
-  anchors.right: parent.right
 
 MiniWindow
   id: skillWindow
@@ -44,3 +40,4 @@ MiniWindow
     margin.bottom: 3
     margin.left: 3
     margin.right: 3
+    layout: verticalBox