Fixed multiline layout issues.

SirMallard · Aug 6, 2024 · 639c3f2 · 639c3f2
1 parent ec4d167
commit 639c3f2
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 33 deletions.
diff --git a/lib/widgets/Checkbox.lua b/lib/widgets/Checkbox.lua
@@ -28,24 +28,30 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
         Generate = function(thisWidget: Types.Widget): TextButton
             local Checkbox: TextButton = Instance.new("TextButton")
             Checkbox.Name = "Iris_Checkbox"
+            Checkbox.AutomaticSize = Enum.AutomaticSize.XY
+            Checkbox.Size = UDim2.fromOffset(0, 0)
             Checkbox.BackgroundTransparency = 1
             Checkbox.BorderSizePixel = 0
-            Checkbox.Size = UDim2.fromOffset(0, 0)
             Checkbox.Text = ""
-            Checkbox.AutomaticSize = Enum.AutomaticSize.XY
-            Checkbox.LayoutOrder = thisWidget.ZIndex
             Checkbox.AutoButtonColor = false
+            Checkbox.ZIndex = thisWidget.ZIndex
+            Checkbox.LayoutOrder = thisWidget.ZIndex
+
+            local UIListLayout: UIListLayout = widgets.UIListLayout(Checkbox, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+            UIListLayout.VerticalAlignment = Enum.VerticalAlignment.Center
 
             local checkboxSize: number = Iris._config.TextSize + 2 * Iris._config.FramePadding.Y
 
-            local CheckboxBox: Frame = Instance.new("Frame")
-            CheckboxBox.Name = "CheckboxBox"
-            CheckboxBox.Size = UDim2.fromOffset(checkboxSize, checkboxSize)
-            CheckboxBox.BackgroundColor3 = Iris._config.FrameBgColor
-            CheckboxBox.BackgroundTransparency = Iris._config.FrameBgTransparency
-            widgets.applyFrameStyle(CheckboxBox, true)
+            local Box: Frame = Instance.new("Frame")
+            Box.Name = "Box"
+            Box.Size = UDim2.fromOffset(checkboxSize, checkboxSize)
+            Box.BackgroundColor3 = Iris._config.FrameBgColor
+            Box.BackgroundTransparency = Iris._config.FrameBgTransparency
+
+            widgets.applyFrameStyle(Box, true)
+            widgets.UIPadding(Box, (checkboxSize // 10) * Vector2.one)
 
-            widgets.applyInteractionHighlights(thisWidget, Checkbox, CheckboxBox, {
+            widgets.applyInteractionHighlights(thisWidget, Checkbox, Box, {
                 ButtonColor = Iris._config.FrameBgColor,
                 ButtonTransparency = Iris._config.FrameBgTransparency,
                 ButtonHoveredColor = Iris._config.FrameBgHoveredColor,
@@ -54,22 +60,17 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
                 ButtonActiveTransparency = Iris._config.FrameBgActiveTransparency,
             })
 
-            CheckboxBox.Parent = Checkbox
-
-            local padding: number = math.ceil(checkboxSize * 0.1)
-            local checkmarkSize: number = checkboxSize - 2 * padding
+            Box.Parent = Checkbox
 
             local Checkmark: ImageLabel = Instance.new("ImageLabel")
             Checkmark.Name = "Checkmark"
-            Checkmark.Size = UDim2.fromOffset(checkmarkSize, checkmarkSize)
-            Checkmark.Position = UDim2.fromOffset(padding, padding)
+            Checkmark.Size = UDim2.fromScale(1, 1)
             Checkmark.BackgroundTransparency = 1
             Checkmark.ImageColor3 = Iris._config.CheckMarkColor
             Checkmark.ImageTransparency = Iris._config.CheckMarkTransparency
             Checkmark.ScaleType = Enum.ScaleType.Fit
-            Checkmark.ZIndex = 2
 
-            Checkmark.Parent = Checkbox
+            Checkmark.Parent = Box
 
             widgets.applyButtonClick(thisWidget, Checkbox, function()
                 local wasChecked: boolean = thisWidget.state.isChecked.value
@@ -78,12 +79,12 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
 
             local TextLabel: TextLabel = Instance.new("TextLabel")
             TextLabel.Name = "TextLabel"
-            widgets.applyTextStyle(TextLabel)
-            TextLabel.AnchorPoint = Vector2.new(0, 0.5)
-            TextLabel.Position = UDim2.new(0, checkboxSize + Iris._config.ItemInnerSpacing.X, 0.5, 0)
             TextLabel.AutomaticSize = Enum.AutomaticSize.XY
             TextLabel.BackgroundTransparency = 1
             TextLabel.BorderSizePixel = 0
+            TextLabel.LayoutOrder = 1
+
+            widgets.applyTextStyle(TextLabel)
             TextLabel.Parent = Checkbox
 
             return Checkbox
@@ -103,7 +104,8 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
         end,
         UpdateState = function(thisWidget: Types.Widget)
             local Checkbox = thisWidget.Instance :: TextButton
-            local Checkmark: ImageLabel = Checkbox.Checkmark
+            local Box = Checkbox.Box :: Frame
+            local Checkmark: ImageLabel = Box.Checkmark
             if thisWidget.state.isChecked.value then
                 Checkmark.Image = widgets.ICONS.CHECK_MARK
                 thisWidget.lastCheckedTick = Iris._cycleTick + 1

diff --git a/lib/widgets/Combo.lua b/lib/widgets/Combo.lua
@@ -231,7 +231,8 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
             Combo.BorderSizePixel = 0
             Combo.LayoutOrder = thisWidget.ZIndex
 
-            widgets.UIListLayout(Combo, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.Y + 1))
+            local UIListLayout: UIListLayout = widgets.UIListLayout(Combo, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+            UIListLayout.VerticalAlignment = Enum.VerticalAlignment.Center
 
             local PreviewContainer: TextButton = Instance.new("TextButton")
             PreviewContainer.Name = "PreviewContainer"

diff --git a/lib/widgets/Input.lua b/lib/widgets/Input.lua
@@ -268,7 +268,8 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
                     Input.BorderSizePixel = 0
                     Input.LayoutOrder = thisWidget.ZIndex
                     Input.AutomaticSize = Enum.AutomaticSize.Y
-                    widgets.UIListLayout(Input, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+                    local UIListLayout: UIListLayout = widgets.UIListLayout(Input, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+                    UIListLayout.VerticalAlignment = Enum.VerticalAlignment.Center
 
                     -- we add plus and minus buttons if there is only one box. This can be disabled through the argument.
                     local rightPadding: number = 0
@@ -545,7 +546,8 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
                     Drag.BorderSizePixel = 0
                     Drag.LayoutOrder = thisWidget.ZIndex
                     Drag.AutomaticSize = Enum.AutomaticSize.Y
-                    widgets.UIListLayout(Drag, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+                    local UIListLayout: UIListLayout = widgets.UIListLayout(Drag, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+                    UIListLayout.VerticalAlignment = Enum.VerticalAlignment.Center
 
                     -- we add a color box if it is Color3 or Color4.
                     local rightPadding: number = 0
@@ -939,7 +941,8 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
                     Slider.BorderSizePixel = 0
                     Slider.LayoutOrder = thisWidget.ZIndex
                     Slider.AutomaticSize = Enum.AutomaticSize.Y
-                    widgets.UIListLayout(Slider, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+                    local UIListLayout: UIListLayout = widgets.UIListLayout(Slider, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+                    UIListLayout.VerticalAlignment = Enum.VerticalAlignment.Center
 
                     local textHeight: number = Iris._config.TextSize + 2 * Iris._config.FramePadding.Y
 
@@ -1303,7 +1306,8 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
             InputText.BorderSizePixel = 0
             InputText.ZIndex = thisWidget.ZIndex
             InputText.LayoutOrder = thisWidget.ZIndex
-            widgets.UIListLayout(InputText, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+            local UIListLayout: UIListLayout = widgets.UIListLayout(InputText, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+            UIListLayout.VerticalAlignment = Enum.VerticalAlignment.Center
 
             local InputField: TextBox = Instance.new("TextBox")
             InputField.Name = "InputField"

diff --git a/lib/widgets/Plot.lua b/lib/widgets/Plot.lua
@@ -29,7 +29,8 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
                 ProgressBar.AutomaticSize = Enum.AutomaticSize.Y
                 ProgressBar.LayoutOrder = thisWidget.ZIndex
 
-                widgets.UIListLayout(ProgressBar, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+                local UIListLayout: UIListLayout = widgets.UIListLayout(ProgressBar, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+                UIListLayout.VerticalAlignment = Enum.VerticalAlignment.Center
 
                 local Bar: Frame = Instance.new("Frame")
                 Bar.Name = "Bar"

diff --git a/lib/widgets/RadioButton.lua b/lib/widgets/RadioButton.lua
@@ -42,6 +42,11 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
             RadioButton.Text = ""
             RadioButton.LayoutOrder = thisWidget.ZIndex
             RadioButton.AutoButtonColor = false
+            RadioButton.ZIndex = thisWidget.ZIndex
+            RadioButton.LayoutOrder = thisWidget.ZIndex
+
+            local UIListLayout: UIListLayout = widgets.UIListLayout(RadioButton, Enum.FillDirection.Horizontal, UDim.new(0, Iris._config.ItemInnerSpacing.X))
+            UIListLayout.VerticalAlignment = Enum.VerticalAlignment.Center
 
             local buttonSize: number = Iris._config.TextSize + 2 * (Iris._config.FramePadding.Y - 1)
             local Button: Frame = Instance.new("Frame")
@@ -52,11 +57,11 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
             Button.BackgroundTransparency = Iris._config.FrameBgTransparency
 
             widgets.UICorner(Button)
+            widgets.UIPadding(Button, math.max(1, buttonSize // 5) * Vector2.one)
 
             local Circle: Frame = Instance.new("Frame")
             Circle.Name = "Circle"
-            Circle.Position = UDim2.fromOffset(Iris._config.FramePadding.Y, Iris._config.FramePadding.Y)
-            Circle.Size = UDim2.fromOffset(Iris._config.TextSize - 2, Iris._config.TextSize - 2)
+            Circle.Size = UDim2.fromScale(1, 1)
             Circle.Parent = Button
             Circle.BackgroundColor3 = Iris._config.CheckMarkColor
             Circle.BackgroundTransparency = Iris._config.CheckMarkTransparency
@@ -77,12 +82,12 @@ return function(Iris: Types.Internal, widgets: Types.WidgetUtility)
 
             local TextLabel: TextLabel = Instance.new("TextLabel")
             TextLabel.Name = "TextLabel"
-            widgets.applyTextStyle(TextLabel)
             TextLabel.AutomaticSize = Enum.AutomaticSize.XY
-            TextLabel.AnchorPoint = Vector2.new(0, 0.5)
-            TextLabel.Position = UDim2.new(0, buttonSize + Iris._config.ItemInnerSpacing.X, 0.5, 0)
             TextLabel.BackgroundTransparency = 1
             TextLabel.BorderSizePixel = 0
+            TextLabel.LayoutOrder = 1
+
+            widgets.applyTextStyle(TextLabel)
             TextLabel.Parent = RadioButton
 
             return RadioButton