Make widgets more compact (#13)

matter-ecs · Jan 31, 2024 · b335c4c · b335c4c
1 parent 9d438f6
commit b335c4c
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 43 deletions.
diff --git a/docs/creating-widgets.md b/docs/creating-widgets.md
@@ -21,7 +21,7 @@ return Plasma.widget(function(text, color)
 			Font = Enum.Font.GothamBold,
 			TextColor3 = Color3.fromRGB(147, 147, 147),
 			BackgroundColor3 = Color3.fromRGB(54, 54, 54),
-			TextSize = 20,
+			TextSize = 16,
 			Size = UDim2.new(0, 0, 0, 30),
 			AutomaticSize = Enum.AutomaticSize.XY,
 

diff --git a/src/widgets/button.lua b/src/widgets/button.lua
@@ -35,15 +35,16 @@ return Runtime.widget(function(text)
 			[ref] = "button",
 			BackgroundColor3 = style.bg3,
 			BorderSizePixel = 0,
-			Font = Enum.Font.SourceSans,
-			Size = UDim2.new(0, 100, 0, 40),
+			Font = Enum.Font.Gotham,
 			TextColor3 = style.textColor,
-			AutomaticSize = Enum.AutomaticSize.X,
-			TextSize = 21,
+			AutomaticSize = Enum.AutomaticSize.XY,
+			TextSize = 14,
 
 			create("UIPadding", {
-				PaddingLeft = UDim.new(0, 10),
-				PaddingRight = UDim.new(0, 10),
+				PaddingLeft = UDim.new(0, 5),
+				PaddingRight = UDim.new(0, 5),
+				PaddingTop = UDim.new(0, 5),
+				PaddingBottom = UDim.new(0, 5),
 			}),
 
 			create("UICorner"),

diff --git a/src/widgets/checkbox.lua b/src/widgets/checkbox.lua
@@ -50,16 +50,16 @@ return Runtime.widget(function(text, options)
 			[ref] = "checkbox",
 			BackgroundTransparency = 1,
 			Name = "Checkbox",
-			Size = UDim2.new(0, 30, 0, 30),
+			Size = UDim2.new(0, 20, 0, 20),
 			AutomaticSize = Enum.AutomaticSize.X,
 
 			create("TextButton", {
 				BackgroundColor3 = Color3.fromRGB(54, 54, 54),
 				BorderSizePixel = 0,
-				Font = Enum.Font.SourceSansBold,
-				Size = UDim2.new(0, 30, 0, 30),
+				Font = Enum.Font.GothamBold,
+				Size = UDim2.new(0, 20, 0, 20),
 				TextColor3 = Color3.fromRGB(153, 153, 153),
-				TextSize = 24,
+				TextSize = 16,
 
 				create("UICorner", {
 					CornerRadius = UDim.new(0, 8),
@@ -77,7 +77,7 @@ return Runtime.widget(function(text, options)
 				BackgroundColor3 = Color3.fromRGB(255, 255, 255),
 				Font = Enum.Font.GothamMedium,
 				TextColor3 = Color3.fromRGB(203, 203, 203),
-				TextSize = 18,
+				TextSize = 14,
 				AutomaticSize = Enum.AutomaticSize.X,
 				RichText = true,
 			}),

diff --git a/src/widgets/error.lua b/src/widgets/error.lua
@@ -8,37 +8,37 @@ return Runtime.widget(function(text)
 			BackgroundTransparency = 0,
 			BackgroundColor3 = Color3.fromRGB(231, 76, 60),
 			Name = "Error",
-			Size = UDim2.new(0, 100, 0, 75),
 			AutomaticSize = Enum.AutomaticSize.XY,
 
+			create("UICorner"),
+
 			create("UIPadding", {
-				PaddingBottom = UDim.new(0, 20),
-				PaddingLeft = UDim.new(0, 20),
-				PaddingRight = UDim.new(0, 20),
-				PaddingTop = UDim.new(0, 20),
+				PaddingLeft = UDim.new(0, 10),
+				PaddingRight = UDim.new(0, 10),
+				PaddingTop = UDim.new(0, 10),
 			}),
 
-			create("UIListLayout", {}),
+			create("UIListLayout", {
+				Padding = UDim.new(0, 10),
+			}),
 
 			create("TextLabel", {
 				Font = Enum.Font.GothamBold,
 				BackgroundTransparency = 1,
 				TextColor3 = Color3.fromRGB(255, 255, 255),
-				TextSize = 25,
-				AutomaticSize = Enum.AutomaticSize.X,
+				TextSize = 20,
+				AutomaticSize = Enum.AutomaticSize.XY,
 				Text = "⚠️  An Error Occurred",
-				Size = UDim2.fromOffset(0, 75),
 			}),
 
 			create("TextLabel", {
 				Name = "error",
 				Font = Enum.Font.GothamMedium,
 				BackgroundTransparency = 1,
 				TextColor3 = Color3.fromRGB(255, 255, 255),
-				TextSize = 20,
+				TextSize = 16,
 				LineHeight = 1.2,
 				AutomaticSize = Enum.AutomaticSize.XY,
-				Size = UDim2.fromOffset(100, 75),
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextYAlignment = Enum.TextYAlignment.Top,
 			}),

diff --git a/src/widgets/heading.lua b/src/widgets/heading.lua
@@ -22,7 +22,7 @@ return Runtime.widget(function(text, options)
 			Font = Enum.Font.GothamBold,
 			AutomaticSize = Enum.AutomaticSize.XY,
 			TextColor3 = style.mutedTextColor,
-			TextSize = 20,
+			TextSize = 14,
 			RichText = true,
 		})
 	end)

diff --git a/src/widgets/label.lua b/src/widgets/label.lua
@@ -18,9 +18,9 @@ return Runtime.widget(function(text)
 		create("TextLabel", {
 			[ref] = "label",
 			BackgroundTransparency = 1,
-			Font = Enum.Font.SourceSans,
+			Font = Enum.Font.Gotham,
 			TextColor3 = style.textColor,
-			TextSize = 20,
+			TextSize = 16,
 			RichText = true,
 		})
 

diff --git a/src/widgets/row.lua b/src/widgets/row.lua
@@ -45,6 +45,7 @@ return Runtime.widget(function(options, fn)
 	local frame = refs.frame
 
 	frame.UIListLayout.HorizontalAlignment = options.alignment or Enum.HorizontalAlignment.Left
+	frame.UIListLayout.VerticalAlignment = options.verticalAlignment or Enum.VerticalAlignment.Top
 
 	Runtime.scope(fn)
 end)
diff --git a/src/widgets/table.lua b/src/widgets/table.lua
@@ -11,23 +11,23 @@ local cell = Runtime.widget(function(text, font)
 		return create("TextLabel", {
 			[ref] = "label",
 			BackgroundTransparency = 1,
-			Font = Enum.Font.SourceSans,
+			Font = Enum.Font.Gotham,
 			AutomaticSize = Enum.AutomaticSize.XY,
 			TextColor3 = style.textColor,
-			TextSize = 20,
+			TextSize = 16,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			RichText = true,
 
 			create("UIPadding", {
-				PaddingBottom = UDim.new(0, 8),
-				PaddingLeft = UDim.new(0, 8),
-				PaddingRight = UDim.new(0, 8),
-				PaddingTop = UDim.new(0, 8),
+				PaddingBottom = UDim.new(0, 6),
+				PaddingLeft = UDim.new(0, 6),
+				PaddingRight = UDim.new(0, 6),
+				PaddingTop = UDim.new(0, 6),
 			}),
 		})
 	end)
 
-	refs.label.Font = font or Enum.Font.SourceSans
+	refs.label.Font = font or Enum.Font.Gotham
 	refs.label.Text = text
 end)
 

diff --git a/src/widgets/window.lua b/src/widgets/window.lua
@@ -70,7 +70,8 @@ return Runtime.widget(function(options, fn)
 
 			c("TextButton", {
 				[ref] = "titleBar",
-				Size = UDim2.new(1, 0, 0, 40),
+				Size = UDim2.new(1, 0, 0, 0),
+				AutomaticSize = Enum.AutomaticSize.Y,
 				BackgroundTransparency = 1,
 				Text = "",
 
@@ -128,23 +129,23 @@ return Runtime.widget(function(options, fn)
 						Text = "..",
 						Position = UDim2.new(0, 0, 0, 0),
 						BackgroundTransparency = 1,
-						TextSize = 20,
+						TextSize = 16,
 						TextColor3 = style.mutedTextColor,
 					}),
 
 					c("TextLabel", {
 						Text = "..",
 						Position = UDim2.new(0, 0, 0, 7),
 						BackgroundTransparency = 1,
-						TextSize = 20,
+						TextSize = 16,
 						TextColor3 = style.mutedTextColor,
 					}),
 
 					c("TextLabel", {
 						Text = "..",
 						Position = UDim2.new(0, 0, 0, -7),
 						BackgroundTransparency = 1,
-						TextSize = 20,
+						TextSize = 16,
 						TextColor3 = style.mutedTextColor,
 					}),
 				}),
@@ -155,7 +156,7 @@ return Runtime.widget(function(options, fn)
 					Font = Enum.Font.GothamBold,
 					Size = UDim2.new(1, 0, 1, 0),
 					TextColor3 = style.mutedTextColor,
-					TextSize = 20,
+					TextSize = 14,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextYAlignment = Enum.TextYAlignment.Top,
 					TextTruncate = Enum.TextTruncate.AtEnd,
@@ -164,12 +165,12 @@ return Runtime.widget(function(options, fn)
 				c("TextButton", {
 					[ref] = "close",
 					BackgroundColor3 = Color3.fromHex("e74c3c"),
-					Size = UDim2.new(0, 20, 0, 20),
+					Size = UDim2.new(0, 14, 0, 14),
 					Text = "",
 					AnchorPoint = Vector2.new(0.5, 0),
 					Position = UDim2.new(1, -10, 0, 0),
 					TextColor3 = Color3.fromHex("#71190f"),
-					TextSize = 20,
+					TextSize = 16,
 					Font = Enum.Font.Gotham,
 
 					MouseEnter = function()
@@ -197,7 +198,7 @@ return Runtime.widget(function(options, fn)
 				HorizontalScrollBarInset = Enum.ScrollBarInset.ScrollBar,
 				BorderSizePixel = 0,
 				ScrollBarThickness = 6,
-				Position = UDim2.new(0, 0, 0, 40),
+				Position = UDim2.new(0, 0, 0, 25),
 
 				c("UIListLayout", {
 					SortOrder = Enum.SortOrder.LayoutOrder,
@@ -209,8 +210,8 @@ return Runtime.widget(function(options, fn)
 				[ref] = "resizeHandle",
 				Size = UDim2.new(0, 20, 0, 20),
 				Text = "≡",
-				Font = Enum.Font.SourceSans,
-				TextSize = 20,
+				Font = Enum.Font.Gotham,
+				TextSize = 16,
 				Rotation = -45,
 				BackgroundTransparency = 1,
 				TextColor3 = style.mutedTextColor,