styles adjustment

TODO

@@ -40,7 +40,7 @@
 [bart] reapply anchor styles when adding new childs
 [bart] ui text selection
 [bart] implement ui window moving policies
-
+make set of background/icon/image width alone work
 break window anchors when moving
 
 == Client modules
@@ -89,14 +89,12 @@ break window anchors when moving
 
 ===== KNOWN BUGS
 2x2 corpses is drawn above players
-creatures with invisible effect is not rendered correctly
 animatedtext is displayed in non visible floors
 attack while walking cancels the walk
+trying to walking in follow doesn't cancel de walk
 if a spell is used while pressing arrows keys the walk is canceled and it doesnt starts walking again
 game map text message boxes is not displayed like tibia
 name/shields doesnt follow the creature when walking on parcels
 hotkeys wont work with caps lock
 hotkeys works while windows are locked, it shouldnt
-
+some animated hits are displayed as 2 hits instead of one
--- current todo
-allow usage of background width alone

modules/client_about/about.otui

@@ -7,8 +7,6 @@ MainWindow
     size: 208 129
     anchors.left: parent.left
     anchors.top: parent.top
-    margin-top: 32
-    margin-left: 18
 
     Label
       text-align: center
@@ -46,16 +44,12 @@ MainWindow
   HorizontalSeparator
     anchors.left: parent.left
     anchors.right: parent.right
-    anchors.bottom: parent.bottom
+    anchors.top: prev.bottom
-    margin-bottom: 40
+    margin-top: 12
-    margin-left: 13
-    margin-right: 13
 
   Button
     text: Ok
     size: 46 24
-    anchors.left: parent.left
+    anchors.right: parent.right
-    anchors.top: parent.top
+    anchors.bottom: parent.bottom
-    margin-top: 191
-    margin-left: 188
     @onClick: self:getParent():destroy()

modules/client_entergame/characterlist.otui

@@ -19,10 +19,7 @@ MainWindow
     id: characterList
     anchors.fill: parent
     anchors.bottom: next.top
-    margin-top: 30
     margin-bottom: 5
-    margin-left: 16
-    margin-right: 16
     padding: 1
     focusable: false
 
@@ -34,7 +31,6 @@ MainWindow
     anchors.left: parent.left
     anchors.right: parent.right
     anchors.bottom: separator.top
-    margin-left: 16
     margin-bottom: 5
 
   HorizontalSeparator
@@ -42,8 +38,6 @@ MainWindow
     anchors.left: parent.left
     anchors.right: parent.right
     anchors.bottom: next.top
-    margin-left: 16
-    margin-right: 16
     margin-bottom: 10
 
   //CheckBox
@@ -63,8 +57,7 @@ MainWindow
     width: 64
     anchors.right: next.left
     anchors.bottom: parent.bottom
-    margin-bottom: 16
+    margin-right: 10
-    margin-right: 16
     @onClick: CharacterList.doLogin()
 
   Button
@@ -73,6 +66,4 @@ MainWindow
     width: 64
     anchors.right: parent.right
     anchors.bottom: parent.bottom
-    margin-bottom: 16
-    margin-right: 16
     @onClick: CharacterList.destroy()

modules/client_entergame/entergame.otui

@@ -9,8 +9,6 @@ MainWindow
     text: Account name
     anchors.left: parent.left
     anchors.top: parent.top
-    margin-left: 18
-    margin-top: 28
 
   LineEdit
     id: accountNameLineEdit
@@ -18,8 +16,6 @@ MainWindow
     anchors.right: parent.right
     anchors.top: prev.bottom
     margin-top: 2
-    margin-left: 18
-    margin-right: 18
 
   LargerLabel
     text: Password
@@ -33,8 +29,6 @@ MainWindow
     anchors.right: parent.right
     anchors.top: prev.bottom
     margin-top: 2
-    margin-left: 18
-    margin-right: 18
 
   LargerLabel
     id: serverLabel
@@ -76,8 +70,6 @@ MainWindow
     anchors.right: parent.right
     anchors.top: prev.bottom
     margin-top: 10
-    margin-left: 18
-    margin-right: 18
     @onCheckChange: self:getParent():getChildById('autoLoginBox'):setEnabled(self:isChecked())
 
   CheckBox
@@ -88,17 +80,14 @@ MainWindow
     anchors.left: parent.left
     anchors.right: parent.right
     anchors.top: prev.bottom
-    margin-top: 8
+    margin-top: 2
-    margin-left: 18
-    margin-right: 18
 
   Button
     text: Ok
     width: 64
     anchors.right: next.left
     anchors.bottom: parent.bottom
-    margin-bottom: 16
+    margin-right: 10
-    margin-right: 16
     @onClick: EnterGame.doLogin()
 
   Button
@@ -106,6 +95,4 @@ MainWindow
     width: 64
     anchors.right: parent.right
     anchors.bottom: parent.bottom
-    margin-bottom: 16
-    margin-right: 16
     @onClick: EnterGame.hide()

modules/client_options/options.otui

@@ -1,25 +1,23 @@
 OptionCheckBox < CheckBox
-  margin-left: 18
-  margin-right: 18
   @onCheckChange: Options.changeOption(self:getId(), self:isChecked())
   @onSetup: self:setChecked(Options[self:getId()])
 
   $first:
-    margin-top: 28
     anchors.left: parent.left
     anchors.right: parent.right
     anchors.top: parent.top
 
   $middle:
-    margin-top: 10
     anchors.left: parent.left
     anchors.right: parent.right
     anchors.top: prev.bottom
+    margin-top: 2
 
 MainWindow
   id: optionsWindow
   text: Options
-  size: 286 280
+  size: 286 230
+
   @onEnter: Options.hide()
   @onEscape: Options.hide()
 
@@ -59,6 +57,7 @@ MainWindow
   OptionCheckBox
     id: showLevelsInConsole
     text: Show levels in console
+
   //OptionCheckBox
   //  id: showPrivateMessagesInConsole
   //  text: Show private messages in console
@@ -68,6 +67,4 @@ MainWindow
     width: 64
     anchors.right: parent.right
     anchors.bottom: parent.bottom
-    margin-right: 10
-    margin-bottom: 10
     @onClick: Options.hide()

modules/core_styles/styles/buttons.otui

@@ -3,19 +3,16 @@ Button < UIButton
   color: #f0ad4dff
   size: 106 24
   text-offset: 0 0
-
   image-color: white
   image-source: /core_styles/images/button.png
   image-border: 5
 
   $hover:
     image-source: /core_styles/images/button_hover.png
-    image-border: 5
 
   $pressed:
     text-offset: 1 1
     image-source: /core_styles/images/button_down.png
-    image-border: 5
 
   $disabled:
     color: #f0ad4d88

modules/core_styles/styles/checkboxes.otui

@@ -1,29 +1,26 @@
 CheckBox < UICheckBox
-  size: 12 12
+  size: 16 16
-  box-size: 12 12
   text-align: left
   text-offset: 16 0
   color: #aaaaaa
   image-color: #ffffffff
   image-rect: 0 0 12 12
+  image-offset: 0 2
+  image-source: /core_styles/images/checkbox.png
 
   $hover:
     color: #cccccc
 
   $!checked:
-    image-source: /core_styles/images/checkbox.png
     image-clip: 0 0 12 12
 
   $hover !checked:
-    image-source: /core_styles/images/checkbox.png
     image-clip: 0 12 12 12
 
   $checked:
-    image-source: /core_styles/images/checkbox.png
     image-clip: 0 24 12 12
 
   $hover checked:
-    image-source: /core_styles/images/checkbox.png
     image-clip: 0 36 12 12
 
   $disabled:
@@ -32,39 +29,31 @@ CheckBox < UICheckBox
 
 ColorBox < UICheckBox
   size: 16 16
-  box-size: 16 16
   image-color: #ffffffff
+  image-source: /core_styles/images/colorbox.png
 
   $checked:
-    image:
+    image-clip: 16 0 16 16
-      source: /core_styles/images/colorbox.png
-      clip: 16 0 16 16
 
   $!checked:
-    image:
+    image-clip: 0 0 16 16
-      source: /core_styles/images/colorbox.png
-      clip: 0 0 16 16
 
 ButtonBox < UICheckBox
   font: verdana-11px-antialised
   color: #f0ad4dff
   size: 106 24
-  box-size: 106 24
   text-offset: 0 0
   text-align: center
-
-  image-color: white
   image-source: /core_styles/images/button.png
+  image-color: white
   image-border: 5
 
   $hover:
     image-source: /core_styles/images/button_hover.png
-    image-border: 5
 
   $checked:
     text-offset: 1 1
     image-source: /core_styles/images/button_down.png
-    image-border: 5
 
   $disabled:
     color: #f0ad4d88

modules/core_styles/styles/comboboxes.otui

@@ -1,14 +1,9 @@
 ComboBoxPopupMenuButton < UIButton
+  height: 18
   font: verdana-11px-antialised
-  image-color: alpha
   text-align: left
   text-offset: 2 0
   color: #aaaaaa
-  height: 18
-  margin-left: 1
-  margin-right: 1
-  margin-top: 0
-  margin-bottom: 0
   background-color: white
 
   $hover:
@@ -18,18 +13,10 @@ ComboBoxPopupMenuButton < UIButton
   $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
   image-repeated: true
-    clip: 1 59 89 1
+  image-clip: 1 59 89 1
   height: 1
   phantom: true
 
@@ -38,6 +25,7 @@ ComboBoxPopupMenu < UIPopupMenu
   image-clip: 0 60 89 20
   image-border: 1
   image-border-top: 0
+  padding: 1
 
 ComboBox < UIComboBox
   font: verdana-11px-antialised
@@ -51,13 +39,7 @@ ComboBox < UIComboBox
   image-clip: 0 0 89 20
 
   $hover:
-    image-source: /core_styles/images/combobox.png
-    image-border: 1
-    image-border-right: 17
     image-clip: 0 20 89 20
 
   $on:
-    image-source: /core_styles/images/combobox.png
-    image-border: 1
-    image-border-right: 17
     image-clip: 0 40 89 20

modules/core_styles/styles/panels.otui

@@ -20,7 +20,7 @@ InterfacePanel2 < Panel
   image-source: /core_styles/images/interface_panel2.png
   image-border: 4
 
-Map< UIMap
+Map < UIMap
   padding: 4
   image-source: /core_styles/images/map_panel.png
   image-border: 4

modules/core_styles/styles/popupmenus.otui

@@ -1,12 +1,10 @@
 PopupMenuButton < UIButton
-  font: verdana-11px-antialised
-  image-color: alpha
-  color: #aaaaaa
   height: 18
   margin-left: 3
   margin-right: 3
-  margin-top: 0
+  font: verdana-11px-antialised
-  margin-bottom: 0
+
+  color: #aaaaaa
   background-color: alpha
 
   $hover:
@@ -16,12 +14,6 @@ PopupMenuButton < UIButton
   $disabled:
     color: #555555
 
-  $first:
-    margin-top: 3
-
-  $last:
-    margin-bottom: 3
-
 PopupMenuSeparator < UIWidget
   margin-left: 2
   margin-right: 2
@@ -34,6 +26,7 @@ PopupMenuSeparator < UIWidget
 
 PopupMenu < UIPopupMenu
   width: 50
-  border-image:
   image-source: /core_styles/images/menubox.png
   image-border: 3
+  padding-top: 3
+  padding-bottom: 3

modules/core_styles/styles/progressbars.otui

@@ -1,4 +1,4 @@
 ProgressBar < UIProgressBar
-  height: 15
+  height: 16
   background-color: red
   border: 1 black

modules/core_styles/styles/separators.otui

@@ -1,6 +1,6 @@
 HorizontalSeparator < UIWidget
   image-source: /core_styles/images/horizontal_separator.png
-  image-border.top: 2
+  image-border-top: 2
   height: 2
   phantom: true
   focusable: false

modules/core_styles/styles/windows.otui

@@ -11,12 +11,29 @@ Window < UIWindow
   image-border: 4
   image-border-top: 20
 
-  //$pressed:
-  //  opacity: 0.75
-
   $disabled:
     color: #aaaaaa88
 
+Window2 < UIWindow
+  font: verdana-11px-antialised
+  size: 200 200
+  opacity: 1
+  color: white
+  text-offset: 0 2
+  text-align: top
+  image-source: /core_styles/images/window.png
+  image-border: 4
+  image-border-top: 20
+  padding-top: 28
+  padding-left: 16
+  padding-right: 16
+  padding-bottom: 16
+  $disabled:
+    color: #aaaaaa88
+
+MainWindow < Window2
+  anchors.centerIn: parent
+
 MiniWindow < UIWindow
   font: verdana-11px-antialised
   size: 192 200
@@ -30,5 +47,3 @@ MiniWindow < UIWindow
   image-border: 4
   image-border-top: 25
 
-MainWindow < Window
-  anchors.centerIn: parent

modules/game_outfit/outfit.lua

@@ -140,7 +140,7 @@ function Outfit.create(creature, outfitList)
       local outfitColor = getOufitColor(j*19 + i)
       color:setId('color' .. j*19+i)
       color.colorId = j*19 + i
-      color:setBackgroundColor(outfitColor)
+      color:setImageColor(outfitColor)
       color:setMarginTop(j * 3 + j * 14)
       color:setMarginLeft(10 + i * 3 + i * 14)
 

modules/game_skills/skills.otui

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

modules/game_viplist/addvip.otui

@@ -9,25 +9,18 @@ MainWindow
     anchors.top: parent.top
     anchors.left: parent.left
     anchors.right: parent.right
-    margin-left: 16
-    margin-right: 16
-    margin-top: 32
 
   LineEdit
     id: name
     anchors.top: prev.bottom
     anchors.left: parent.left
     anchors.right: parent.right
-    margin-left: 16
-    margin-right: 16
     margin-top: 4
 
   HorizontalSeparator
     anchors.left: parent.left
     anchors.right: parent.right
     anchors.bottom: next.top
-    margin-left: 16
-    margin-right: 16
     margin-bottom: 10
 
   Button
@@ -35,8 +28,7 @@ MainWindow
     width: 64
     anchors.right: next.left
     anchors.bottom: parent.bottom
-    margin-bottom: 16
+    margin-right: 10
-    margin-right: 16
     @onClick: VipList.addVip()
 
   Button
@@ -44,6 +36,4 @@ MainWindow
     width: 64
     anchors.right: parent.right
     anchors.bottom: parent.bottom
-    margin-bottom: 16
-    margin-right: 16
     @onClick: VipList.destroyAddWindow()