major UIWidget rewrite with new features

2025-11-30 07:26:49 +01:00 · 2012-01-10 20:13:40 -02:00
parent 044213c6cd
commit a1374baee1
83 changed files with 1990 additions and 2010 deletions
--- a/modules/addon_mapeffects/mapeffects.lua
+++ b/modules/addon_mapeffects/mapeffects.lua
@@ -2,13 +2,15 @@ MapEffects = {}

 function MapEffects.init()
 --[[
-  local box = createWidget('ComboBox')
-  box:moveTo({x=100, y=8})
+  local box = createWidget('ComboBox', 'leftButtonsPanel')
+  box:addAnchor(AnchorLeft, 'prev', AnchorRight)
+  box:addAnchor(AnchorTop, 'parent', AnchorTop)
+  box:setMargin(6, 6)
  box:addOption('Normal')
  box:addOption('Bloom')
  box:addOption('TV')
  displayUI(box)
-  ]]--
+]]--
 end

 function MapEffects.terminate()
--- a/modules/addon_pingbar/pingbar.lua
+++ b/modules/addon_pingbar/pingbar.lua
@@ -21,7 +21,7 @@ end

 -- hooked events
 local function onGamePingUpdate(ping)
-  pingLabel:setText('Walk Ping: ' .. ping .. ' ms')
+  pingLabel:setText('Ping: ' .. ping .. ' ms')
 end

 connect(Game, { onWalkPingUpdate = onGamePingUpdate })
--- a/modules/addon_terminal/terminal.otui
+++ b/modules/addon_terminal/terminal.otui
@@ -2,10 +2,10 @@ TerminalLabel < UILabel
  font: terminus-14px-bold
  height: 16

-RectPanel
+Panel
  id: terminalPanel
  background-color: #000000
-  opacity: 216
+  opacity: 0.85
  anchors.fill: parent
  @onEscape: Terminal.hide()

--- a/modules/client_background/background.otui
+++ b/modules/client_background/background.otui
@@ -1,9 +1,8 @@
 Panel
  id: background
-  image:
-    source: /client_background/background.png
-    smooth: true
-    fixed ratio: true
+  image-source: /client_background/background.png
+  image-smooth: true
+  image-fixed-ratio: true
  anchors.top: topMenu.bottom
  anchors.left: parent.left
  anchors.right: parent.right
--- a/modules/client_entergame/characterlist.otui
+++ b/modules/client_entergame/characterlist.otui
@@ -1,12 +1,8 @@
 CharacterListLabel < Label
-  image: /core_styles/images/empty_rect.png
  font: verdana-11px-monochrome
-  background-color: #00000000
+  background-color: alpha
  text-offset: 2 0
  focusable: true
-  margin-left: 1
-  margin-right: 1
-  margin-top: 1

  $focus:
    background-color: #ffffff22
--- a/modules/client_topmenu/topmenu.otui
+++ b/modules/client_topmenu/topmenu.otui
@@ -1,27 +1,22 @@
 TopButton < UIButton
-  background-color: white
  size: 26 26
-  text-translate: 0 0
-  border-image:
-    source: /core_styles/images/top_button.png
-    clip: 0 0 26 26
-    border: 3
+  image-color: white
+  image-source: /core_styles/images/top_button.png
+  image-clip: 0 0 26 26
+  image-border: 3

  $hover:
-    border-image:
-      source: /core_styles/images/top_button.png
-      clip: 26 0 26 26
-      border: 3
+    image-source: /core_styles/images/top_button.png
+    image-clip: 26 0 26 26
+    image-border: 3

  $pressed:
-    text-translate: 1 1
-    border-image:
-      source: /core_styles/images/top_button.png
-      clip: 52 0 26 26
-      border: 3
+    image-source: /core_styles/images/top_button.png
+    image-clip: 52 0 26 26
+    image-border: 3

  $disabled:
-    background-color: #ffffff66
+    image-color: #ffffff66

 TopLeftButton < TopButton
  $first:
--- a/modules/core_lib/globals.lua
+++ b/modules/core_lib/globals.lua
@@ -66,6 +66,9 @@ function createWidget(style, parent)

  local widget = class.create()
  if parent then
+    if type(parent) == 'string' then
+      parent = rootWidget:recursiveGetChildById(parent)
+    end
    parent:addChild(widget)
  end
  widget:setStyle(style)
--- a/modules/core_styles/core_styles.otmod
+++ b/modules/core_styles/core_styles.otmod
@@ -11,6 +11,7 @@ Module
    importStyle 'styles/separators.otui'
    importStyle 'styles/lineedits.otui'
    importStyle 'styles/checkboxes.otui'
+    importStyle 'styles/progressbars.otui'
    importStyle 'styles/windows.otui'
    importStyle 'styles/listboxes.otui'
    importStyle 'styles/items.otui'
--- a/modules/core_styles/icons/say.png
+++ b/modules/core_styles/icons/say.png
--- a/modules/core_styles/icons/whisper.png
+++ b/modules/core_styles/icons/whisper.png
--- a/modules/core_styles/icons/yell.png
+++ b/modules/core_styles/icons/yell.png
--- a/modules/core_styles/images/empty_rect.png
+++ b/modules/core_styles/images/empty_rect.png
--- a/modules/core_styles/images/empty_rounded_rect.png
+++ b/modules/core_styles/images/empty_rounded_rect.png
--- a/modules/core_styles/styles/buttons.otui
+++ b/modules/core_styles/styles/buttons.otui
@@ -1,26 +1,23 @@
 Button < UIButton
  font: verdana-11px-antialised
-  background-color: white
  color: #f0ad4dff
  size: 106 24
-  text-translate: 0 0
+  text-offset: 0 0

-  border-image:
-    source: /core_styles/images/button.png
-    border: 5
+  image-color: white
+  image-source: /core_styles/images/button.png
+  image-border: 5

  $hover:
-    border-image:
-      source: /core_styles/images/button_hover.png
-      border: 5
+    image-source: /core_styles/images/button_hover.png
+    image-border: 5

  $pressed:
-    text-translate: 1 1
-    border-image:
-      source: /core_styles/images/button_down.png
-      border: 5
+    text-offset: 1 1
+    image-source: /core_styles/images/button_down.png
+    image-border: 5

  $disabled:
    color: #f0ad4d88
-    background-color: #ffffff88
+    image-color: #ffffff88

--- a/modules/core_styles/styles/checkboxes.otui
+++ b/modules/core_styles/styles/checkboxes.otui
@@ -2,41 +2,38 @@ CheckBox < UICheckBox
  size: 12 12
  box-size: 12 12
  text-align: left
-  text-offset: 16 -1
+  text-offset: 16 0
  color: #aaaaaa
-  background-color: #ffffffff
+  image-color: #ffffffff
+  image-rect: 0 0 12 12

  $hover:
    color: #cccccc

  $!checked:
-    image:
-      source: /core_styles/images/checkbox.png
-      clip: 0 0 12 12
+    image-source: /core_styles/images/checkbox.png
+    image-clip: 0 0 12 12

  $hover !checked:
-    image:
-      source: /core_styles/images/checkbox.png
-      clip: 0 12 12 12
+    image-source: /core_styles/images/checkbox.png
+    image-clip: 0 12 12 12

  $checked:
-    image:
-      source: /core_styles/images/checkbox.png
-      clip: 0 24 12 12
+    image-source: /core_styles/images/checkbox.png
+    image-clip: 0 24 12 12

  $hover checked:
-    image:
-      source: /core_styles/images/checkbox.png
-      clip: 0 36 12 12
+    image-source: /core_styles/images/checkbox.png
+    image-clip: 0 36 12 12

  $disabled:
-    background-color: #ffffff88
+    image-color: #ffffff88
    color: #aaaaaa88

 ColorBox < UICheckBox
  size: 16 16
  box-size: 16 16
-  background-color: #ffffffff
+  image-color: #ffffffff

  $checked:
    image:
@@ -50,28 +47,25 @@ ColorBox < UICheckBox

 ButtonBox < UICheckBox
  font: verdana-11px-antialised
-  background-color: white
  color: #f0ad4dff
  size: 106 24
  box-size: 106 24
  text-offset: 0 0
  text-align: center

-  border-image:
-    source: /core_styles/images/button.png
-    border: 5
+  image-color: white
+  image-source: /core_styles/images/button.png
+  image-border: 5

  $hover:
-    border-image:
-      source: /core_styles/images/button_hover.png
-      border: 5
+    image-source: /core_styles/images/button_hover.png
+    image-border: 5

  $checked:
    text-offset: 1 1
-    border-image:
-      source: /core_styles/images/button_down.png
-      border: 5
+    image-source: /core_styles/images/button_down.png
+    image-border: 5

  $disabled:
    color: #f0ad4d88
-    background-color: #ffffff88
+    image-color: #ffffff88
--- a/modules/core_styles/styles/comboboxes.otui
+++ b/modules/core_styles/styles/comboboxes.otui
@@ -1,6 +1,6 @@
 ComboBoxPopupMenuButton < UIButton
  font: verdana-11px-antialised
-  background-color: alpha
+  image-color: alpha
  text-align: left
  text-offset: 2 0
  color: #aaaaaa
@@ -9,10 +9,7 @@ ComboBoxPopupMenuButton < UIButton
  margin-right: 1
  margin-top: 0
  margin-bottom: 0
-
-  image:
-    source: /core_styles/images/empty_rect.png
-    repeated: true
+  background-color: white

  $hover:
    color: #ffffff
@@ -30,19 +27,17 @@ ComboBoxPopupMenuButton < UIButton
 ComboBoxPopupMenuSeparator < UIWidget
  margin-left: 1
  margin-right: 1
-  image:
-    source: /core_styles/images/combobox.png
-    repeated: true
+  image-source: /core_styles/images/combobox.png
+  image-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
+  image-source: /core_styles/images/combobox.png
+  image-clip: 0 60 89 20
+  image-border: 1
+  image-border-top: 0

 ComboBox < UIComboBox
  font: verdana-11px-antialised
@@ -50,22 +45,19 @@ ComboBox < UIComboBox
  size: 86 20
  text-offset: 3 0
  text-align: left
-  border-image:
-    source: /core_styles/images/combobox.png
-    border: 1
-    border.right: 17
-    size: 89 20
+  image-source: /core_styles/images/combobox.png
+  image-border: 1
+  image-border-right: 17
+  image-clip: 0 0 89 20

  $hover:
-    border-image:
-      source: /core_styles/images/combobox.png
-      border: 1
-      border.right: 17
-      clip: 0 20 89 20
+    image-source: /core_styles/images/combobox.png
+    image-border: 1
+    image-border-right: 17
+    image-clip: 0 20 89 20

  $on:
-    border-image:
-      source: /core_styles/images/combobox.png
-      border: 1
-      border.right: 17
-      clip: 0 40 89 20
+    image-source: /core_styles/images/combobox.png
+    image-border: 1
+    image-border-right: 17
+    image-clip: 0 40 89 20
--- a/modules/core_styles/styles/creatures.otui
+++ b/modules/core_styles/styles/creatures.otui
@@ -1,6 +1,5 @@
 Creature < UICreature
  size: 66 66
  padding: 1
-  border-image:
-    source: /core_styles/images/panel_flat.png
-    border: 1
+  image-source: /core_styles/images/panel_flat.png
+  image-border: 1
--- a/modules/core_styles/styles/items.otui
+++ b/modules/core_styles/styles/items.otui
@@ -1,6 +1,5 @@
 Item < UIItem
  size: 34 34
  padding: 1
-  border-image:
-    source: /core_styles/images/panel_flat.png
-    border: 1
+  image-source: /core_styles/images/panel_flat.png
+  image-border: 1
--- a/modules/core_styles/styles/lineedits.otui
+++ b/modules/core_styles/styles/lineedits.otui
@@ -3,9 +3,8 @@ LineEdit < UILineEdit
  color: #aaaaaa
  size: 86 20
  text-margin: 3
-  border-image:
-    source: /core_styles/images/panel_flat.png
-    border: 1
+  image-source: /core_styles/images/panel_flat.png
+  image-border: 1

  $disabled:
    color: #aaaaaa88
--- a/modules/core_styles/styles/listboxes.otui
+++ b/modules/core_styles/styles/listboxes.otui
@@ -1,5 +1,5 @@
 TextList < UIWidget
  layout: verticalBox
-  border-image:
-    source: /core_styles/images/panel_flat.png
-    border: 4
+  border-width: 1
+  border-color: #1d222b
+  background-color: #222833
--- a/modules/core_styles/styles/panels.otui
+++ b/modules/core_styles/styles/panels.otui
@@ -1,34 +1,26 @@
 Panel < UIWidget
  phantom: true

-RectPanel < UIWidget
-  image: /core_styles/images/empty_rect.png
-
 FlatPanel < Panel
-  border-image:
-    source: /core_styles/images/panel_flat.png
-    border: 1
+  image-source: /core_styles/images/panel_flat.png
+  image-border: 1

 TopPanel < Panel
  height: 36
-  image:
-    source: /core_styles/images/top_panel.png
-    repeated: true
+  image-source: /core_styles/images/top_panel.png
+  image-repeated: true

 InterfacePanel < Panel
  focusable: false
-  border-image:
-    source: /core_styles/images/interface_panel.png
-    border: 4
+  image-source: /core_styles/images/interface_panel.png
+  image-border: 4

 InterfacePanel2 < Panel
  focusable: false
-  border-image:
-    source: /core_styles/images/interface_panel2.png
-    border: 4
+  image-source: /core_styles/images/interface_panel2.png
+  image-border: 4

 Map< UIMap
  padding: 4
-  border-image:
-    source: /core_styles/images/map_panel.png
-    border: 4
+  image-source: /core_styles/images/map_panel.png
+  image-border: 4
--- a/modules/core_styles/styles/popupmenus.otui
+++ b/modules/core_styles/styles/popupmenus.otui
@@ -1,16 +1,13 @@
 PopupMenuButton < UIButton
  font: verdana-11px-antialised
-  background-color: alpha
+  image-color: alpha
  color: #aaaaaa
  height: 18
  margin-left: 3
  margin-right: 3
  margin-top: 0
  margin-bottom: 0
-
-  image:
-    source: /core_styles/images/empty_rect.png
-    repeated: true
+  background-color: alpha

  $hover:
    color: #ffffff
@@ -28,16 +25,15 @@ PopupMenuButton < UIButton
 PopupMenuSeparator < UIWidget
  margin-left: 2
  margin-right: 2
-  border-image:
-    source: /core_styles/images/menubox.png
-    border.left: 1
-    border.right: 1
-    clip: 0 0 32 2
+  image-source: /core_styles/images/menubox.png
+  image-border-left: 1
+  image-border-right: 1
+  image-clip: 0 0 32 2
  height: 2
  phantom: true

 PopupMenu < UIPopupMenu
  width: 50
  border-image:
-    source: /core_styles/images/menubox.png
-    border: 3
+  image-source: /core_styles/images/menubox.png
+  image-border: 3
--- a/modules/core_styles/styles/progressbars.otui
+++ b/modules/core_styles/styles/progressbars.otui
@@ -0,0 +1,4 @@
+ProgressBar < UIProgressBar
+  height: 15
+  background-color: red
+  border: 1 black
--- a/modules/core_styles/styles/separators.otui
+++ b/modules/core_styles/styles/separators.otui
@@ -1,7 +1,6 @@
 HorizontalSeparator < UIWidget
-  border-image:
-    source: /core_styles/images/horizontal_separator.png
-    border.top: 2
+  image-source: /core_styles/images/horizontal_separator.png
+  image-border.top: 2
  height: 2
  phantom: true
  focusable: false
--- a/modules/core_styles/styles/tabbars.otui
+++ b/modules/core_styles/styles/tabbars.otui
@@ -0,0 +1,5 @@
+TabBar < UITabBar
+TabBarTabButton < UIButton
+TabBarCloseButton < UIButton
+TabBarPrevButton < UIButton
+TabBarNextButton < UIButton
--- a/modules/core_styles/styles/windows.otui
+++ b/modules/core_styles/styles/windows.otui
@@ -1,20 +1,18 @@
 Window < UIWindow
  font: verdana-11px-antialised
  size: 200 200
-  opacity: 255
+  opacity: 1
  color: white
-  background-color: white
  head-height: 20
  head-text-align: center
  move-policy: free
  stackable: true
-  border-image:
-    source: /core_styles/images/window.png
-    border: 4
-    border.top: 20
+  image-source: /core_styles/images/window.png
+  image-border: 4
+  image-border-top: 20

  $pressed:
-    opacity: 192
+    opacity: 0.75

  $disabled:
    color: #aaaaaa88
@@ -28,10 +26,9 @@ MiniWindow < UIWindow
  margin-left: 6
  margin-right: 6
  move-policy: free updated
-  border-image:
-    source: /core_styles/images/mini_window.png
-    border: 4
-    border.top: 25
+  image-source: /core_styles/images/mini_window.png
+  image-border: 4
+  image-border-top: 25

 MainWindow < Window
  anchors.centerIn: parent
--- a/modules/core_widgets/core_widgets.otmod
+++ b/modules/core_widgets/core_widgets.otmod
@@ -5,10 +5,12 @@ Module
  website: https://github.com/edubart/otclient

  onLoad: |
-    require 'tooltip/tooltip'
-    require 'messagebox/messagebox'
    require 'uiwidget'
    require 'uibutton'
    require 'uilabel'
+    require 'uicheckbox'
    require 'uicombobox'
-    require 'uipopupmenu'
+    require 'uiprogressbar'
+    require 'uipopupmenu'
+    require 'tooltip/tooltip'
+    require 'messagebox/messagebox'
--- a/modules/core_widgets/tooltip/tooltip.lua
+++ b/modules/core_widgets/tooltip/tooltip.lua
@@ -13,7 +13,7 @@ local function moveToolTip(tooltip)
  else
    pos.x = pos.x + 10
  end
-  tooltip:moveTo(pos)
+  tooltip:setPos(pos)
 end

 -- public functions
@@ -28,7 +28,7 @@ function ToolTip.display(text)
    local size = label:getSize()
    size.width = size.width + 4
    size.height = size.height + 4
-    currentToolTip:resize(size)
+    currentToolTip:setSize(size)
    moveToolTip(currentToolTip)
  end
 end
--- a/modules/core_widgets/tooltip/tooltip.otui
+++ b/modules/core_widgets/tooltip/tooltip.otui
@@ -1,4 +1,4 @@
-RectPanel
+Panel
  background-color: #111111bb
  size: 200 200
  id: toolTip
--- a/modules/core_widgets/uicheckbox.lua
+++ b/modules/core_widgets/uicheckbox.lua
@@ -3,6 +3,12 @@ UICheckBox = extends(UIWidget)
 function UICheckBox.create()
  local checkbox = UICheckBox.internalCreate()
  checkbox:setFocusable(false)
-  checkbox:setAlign(AlignLeft)
+  checkbox:setTextAlign(AlignLeft)
  return checkbox
 end
+
+function UICheckBox:onMouseRelease(mousePos, mouseButton)
+  if self:isPressed() and self:containsPoint(mousePos) then
+    self:setChecked(not self:isChecked())
+  end
+end
--- a/modules/core_widgets/uiprogressbar.lua
+++ b/modules/core_widgets/uiprogressbar.lua
@@ -0,0 +1,19 @@
+UIProgressBar = extends(UIWidget)
+
+function UIProgressBar.create()
+  local progressbar = UIProgressBar.internalCreate()
+  progressbar:setFocusable(false)
+  progressbar:setPhantom(true)
+  progressbar.percent = 100
+  return progressbar
+end
+
+function UIProgressBar:setPercent(percent)
+  self:setBackgroundHeight(self:getHeight())
+  self:setBackgroundWidth((percent * self:getWidth())/100)
+  self.percent = percent
+end
+
+function UIProgressBar:getPercent()
+  return self.percent
+end
--- a/modules/core_widgets/uitabbar.lua
+++ b/modules/core_widgets/uitabbar.lua
@@ -0,0 +1 @@
+UITabBar = extends(UIWidget)
--- a/modules/core_widgets/uiwidget.lua
+++ b/modules/core_widgets/uiwidget.lua
@@ -1,19 +1,19 @@
 function UIWidget:setMargin(...)
-    local params = {...}
-    if #params == 1 then
-        self:setMarginTop(params[1])
-        self:setMarginRight(params[1])
-        self:setMarginBottom(params[1])
-        self:setMarginLeft(params[1])
-    elseif #params == 2 then
-        self:setMarginTop(params[1])
-        self:setMarginRight(params[2])
-        self:setMarginBottom(params[1])
-        self:setMarginLeft(params[2])
-    elseif #params == 4 then
-        self:setMarginTop(params[1])
-        self:setMarginRight(params[2])
-        self:setMarginBottom(params[3])
-        self:setMarginLeft(params[4])
-    end
+  local params = {...}
+  if #params == 1 then
+    self:setMarginTop(params[1])
+    self:setMarginRight(params[1])
+    self:setMarginBottom(params[1])
+    self:setMarginLeft(params[1])
+  elseif #params == 2 then
+    self:setMarginTop(params[1])
+    self:setMarginRight(params[2])
+    self:setMarginBottom(params[1])
+    self:setMarginLeft(params[2])
+  elseif #params == 4 then
+    self:setMarginTop(params[1])
+    self:setMarginRight(params[2])
+    self:setMarginBottom(params[3])
+    self:setMarginLeft(params[4])
+  end
 end
--- a/modules/game_console/console.otui
+++ b/modules/game_console/console.otui
@@ -3,6 +3,27 @@ ConsoleLabel < UILabel
  height: 14
  color: yellow

+SayModeButton < UIButton
+  size: 26 26
+  icon: /core_styles/icons/say.png
+  image-source: /core_styles/images/top_button.png
+  image-color: white
+  image-clip: 0 0 26 26
+  image-border: 3
+
+  $hover:
+    image-source: /core_styles/images/top_button.png
+      clip: 26 0 26 26
+      border: 3
+
+  $pressed:
+    image-source: /core_styles/images/top_button.png
+    image-clip: 52 0 26 26
+    image-border: 3
+
+  $disabled:
+    image-color: #ffffff66
+
 Panel
  id: consolePanel
  anchors.fill: parent
@@ -22,9 +43,17 @@ Panel
      align-bottom: true
    focusable: false

+  SayModeButton
+    id: sayModeButton
+    size: 20 20
+    anchors.left: parent.left
+    anchors.bottom: parent.bottom
+    margin-left: 6
+    margin-bottom: 6
+
  LineEdit
    id: consoleLineEdit
-    anchors.left: parent.left
+    anchors.left: sayModeButton.right
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin-right: 6
--- a/modules/game_healthbar/healthbar.otui
+++ b/modules/game_healthbar/healthbar.otui
@@ -1,15 +1,13 @@
-HealthBar < UIProgressBar
+HealthBar < ProgressBar
  id: healthBar
-  color: black
  height: 15
  background-color: red
  anchors.top: parent.top
  anchors.left: parent.left
  anchors.right: parent.right

-ManaBar < UIProgressBar
+ManaBar < ProgressBar
  id: manaBar
-  color: black
  height: 15
  background-color: blue
  anchors.bottom: parent.bottom
--- a/modules/game_inventory/inventory.otui
+++ b/modules/game_inventory/inventory.otui
@@ -90,9 +90,8 @@ UIWindow

    text-align: center

-    border-image:
-      source: /core_styles/images/panel_flat.png
-      border: 1
+    image-source: /core_styles/images/panel_flat.png
+    image-border: 1

  GameLabel
    id: capacity
@@ -104,7 +103,6 @@ UIWindow

    text-align: center

-    border-image:
-      source: /core_styles/images/panel_flat.png
-      border: 1
+    image-source: /core_styles/images/panel_flat.png
+    image-border: 1

--- a/modules/game_skills/skills.otui
+++ b/modules/game_skills/skills.otui
@@ -22,9 +22,8 @@ SkillValueLabel < GameLabel
  anchors.bottom: parent.bottom
  anchors.left: prev.left

-SkillPercentPanel < UIProgressBar
+SkillPercentPanel < ProgressBar
  id: percent
-  color: black
  background-color: green
  height: 5
  margin-top: 15
@@ -36,7 +35,7 @@ SkillPercentPanel < UIProgressBar
 MiniWindow
  id: skillWindow
  title: Skills
-  size: 200 400
+  size: 200 310

  Panel
    id: skillPanel
@@ -60,7 +59,7 @@ MiniWindow
        text: Level
      SkillValueLabel
      SkillPercentPanel
-        background-color: red
+        image-color: red

    SkillButton
      id: health
@@ -103,7 +102,7 @@ MiniWindow
        text: Magic Level
      SkillValueLabel
      SkillPercentPanel
-        background-color: red
+        image-color: red

    SkillButton
      id: skillId0
--- a/modules/game_viplist/viplist.otui
+++ b/modules/game_viplist/viplist.otui
@@ -8,11 +8,11 @@ MiniWindow
  id: vipWindow
  title: VIP List

-  TextList
+  UIWidget
    id: vipList
-    border-image: ~
+    layout: verticalBox
    anchors.fill: parent
-    margin-top: 26
+    margin-top: 27
    margin-bottom: 6
    margin-left: 6
    margin-right: 6