Added new collapsible method.

Author: ryanlua

src/SignsInternal/StudioWidgets/CollapsibleItem.lua

@@ -6,9 +6,13 @@
 --
 ----------------------------------------
 local GuiUtilities = require(script.Parent.GuiUtilities)
-
 local VerticallyScalingListFrame = require(script.Parent.VerticallyScalingListFrame)
 
+local kLightHelpImage = "rbxasset://studio_svg_textures/Shared/Navigation/Light/Large/Help.png"
+local kDarkHelpImage = "rbxasset://studio_svg_textures/Shared/Navigation/Dark/Large/Help.png"
+local kLightArrowImage = "rbxasset://studio_svg_textures/Shared/Navigation/Light/Large/Arrow.png" -- Check to see if this directory exists
+local kDarkArrowImage = "rbxasset://studio_svg_textures/Shared/Navigation/Dark/Large/Arrow.png" -- Do the same here
+
 local ItemClass = {}
 ItemClass.__index = ItemClass
 
@@ -23,22 +27,25 @@ function ItemClass.new(nameSuffix: string, labelText: string, multiLine: boolean
 	-- Frame that contains the label and the content
 	local frame = Instance.new("TextButton")
 	frame.Name = "Item" .. nameSuffix
+	frame.BorderSizePixel = 0
 	frame.Text = ""
 	frame.AutoButtonColor = false
+	frame.AutomaticSize = Enum.AutomaticSize.Y
 	frame.Size = UDim2.new(1, 0, 0, GuiUtilities.kDefaultPropertyHeight)
 	GuiUtilities.syncGuiElementBackgroundColor(frame)
-	GuiUtilities.syncGuiElementShadowColor(frame)
+	-- GuiUtilities.syncGuiElementShadowColor(frame)
 	self._frame = frame
 
 	-- Frame that contains the label so label can auto clip to size.
 	local labelFrame = Instance.new("Frame")
 	labelFrame.Name = "LabelFrame"
-	labelFrame.Size = UDim2.new(1, 0, 0, GuiUtilities.kDefaultPropertyHeight)
+	labelFrame.Size = UDim2.new(0.5, 0, 0, GuiUtilities.kDefaultPropertyHeight)
 	labelFrame.BackgroundTransparency = 1
 	labelFrame.Position = UDim2.new(0, 0, 0, 0)
 	labelFrame.ClipsDescendants = true
 	labelFrame.Parent = frame
 
+	-- Label that contains the property text
 	local label = Instance.new("TextLabel")
 	label.Name = "Label"
 	label.BackgroundTransparency = 1
@@ -55,21 +62,24 @@ function ItemClass.new(nameSuffix: string, labelText: string, multiLine: boolean
 	GuiUtilities.syncGuiElementFontColor(label)
 	self._label = label
 
-	if not multiLine then
-		local contentFrame = Instance.new("Frame")
-		contentFrame.Name = "ContentFrame"
-		contentFrame.Size = UDim2.new(0.5, 0, 0, GuiUtilities.kDefaultPropertyHeight)
-		contentFrame.Position = UDim2.new(0.5, 0, 0, 0)
-		contentFrame.Parent = frame
-		GuiUtilities.syncGuiElementBackgroundColor(contentFrame)
-		GuiUtilities.syncGuiElementShadowColor(contentFrame)
-		frame:GetPropertyChangedSignal("BackgroundColor3"):Connect(function()
-			contentFrame.BackgroundColor3 = frame.BackgroundColor3
-		end)
-	else
-		VerticallyScalingListFrame.new("ItemFrame" .. nameSuffix)
-	end
+	-- This is a bad way of doing this. I've removed this as this sucks and needs a better way of doing this.
 
+	-- if not multiLine then
+	-- 	local contentFrame = Instance.new("Frame")
+	-- 	contentFrame.Name = "ContentFrame"
+	-- 	contentFrame.Size = UDim2.new(0.5, 0, 0, GuiUtilities.kDefaultPropertyHeight)
+	-- 	contentFrame.Position = UDim2.new(0.5, 0, 0, 0)
+	-- 	contentFrame.Parent = frame
+	-- 	GuiUtilities.syncGuiElementBackgroundColor(contentFrame)
+	-- 	GuiUtilities.syncGuiElementShadowColor(contentFrame)
+	-- 	frame:GetPropertyChangedSignal("BackgroundColor3"):Connect(function()
+	-- 		contentFrame.BackgroundColor3 = frame.BackgroundColor3
+	-- 	end)
+	-- else
+	-- 	VerticallyScalingListFrame.new("ItemFrame" .. nameSuffix)
+	-- end
+
+	-- Move this down to a function
 	if url then
 		local help = Instance.new("ImageButton")
 		help.Name = "Help"
@@ -86,9 +96,9 @@ function ItemClass.new(nameSuffix: string, labelText: string, multiLine: boolean
 
 		local function updateImages()
 			if GuiUtilities:ShouldUseIconsForDarkerBackgrounds() then
-				help.Image = "rbxasset://studio_svg_textures/Shared/Navigation/Dark/Large/Help.png"
+				help.Image = kDarkHelpImage
 			else
-				help.Image = "rbxasset://studio_svg_textures/Shared/Navigation/Light/Large/Help.png"
+				help.Image = kLightHelpImage
 			end
 			help.ImageColor3 = label.TextColor3
 		end
@@ -120,13 +130,14 @@ end
 -- Setup the mouse click handling for the CollapsibleItem
 function ItemClass:_SetupMouseClickHandling()
 	self._frame.InputBegan:Connect(function()
-			self._hovered = true
-			self:_UpdateVisualState()
+		self._hovered = true
+		self:_UpdateVisualState()
 	end)
 
 	self._frame.InputEnded:Connect(function()
-			self._hovered = false
-			self:_UpdateVisualState()
+		self._hovered = false
+		self:SetValue(false)
+		self:_UpdateVisualState()
 	end)
 
 	self._frame.MouseButton1Down:Connect(function()
@@ -137,16 +148,83 @@ end
 
 -- Update the visual state of the CollapsibleItem
 function ItemClass:_UpdateVisualState()
-	if self._selected then
-		self._frame.BackgroundColor3 =
-			settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Item, Enum.StudioStyleGuideModifier.Selected)
-	elseif self._hovered then
-		self._frame.BackgroundColor3 =
-			settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Item, Enum.StudioStyleGuideModifier.Hover)
-	else
-		self._frame.BackgroundColor3 =
-			settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Item, Enum.StudioStyleGuideModifier.Default)
+	-- TODO: Fix this or cut it out
+
+	-- if self._selected then
+	-- 	self._frame.BackgroundColor3 =
+	-- 		settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Item, Enum.StudioStyleGuideModifier.Selected)
+	-- elseif self._hovered then
+	-- 	self._frame.BackgroundColor3 =
+	-- 		settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Item, Enum.StudioStyleGuideModifier.Hover)
+	-- else
+	-- 	self._frame.BackgroundColor3 =
+	-- 		settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Item, Enum.StudioStyleGuideModifier.Default)
+	-- end
+end
+
+-- Use the help icon. This will open the url in the wiki when clicked
+function ItemClass:UseHelp(url: string)
+	
+end
+
+-- Use the CollapsibleItem as a toggleable frame
+function ItemClass:UseCollapsible()
+	-- Create a frame that is toggleable on click
+	local toggleFrame = Instance.new("Frame")
+	toggleFrame.Name = "ToggleFrame"
+	toggleFrame.Size = UDim2.new(1, 0, 0, GuiUtilities.kDefaultPropertyHeight)
+	toggleFrame.Position = UDim2.new(0, 0, 0, 0)
+	toggleFrame.Parent = self._frame
+
+	local toggle = Instance.new("ImageButton")
+	toggle.Name = "Toggle"
+	toggle.BackgroundTransparency = 1
+	toggle.Size = UDim2.new(0, GuiUtilities.kDefaultFontSize, 0, GuiUtilities.kDefaultFontSize)
+	toggle.Position = UDim2.new(0, 0, 0.5, 0)
+	toggle.AnchorPoint = Vector2.new(0, 0.5)
+	toggle.Parent = toggleFrame
+	self._toggle = toggle
+
+	local function updateImages()
+		if GuiUtilities:ShouldUseIconsForDarkerBackgrounds() then
+			toggle.Image = kLightArrowImage
+		else
+			toggle.Image = kDarkArrowImage
+		end
+		toggle.ImageColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
+	end
+	settings().Studio.ThemeChanged:Connect(updateImages)
+	updateImages()
+
+	local function updateTogglePosition()
+		local labelWidth = self._label.TextBounds.X
+		toggle.Position = UDim2.new(0, labelWidth + 4, 0.5, 0)
 	end
+	self._label:GetPropertyChangedSignal("TextBounds"):Connect(updateTogglePosition)
+	updateTogglePosition()
+
+	self._selected = true
+
+	self:_UpdateVisualState()
+
+	-- Create a frame that is the content of the CollapsibleItem
+	local contentFrame = Instance.new("Frame")
+	contentFrame.Name = "ContentFrame"
+	contentFrame.Size = UDim2.new(1, 0, 0, 0)
+	contentFrame.Position = UDim2.new(0, 0, 1, 0)
+	contentFrame.Parent = self._frame
+	self._contentFrame = contentFrame
+
+	toggle.MouseButton1Click:Connect(function()
+		self._selected = not self._selected
+		self:_UpdateVisualState()
+		self:_UpdateContentVisualState()
+		if self._valueChangedFunction then
+			self._valueChangedFunction(self._selected)
+		end
+	end)
+
+	self:_UpdateContentVisualState()
 end
 
 -- Fires when the CollapsibleItem is selected