ashbb / green_shoes

Green Shoes is one of the colorful Shoes written in pure Ruby.
Other
204 stars 37 forks source link

Stacking my flow #28

Closed dicom closed 13 years ago

dicom commented 13 years ago

After discovering that installing green_shoes was wonderfully easy on Windows, I gave it a go and tried running my red_shoes application on it. The result was for the most part ok (it displayed!), but it seems that it stacks my flows, making the output rather ugly.

I've prepared a simple example which demonstrates the problem. This generates an expected, nicely organised layout on red_shoes, but is incorrectly stacked on green_shoes.

require 'green_shoes'

Shoes.app :width => 400, :height => 300, :title => 'Test_issue' do

  def render_actions
    stack :width => 130 do
      para "Choices:"
      flow :height => 35 do
        @button1 = button "Button1", :width => 1.0, :height => 35
      end
      flow :height => 35 do
        @button2 = button "Button2:", :width => 1.0, :height => 35
      end
    end
  end

  def render_status
    stack :width => 130 do
      para "Status:"
     flow :height => 35 do
        @text1 = para "Value1"
      end
      flow :height => 35 do
        @text2 = para "Value2"
      end
    end
  end

  def render
    clear do
      background rgb(50, 50, 90, 0.7)
      flow :margin => 4 do
        render_actions
        render_status
      end
    end
  end

  render
end
dicom commented 13 years ago

Link to screenshots with red and green shoes: http://tinypic.com/view.php?pic=241tc7d&s=7

ashbb commented 13 years ago

Please add :width option explicitly like this:

flow :margin => 4, :width => 400 do
  render_actions
  render_status
end

Sorry for the inconvenience. :(

dicom commented 13 years ago

Thanks, that did indeed fix my issue.

However, I run into the issue again when I try to do a nested flow. Replacing the @button2 flow block in the render_actions method with the following code, I get in red shoes the expected layout with the two +/- buttons following the text on the same line, where as the buttons are put in the next line in green shoes. I tried inserting various :width values, but it didnt seem to have any effect for me in this nested case.

  flow :height => 35 do
    para "Select:     "
    @plus = button "+", :width => 20
    @minus = button "-", :width => 20
  end

Screenshot: http://www.freeimagehosting.net/image.php?e6e5e2e0be.png

Any insight would be appreciated. Thanks, Chris

ashbb commented 13 years ago

Yeah, this is one of the restrictions in Green Shoes. The width of TextBlock, i.e. para, is NOT the length of the character string, but just the width of the parent slot. So, try out the following:

flow :height => 35 do
  para "Select:     ", :width => 60
  @plus = button "+", :width => 20
  @minus = button "-", :width => 20
end

Have to add :width value to the TextBlock.

dicom commented 13 years ago

Allright, thanks for the explanation.