Added labels to forms.

Added small help text for people pointing them to how to add a category.
Cidan · Sep 11, 2024 · 08ddfe1 · 08ddfe1
1 parent 804ec3e
commit 08ddfe1
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 16 deletions.
diff --git a/config/config.lua b/config/config.lua
@@ -136,7 +136,7 @@ function config:CreateConfig()
     }
     f:AddDropdown({
       title = 'Section Order',
-      description = 'The order of sections in the backpack when not pinned.',
+      description = 'The order of sections in the ' .. string.lower(bagType.name) .. ' when not pinned.',
       items = {'Alphabetically', 'Size Descending', 'Size Ascending'},
       getValue = function(_, value)
         return sectionOrders[value] == db:GetSectionSortType(bagType.kind, db:GetBagView(bagType.kind))
@@ -167,7 +167,11 @@ function config:CreateConfig()
 
     f:AddSubSection({
       title = 'Categories',
-      description = 'Settings for Blizzard item categories in the backpack.',
+      description = 'Settings for Blizzard item categories in the ' .. string.lower(bagType.name) .. '.',
+    })
+
+    f:AddLabel({
+      description = 'To create a custom category, drag an item into the bag button on the top of your bag and let go.',
     })
 
     f:AddCheckbox({
@@ -256,7 +260,7 @@ function config:CreateConfig()
 
     f:AddSubSection({
       title = 'Item Stacking',
-      description = 'Settings for item stacking in the backpack.',
+      description = 'Settings for item stacking in the ' .. string.lower(bagType.name) .. '.',
     })
 
     f:AddCheckbox({
@@ -283,7 +287,7 @@ function config:CreateConfig()
 
     f:AddCheckbox({
       title = 'Merge Stacks',
-      description = 'Stackable items will merge into a single item button in your backpack.',
+      description = 'Stackable items will merge into a single item button in your ' .. string.lower(bagType.name) .. '.',
       getValue = function(_)
         return db:GetStackingOptions(bagType.kind).mergeStacks
       end,
@@ -295,7 +299,7 @@ function config:CreateConfig()
 
     f:AddCheckbox({
       title = 'Merge Unstackable',
-      description = 'Unstackable items, such as armor and weapons, will merge into a single item button in your backpack.',
+      description = 'Unstackable items, such as armor and weapons, will merge into a single item button in your ' .. string.lower(bagType.name) .. '.',
       getValue = function(_)
         return db:GetStackingOptions(bagType.kind).mergeUnstackable
       end,
@@ -319,7 +323,7 @@ function config:CreateConfig()
 
     f:AddCheckbox({
       title = "Split Transmogged Items",
-      description = 'Transmogged items will be split into a separate, stackable button in your backpack.',
+      description = 'Transmogged items will be split into a separate, stackable button in your ' .. string.lower(bagType.name) .. '.',
       getValue = function(_)
         return db:GetStackingOptions(bagType.kind).dontMergeTransmog
       end,
@@ -344,12 +348,12 @@ function config:CreateConfig()
 
     f:AddSubSection({
       title = 'Item Level',
-      description = 'Settings for item level in the backpack.',
+      description = 'Settings for item level in the ' .. string.lower(bagType.name) .. '.',
     })
 
     f:AddCheckbox({
       title = 'Show Item Level',
-      description = 'Show the item level on item buttons in the backpack.',
+      description = 'Show the item level on item buttons in the ' .. string.lower(bagType.name) .. '.',
       getValue = function(_)
         return db:GetItemLevelOptions(bagType.kind).enabled
       end,
@@ -361,7 +365,7 @@ function config:CreateConfig()
 
     f:AddCheckbox({
       title = 'Show Item Level Color',
-      description = 'Show the item level in color on item buttons in the backpack.',
+      description = 'Show the item level in color on item buttons in the ' .. string.lower(bagType.name) .. '.',
       getValue = function(_)
         return db:GetItemLevelOptions(bagType.kind).color
       end,
@@ -374,7 +378,7 @@ function config:CreateConfig()
 
     f:AddSubSection({
       title = 'Display',
-      description = 'Settings that adjust layout and visual aspects of the backpack.',
+      description = 'Settings that adjust layout and visual aspects of the ' .. string.lower(bagType.name) .. '.',
     })
 
     f:AddCheckbox({
@@ -391,7 +395,7 @@ function config:CreateConfig()
 
     f:AddCheckbox({
       title = 'Show All Free Space Slots',
-      description = 'Show all free space slots, individually, at the bottom of the backpack.',
+      description = 'Show all free space slots, individually, at the bottom of the ' .. string.lower(bagType.name) .. '.',
       getValue = function(_)
         return db:GetShowAllFreeSpace(bagType.kind)
       end,
@@ -432,7 +436,7 @@ function config:CreateConfig()
 
     f:AddSlider({
       title = 'Columns',
-      description = 'The number of columns in the backpack.',
+      description = 'The number of columns in the ' .. string.lower(bagType.name) .. '.',
       min = 1,
       max = 20,
       step = 1,
@@ -449,7 +453,7 @@ function config:CreateConfig()
 
     f:AddSlider({
       title = 'Opacity',
-      description = 'The opacity of the background of the backpack.',
+      description = 'The opacity of the background of the ' .. string.lower(bagType.name) .. '.',
       min = 0,
       max = 100,
       step = 1,
@@ -464,7 +468,7 @@ function config:CreateConfig()
 
     f:AddSlider({
       title = 'Scale',
-      description = 'The scale of the backpack.',
+      description = 'The scale of the ' .. string.lower(bagType.name) .. '.',
       min = 50,
       max = 200,
       step = 1,

diff --git a/forms/form.lua b/forms/form.lua
@@ -154,6 +154,12 @@ function formFrame:AddColor(opts)
   self:Resize()
 end
 
+---@param opts FormLabelOptions
+function formFrame:AddLabel(opts)
+  self.layout:AddLabel(opts)
+  self:Resize()
+end
+
 ---@return Frame
 function formFrame:GetFrame()
   return self.frame

diff --git a/forms/layouts/layout.lua b/forms/layouts/layout.lua
@@ -54,6 +54,9 @@ local layouts = addon:NewModule('FormLayouts')
 ---@field colorPicker Frame
 ---@field colorTexture Texture
 
+---@class (exact) FormLabel: Frame
+---@field description FontString
+
 --[[
 -- Widget Options
 ]]--
@@ -120,6 +123,9 @@ local layouts = addon:NewModule('FormLayouts')
 ---@field getValue fun(ctx: Context): Colors
 ---@field setValue fun(ctx: Context, value: Colors)
 
+---@class (exact) FormLabelOptions
+---@field description string
+
 ---@class (exact) FormLayout
 ---@field targetFrame Frame
 ---@field height number
@@ -133,4 +139,5 @@ local layouts = addon:NewModule('FormLayouts')
 ---@field AddButtonGroup fun(self: FormLayout, opts: FormButtonGroupOptions)
 ---@field AddTextArea fun(self: FormLayout, opts: FormTextAreaOptions)
 ---@field AddInputBox fun(self: FormLayout, opts: FormInputBoxOptions)
----@field AddColor fun(self: FormLayout, opts: FormColorOptions)
+---@field AddColor fun(self: FormLayout, opts: FormColorOptions)
+---@field AddLabel fun(self: FormLayout, opts: FormLabelOptions)
diff --git a/forms/layouts/stacked.lua b/forms/layouts/stacked.lua
@@ -816,4 +816,19 @@ function stackedLayout:AddColor(opts)
   self.nextFrame = container
   self.height = self.height + container:GetHeight()
   self.colorPickers[container] = opts
-end
+end
+
+---@param opts FormLabelOptions
+function stackedLayout:AddLabel(opts)
+  local t = self.nextFrame
+  local container = CreateFrame("Frame", nil, t) --[[@as FormLabel]]
+  self:alignFrame(t, container)
+
+  container.description = self:createDescription(container, opts.description, {0.75, 0.75, 0.75})
+  container.description:SetPoint("TOPLEFT", container, "TOPLEFT", 37, 0)
+  container.description:SetPoint("RIGHT", container, "RIGHT", -5, 0)
+
+  container:SetHeight(container.description:GetLineHeight() + 10)
+  self.nextFrame = container
+  self.height = self.height + container:GetHeight()
+end