Rewrote IconButton Widget for Green Shoes.

app/ui/lessons.rb

@@ -24,6 +24,8 @@ module HH::LessonContainerText
     :matching => {:stroke => "#f00", :weight => "bold"},
   }
 
+  $ICONBUTTONS = []
+
   # merges options +opts+ with those of +args+ if any
   def merge_opts(args, opts)
     res = args.dup
@@ -62,6 +64,7 @@ def prompt *args
 
   include HH::Markup
   def embed_code str, opts={}
+=begin
     stack :margin_bottom => 12 do
       background "#602", :curve => 4
       para highlight(str, nil, COLORS), CODE_STYLE
@@ -78,6 +81,7 @@ def embed_code str, opts={}
         end
       end
     end
+=end
   end
 end
 
@@ -110,6 +114,7 @@ def method_missing(symbol, *args, &blk)
   def set_content &blk
     delete_event_connections
     @slot.clear{}
+    $ICONBUTTONS.clear
     s = self
     @slot.append{s.instance_eval &blk; flush}
   end
@@ -229,12 +234,12 @@ def execute_page
     lesson_set = self
 
     @container.set_content do
-      background gray(0.1)
+      background(gray(0.1))
 
       lesson_name, pages = lessons[lesson]
       page_title, page_block = pages[page]
 
-      stack :margin => 10, :height => -32, :scroll => true do
+      stack margin: 10, height: height - 55 do
         # if first page of a lesson display the lesson name
         if page == 0
           title "#{lesson+1}. #{lesson_name}"
@@ -247,17 +252,21 @@ def execute_page
         instance_eval &page_block
       end
 
-      flow :height => 32,  :bottom => 0, :right => 0 do
-        icon_button :arrow_left, "Previous", :left => 10 do
+      flow do
+        flow(width: 10){}
+        icon_button :arrow_left, "Previous" do
           lesson_set.previous_page
         end
-        icon_button :arrow_right, "Next", :left => 100 do
+        flow(width: 30){}
+        icon_button :arrow_right, "Next" do
           lesson_set.next_page
         end
-        icon_button :menu, "Index", :left => 55 do
+        flow(width: 30){}
+        icon_button :menu, "Index" do
           lesson_set.show_menu
         end
-        icon_button :x, "Close", :right => 10 do
+        flow(width: 240){}
+        icon_button :x, "Close" do
           lesson_set.close_lesson
         end
       end
@@ -292,6 +301,7 @@ def previous_page
 
   # calls finalization
   def close_lesson
+    $ICONBUTTONS.clear
     save_lesson
     @container.delete_event_connections
     @@open_lesson = nil

app/ui/mainwindow.rb

@@ -16,8 +16,9 @@ def start_lessons name, blk, lesson_area
   end
 
   def hide_lesson
-    @lesson_stack.hide
-    @main_content.style(:width => 1.0)
+    #@lesson_stack.hide
+    #@main_content.style(:width => 1.0)
+    @lesson_stack.clear
   end
 
   def load_file name={}

app/ui/widgets.rb

@@ -40,46 +40,24 @@ class IconButton < Shoes::Widget
 #  MARGIN = 8
 #  SIZE = BSIZE + MARGIN * 2
   def initialize (type, tooltip, opts={}, &blk)
-=begin
-    strokewidth 1
-    nofill
-
-    @tooltip_text = tooltip
-
-    stack do
-      stack :margin => 8, :width => 32, :height => 32 do
-        stroke white
-        send type
-      end
-
-      hover do
-        @over.show
-        if @tooltip_text
-          create_tooltip
-        end
-      end
-      leave do
-        @over.hide
-        if @tooltip
-          @tooltip.hide
-          @tooltip.remove
-          @tooltip = nil
-        end
-      end
-    end
-
-    style(:width => 32)
-
-    stack :margin => 8, :top => 0, :left => 0 do
-       @over = stack :width => 16, :height => 16, :hidden => true do
-        background gray(0.8)
-        stroke black
-        send type
-      end
+    over = stack(width: 16, height: 16){}
+    @bgs = []
+    over.hover{@bgs.flatten.each &:show}
+    over.leave{@bgs.flatten.each &:hide}
+    over.click{blk.call}
+    timer 0.01 do
+      @bgs << rect(over.left, over.top, 16, 16, hidden: true, strokewidth: 0, fill: gray(0.8))
+      strokewidth 1
+      stroke white
+      nofill
+      $ICONBUTTONS << send(type, over.left, over.top)
+      stroke black
+      @bgs << send(type, over.left, over.top)
+      @bgs.last.each &:hide
+      strokewidth 0
+      fill black
+      $ICONBUTTONS << @bgs
     end
-
-    click &blk
-=end
   end
 
   def create_tooltip
@@ -95,28 +73,28 @@ def create_tooltip
           :fill => red, :stroke => white)
   end
 
-  def arrow_right
-    line(1, 8, 14, 8)
-    line(14, 8, 10, 1+3)
-    line(14, 8, 10, 15-3)
+  def arrow_right x, y
+    [line(x+1, y+8, x+14, y+8), 
+     line(x+14, y+8, x+10, y+1+3), 
+     line(x+14, y+8, x+10, y+15-3)]
   end
 
-  def arrow_left
-    line(1, 8, 14, 8)
-    line(1, 8, 6, 1+3)
-    line(1, 8, 6, 15-3)
+  def arrow_left x, y
+    [line(x+1, y+8, x+14, y+8), 
+     line(x+1, y+8, x+6, y+1+3), 
+     line(x+1, y+8, x+6, y+15-3)]
   end
 
-  def x
-    line(2, 2, 13, 13)
-    line(2, 13, 13, 2)
+  def x x, y
+    [line(x+2, y+2, x+13, y+13), 
+     line(x+2, y+13, x+13, y+2)]
   end
 
-  def menu
-    rect 2, 2, 11, 11
-    line 4, 6, 11, 6
-    line 4, 8, 11, 8
-    line 4, 10, 11, 10
+  def menu x, y
+    [rect(x+2, y+2, 11, 11), 
+     line(x+4, y+6, x+11, y+6), 
+     line(x+4, y+8, x+11, y+8), 
+     line(x+4, y+10, x+11, y+10)]
   end
 end
 

lessons/beginner/programming.rb

@@ -10,11 +10,12 @@
       "programming is, and then we'll write some basic programs to draw fun ",
       "things on the screen. Sound good? Off we go!", "\n\n"
     flow do
-      para "(click the little "
+      para "(click the little ", width: 100
       icon_button :arrow_right, nil do
         alert "Not this one! The one below!"
       end
-      para " on the bottom of the screen to get started)"
+      para " on the bottom of the screen to get", width: 250
+      para " started)"
     end
   end
 

lessons/tour.rb

@@ -4,12 +4,12 @@
     para "Welcome to the Hackety Hack tour!"
     flow do
     para "This whole side of the screen is the ", em("Hackety Hack Tutor"),
-          ". You can move forward through the lessons by clicking the ", 
-          em("Next"), " button(", "\n"
+          ". You can move forward through the lessons by clicking \n"
+    para "the ", em("Next"), " button( ", width: 120
     icon_button :arrow_right, nil do
       alert "You should click on the actual button, below! =)"
     end
-    para "). Give it a shot!"
+    para " ). Give it a shot!", width: 120
   end end
 
   page "Good Job!" do