Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Buttons not using styles font for alignment of text #8

Closed
ArchAngel075 opened this issue Jan 20, 2017 · 2 comments
Closed

Buttons not using styles font for alignment of text #8

ArchAngel075 opened this issue Jan 20, 2017 · 2 comments

Comments

@ArchAngel075
Copy link

Noticed that buttons don't align text properly when using non default styles.
potential fix :diff

noticed when i had a singularly large button with center alignment and font size 64

@trelemar
Copy link

trelemar commented Jan 20, 2017

I've noticed that comp:setAlign("center") throws it off as well, but sometimes using component.align = "center" or just calling center in gooi.newButton({align = "center"}) agruments works. Sometimes... Not always

@gustavostuff
Copy link
Owner

gustavostuff commented Jan 30, 2017

The issue about the buttons not fitting the text is now fixed in version 0.0.2, I was unable to reproduce the second issue about the text alignment, a small snippet reproducing the issue may help me.

I had to make some decisions about how the buttons react to changes in the font size, take a look at this example (and run it if you have a chance):

require "gooi"

function love.load()
	gr = love.graphics
	kb = love.keyboard
	mo = love.mouse

	bigFont = gr.newFont(18)

	btn1 = gooi.newButton("gooi.alert()"):onRelease(function()
		gooi.alert("alert!");
	end)

	btn2 = gooi.newButton("gooi.confirm()"):onRelease(function()
		gooi.confirm("Choose", function()
			gooi.alert("You clicked yes! :)");
		end, function()
			gooi.confirm("Are you sure? :(", function()
				gooi.alert("I'M CRYIIIIING")
			end, function()
				gooi.alert("Good, I have a chance :)")
			end)
		end)
	end)

	btn3 = gooi.newButton("button 3")

	joyGame = gooi.newJoy()
	btnShoot = gooi.newButton("Shoot")
	lblLife = gooi.newLabel("Life:")
	lblLife.w = 60
	barLife = gooi.newBar(0.9)

	gridPanel = gooi.newPanel(320, 140, 450, 100, "grid 3x3"):add(btn1, btn2):add(btn3, "3,2")
	gamePanel = gooi.newPanel(320, 260, 350, 250, "game")
	gamePanel:add(joyGame, "b-l")
	gamePanel:add(btnShoot, "b-r")
	gamePanel:add(lblLife, "t-l")
	gamePanel:add(barLife, "t-l")

	comps = {
		gooi.newLabel("this is a label", 10, 10):setOpaque(true),
		gooi.newButton("Tooltip button", 10, 60, 300, 20):setTooltip("this is a tooltip"),
		gooi.newSlider(.75, 10, 110),
		gooi.newCheck("this is a check box", 10, 160),
		gooi.newRadio("this is a radio", "rg1", 10, 210),
		gooi.newText("this is a text box", 10, 260),
		gooi.newBar(.7, 10, 310),
		gooi.newSpinner(0, 200000, 150, 10, 360),
		gooi.newJoy(10, 410),
		gooi.newKnob(.9, 320, 10),
		gridPanel,
		btn1,
		btn2,
		btn3,
		gooi.newButton("Change style", 320, 520):onRelease(function()
			for i = 1, #comps do
				comps[i]:setStyle({
					font = bigFont,
					bgColor = "#FF8800AA"
				})
			end
		end):bg("#00FF0088"),
		joyGame,
		btnShoot,
		lblLife,
		barLife,
	}

	-- This enables tooltips and make dialogs smaller:
	gooi.desktopMode()
end
function love.update(dt)
	gooi.update(dt)
end
function love.draw()
	gr.rectangle("line", gridPanel.x, gridPanel.y, gridPanel.w, gridPanel.h)
	gr.rectangle("line", gamePanel.x, gamePanel.y, gamePanel.w, gamePanel.h)
	
	gooi.draw()
	gr.print("FPS: "..love.timer.getFPS())
end

function love.mousereleased(x, y, button) gooi.released() end
function love.mousepressed(x, y, button)  gooi.pressed() end

function love.textinput(text)
	gooi.textinput(text)
end
function love.keypressed(key)
	gooi.keypressed(key)
	if key == "escape" then
		quit()
	end
end

function quit()
	love.event.quit()
end

Before pressing "Change style":
ss1.png
After:
ss2.png

Note:

  • Components inside a panel don't change their proportions
  • Free components with no text attribute (Joysticks, Progress bars, etc.) keep their bounds too
  • Only free elements with a text component react to font size changes
  • The component bounds fit the text of the new font

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants