admin2: finished team widget color picker implementation (#435)

* admin2: implemented team color picker

finished the previously half-done implementation of the color picker for the team widget

* admin2: minor team color picker fixes

adjustments to match coding style
using guiRoot rather than getResourceGUIElement()
resetting color picker color and team name edit correctly without the need to destroy picker form

* admin2: added instruction text to color picker

color picking space now prompts the user to click it for color picking

* admin2: spacing adjustment to match coding style

spacing adjustment to match coding style

* admin2: set team widget 'AlwaysOnTop' while colorpicker is shown

to prevent the color preview from rendering on top of other gui elements (not the greatest solution)

* admin2: prevent color preview from rendering on top of other gui elements

by using guiFocus when showing message or input boxes and updating the render state within onClientGUIFocus we can avoid rendering the color preview on top of other gui elements.

* admin2: team widget handle input

added edit field input handler

* admin2: team widget handle input addendum

removed line that is no longer needed

[admin]/admin2/client/admin_gui.lua

@@ -119,6 +119,26 @@ function guiCreateColorPicker(x, y, w, h, r, g, b, relative, parent)
             guiColorPickers[source] = nil
         end
     )
+    return mask
+end
+
+function guiColorPickerGetColor(element)
+    local picker = guiColorPickers[element]
+    if (picker) then
+        return picker.r, picker.g, picker.b
+    end
+    return false
+end
+
+function guiColorPickerSetColor(element, r, g, b)
+    local picker = guiColorPickers[element]
+    if (picker) then
+        picker.r = r or 255
+        picker.g = g or 0
+        picker.b = b or 0
+        return true
+    end
+    return false
 end
 
 addEventHandler(
@@ -136,6 +156,7 @@ addEventHandler(
                 local x, y = guiGetAbsolutePosition(mask)
                 local sx, sy = guiGetSize(mask, false)
                 dxDrawLine(x, y + sy / 2, x + sx, y + sy / 2, tocolor(info.r, info.g, info.b, 255), sy, true)
+                dxDrawText("Click to pick a color", x, y, x + sx, y + sy, tocolor(0, 0, 0, 255), 1, "default", "center", "center", true, true, true, false, true)
             end
         end
     end
@@ -265,7 +286,7 @@ end
 function guiGetAbsolutePosition(element)
     local x, y = guiGetPosition(element, false)
     local parent = getElementParent(element)
-    while (parent ~= getResourceGUIElement()) do
+    while (parent ~= guiRoot) do
         local px, py = guiGetPosition(parent, false)
         x = x + px
         y = y + py

[admin]/admin2/client/widgets/admin_color.lua

@@ -38,7 +38,7 @@ function aColor.Open(x, y, r, g, b, relative, parent)
             end
         end
         if (parent) then
-            while (parent ~= nil) do
+            while (parent ~= guiRoot) do
                 local px, py = guiGetPosition(parent, false)
                 x = px + x
                 y = py + y
@@ -71,6 +71,8 @@ function aColor.Open(x, y, r, g, b, relative, parent)
         guiSetProperty(aColor.Form, "AlwaysOnTop", "true")
 
         aRegister("Color", aColor.Form, aColor.Open, aColor.Close)
+    else
+        guiSetPosition(aColor.Form, x, y, false)
     end
 
     guiSetText(aColor.R, tostring(aColor.Color.r))
@@ -80,6 +82,7 @@ function aColor.Open(x, y, r, g, b, relative, parent)
     aColor.Picking = false
     guiSetVisible(aColor.Form, true)
 
+    addEventHandler("onClientGUIClick", aColor.Ok, aColor.Close)
     addEventHandler("onClientRender", root, aColor.onRender)
     addEventHandler("onClientGUIChanged", aColor.Form, aColor.onChanged)
     addEventHandler("onClientGUIBlur", aColor.Form, aColor.onBlur)
@@ -104,6 +107,7 @@ end
 function aColor.Close(destroy)
     guiSetInputEnabled(false)
     if (aColor.Form) then
+        removeEventHandler("onClientGUIClick", aColor.Ok, aColor.Close)
         removeEventHandler("onClientGUIBlur", aColor.Form, aColor.onBlur)
         removeEventHandler("onClientGUIChanged", aColor.Form, aColor.onChanged)
         removeEventHandler("onClientClick", root, aColor.onClick)

[admin]/admin2/client/widgets/admin_inputbox.lua

@@ -45,6 +45,7 @@ function aInputBox.Show(title, message, default)
         guiSetVisible(aMessageBox.Form, false)
     end
     guiBringToFront(aInputBox.Form)
+    guiFocus(aInputBox.Form)
 
     aInputBox.Result = nil
     aInputBox.Thread = sourceCoroutine

[admin]/admin2/client/widgets/admin_messagebox.lua

@@ -70,6 +70,7 @@ function aMessageBox.Show(message, icon, type)
     guiSetPosition(aMessageBox.Form, x / 2 - mbX / 2, y / 2 - mbY / 2, false)
     guiSetVisible(aMessageBox.Form, true)
     guiBringToFront(aMessageBox.Form)
+    guiFocus(aMessageBox.Form)
 
     guiSetVisible(aMessageBox.Warning, icon == MB_WARNING)
     guiSetVisible(aMessageBox.Question, icon == MB_QUESTION)

[admin]/admin2/client/widgets/admin_team.lua

@@ -8,7 +8,8 @@
 *
 **************************************]]
 aTeam = {
-    Form = nil
+    Form = nil,
+    NewVisible = false
 }
 
 function aTeam.Show()
@@ -24,23 +25,18 @@ function aTeam.Show()
         aTeam.Update = guiCreateButton(0.03, 0.90, 0.50, 0.08, "Refresh", true, aTeam.Form)
         aTeam.New = guiCreateButton(0.55, 0.18, 0.42, 0.09, "New Team", true, aTeam.Form, "createteam")
         aTeam.Delete = guiCreateButton(0.55, 0.28, 0.42, 0.09, "Delete Team", true, aTeam.Form, "destroyteam")
-        aTeam.NameLabel = guiCreateLabel(0.55, 0.19, 0.42, 0.07, "Team Name:", true, aTeam.Form)
-        aTeam.Color = guiCreateLabel(0.55, 0.37, 0.42, 0.11, "Color:", true, aTeam.Form)
-        guiCreateColorPicker(0.70, 0.37, 0.27, 0.11, 255, 0, 0, true, aTeam.Form)
-        aTeam.R = guiCreateLabel(0.70, 0.37, 0.42, 0.11, "R:", true, aTeam.Form)
-        aTeam.G = guiCreateLabel(0.70, 0.48, 0.42, 0.11, "G:", true, aTeam.Form)
-        aTeam.B = guiCreateLabel(0.70, 0.59, 0.42, 0.11, "B:", true, aTeam.Form)
+        aTeam.NameLabel = guiCreateLabel(0.55, 0.19, 0.42, 0.07, "New Team Name:", true, aTeam.Form)
         aTeam.Name = guiCreateEdit(0.55, 0.26, 0.42, 0.10, "", true, aTeam.Form)
-        aTeam.Red = guiCreateEdit(0.80, 0.36, 0.15, 0.10, "0", true, aTeam.Form)
-        aTeam.Green = guiCreateEdit(0.80, 0.47, 0.15, 0.10, "0", true, aTeam.Form)
-        aTeam.Blue = guiCreateEdit(0.80, 0.58, 0.15, 0.10, "0", true, aTeam.Form)
-        aTeam.Create = guiCreateButton(0.55, 0.73, 0.20, 0.09, "Create", true, aTeam.Form, "createteam")
-        aTeam.Cancel = guiCreateButton(0.77, 0.73, 0.20, 0.09, "Cancel", true, aTeam.Form)
+        guiHandleInput(aTeam.Name)
+        aTeam.Color = guiCreateColorPicker(0.553, 0.37, 0.41, 0.11, 255, 0, 0, true, aTeam.Form)
+        aTeam.Create = guiCreateButton(0.55, 0.50, 0.20, 0.09, "Create", true, aTeam.Form, "createteam")
+        aTeam.Cancel = guiCreateButton(0.77, 0.50, 0.20, 0.09, "Cancel", true, aTeam.Form)
         aTeam.Accept = guiCreateButton(0.55, 0.88, 0.20, 0.09, "Select", true, aTeam.Form)
         aTeam.Hide = guiCreateButton(0.77, 0.88, 0.20, 0.09, "Close", true, aTeam.Form)
 
         addEventHandler("onClientGUIClick", aTeam.Form, aTeam.onClick)
         addEventHandler("onClientGUIDoubleClick", aTeam.Form, aTeam.onDoubleClick)
+        addEventHandler("onClientGUIFocus", guiRoot, aTeam.onGUIFocus)
         --Register With Admin Form
         aRegister("PlayerTeam", aTeam.Form, aTeam.Show, aTeam.Close)
     end
@@ -56,11 +52,14 @@ function aTeam.Close(destroy)
         if (aTeam.Form) then
             removeEventHandler("onClientGUIClick", aTeam.Form, aTeam.onClick)
             removeEventHandler("onClientGUIDoubleClick", aTeam.Form, aTeam.onDoubleClick)
+            removeEventHandler("onClientGUIFocus", guiRoot, aTeam.onGUIFocus)
             destroyElement(aTeam.Form)
             aTeam.Form = nil
         end
     else
         guiSetVisible(aTeam.Form, false)
+        guiSetText(aTeam.Name, "")
+        guiColorPickerSetColor(aTeam.Color)
     end
 end
 
@@ -99,29 +98,32 @@ function aTeam.onClick(button)
             elseif (getTeamFromName(team)) then
                 messageBox("A team with this name already exists", MB_ERROR)
             else
+                local r, g, b = guiColorPickerGetColor(aTeam.Color)
                 triggerServerEvent(
                     "aTeam",
                     localPlayer,
                     "createteam",
                     team,
-                    guiGetText(aTeam.Red),
-                    guiGetText(aTeam.Green),
-                    guiGetText(aTeam.Blue)
+                    r,
+                    g,
+                    b
                 )
                 aTeam.ShowNew(false)
+                guiSetText(aTeam.Name, "")
+                guiColorPickerSetColor(aTeam.Color)
             end
             setTimer(aTeam.Refresh, 2000, 1)
-        elseif (source == aTeam.Name) then
-            guiSetInputEnabled(true)
         elseif (source == aTeam.Cancel) then
             aTeam.ShowNew(false)
+            guiSetText(aTeam.Name, "")
+            guiColorPickerSetColor(aTeam.Color)
         elseif (source == aTeam.Accept) then
             if (guiGridListGetSelectedItem(aTeam.List) == -1) then
                 messageBox("No team selected!", MB_WARNING)
             else
                 local team = guiGridListGetItemData(aTeam.List, guiGridListGetSelectedItem(aTeam.List), 1)
                 triggerServerEvent("aPlayer", localPlayer, getSelectedPlayer(), "setteam", team)
-                guiSetVisible(aTeam.Form, false)
+                aTeam.Close(false)
             end
         elseif (source == aTeam.Hide) then
             aTeam.Close(false)
@@ -130,21 +132,26 @@ function aTeam.onClick(button)
 end
 
 function aTeam.ShowNew(bool)
+    aTeam.NewVisible = bool
     guiSetVisible(aTeam.New, not bool)
     guiSetVisible(aTeam.Delete, not bool)
     guiSetVisible(aTeam.NameLabel, bool)
     guiSetVisible(aTeam.Name, bool)
     guiSetVisible(aTeam.Color, bool)
-    guiSetVisible(aTeam.R, bool)
-    guiSetVisible(aTeam.G, bool)
-    guiSetVisible(aTeam.B, bool)
-    guiSetVisible(aTeam.Red, bool)
-    guiSetVisible(aTeam.Green, bool)
-    guiSetVisible(aTeam.Blue, bool)
     guiSetVisible(aTeam.Create, bool)
     guiSetVisible(aTeam.Cancel, bool)
 end
 
+function aTeam.onGUIFocus()
+    if (aTeam.NewVisible) then
+        if (source == aTeam.Form or getElementParent(source) == aTeam.Form or source == aColor.Form or getElementParent(source) == aColor.Form) then
+            guiSetVisible(aTeam.Color, true)
+            return
+        end
+    end
+    guiSetVisible(aTeam.Color, false)
+end
+
 function aTeam.Refresh()
     if (aTeam.List) then
         local sortDirection = guiGetProperty(aTeam.List, "SortDirection")