Tweak modules interface

Minimize miniwindows space usage Implement easier minimap navigation Redesign inventory, minimap and healthinfo layout
2012-07-12 20:40:55 -03:00 · 2012-07-12 20:40:55 -03:00 · ebc88b8354
parent c0c2411854
commit ebc88b8354
14 changed files with 149 additions and 175 deletions
--- a/modules/client_skins/skins/default/styles/miniwindow.otui
+++ b/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
-  padding: 3 5 3 5
+  margin-right: -1
+  margin-top: 21
+  padding: 4
+  padding-top: 2
  vertical-scrollbar: miniwindowScrollBar

 BorderlessGameWindow < UIWindow
--- a/modules/corelib/mouse.lua
+++ b/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
--- a/modules/corelib/ui/uiminiwindow.lua
+++ b/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
--- a/modules/game_combatcontrols/combatcontrols.lua
+++ b/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')
@ -134,9 +135,9 @@ function CombatControls.online()
  local player = g_game.getLocalPlayer()
  if(player) then
    local char = player:getName()
-    
+
    local lastCombatControls = g_settings.getNode('LastCombatControls')
-    
+
    if(not table.empty(lastCombatControls)) then
      if(lastCombatControls[char]) then
        g_game.setFightMode(lastCombatControls[char].fightMode)
@ -145,7 +146,7 @@ function CombatControls.online()
      end
    end
  end
-  
+
  combatControlsWindow:setVisible(combatControlsButton:isOn())
  CombatControls.update()
 end
@ -155,16 +156,16 @@ function CombatControls.offline()
  if(not lastCombatControls) then
    lastCombatControls = {}
  end
-  
+
  local player = g_game.getLocalPlayer()
  if(player) then
-    local char = player:getName()    
+    local char = player:getName()
    lastCombatControls[char] = {
      fightMode = g_game.getFightMode(),
      chaseMode = g_game.getChaseMode(),
      safeFight = g_game.isSafeFight()
    }
-    
+
    -- save last combat control settings
    g_settings.setNode('LastCombatControls', lastCombatControls)
  end
--- a/modules/game_combatcontrols/combatcontrols.otui
+++ b/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-right: 5
+  margin: 0 4
+  $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.top: next.top
+      anchors.left: parent.left
+      anchors.verticalCenter: parent.verticalCenter
    FightBalancedBox
      id: fightBalancedBox
-      anchors.right: next.left
-      anchors.top: next.top
+      anchors.left: prev.right
+      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.top: prev.top
+      anchors.right: next.left
+      anchors.verticalCenter: parent.verticalCenter
    SafeFightBox
      id: safeFightBox
-      anchors.left: prev.right
-      anchors.top: prev.top
+      anchors.right: parent.right
+      anchors.verticalCenter: parent.verticalCenter
--- a/modules/game_containers/container.otui
+++ b/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

--- a/modules/game_containers/containers.lua
+++ b/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

--- a/modules/game_healthinfo/healthinfo.lua
+++ b/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 })

@ -69,14 +75,15 @@ function HealthInfo.terminate()
  healthInfoButton:destroy()
  healthInfoWindow = nil
  healthInfoButton = nil
-  
+
  healthBar = nil
  manaBar = nil
  soulBar = nil
-  
+
  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

--- a/modules/game_healthinfo/healthinfo.otui
+++ b/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
@ -33,23 +32,33 @@ ManaLabel < GameLabel
  anchors.fill: manaBar
  margin-top: 2
  text: 0 / 0
-  
+
 SoulLabel < GameLabel
  id: soulLabel
+  text-align: right
  color: white
-  text-align: center
  font: verdana-11px-rounded
-  anchors.top: prev.bottom
-  anchors.left: parent.left
+  anchors.bottom: parent.bottom
  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: 18
-      margin-top: 5
+      height: 22
+      margin-top: 4
+      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
--- a/modules/game_interface/gameinterface.otui
+++ b/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
--- a/modules/game_inventory/inventory.lua
+++ b/modules/game_inventory/inventory.lua
@ -21,13 +21,13 @@ local inventoryButton

 -- public functions
 function Inventory.init()
-  connect(LocalPlayer, { onInventoryChange = Inventory.onInventoryChange,
-                         onFreeCapacityChange = Inventory.onFreeCapacityChange })
+  connect(LocalPlayer, { onInventoryChange = Inventory.onInventoryChange })
  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,
-                         onFreeCapacityChange = Inventory.onFreeCapacityChange })
+  disconnect(LocalPlayer, { onInventoryChange = Inventory.onInventoryChange })
  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
-
--- a/modules/game_inventory/inventory.otui
+++ b/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    
+  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
-      anchors.top: prev.bottom
-      anchors.horizontalCenter: prev.horizontalCenter
-      margin-top: 5
-      &position: {x=65535, y=5, z=0}
-
+    LeftSlot
+    NeckSlot
+    FingerSlot
+    BackSlot
    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
--- a/modules/game_minimap/minimap.lua
+++ b/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
--- a/modules/game_minimap/minimap.otui
+++ b/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()
+