Many UI fixes.

modules/client_skins/skins/default/styles/labels.otui

@@ -22,3 +22,11 @@ MenuLabel < Label
 GameLabel < UILabel
   font: verdana-11px-antialised
   color: #bbbbbb
+
+FrameCounterLabel < Label
+  @onSetup: |
+    self.updateEvent = cycleEvent(function()
+      local text = 'FPS: ' .. g_app.getBackgroundPaneFps()
+      self:setText(text)
+    end, 1000)
+  @onDestroy: self.updateEvent:cancel()

modules/client_skins/skins/default/styles/miniwindow.otui

@@ -68,7 +68,6 @@ MiniWindow < UIMiniWindow
 
     $!on:
       width: 0
-      margin-right: 4
 
   ResizeBorder
     id: bottomResizeBorder
@@ -88,6 +87,7 @@ MiniWindowContents < ScrollablePanel
   margin-left: 3
   margin-bottom: 3
   margin-top: 22
+  margin-right: 1
   vertical-scrollbar: miniwindowScrollBar
 
 BorderlessGameWindow < UIWindow

modules/client_topmenu/topmenu.otui

@@ -37,13 +37,18 @@ TopMenuButtonsPanel < Panel
     fit-children: true
   padding: 6 4
 
-TopPanel < Panel
+TopMenuPanel < Panel
   height: 36
   image-source: images/top_panel.png
   image-repeated: true
   focusable: false
 
-TopPanel
+TopMenuFrameCounterLabel < FrameCounterLabel
+  color: white
+  margin-top: 10
+  margin-right: 5
+
+TopMenuPanel
   id: topMenu
   anchors.top: parent.top
   anchors.left: parent.left
@@ -62,25 +67,11 @@ TopPanel
     anchors.left: prev.right
     visible: false
 
-  UILabel
+  TopMenuFrameCounterLabel
     id: frameCounter
-    text-align: right
     text-auto-resize: true
-    color: white
-    id: frameCounter
     anchors.top: parent.top
     anchors.left: prev.right
-    margin-top: 10
-    margin-right: 5
-    @onSetup: |
-      cycleEvent(function()
-        local frameCounter = rootWidget:recursiveGetChildById('frameCounter')
-        if frameCounter then
-          local text = 'FPS: ' .. g_app.getBackgroundPaneFps()
-          frameCounter:setText(text)
-          --print(text)
-        end
-      end, 250)
 
   TopMenuButtonsPanel
     id: rightButtonsPanel

modules/game_battle/battle.lua

@@ -49,7 +49,7 @@ function init()
   mouseWidget:setVisible(false)
   mouseWidget:setFocusable(false)
 
-  battleWindow:setContentMinimumHeight(56)
+  battleWindow:setContentMinimumHeight(80)
   battleWindow:setContentMaximumHeight(384)
 
   connect(Creature, { onSkullChange = checkCreatureSkull,

modules/game_battle/battle.otui

@@ -44,58 +44,58 @@ MiniWindow
   @onClose: modules.game_battle.onMiniWindowClose()
   &save: true
 
-  BattlePlayers
+  Panel
-    id: hidePlayers
-    !tooltip: tr('Hide players')
-    anchors.top: parent.top
-    anchors.right: next.left
-    margin-right: 5
     margin-top: 26
-    @onCheckChange: modules.game_battle.checkCreatures()
-
-  BattleNPCs
-    id: hideNPCs
-    !tooltip: tr('Hide Npcs')
     anchors.top: parent.top
-    anchors.right: next.left
+    anchors.left: parent.left
-    margin-right: 5
+    anchors.right: miniwindowScrollBar.left
-    margin-top: 26
+    height: 20
-    @onCheckChange: modules.game_battle.checkCreatures()
 
-  BattleMonsters
+    Panel
-    id: hideMonsters
+      anchors.top: parent.top
-    !tooltip: tr('Hide monsters')
+      anchors.horizontalCenter: parent.horizontalCenter
-    anchors.top: parent.top
+      height: 20
-    anchors.horizontalCenter: parent.horizontalCenter
+      width: 120
-    margin-top: 26
+      // width*count + spacing*(count-1)
-    @onCheckChange: modules.game_battle.checkCreatures()
+      layout:
+        type: horizontalBox
+        spacing: 5
 
-  BattleSkulls
+      BattlePlayers
-    id: hideSkulls
+        id: hidePlayers
-    !tooltip: tr('Hide non-skull players')
+        !tooltip: tr('Hide players')
-    anchors.top: prev.top
+        @onCheckChange: modules.game_battle.checkCreatures()
-    anchors.left: prev.right
-    margin-left: 5
-    @onCheckChange: modules.game_battle.checkCreatures()
 
-  BattleParty
+      BattleNPCs
-    id: hideParty
+        id: hideNPCs
-    !tooltip: tr('Hide party members')
+        !tooltip: tr('Hide Npcs')
-    anchors.top: prev.top
+        @onCheckChange: modules.game_battle.checkCreatures()
-    anchors.left: prev.right
+
-    margin-left: 5
+      BattleMonsters
-    phantom: true
+        id: hideMonsters
-    @onCheckChange: modules.game_battle.checkCreatures()
+        !tooltip: tr('Hide monsters')
+        @onCheckChange: modules.game_battle.checkCreatures()
+
+      BattleSkulls
+        id: hideSkulls
+        !tooltip: tr('Hide non-skull players')
+        @onCheckChange: modules.game_battle.checkCreatures()
+
+      BattleParty
+        id: hideParty
+        !tooltip: tr('Hide party members')
+        @onCheckChange: modules.game_battle.checkCreatures()
 
   HorizontalSeparator
     anchors.top: prev.bottom
     anchors.left: parent.left
-    anchors.right: parent.right
+    anchors.right: miniwindowScrollBar.left
-    margin-top: 5
+    margin-right: 1
+    margin-top: 4
 
   MiniWindowContents
-    anchors.top: parent.top
+    anchors.top: prev.bottom
-    margin-top: 50
+    margin-top: 0
 
     Panel
       id: battlePanel

modules/game_playertrade/playertrade.lua

@@ -26,6 +26,7 @@ function createTrade()
     g_game.rejectTrade()
     tradeWindow:hide()
   end
+  tradeWindow:setup()
 end
 
 function fillTrade(name, items, counter)
@@ -53,7 +54,7 @@ function fillTrade(name, items, counter)
     local itemWidget = g_ui.createWidget('Item', tradeContainer)
     itemWidget:setItem(item)
     itemWidget:setVirtual(true)
-    itemWidget:setMargin(1)
+    itemWidget:setMargin(0)
     itemWidget.onClick = function()
       g_game.inspectTrade(counter, index-1)
     end
@@ -69,7 +70,8 @@ function onGameCounterTrade(name, items)
 end
 
 function onGameCloseTrade()
-  if not tradeWindow then return end
+  if tradeWindow then
-  tradeWindow:destroy()
+    tradeWindow:destroy()
-  tradeWindow = nil
+    tradeWindow = nil
+  end
 end

modules/game_playertrade/tradewindow.otui

@@ -12,7 +12,7 @@ TradeWindow < MiniWindow
     margin-left: 4
 
   MiniWindowContents
-    padding: 6
+    padding: 4
 
     ScrollableFlatPanel
       id: ownTradeContainer
@@ -20,26 +20,27 @@ TradeWindow < MiniWindow
       anchors.bottom: acceptButton.top
       anchors.left: parent.left
       anchors.right: ownTradeScrollBar.left
-      margin-top: 14
+      margin-top: 16
       margin-bottom: 4
       padding: 2
       layout:
         type: grid
-        cell-size: 36 36
+        cell-size: 34 34
         flow: true
-        cell-spacing: 0
+        cell-spacing: 1
       vertical-scrollbar: ownTradeScrollBar
 
     VerticalScrollBar
       id: ownTradeScrollBar
       anchors.top: parent.top
       anchors.bottom: acceptButton.top
-      anchors.right: counterTradeContainer.left
+      anchors.right: parent.horizontalCenter
-      margin-top: 14
+      margin-top: 16
       margin-bottom: 4
+      margin-right: 2
       step: 14
       pixels-scroll: true
-      $disabled:
+      $!on:
         width: 0
 
     ScrollableFlatPanel
@@ -48,14 +49,15 @@ TradeWindow < MiniWindow
       anchors.bottom: acceptButton.top
       anchors.left: parent.horizontalCenter
       anchors.right: counterTradeScrollBar.left
-      margin-top: 14
+      margin-top: 16
       margin-bottom: 4
+      margin-left: 2
       padding: 2
       layout:
         type: grid
-        cell-size: 36 36
+        cell-size: 34 34
         flow: true
-        cell-spacing: 0
+        cell-spacing: 1
       vertical-scrollbar: counterTradeScrollBar
 
     VerticalScrollBar
@@ -63,25 +65,26 @@ TradeWindow < MiniWindow
       anchors.top: parent.top
       anchors.bottom: acceptButton.top
       anchors.right: parent.right
-      margin-top: 14
+      margin-top: 16
       margin-bottom: 4
+      margin-right: 1
       step: 14
       pixels-scroll: true
-      $disabled:
+      $!on:
         width: 0
 
     Label
       id: ownTradeLabel
       anchors.bottom: ownTradeContainer.top
       anchors.left: ownTradeContainer.left
-      anchors.right: ownTradeContainer.right
+      anchors.right: parent.horizontalCenter
       margin-bottom: 2
 
     Label
       id: counterTradeLabel
       anchors.bottom: counterTradeContainer.top
-      anchors.left: counterTradeContainer.left
+      anchors.left: parent.horizontalCenter
-      anchors.right: counterTradeContainer.right
+      anchors.right: counterTradeScrollBar.right
       margin-bottom: 2
 
     Button
@@ -101,4 +104,4 @@ TradeWindow < MiniWindow
       anchors.right: parent.right
       anchors.left: parent.horizontalCenter
       margin-left: 2
-      @onClick: g_game.rejectTrade()
+      @onClick: g_game.rejectTrade()

src/otclient/uiitem.cpp

@@ -55,7 +55,10 @@ void UIItem::drawSelf(Fw::DrawPane drawPane)
         float scaleFactor = std::min(drawRect.width() / (float)exactSize, drawRect.height() / (float)exactSize);
         dest += (m_item->getDisplacement() - Point(32,32)) * scaleFactor;
 
-        g_painter->setColor(Color::white);
+        if(isEnabled())
+            g_painter->setColor(Color::white);
+        else
+            g_painter->setColor(Color(100, 100, 100));
         m_item->draw(dest, scaleFactor, true);
 
         if(m_font && (m_item->isStackable() || m_item->isChargeable()) && m_item->getCountOrSubType() > 1) {