BuildSkillsUI.lua

@@ -20,31 +20,100 @@ local skillRowFrames = {}
 -- References set during creation
 local scrollFrame, scrollChild, addRowButton
 
+-- ─── Helper: Create a flat dark input box matching the blocky design ────────
+
+local function CreateFlatEditBox(name, parent, width)
+    local container = CreateFrame("Frame", name .. "Container", parent, "BackdropTemplate")
+    container:SetSize(width, 28)
+    container:SetBackdrop({
+        bgFile = "Interface\\ChatFrame\\ChatFrameBackground",
+        edgeFile = "Interface\\ChatFrame\\ChatFrameBackground",
+        edgeSize = 1,
+    })
+    container:SetBackdropColor(0.12, 0.12, 0.12, 1)
+    container:SetBackdropBorderColor(0.25, 0.25, 0.25, 1)
+
+    local editBox = CreateFrame("EditBox", name, container)
+    editBox:SetPoint("LEFT", 8, 0)
+    editBox:SetPoint("RIGHT", -8, 0)
+    editBox:SetHeight(28)
+    editBox:SetAutoFocus(false)
+    editBox:SetFontObject("GameFontHighlight")
+
+    return container, editBox
+end
+
+-- ─── Helper: Create a flat dark dropdown button matching the blocky design ──
+
+local function CreateFlatDropdown(name, parent, width)
+    local btn = CreateFrame("Button", name, parent, "BackdropTemplate")
+    btn:SetSize(width, 28)
+    btn:SetBackdrop({
+        bgFile = "Interface\\ChatFrame\\ChatFrameBackground",
+        edgeFile = "Interface\\ChatFrame\\ChatFrameBackground",
+        edgeSize = 1,
+    })
+    btn:SetBackdropColor(0.12, 0.12, 0.12, 1)
+    btn:SetBackdropBorderColor(0.25, 0.25, 0.25, 1)
+
+    -- Text label (left-aligned)
+    local text = btn:CreateFontString(nil, "OVERLAY", "GameFontHighlight")
+    text:SetPoint("LEFT", 8, 0)
+    text:SetPoint("RIGHT", -24, 0)
+    text:SetJustifyH("LEFT")
+    btn.label = text
+
+    -- Gold arrow icon (right side)
+    local arrow = btn:CreateTexture(nil, "OVERLAY")
+    arrow:SetSize(12, 12)
+    arrow:SetPoint("RIGHT", -6, 0)
+    arrow:SetTexture("Interface\\ChatFrame\\ChatFrameExpandArrow")
+    arrow:SetVertexColor(0.9, 0.75, 0.2, 1)
+    btn.arrow = arrow
+
+    -- Hover highlight
+    btn:SetScript("OnEnter", function(self)
+        self:SetBackdropColor(0.18, 0.18, 0.18, 1)
+    end)
+    btn:SetScript("OnLeave", function(self)
+        self:SetBackdropColor(0.12, 0.12, 0.12, 1)
+    end)
+
+    -- Menu storage
+    btn.menuSetup = nil
+    btn:SetScript("OnClick", function(self)
+        if self.menuSetup then
+            MenuUtil.CreateContextMenu(self, self.menuSetup)
+        end
+    end)
+
+    function btn:SetupMenu(setupFunc)
+        self.menuSetup = setupFunc
+    end
+
+    return btn
+end
+
 -- ─── Create a single skill row frame ────────────────────────────────────────
 
 local function CreateSkillRowFrame(index)
     local row = CreateFrame("Frame", "AltSystemSkillRow" .. index, scrollChild)
     row:SetHeight(ROW_HEIGHT)
 
-
+    -- Name EditBox (flat dark style)
-    -- Name EditBox
+    local nameContainer, nameBox = CreateFlatEditBox("AltSystemSkillName" .. index, row, NAME_WIDTH)
-    local nameBox = CreateFrame("EditBox", "AltSystemSkillName" .. index, row, "InputBoxTemplate")
+    nameContainer:SetPoint("LEFT", row, "LEFT", 8, 0)
-    nameBox:SetPoint("LEFT", row, "LEFT", 8, 0)
-    nameBox:SetSize(NAME_WIDTH, 24)
-    nameBox:SetAutoFocus(false)
-    nameBox:SetFontObject("GameFontHighlight")
     row.nameBox = nameBox
+    row.nameContainer = nameContainer
 
-    -- Level Dropdown
+    -- Level Dropdown (flat dark style)
-    local levelDropdown = CreateFrame("DropdownButton", "AltSystemSkillLevel" .. index, row, "WowStyle1DropdownTemplate")
+    local levelDropdown = CreateFlatDropdown("AltSystemSkillLevel" .. index, row, LEVEL_WIDTH)
-    levelDropdown:SetPoint("LEFT", nameBox, "RIGHT", 12, 0)
+    levelDropdown:SetPoint("LEFT", nameContainer, "RIGHT", 12, 0)
-    levelDropdown:SetWidth(LEVEL_WIDTH)
     row.levelDropdown = levelDropdown
 
-    -- Value Dropdown
+    -- Value Dropdown (flat dark style)
-    local valueDropdown = CreateFrame("DropdownButton", "AltSystemSkillValue" .. index, row, "WowStyle1DropdownTemplate")
+    local valueDropdown = CreateFlatDropdown("AltSystemSkillValue" .. index, row, VALUE_WIDTH)
     valueDropdown:SetPoint("LEFT", levelDropdown, "RIGHT", 8, 0)
-    valueDropdown:SetWidth(VALUE_WIDTH)
     row.valueDropdown = valueDropdown
 
     -- Delete Button (trash can icon with dark red background, matching design)
@@ -135,7 +204,8 @@ local function RefreshSkillRows()
 
         -- Setup level dropdown
         local currentRowIndex = i
-        row.levelDropdown:SetupMenu(function(dropdown, rootDescription)
+        row.levelDropdown.label:SetText(skillData.level or "Novice")
+        row.levelDropdown:SetupMenu(function(owner, rootDescription)
             for _, levelName in ipairs(AltSystem.Data.SkillLevelOrder) do
                 rootDescription:CreateRadio(
                     levelName,
@@ -154,9 +224,10 @@ local function RefreshSkillRows()
         end)
 
         -- Setup value dropdown based on current level
+        row.valueDropdown.label:SetText(tostring(skillData.value or 1))
         local range = AltSystem.Data.SkillValueRanges[skillData.level]
         if range then
-            row.valueDropdown:SetupMenu(function(dropdown, rootDescription)
+            row.valueDropdown:SetupMenu(function(owner, rootDescription)
                 for v = range.min, range.max do
                     rootDescription:CreateRadio(
                         tostring(v),
@@ -166,6 +237,7 @@ local function RefreshSkillRows()
                         function()
                             if editableSkills[currentRowIndex] then
                                 editableSkills[currentRowIndex].value = v
+                                row.valueDropdown.label:SetText(tostring(v))
                             end
                         end
                     )