From 9058f2a0104f2640f85e92e0a98a9f8dd8acdcd9 Mon Sep 17 00:00:00 2001 From: ashbb Date: Fri, 3 Jun 2011 22:48:13 +0900 Subject: [PATCH] Rewrote IconButton Widget for Green Shoes. --- app/ui/lessons.rb | 24 ++++++--- app/ui/mainwindow.rb | 5 +- app/ui/widgets.rb | 88 +++++++++++++-------------------- lessons/beginner/programming.rb | 5 +- lessons/tour.rb | 6 +-- 5 files changed, 59 insertions(+), 69 deletions(-) diff --git a/app/ui/lessons.rb b/app/ui/lessons.rb index efe2583..cb3fff8 100644 --- a/app/ui/lessons.rb +++ b/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 diff --git a/app/ui/mainwindow.rb b/app/ui/mainwindow.rb index 8dec1ca..a4cd750 100755 --- a/app/ui/mainwindow.rb +++ b/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={} diff --git a/app/ui/widgets.rb b/app/ui/widgets.rb index 8d3d7a2..bdaeb65 100644 --- a/app/ui/widgets.rb +++ b/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 diff --git a/lessons/beginner/programming.rb b/lessons/beginner/programming.rb index e95e135..223412f 100644 --- a/lessons/beginner/programming.rb +++ b/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 diff --git a/lessons/tour.rb b/lessons/tour.rb index 156f8ac..9ea9984 100644 --- a/lessons/tour.rb +++ b/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