sproutcore 1.7.1.beta → 1.8.0

data/lib/frameworks/sproutcore/themes/ace/resources/button/ace/44px/button.css

@@ -1,14 +1,15 @@
 @theme(sc-jumbo-size) {
   
   $theme.button {
+    // set these here because SC.AutoResize looks here...
+    font-size: 16px;
+    font-weight: bold;
     
     .sc-button-label {
+      color: #777;
       margin-top: 12px;
       top: 0px;
       height: 24px;
-      font-size: 16px;
-      font-weight: bold;
-      color: #777;
     }
     
     @include slices("normal_button.png", $left: 3, $right: 3);

data/lib/frameworks/sproutcore/themes/ace/resources/button/dark/24px/button.css

@@ -24,68 +24,76 @@
 
   @theme(point-left) {
     $theme.button {
-      @include slices("normal_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-right);
+      @include slices("normal_button_pointer.png", $left: 12, $right: 12, $skip: middle right);
 
       .middle { left: 12px; }
+      .right { right:10px; width:3px }
 
       &.active {
-        @include slices("active_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-right);
+        @include slices("active_button_pointer.png", $left: 12, $right: 12, $skip: middle right);
         .middle { left: 12px; }
+        .right { right:10px; width:3px }
       }
 
       &.sel, &.def {
-        @include slices("selected_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-right);
+        @include slices("selected_button_pointer.png", $left: 12, $right: 12, $skip: middle right);
         .middle { left: 12px; }
+        .right { right:10px; width:3px }
       }
 
       &.sel.active, &.def.active {
-        @include slices("selected_active_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-right);
+        @include slices("selected_active_button_pointer.png", $left: 12, $right: 12, $skip: middle right);
         .middle { left: 12px; }
+        .right { right:10px; width:3px }
       }
     }
   }
 
   @theme(point-right) {
     $theme.button {
-      @include slices("normal_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-left);
+      @include slices("normal_button_pointer.png", $left: 12, $right: 12, $skip: middle left);
 
       .middle { right: 12px; }
+      .left { left:10px; width:3px }
 
       &.active {
-        @include slices("active_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-left);
+        @include slices("active_button_pointer.png", $left: 12, $right: 12, $skip: middle left);
         .middle { right: 12px; }
+        .left { left:10px; width:3px }
       }
 
       &.sel, &.def {
-        @include slices("selected_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-left);
+        @include slices("selected_button_pointer.png", $left: 12, $right: 12, $skip: middle left);
         .middle { right: 12px; }
+        .left { left:10px; width:3px }
       }
 
       &.sel.active, &.def.active {
-        @include slices("selected_active_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-left);
+        @include slices("selected_active_button_pointer.png", $left: 12, $right: 12, $skip: middle left);
         .middle { right: 12px; }
+        .left { left:10px; width:3px }
       }
     }
   }
 
   @theme(capsule) {
     $theme.button {
-      @include slices("normal_button_capsule.png", $left: 12, $right: 12, skip-middle);
+      @include slices("normal_button_capsule.png", $left: 12, $right: 12, $skip: middle);
 
       .middle { left: 12px; right: 12px; }
 
       &.active {
-        @include slices("active_button_capsule.png", $left: 12, $right: 12, skip-middle);
+        @include slices("active_button_capsule.png", $left: 12, $right: 12, $skip: middle);
         .middle { left: 12px; right: 12px; }
       }
 
       &.sel, &.def {
-        @include slices("selected_button_capsule.png", $left: 12, $right: 12, skip-middle);
+        @include slices("selected_button_capsule.png", $left: 12, $right: 12, $skip: middle);
         .middle { left: 12px; right: 12px; }
       }
 
       &.sel.active, &.def.active {
-        @include slices("selected_active_button_capsule.png", $left: 12, $right: 12, skip-middle);
+        @include slices("selected_active_button_capsule.png", $left: 12, $right: 12, $skip: middle);
         .middle { left: 12px; right: 12px; }
       }
     }

data/lib/frameworks/sproutcore/themes/ace/resources/button/dark/30px/button.css

@@ -26,46 +26,54 @@
 
   @theme(point-left) {
     $theme.button {
-      @include slices("normal_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-right);
+      @include slices("normal_button_pointer.png", $left: 12, $right: 12, $skip: middle right);
 
       .middle { left: 12px; }
+      .right { right:10px; width:3px }
 
       &.active {
-        @include slices("active_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-right);
+        @include slices("active_button_pointer.png", $left: 12, $right: 12, $skip: middle right);
         .middle { left: 12px; }
+        .right { right:10px; width:3px }
       }
 
       &.sel, &.def {
-        @include slices("selected_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-right);
+        @include slices("selected_button_pointer.png", $left: 12, $right: 12, $skip: middle right);
         .middle { left: 12px; }
+        .right { right:10px; width:3px }
       }
 
       &.sel.active, &.def.active {
-        @include slices("selected_active_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-right);
+        @include slices("selected_active_button_pointer.png", $left: 12, $right: 12, $skip: middle right);
         .middle { left: 12px; }
+        .right { right:10px; width:3px }
       }
     }
   }
 
   @theme(point-right) {
     $theme.button {
-      @include slices("normal_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-left);
+      @include slices("normal_button_pointer.png", $left: 12, $right: 12, $skip: middle left);
 
       .middle { right: 12px; }
+      .left { left:10px; width:3px }
 
       &.active {
-        @include slices("active_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-left);
+        @include slices("active_button_pointer.png", $left: 12, $right: 12, $skip: middle left);
         .middle { right: 12px; }
+        .left { left:10px; width:3px }
       }
 
       &.sel, &.def {
-        @include slices("selected_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-left);
+        @include slices("selected_button_pointer.png", $left: 12, $right: 12, $skip: middle left);
         .middle { right: 12px; }
+        .left { left:10px; width:3px }
       }
 
       &.sel.active, &.def.active {
-        @include slices("selected_active_button_pointer.png", $left: 12, $right: 12, skip-middle, skip-left);
+        @include slices("selected_active_button_pointer.png", $left: 12, $right: 12, $skip: middle left);
         .middle { right: 12px; }
+        .left { left:10px; width:3px }
       }
     }
   }

data/lib/frameworks/sproutcore/themes/ace/resources/button/dark/jumbo/button.css

@@ -0,0 +1,17 @@
+@theme(dark.sc-jumbo-size) {
+
+  $theme.button {
+    color: #555;
+    text-shadow: 0px 1px 0px white;
+
+    &.active {
+      color: #333;
+      text-shadow: 0px 1px 0px white;
+    }
+
+    &.sel.active, &.def.active {
+      color: white;
+      text-shadow: 0px 1px 0px white;
+    }
+  }
+}

data/lib/frameworks/sproutcore/themes/ace/resources/button/dark/small/button.css

@@ -0,0 +1,17 @@
+@theme(dark.sc-small-size) {
+
+  $theme.button {
+    color: #555;
+    text-shadow: 0px 1px 0px white;
+
+    &.active {
+      color: #333;
+      text-shadow: 0px 1px 0px white;
+    }
+
+    &.sel.active, &.def.active {
+      color: white;
+      text-shadow: 0px 1px 0px white;
+    }
+  }
+}

data/lib/frameworks/sproutcore/themes/ace/resources/disclosure/ace/disclosure.css

@@ -10,8 +10,8 @@ $theme.disclosure {
   }
   
   img.disclosure.button {
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
     &.open    { @include slice("disclosure_open.png"); }
     &.closed  { @include slice("disclosure_closed.png"); }
     

data/lib/frameworks/sproutcore/themes/ace/resources/master-detail/master-detail.css

@@ -5,7 +5,7 @@ $theme.master-detail {
     -webkit-border-top-left-radius: 10px;
     -webkit-border-top-right-radius: 10px;
     -moz-border-radius-topleft: 10px;
-    -moz-border-raidus-topright: 10px;
+    -moz-border-radius-topright: 10px;
   }
   
   & > .sc-view {
@@ -22,6 +22,6 @@ $theme.master-detail {
     -webkit-border-top-left-radius: 10px;
     -webkit-border-top-right-radius: 10px;
     -moz-border-radius-topleft: 10px;
-    -moz-border-raidus-topright: 10px;
+    -moz-border-radius-topright: 10px;
   }
 }

data/lib/frameworks/sproutcore/themes/ace/resources/picker/popover/popover.css

@@ -24,7 +24,9 @@
       left: -25px;
       right: -25px;
       
-      @include slices("popover_notoolbar.png", $left: 40, $top: 40, $bottom: 40, $right: 40, $fill: 1 1, skip-middle);
+      @include slices("popover_notoolbar.png", $left: 40, $top: 40, $bottom: 40, $right: 40, $fill: 1 1, $skip: middle);
+
+      .middle { display: none }
       
       div { z-index: 5; }
     }
@@ -33,7 +35,7 @@
       top: -20px;
       @include slices(
         "popover.png", $left: 40, $top: 75, $bottom: 40, $right: 40, 
-        skip-left, skip-middle, skip-right, skip-bottom-left, skip-bottom, skip-bottom-right
+        $skip: left middle right bottom-left bottom bottom-left bottom-right
       );
       
       .left { top: 75px; }
@@ -45,7 +47,7 @@
       bottom: -20px;
       @include slices(
         "popover.png", $left: 40, $bottom: 75, $top: 40, $right: 40, 
-        skip-left, skip-middle, skip-right, skip-top-left, skip-top, skip-top-right
+        $skip: left middle right top-left top top-right
       );
       
       .left { bottom: 75px; }

data/lib/frameworks/sproutcore/themes/iphone_theme/english.lproj/core.css

@@ -1,5 +1,5 @@
 body {
-  background: sc_static('images/pinstripes') repeat;
+  background: sc_static('images/pinstripes.png') repeat;
   top: 0;
   bottom: 0;
   left: 0;

data/lib/frameworks/sproutcore/themes/legacy_theme/english.lproj/toolbar.css

@@ -1,5 +1,5 @@
 .sc-toolbar-view {
-  background: sc_static('images/sc-theme-repeat-x') repeat-x 0px -650px; 
+  background: sc_static('images/sc-theme-repeat-x.png') repeat-x 0px -650px;
   border: none;
   border-top: 1px solid #4d5567; /* #818ea4; */
   -webkit-box-shadow: 0px -1px 2px rgba(0,0,0,0.3);

data/lib/gen/app/USAGE

@@ -2,12 +2,25 @@ app - Create a new SproutCore application target.
 
 USAGE:
 
-  sc-gen app AppName [--filename=FILENAME] [--target=TARGET_NAME]
+  sc-gen app AppName [--filename=FILENAME] [--target=TARGET_NAME] [--statechart]
 
 DISCUSSION:
 
-This generator will create a new SproutCore application for a particular project.  You should pass as the first parameter your AppName you want to create.  For example:
+This generator will create a new SproutCore application for a particular
+project.  You should pass as the first parameter your AppName you want to
+create.  For example:
 
-sc-gen app Todos
+  sc-gen app Todos
 
-defines a new application called Todos in the file apps/todos/ .
+This defines a new application called Todos in the file apps/todos/ .  Or you
+can include a basic statechart for example:
+
+  sc-gen app Todos --statechart
+
+This defines a new application called Todos in the file apps/todos/ using
+statecharts.  Within the apps/Todos/resources directory you will have a
+statechart.js file and a states directory with the ready_state.js file.  The
+statechart.js file sets the initial state of your app to ready.
+
+As your app grows.  You will create new states within the statechart.js file.
+In your states folder you will describe the states declared in the statechart.js.

data/lib/gen/language/Buildfile

@@ -6,21 +6,21 @@
 
 namespace :generator do
 
-  # First argument must be the namespace.  Second argument should be the 
+  # First argument must be the namespace.  Second argument should be the
   # language we want to add.  Generate a filename (foo.lproj) and language
   # name.
   task :prepare do
     long_languages = %w(english french german italian spanish japanese)
-    if language = GENERATOR.arguments[1]
+    if language = GENERATOR.arguments[2] || GENERATOR.arguments[1]
       if long_languages.include?(language.downcase)
         GENERATOR.language = language.downcase.capitalize
         GENERATOR.filename = language.downcase + '.lproj'
       else
-        GENERATOR.language = language.gsub('_', '-') 
+        GENERATOR.language = language.gsub('_', '-')
         GENERATOR.filename = language.gsub('-', '_') + '.lproj'
       end
     end
     GENERATOR.requires! :target_project, :target, :language, :filename
   end
-  
+
 end

data/lib/gen/language/USAGE

@@ -2,12 +2,12 @@ language - Create a new language for a SproutCore application.
 
 USAGE:
 
-  sc-gen language LanguageName [--target=TARGET_NAME]
+  sc-gen language AppName LanguageName [--target=TARGET_NAME]
 
 DISCUSSION:
 
-This generator will create a new language for a particular application. Please make sure you are in the specific application directory first, or specify one with the target parameter.  You should pass as the first parameter the LanguageName you want to create.  For example:
+This generator will create a new language for a particular application.  For example:
 
-sc-gen language Norwegian
+sc-gen language MyApp Norwegian
 
-defines a new language in your current application in the directory norwegian.lproj .
+defines a new language in the MyApp application in the directory norwegian.lproj .

data/lib/gen/page/templates/pages/@target_name@/Buildfile

@@ -1,13 +1,13 @@
 <%= copyright_block("#{namespace} Buildfile", :ruby) %>
 
-# You can use to buildfile to add a custom page title, set environment 
+# You can use to buildfile to add a custom page title, set environment
 # variables, and require any specific JavaScript or other libraries you want
-# to use.  
+# to use.
 #
-# The default configuration just sets the page title and also requires 
-# SproutCore-Mini (a smaller version of SproutCore)
+# The default configuration just sets the page title and also requires
+# a smaller subset of SproutCore (runtime and datastore).
 #
-config :<%= target_name %>, 
-  :required => ['sproutcore/mini'],
+config :<%= target_name %>,
+  :required => ['sproutcore/runtime', 'sproutcore/datastore'],
   :title    => '<%= target_name.split('_').map { |x| x.capitalize }.join(" ") %>'
-  
+

data/lib/gen/statechart_app/USAGE

@@ -0,0 +1,21 @@
+statechart_app - Create a new SproutCore application target using statecharts.
+
+USAGE:
+
+  sc-gen statechart_app AppName [--filename=FILENAME] [--target=TARGET_NAME]
+
+DISCUSSION:
+
+This generator will create a new SproutCore application with statecharts by
+default for a particular project.  You should pass as the first parameter your
+AppName you want to create.  For example:
+
+  sc-gen statechart_app Todos
+
+This defines a new application called Todos in the file apps/todos/ using
+statecharts.  Within the apps/Todos/resources directory you will have a
+statechart.js file and a states directory with the ready_state.js file.  The
+statechart.js file sets the initial state of your app to ready.
+
+As your app grows.  You will create new states within the statechart.js file.
+In your states folder you will describe the states declared in the statechart.js.

data/lib/gen/statechart_app/templates/apps/@target_name@/Buildfile

@@ -0,0 +1,9 @@
+<%= copyright_block(namespace, :ruby) %>
+
+# This is your Buildfile for your app, <%= namespace %>. This tells SproutCore
+# how to build your app. These settings override those in your project
+# Buildfile, which contains default settings for all apps in your project.
+
+# It is better to add :required targets here than in the global Buildfile.
+config :<%= target_name %>, :required => :sproutcore
+

data/lib/gen/statechart_app/templates/apps/@target_name@/core.js

@@ -0,0 +1,24 @@
+<%= copyright_block(namespace) %>
+/*globals <%= namespace %> */
+
+/** @namespace
+
+  My cool new app.  Describe your application.
+  
+  @extends SC.Object
+*/
+<%= namespace %> = SC.Application.create(
+  /** @scope <%= namespace %>.prototype */ {
+
+  NAMESPACE: '<%= namespace %>',
+  VERSION: '0.1.0',
+
+  // This is your application store.  You will use this store to access all
+  // of your model data.  You can also set a data source on this store to
+  // connect to a backend server.  The default setup below connects the store
+  // to any fixtures you define.
+  store: SC.Store.create().from(SC.Record.fixtures)
+  
+  // TODO: Add global constants or singleton objects needed by your app here.
+
+}) ;