corner radius, control highlight
This commit is contained in:
Michael Freno
312
examples/CornerRadiusDemo.lua
Normal file
312
examples/CornerRadiusDemo.lua
Normal file
@@ -0,0 +1,312 @@
|
||||
-- Demo showing corner radius functionality
|
||||
|
||||
local FlexLove = require("FlexLove")
|
||||
local Gui = FlexLove.GUI
|
||||
local Color = FlexLove.Color
|
||||
|
||||
function love.load()
|
||||
Gui.init({
|
||||
baseScale = { width = 1920, height = 1080 }
|
||||
})
|
||||
|
||||
-- Create main container
|
||||
local container = Gui.new({
|
||||
x = 50,
|
||||
y = 50,
|
||||
width = 1100,
|
||||
height = 600,
|
||||
backgroundColor = Color.new(0.1, 0.1, 0.15, 1),
|
||||
cornerRadius = 20,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(0.5, 0.5, 0.6, 1),
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 20,
|
||||
padding = { top = 20, right = 20, bottom = 20, left = 20 },
|
||||
})
|
||||
|
||||
-- Title
|
||||
Gui.new({
|
||||
parent = container,
|
||||
height = 50,
|
||||
text = "Corner Radius Demo",
|
||||
textSize = 28,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.2, 0.3, 1),
|
||||
cornerRadius = 10,
|
||||
})
|
||||
|
||||
-- Row 1: Uniform corner radius
|
||||
local row1 = Gui.new({
|
||||
parent = container,
|
||||
height = 150,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 20,
|
||||
backgroundColor = Color.new(0.12, 0.12, 0.17, 0.5),
|
||||
cornerRadius = 8,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row1,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "radius: 0",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.8, 0.2, 0.2, 1),
|
||||
cornerRadius = 0,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row1,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "radius: 10",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.8, 0.2, 1),
|
||||
cornerRadius = 10,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row1,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "radius: 25",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.2, 0.8, 1),
|
||||
cornerRadius = 25,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row1,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "radius: 50\n(pill)",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.8, 0.2, 0.8, 1),
|
||||
cornerRadius = 50,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
-- Row 2: Individual corner radii
|
||||
local row2 = Gui.new({
|
||||
parent = container,
|
||||
height = 150,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 20,
|
||||
backgroundColor = Color.new(0.12, 0.12, 0.17, 0.5),
|
||||
cornerRadius = 8,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row2,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "Top-Left\nOnly",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.9, 0.5, 0.2, 1),
|
||||
cornerRadius = { topLeft = 30, topRight = 0, bottomLeft = 0, bottomRight = 0 },
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row2,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "Top\nCorners",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.9, 0.5, 1),
|
||||
cornerRadius = { topLeft = 25, topRight = 25, bottomLeft = 0, bottomRight = 0 },
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row2,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "Diagonal\nCorners",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.5, 0.2, 0.9, 1),
|
||||
cornerRadius = { topLeft = 30, topRight = 0, bottomLeft = 0, bottomRight = 30 },
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row2,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "Mixed\nRadii",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.9, 0.9, 0.2, 1),
|
||||
cornerRadius = { topLeft = 5, topRight = 15, bottomLeft = 25, bottomRight = 35 },
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
-- Row 3: Interactive buttons with corner radius
|
||||
local row3 = Gui.new({
|
||||
parent = container,
|
||||
height = 180,
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 15,
|
||||
backgroundColor = Color.new(0.12, 0.12, 0.17, 0.5),
|
||||
cornerRadius = 8,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row3,
|
||||
height = 25,
|
||||
text = "Interactive Buttons with Corner Radius:",
|
||||
textSize = 16,
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
local buttonRow = Gui.new({
|
||||
parent = row3,
|
||||
height = 80,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 15,
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = buttonRow,
|
||||
width = 180,
|
||||
height = 60,
|
||||
text = "Click Me!",
|
||||
textAlign = "center",
|
||||
textSize = 18,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.6, 0.9, 1),
|
||||
cornerRadius = 15,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.3),
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
print("Button 1 clicked!")
|
||||
end
|
||||
end
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = buttonRow,
|
||||
width = 180,
|
||||
height = 60,
|
||||
text = "Pill Button",
|
||||
textAlign = "center",
|
||||
textSize = 18,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.9, 0.3, 0.4, 1),
|
||||
cornerRadius = 30,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.3),
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
print("Button 2 clicked!")
|
||||
end
|
||||
end
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = buttonRow,
|
||||
width = 180,
|
||||
height = 60,
|
||||
text = "Sharp Top",
|
||||
textAlign = "center",
|
||||
textSize = 18,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.3, 0.8, 0.4, 1),
|
||||
cornerRadius = { topLeft = 0, topRight = 0, bottomLeft = 20, bottomRight = 20 },
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.3),
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
print("Button 3 clicked!")
|
||||
end
|
||||
end
|
||||
})
|
||||
|
||||
-- Clipping demo
|
||||
local clippingDemo = Gui.new({
|
||||
x = 50,
|
||||
y = 670,
|
||||
width = 500,
|
||||
height = 150,
|
||||
backgroundColor = Color.new(0.2, 0.2, 0.3, 1),
|
||||
cornerRadius = 20,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(0.8, 0.8, 0.9, 1),
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 10,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = clippingDemo,
|
||||
height = 25,
|
||||
text = "Clipping Demo: Children clipped to parent's rounded corners",
|
||||
textSize = 14,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
-- Child that extends beyond parent (will be clipped)
|
||||
Gui.new({
|
||||
parent = clippingDemo,
|
||||
x = -10,
|
||||
y = 40,
|
||||
width = 520,
|
||||
height = 80,
|
||||
backgroundColor = Color.new(0.9, 0.5, 0.2, 0.8),
|
||||
text = "This element extends beyond parent but is clipped!",
|
||||
textAlign = "center",
|
||||
textSize = 14,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
positioning = "absolute",
|
||||
})
|
||||
end
|
||||
|
||||
function love.update(dt)
|
||||
Gui.update(dt)
|
||||
end
|
||||
|
||||
function love.draw()
|
||||
love.graphics.clear(0.05, 0.05, 0.1, 1)
|
||||
Gui.draw()
|
||||
|
||||
-- Draw instructions
|
||||
love.graphics.setColor(1, 1, 1, 1)
|
||||
love.graphics.print("Corner Radius System", 10, 10)
|
||||
love.graphics.print("Supports uniform radius (number) or individual corners (table)", 10, 30)
|
||||
end
|
||||
|
||||
function love.resize(w, h)
|
||||
Gui.resize()
|
||||
end
|
||||
239
examples/DisableHighlightDemo.lua
Normal file
239
examples/DisableHighlightDemo.lua
Normal file
@@ -0,0 +1,239 @@
|
||||
-- Demo showing disableHighlight property
|
||||
|
||||
local FlexLove = require("FlexLove")
|
||||
local Gui = FlexLove.GUI
|
||||
local Theme = FlexLove.Theme
|
||||
local Color = FlexLove.Color
|
||||
|
||||
function love.load()
|
||||
Gui.init({
|
||||
baseScale = { width = 1920, height = 1080 }
|
||||
})
|
||||
|
||||
-- Try to load space theme (optional)
|
||||
pcall(function()
|
||||
Theme.load("space")
|
||||
Theme.setActive("space")
|
||||
end)
|
||||
|
||||
-- Create main container
|
||||
local container = Gui.new({
|
||||
x = 50,
|
||||
y = 50,
|
||||
width = 900,
|
||||
height = 550,
|
||||
backgroundColor = Color.new(0.1, 0.1, 0.15, 1),
|
||||
cornerRadius = 20,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(0.5, 0.5, 0.6, 1),
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 20,
|
||||
padding = { top = 20, right = 20, bottom = 20, left = 20 },
|
||||
})
|
||||
|
||||
-- Title
|
||||
Gui.new({
|
||||
parent = container,
|
||||
height = 50,
|
||||
text = "disableHighlight Property Demo",
|
||||
textSize = 24,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.2, 0.3, 1),
|
||||
cornerRadius = 10,
|
||||
})
|
||||
|
||||
-- Description
|
||||
Gui.new({
|
||||
parent = container,
|
||||
height = 70,
|
||||
text = "Click buttons to see the difference.\nButtons with themeComponent automatically disable highlight (can be overridden).\nRegular buttons show highlight by default.",
|
||||
textSize = 13,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
backgroundColor = Color.new(0.15, 0.15, 0.2, 0.8),
|
||||
cornerRadius = 8,
|
||||
padding = { top = 10, right = 10, bottom = 10, left = 10 },
|
||||
})
|
||||
|
||||
-- Row 1: Regular buttons
|
||||
local row1 = Gui.new({
|
||||
parent = container,
|
||||
height = 130,
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 10,
|
||||
backgroundColor = Color.new(0.12, 0.12, 0.17, 0.5),
|
||||
cornerRadius = 8,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row1,
|
||||
height = 20,
|
||||
text = "Regular Buttons (no theme):",
|
||||
textSize = 14,
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
local regularRow = Gui.new({
|
||||
parent = row1,
|
||||
height = 80,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 15,
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = regularRow,
|
||||
width = 250,
|
||||
height = 70,
|
||||
text = "Default\n(shows highlight)",
|
||||
textAlign = "center",
|
||||
textSize = 14,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.6, 0.9, 1),
|
||||
cornerRadius = 12,
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
print("Regular button with highlight clicked!")
|
||||
end
|
||||
end
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = regularRow,
|
||||
width = 250,
|
||||
height = 70,
|
||||
text = "disableHighlight = true\n(no highlight)",
|
||||
textAlign = "center",
|
||||
textSize = 14,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.9, 0.3, 0.4, 1),
|
||||
cornerRadius = 12,
|
||||
disableHighlight = true,
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
print("Regular button without highlight clicked!")
|
||||
end
|
||||
end
|
||||
})
|
||||
|
||||
-- Row 2: Themed buttons
|
||||
local row2 = Gui.new({
|
||||
parent = container,
|
||||
height = 150,
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 10,
|
||||
backgroundColor = Color.new(0.12, 0.12, 0.17, 0.5),
|
||||
cornerRadius = 8,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row2,
|
||||
height = 20,
|
||||
text = "Themed Buttons (with themeComponent):",
|
||||
textSize = 14,
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
local themedRow = Gui.new({
|
||||
parent = row2,
|
||||
height = 100,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 15,
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = themedRow,
|
||||
width = 250,
|
||||
height = 80,
|
||||
text = "Default\n(auto-disables highlight)",
|
||||
textAlign = "center",
|
||||
textSize = 14,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.6, 0.9, 0.3),
|
||||
cornerRadius = 12,
|
||||
themeComponent = "button",
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
print("Themed button (auto-disabled highlight) clicked!")
|
||||
end
|
||||
end
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = themedRow,
|
||||
width = 250,
|
||||
height = 80,
|
||||
text = "disableHighlight = false\n(forced highlight)",
|
||||
textAlign = "center",
|
||||
textSize = 14,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.9, 0.3, 0.4, 0.3),
|
||||
cornerRadius = 12,
|
||||
themeComponent = "button",
|
||||
disableHighlight = false,
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
print("Themed button (forced highlight) clicked!")
|
||||
end
|
||||
end
|
||||
})
|
||||
|
||||
-- Summary
|
||||
local summary = Gui.new({
|
||||
parent = container,
|
||||
height = 70,
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 5,
|
||||
backgroundColor = Color.new(0.15, 0.2, 0.15, 0.8),
|
||||
cornerRadius = 8,
|
||||
padding = { top = 10, right = 10, bottom = 10, left = 10 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = summary,
|
||||
height = 18,
|
||||
text = "Summary:",
|
||||
textSize = 14,
|
||||
textColor = Color.new(0.8, 1, 0.8, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = summary,
|
||||
height = 40,
|
||||
text = "• Regular buttons: highlight enabled by default\n• Themed buttons: highlight disabled by default (themes provide their own feedback)\n• Both can be explicitly overridden with disableHighlight property",
|
||||
textSize = 11,
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
end
|
||||
|
||||
function love.update(dt)
|
||||
Gui.update(dt)
|
||||
end
|
||||
|
||||
function love.draw()
|
||||
love.graphics.clear(0.05, 0.05, 0.1, 1)
|
||||
Gui.draw()
|
||||
|
||||
-- Draw instructions
|
||||
love.graphics.setColor(1, 1, 1, 1)
|
||||
love.graphics.print("disableHighlight Property Demo", 10, 10)
|
||||
love.graphics.print("Press and hold buttons to see the difference", 10, 30)
|
||||
end
|
||||
|
||||
function love.resize(w, h)
|
||||
Gui.resize()
|
||||
end
|
||||
Reference in New Issue
Block a user