Tweak modules interface

Minimize miniwindows space usage
Implement easier minimap navigation
Redesign inventory, minimap and healthinfo layout

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

@@ -82,8 +82,10 @@ MiniWindowContents < ScrollablePanel
   id: contentsPanel
   anchors.fill: parent
   anchors.right: miniwindowScrollBar.left
-  margin-top: 19
+  margin-right: -1
-  padding: 3 5 3 5
+  margin-top: 21
+  padding: 4
+  padding-top: 2
   vertical-scrollbar: miniwindowScrollBar
 
 BorderlessGameWindow < UIWindow

modules/corelib/mouse.lua

@@ -32,14 +32,15 @@ function g_mouse.isPressed(button)
   return g_window.isMouseButtonPressed(button)
 end
 
-function g_mouse.bindAutoPress(widget, callback)
+function g_mouse.bindAutoPress(widget, callback, delay)
   connect(widget, { onMousePress = function(widget, mousePos, mouseButton)
-    callback()
+    local startTime = g_clock.millis()
+    callback(widget, mousePos, mouseButton, 0)
     periodicalEvent(function()
-      callback()
+      callback(widget, g_window.getMousePosition(), mouseButton, g_clock.millis() - startTime)
     end, function()
       return widget:isPressed()
-    end, 30, 300)
+    end, 30, delay)
     return true
   end })
 end

modules/corelib/ui/uiminiwindow.lua

@@ -246,3 +246,7 @@ function UIMiniWindow:saveParentIndex(parentId, index)
   selfSettings.index = index
   self:setSettings(selfSettings)
 end
+
+function UIMiniWindow:disableResize()
+  self:getChildById('bottomResizeBorder'):disable()
+end

modules/game_combatcontrols/combatcontrols.lua

@@ -44,6 +44,7 @@ function CombatControls.init()
   combatControlsButton = TopMenu.addRightGameToggleButton('combatControlsButton', tr('Combat Controls'), 'combatcontrols.png', CombatControls.toggle)
   combatControlsButton:setOn(true)
   combatControlsWindow = g_ui.loadUI('combatcontrols.otui', GameInterface.getRightPanel())
+  combatControlsWindow:disableResize()
 
   fightOffensiveBox = combatControlsWindow:recursiveGetChildById('fightOffensiveBox')
   fightBalancedBox = combatControlsWindow:recursiveGetChildById('fightBalancedBox')

modules/game_combatcontrols/combatcontrols.otui

@@ -2,8 +2,11 @@ CombatBox < UICheckBox
   size: 20 20
   image-clip: 0 0 20 20
   anchors.top: parent.top
-  margin-left: 5
+  margin: 0 4
-  margin-right: 5
+  $first:
+    margin: 0 1
+  $last:
+    margin: 0 1
 
   $checked:
     image-clip: 0 20 20 20
@@ -23,27 +26,28 @@ MiniWindow
   id: combatControlsWindow
   !text: tr('Combat Controls')
   icon: combatcontrols.png
-  height: 64
+  height: 48
   @onClose: CombatControls.onMiniWindowClose()
   &save: true
 
   MiniWindowContents
     FightOffensiveBox
       id: fightOffensiveBox
-      anchors.right: next.left
+      anchors.left: parent.left
-      anchors.top: next.top
+      anchors.verticalCenter: parent.verticalCenter
     FightBalancedBox
       id: fightBalancedBox
-      anchors.right: next.left
+      anchors.left: prev.right
-      anchors.top: next.top
+      anchors.verticalCenter: parent.verticalCenter
     FightDefensiveBox
       id: fightDefensiveBox
-      anchors.centerIn: parent
+      anchors.left: prev.right
+      anchors.verticalCenter: parent.verticalCenter
     ChaseModeBox
       id: chaseModeBox
-      anchors.left: prev.right
+      anchors.right: next.left
-      anchors.top: prev.top
+      anchors.verticalCenter: parent.verticalCenter
     SafeFightBox
       id: safeFightBox
-      anchors.left: prev.right
+      anchors.right: parent.right
-      anchors.top: prev.top
+      anchors.verticalCenter: parent.verticalCenter

modules/game_containers/container.otui

@@ -30,7 +30,6 @@ ContainerWindow < MiniWindow
     padding-right: 0
     layout:
       type: grid
-      cell-size: 40 40
+      cell-size: 34 34
       flow: true
-      cell-spacing: 0
 

modules/game_containers/containers.lua

@@ -26,7 +26,7 @@ local function onContainerOpen(container, previousContainer)
 
   -- this disables scrollbar auto hiding
   local scrollbar = containerWindow:getChildById('miniwindowScrollBar')
-  scrollbar:mergeStyle({ ['$disabled'] = { ['width'] = scrollbar:getWidth() } })
+  scrollbar:mergeStyle({ ['$!on'] = { }})
 
   local upButton = containerWindow:getChildById('upButton')
   upButton.onClick = function()
@@ -45,7 +45,7 @@ local function onContainerOpen(container, previousContainer)
     local itemWidget = g_ui.createWidget('Item', containerPanel)
     itemWidget:setId('item' .. slot)
     itemWidget:setItem(container:getItem(slot))
-    itemWidget:setMargin(3)
+    itemWidget:setMargin(0)
     itemWidget.position = container:getSlotPosition(slot)
   end
 

modules/game_healthinfo/healthinfo.lua

@@ -28,18 +28,21 @@ local soulBar
 local healthLabel
 local manaLabel
 local soulLabel
+local capLabel
 
 -- public functions
 function HealthInfo.init()
   connect(LocalPlayer, { onHealthChange = HealthInfo.onHealthChange,
                          onManaChange = HealthInfo.onManaChange,
                          onStatesChange = HealthInfo.onStatesChange,
-                         onSoulChange = HealthInfo.onSoulChange })
+                         onSoulChange = HealthInfo.onSoulChange,
+                         onFreeCapacityChange = HealthInfo.onFreeCapacityChange })
 
   connect(g_game, { onGameEnd = HealthInfo.offline })
 
   healthInfoWindow = g_ui.loadUI('healthinfo.otui', GameInterface.getRightPanel())
   healthInfoButton = TopMenu.addRightGameToggleButton('healthInfoButton', tr('Health Information'), 'healthinfo.png', HealthInfo.toggle)
+  healthInfoWindow:disableResize()
   healthInfoButton:setOn(true)
   healthBar = healthInfoWindow:recursiveGetChildById('healthBar')
   manaBar = healthInfoWindow:recursiveGetChildById('manaBar')
@@ -47,6 +50,7 @@ function HealthInfo.init()
   manaLabel = healthInfoWindow:recursiveGetChildById('manaLabel')
   soulBar = healthInfoWindow:recursiveGetChildById('soulBar')
   soulLabel = healthInfoWindow:recursiveGetChildById('soulLabel')
+  capLabel = healthInfoWindow:recursiveGetChildById('capLabel')
 
   if g_game.isOnline() then
     local localPlayer = g_game.getLocalPlayer()
@@ -54,6 +58,7 @@ function HealthInfo.init()
     HealthInfo.onManaChange(localPlayer, localPlayer:getMana(), localPlayer:getMaxMana())
     HealthInfo.onStatesChange(localPlayer, localPlayer:getStates(), 0)
     HealthInfo.onSoulChange(localPlayer, localPlayer:getSoul())
+    HealthInfo.onFreeCapacityChange(localPlayer, localPlayer:getFreeCapacity())
   end
 end
 
@@ -61,7 +66,8 @@ function HealthInfo.terminate()
   disconnect(LocalPlayer, { onHealthChange = HealthInfo.onHealthChange,
                             onManaChange = HealthInfo.onManaChange,
                             onStatesChange = HealthInfo.onStatesChange,
-                            onSoulChange = HealthInfo.onSoulChange })
+                            onSoulChange = HealthInfo.onSoulChange,
+                            onFreeCapacityChange = HealthInfo.onFreeCapacityChange })
 
   disconnect(g_game, { onGameEnd = HealthInfo.offline })
 
@@ -77,6 +83,7 @@ function HealthInfo.terminate()
   healthLabel = nil
   manaLabel = nil
   soulLabel = nil
+  capLabel = nil
 
   HealthInfo = nil
 end
@@ -118,9 +125,14 @@ function HealthInfo.onManaChange(localPlayer, mana, maxMana)
 end
 
 function HealthInfo.onSoulChange(localPlayer, soul)
-  soulLabel:setText('Soul: ' .. soul)
+  soulLabel:setText(tr('Soul') .. ': ' .. soul)
 end
 
+function HealthInfo.onFreeCapacityChange(player, freeCapacity)
+  capLabel:setText(tr('Cap') .. ': ' .. freeCapacity)
+end
+
+
 function HealthInfo.onStatesChange(localPlayer, now, old)
   if now == old then return end
 

modules/game_healthinfo/healthinfo.otui

@@ -5,7 +5,6 @@ HealthBar < ProgressBar
   anchors.top: parent.top
   anchors.left: parent.left
   anchors.right: parent.right
-  margin-top: 3
 
 ManaBar < ProgressBar
   id: manaBar
@@ -36,20 +35,30 @@ ManaLabel < GameLabel
 
 SoulLabel < GameLabel
   id: soulLabel
+  text-align: right
   color: white
-  text-align: center
   font: verdana-11px-rounded
-  anchors.top: prev.bottom
+  anchors.bottom: parent.bottom
-  anchors.left: parent.left
   anchors.right: parent.right
+  anchors.left: parent.horizontalCenter
   margin-top: 5
   text: Soul:
 
+CapLabel < GameLabel
+  id: capLabel
+  color: white
+  font: verdana-11px-rounded
+  anchors.bottom: parent.bottom
+  anchors.left: parent.left
+  anchors.right: parent.horizontalCenter
+  margin-top: 5
+  text: Cap:
+
 ConditionWidget < UIWidget
   size: 18 18
 
   $!first:
-    margin-left: 5
+    margin-left: 2
 
 MiniWindow
   icon: healthinfo.png
@@ -68,9 +77,14 @@ MiniWindow
       id: conditionPanel
       layout:
         type: horizontalBox
-        fit-children: true
+      height: 22
-      height: 18
+      margin-top: 4
-      margin-top: 5
+      padding: 2
       anchors.top: prev.bottom
-      anchors.horizontalcenter: parent.horizontalcenter
+      anchors.left: parent.left
+      anchors.right: parent.right
+      border-width: 1
+      border-color: #00000077
+      background-color: #ffffff11
     SoulLabel
+    CapLabel

modules/game_interface/gameinterface.otui

@@ -2,6 +2,7 @@ GameSidePanel < UIMiniWindowContainer
   image-source: /images/sidepanel.png
   image-border: 4
   padding: 4
+  width: 198
 
 GameBottomPanel < Panel
   image-source: /images/bottompanel.png
@@ -34,7 +35,6 @@ UIWidget
 
   GameSidePanel
     id: gameLeftPanel
-    width: 190
     layout: verticalBox
     anchors.left: parent.left
     anchors.top: parent.top
@@ -49,7 +49,6 @@ UIWidget
   GameSidePanel
     id: gameRightPanel
     layout: verticalBox
-    width: 190
     anchors.right: parent.right
     anchors.top: parent.top
     anchors.bottom: parent.bottom

modules/game_inventory/inventory.lua

@@ -21,13 +21,13 @@ local inventoryButton
 
 -- public functions
 function Inventory.init()
-  connect(LocalPlayer, { onInventoryChange = Inventory.onInventoryChange,
+  connect(LocalPlayer, { onInventoryChange = Inventory.onInventoryChange })
-                         onFreeCapacityChange = Inventory.onFreeCapacityChange })
   connect(g_game, { onGameStart = Inventory.refresh })
 
   g_keyboard.bindKeyDown('Ctrl+I', Inventory.toggle)
 
   inventoryWindow = g_ui.loadUI('inventory.otui', GameInterface.getRightPanel())
+  inventoryWindow:disableResize()
   inventoryPanel = inventoryWindow:getChildById('contentsPanel')
   inventoryButton = TopMenu.addRightGameToggleButton('inventoryButton', tr('Inventory') .. ' (Ctrl+I)', 'inventory.png', Inventory.toggle)
   inventoryButton:setOn(true)
@@ -36,8 +36,7 @@ function Inventory.init()
 end
 
 function Inventory.terminate()
-  disconnect(LocalPlayer, { onInventoryChange = Inventory.onInventoryChange,
+  disconnect(LocalPlayer, { onInventoryChange = Inventory.onInventoryChange })
-                         onFreeCapacityChange = Inventory.onFreeCapacityChange })
   disconnect(g_game, { onGameStart = Inventory.refresh })
 
   g_keyboard.unbindKeyDown('Ctrl+I')
@@ -87,9 +86,3 @@ function Inventory.onInventoryChange(player, slot, item, oldItem)
     itemWidget:setItem(nil)
   end
 end
-
-function Inventory.onFreeCapacityChange(player, freeCapacity)
-  local widget = inventoryPanel:getChildById('capacity')
-  widget:setText("Cap:\n" .. freeCapacity)
-end
-

modules/game_inventory/inventory.otui

@@ -1,129 +1,77 @@
-HeadSlot < Item
+InventoryItem < Item
+  margin: 0 1
+
+HeadSlot < InventoryItem
   id: slot1
   image-source: /game_inventory/slots/head.png
+  &position: {x=65535, y=1, z=0}
 
-BodySlot < Item
+BodySlot < InventoryItem
   id: slot4
   image-source: /game_inventory/slots/body.png
+  &position: {x=65535, y=4, z=0}
 
-LegSlot < Item
+LegSlot < InventoryItem
   id: slot7
   image-source: /game_inventory/slots/legs.png
+  &position: {x=65535, y=7, z=0}
 
-FeetSlot < Item
+FeetSlot < InventoryItem
   id: slot8
   image-source: /game_inventory/slots/feet.png
+  &position: {x=65535, y=8, z=0}
 
-NeckSlot < Item
+NeckSlot < InventoryItem
   id: slot2
   image-source: /game_inventory/slots/neck.png
+  &position: {x=65535, y=2, z=0}
 
-LeftSlot < Item
+LeftSlot < InventoryItem
   id: slot6
   image-source: /game_inventory/slots/left-hand.png
+  &position: {x=65535, y=6, z=0}
 
-FingerSlot < Item
+FingerSlot < InventoryItem
   id: slot9
   image-source: /game_inventory/slots/finger.png
+  &position: {x=65535, y=9, z=0}
 
-BackSlot < Item
+BackSlot < InventoryItem
   id: slot3
   image-source: /game_inventory/slots/back.png
+  &position: {x=65535, y=3, z=0}
 
-RightSlot < Item
+RightSlot < InventoryItem
   id: slot5
   image-source: /game_inventory/slots/right-hand.png
+  &position: {x=65535, y=5, z=0}
 
-AmmoSlot < Item
+AmmoSlot < InventoryItem
   id: slot10
   image-source: /game_inventory/slots/ammo.png
+  &position: {x=65535, y=10, z=0}
 
 MiniWindow
   id: inventoryWindow
   !text: tr('Inventory')
   icon: inventory.png
-  height: 180
+  height: 95
   @onClose: Inventory.onMiniWindowClose()
   &save: true
 
   MiniWindowContents
+    padding: 4 5
+    layout:
+      type: grid
+      flow: true
+      cell-size: 36 34
     HeadSlot
-      // head
-      anchors.top: parent.top
-      anchors.horizontalCenter: parent.horizontalCenter
-      margin-top: 4
-      &position: {x=65535, y=1, z=0}
-
     BodySlot
-      // body
-      anchors.top: prev.bottom
-      anchors.horizontalCenter: prev.horizontalCenter
-      margin-top: 5
-      &position: {x=65535, y=4, z=0}
-
     LegSlot
-      // legs
-      anchors.top: prev.bottom
-      anchors.horizontalCenter: prev.horizontalCenter
-      margin-top: 5
-      &position: {x=65535, y=7, z=0}
-
     FeetSlot
-      // feet
-      anchors.top: prev.bottom
-      anchors.horizontalCenter: prev.horizontalCenter
-      margin-top: 5
-      &position: {x=65535, y=8, z=0}
-
-    NeckSlot
-      // neck
-      anchors.top: parent.top
-      anchors.right: slot1.left
-      margin-top: 10
-      margin-right: 5
-      &position: {x=65535, y=2, z=0}
-
-    LeftSlot
-      // left hand
-      anchors.top: prev.bottom
-      anchors.horizontalCenter: prev.horizontalCenter
-      margin-top: 5
-      &position: {x=65535, y=6, z=0}
-
-    FingerSlot
-      // finger
-      anchors.top: prev.bottom
-      anchors.horizontalCenter: prev.horizontalCenter
-      margin-top: 5
-      &position: {x=65535, y=9, z=0}
-
-    BackSlot
-      // back
-      anchors.top: parent.top
-      anchors.left: slot1.right
-      margin-top: 10
-      margin-left: 5
-      &position: {x=65535, y=3, z=0}
-
     RightSlot
-      // right hand
+    LeftSlot
-      anchors.top: prev.bottom
+    NeckSlot
-      anchors.horizontalCenter: prev.horizontalCenter
+    FingerSlot
-      margin-top: 5
+    BackSlot
-      &position: {x=65535, y=5, z=0}
-
     AmmoSlot
-      // ammo
-      anchors.top: prev.bottom
-      anchors.horizontalCenter: prev.horizontalCenter
-      margin-top: 5
-      &position: {x=65535, y=10, z=0}
-
-    GameLabel
-      id: capacity
-      height: 30
-      anchors.top: slot10.bottom
-      anchors.left: slot10.left
-      margin-top: 5
-      text-align: center
-      text-auto-resize: true

modules/game_minimap/minimap.lua

@@ -5,10 +5,15 @@ local minimapWidget
 local minimapButton
 local minimapWindow
 local DEFAULT_ZOOM = 60
+local navigating = false
 minimapFirstLoad = true
 
 -- private functions
 function onMinimapMouseRelease(self, mousePosition, mouseButton)
+  if navigating then
+    navigating = false
+    return
+  end
   local tile = self:getTile(mousePosition)
   if tile and mouseButton == MouseLeftButton and self:isPressed() then
     local dirs = g_map.findPath(g_game.getLocalPlayer():getPosition(), tile:getPosition(), 127)
@@ -47,7 +52,9 @@ function Minimap.init()
 
   minimapWindow = g_ui.loadUI('minimap.otui', GameInterface.getRightPanel())
 
+
   minimapWidget = minimapWindow:recursiveGetChildById('minimap')
+  g_mouse.bindAutoPress(minimapWidget, Minimap.compassClick)
   minimapWidget:setAutoViewMode(false)
   minimapWidget:setViewMode(1) -- mid view
   minimapWidget:setDrawMinimapColors(true)
@@ -109,7 +116,10 @@ function Minimap.isClickInRange(position, fromPosition, toPosition)
 end
 
 -- hooked functions
-function Minimap.compassClick(self, mousePos)
+function Minimap.compassClick(self, mousePos, mouseButton, elapsed)
+  if elapsed < 300 then return end
+
+  navigating = true
   local px = mousePos.x - self:getX()
   local py = mousePos.y - self:getY()
   local dx = px - self:getWidth()/2

modules/game_minimap/minimap.otui

@@ -30,44 +30,22 @@ MiniWindow
   @onClose: Minimap.onMiniWindowClose()
   &save: true
 
+  Label
+    text: ?
+    text-align: center
+    phantom: false
+    !tooltip: tr('Hold left mouse button to navigate')
+    anchors.top: minimizeButton.top
+    anchors.right: minimizeButton.left
+    margin-right: 3
+    size: 14 14
+
   MiniWindowContents
-    padding: 3
+    padding: 2
     UIMap
       id: minimap
       anchors.fill: parent
 
-    UIButton
-      id: compass
-      image-source: /game_minimap/compass.png
-      image-smooth: true
-      color: #ffffff
-      anchors.left: parent.left
-      anchors.top: parent.top
-      size: 48 48
-      margin-top: 4
-      margin-left: 4
-      @onClick: function(...) Minimap.compassClick(...) end
-
-    UIButton
-      id: compassReset
-      text: R
-      font: verdana-11px-rounded
-      anchors.centerIn: compass
-      margin-top: 2
-      margin-right: 1
-      @onClick: function(...) Minimap.center(...) end
-      $pressed:
-        color: #eb9f4f88
-
-      $hover !pressed:
-        color: #eb9f4f
-
-      $!pressed !hover:
-        color: #ffffff
-
-      $disabled:
-        image-color: #ffffff88
-
     FloorUpControl
       id: floorUp
       anchors.right: parent.right
@@ -109,3 +87,12 @@ MiniWindow
       enabled: true
       @onClick: Minimap.onButtonClick(self:getId())
 
+    Button
+      id: reset
+      !text: tr('Center')
+      width: 44
+      anchors.left: parent.left
+      anchors.top: parent.top
+      margin: 4
+      @onClick: Minimap.center()
+