sproutcore 1.9.2 → 1.10.0.rc.1

data/lib/frameworks/sproutcore/themes/ace/resources/button/popup/select.css

@@ -1,20 +1,19 @@
 @theme(sc-regular-size.popup) {
   $theme.button {
     @include slices("normal_select.png", $left: 5, $right: 25);
-    
+
     .sc-button-label {
       position: absolute;
-      z-index: 5; /* Appear above background */
       left: 7px;
       text-align: left;
       right: 25px;
       vertical-align: top;
       color: #333;
     }
-    
+
     &.sel, &.sel.active, &.active {
       @include slices("active_select.png", $left: 5, $right: 25);
-      
+
       text-shadow: 0px 1px 1px rgba(255, 255, 255, .6);
     }
   }

data/lib/frameworks/sproutcore/themes/ace/resources/collection/normal/list.css

@@ -18,3 +18,21 @@ $theme.collection {
     background: #bcd7ec;
   }
 }
+
+$theme.sc-list-insertion-point {
+  overflow: visible;
+  background-color: #9ABAC9;
+  z-index: 1000;
+}
+
+$theme.sc-list-insertion-point > .anchor {
+  position: absolute;
+  width: 8px;
+  top: -3px;
+  left: -4px;
+  height: 8px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  background-color: #9ABAC9;
+}

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

@@ -1,41 +1,61 @@
 $theme.picker {
   background: transparent;
-  
+
+  /* The panel background extends outside the pane's frame by the shadow amount. */
   .panel-background {
-    position: absolute;
-    left: -15px;
-    top: -15px;
+    @include slices("panel.png", $top: 25, $left: 25, $right: 25, $bottom: 25, $fill: 1 1);
     bottom: -15px;
+    left: -15px;
+    position: absolute;
     right: -15px;
-    
-    @include slices("panel.png", $top: 25, $left: 25, $right: 25, $bottom: 25, $fill: 1 1);
+    top: -15px;
   }
-  
+
   &.perfectBottom {
     .sc-pointer {
-      position: absolute; width: 45px; height: 22px; margin-left: -22px; left: 50%; top: -20px;
       @include slice("pointers.png", $left: 28, $top: 2, $width: 45, $height: 22);
+      height: 22px;
+      left: 50%;
+      // margin-left: -22px;
+      position: absolute;
+      top: -20px;
+      width: 45px;
     }
   }
-  
+
   &.perfectRight {
     .sc-pointer {
-      position: absolute; width: 22px; height: 50px; left: -19px; top: 2px;
       @include slice("pointers.png", $left: 2, $top: 26, $width: 22, $height: 50);
+      height: 50px;
+      left: -19px;
+      // margin-top: -25px;
+      position: absolute;
+      top: 50%;
+      width: 22px;
     }
   }
-  
+
   &.perfectLeft {
     .sc-pointer {
-      position: absolute; width: 22px; height: 50px; right: -19px; top: 2px;
       @include slice("pointers.png", $left: 76, $top: 26, $width: 22, $height: 50);
+      height: 50px;
+      // margin-top: -25px;
+      position: absolute;
+      right: -19px;
+      top: 50%;
+      width: 22px;
     }
   }
-  
+
   &.perfectTop {
     .sc-pointer {
-      position: absolute; width: 45px; height: 22px; margin-left: -22px; left: 50%; bottom: -19px;
       @include slice("pointers.png", $left: 28, $top: 76, $width: 45, $height: 22);
+      bottom: -19px;
+      height: 22px;
+      left: 50%;
+      // margin-left: -22px;
+      position: absolute;
+      width: 45px;
     }
   }
 }

data/lib/frameworks/sproutcore/themes/ace/resources/segmented/18px/segmented.css

@@ -23,15 +23,16 @@ $theme.sc-segment-view {
   }
 
   .sc-button-label {
-    padding: 0px;
     font-size: 11px;
-    top: -2px;
+    line-height: 18px;
     margin-left: 9px;
     margin-right: 10px;
   }
 
-  img {
-    top: -3px;
+  img.icon {
+    height: 12px;
+    top: 2px;
+    width: 12px;
   }
 
   &.sc-first-segment .left {

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

@@ -29,13 +29,18 @@ $theme.sc-segment-view {
   }
 
   .sc-button-label {
-    padding: 0px;
     font-size: 12px;
-    top: 0;
+    line-height: 24px;
     margin-left: 9px;
     margin-right: 10px;
   }
 
+  img.icon {
+    height: 14px;
+    top: 5px;
+    width: 14px;
+  }
+
   &.sc-first-segment .left {
     @include slice("segmented_normal.png", $width: 8);
   }

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

@@ -29,15 +29,16 @@ $theme.sc-segment-view {
   }
 
   .sc-button-label {
-    padding: 0px;
     font-size: 13px;
-    top: 4px;
+    line-height: 30px;
     margin-left: 9px;
     margin-right: 10px;
   }
 
-  img {
-    top: -2px;
+  img.icon {
+    height: 16px;
+    top: 7px;
+    width: 16px;
   }
 
   &.sc-first-segment .left {

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

@@ -26,14 +26,17 @@ $theme.sc-segment-view {
     color:#777;
     font-size: 16px;
     font-weight: bold;
-    top: 11px;
+    line-height: 44px;
+    // top: 11px;
     text-shadow: 0px 1px 1px white;
     margin-left: 9px;
     margin-right: 10px;
   }
 
-  img {
-    top: -2px;
+  img.icon {
+    height: 24px;
+    top: 9px;
+    width: 24px;
   }
 
   &.sc-first-segment .left {

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

@@ -1,8 +1,10 @@
+@import "compass/css3";
+
 $theme.toolbar {
+  @include box-shadow(rgba(0,0,0,0.3) 0px 0px 2px);
   @include slice(toolbar.png, $width: 1, $repeat: repeat-x);
-  color: #555;
+  border-color: #999;
+  border-style: solid;
+  color: #505050;
   text-shadow: 0px 1px 1px white;
-  border-bottom: 1px solid #999;
-  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, .5);
-  z-index: 10;
-}
+}

data/lib/frameworks/sproutcore/themes/legacy_theme/render_delegates/button.js

@@ -10,7 +10,7 @@ sc_require("theme");
 */
 SC.LegacyTheme.buttonRenderDelegate = SC.RenderDelegate.create({
   className: 'button',
-  
+
   /**
     Called when we need to create the HTML that represents the button.
 
@@ -33,12 +33,12 @@ SC.LegacyTheme.buttonRenderDelegate = SC.RenderDelegate.create({
     context.setClass('cancel', dataSource.get('isCancel') || 0);
 
     if (toolTip) {
-      context.attr('title', toolTip);
-      context.attr('alt', toolTip);
+      context.setAttr('title', toolTip);
+      context.setAttr('alt', toolTip);
     }
 
     // addressing accessibility
-    context.attr('aria-pressed', isActive);
+    context.setAttr('aria-pressed', isActive);
 
     // Specify a minimum width for the inner part of the button.
     minWidth = (minWidth ? "style='min-width: " + minWidth + "px'" : '');
@@ -47,11 +47,11 @@ SC.LegacyTheme.buttonRenderDelegate = SC.RenderDelegate.create({
     // Create the inner label element that contains the text and, optionally,
     // an icon.
     context = context.begin('label').addClass('sc-button-label');
-    
+
     // NOTE: we don't add the label class names because button styles its own label.
     theme.labelRenderDelegate.render(dataSource, context);
     context = context.end();
-    
+
     context.push("</span>");
 
     if (dataSource.get('supportFocusRing')) {
@@ -85,5 +85,5 @@ SC.LegacyTheme.buttonRenderDelegate = SC.RenderDelegate.create({
     jquery.attr('aria-pressed', isActive);
     theme.labelRenderDelegate.update(dataSource, jquery.find('label'));
   }
-  
+
 });

data/lib/frameworks/sproutcore/themes/legacy_theme/render_delegates/progress.js

@@ -11,38 +11,38 @@ SC.LegacyTheme.PROGRESS_OFFSET_RANGE = 24;
 /**
   @class
   Renders and updates DOM representations of progress bars.
-  
+
   Parameters
   --------------------------
   Expects these properties on the data source:
-  
+
   - isIndeterminate
   - isRunning
   - isEnabled
   - value (from 0 to 1)
-  
+
   There are a few other properties supported for backwards-compatibility
   with certain ProgressView implementations; these ProgressViews should
   be updated to match the new API. These properties will trigger deprecation
   warnings.
-  
+
   Theme Constants
   -------------------------------------
   Note that, unlike render delegate parameters, which are mostly standardized,
   the theme constants can vary by the theme and the theme's method of rendering
   the control.
-  
-  - PROGRESS_ANIMATED_BACKGROUND_MATRIX: Set to the matrix used for 
-    background image position for animation. 
+
+  - PROGRESS_ANIMATED_BACKGROUND_MATRIX: Set to the matrix used for
+    background image position for animation.
     [1st image y-location, offset, total number of images]
-  
-  - PROGRESS_OFFSET_RANGE: The value of the progress inner offset range. 
+
+  - PROGRESS_OFFSET_RANGE: The value of the progress inner offset range.
     Should be the same as width of image. Default it to 24.
-  
+
 */
 SC.LegacyTheme.progressRenderDelegate = SC.RenderDelegate.create({
   className: 'progress',
-  
+
   render: function(dataSource, context) {
     this.addSizeClassName(dataSource, context);
 
@@ -50,21 +50,21 @@ SC.LegacyTheme.progressRenderDelegate = SC.RenderDelegate.create({
         valueMax = dataSource.get('maximum'),
         valueMin = dataSource.get('minimum'),
         valueNow = dataSource.get('ariaValue');
-    
-    var inner, animatedBackground, value = dataSource.get('value') * 100, 
+
+    var inner, animatedBackground, value = dataSource.get('value') * 100,
         cssString, backPosition,
         isIndeterminate = dataSource.get('isIndeterminate'),
         isRunning = dataSource.get('isRunning'),
         isEnabled = dataSource.get('isEnabled'),
         offsetRange = theme.PROGRESS_OFFSET_RANGE,
-        offset = (isIndeterminate && isRunning) ? 
+        offset = (isIndeterminate && isRunning) ?
                 (Math.floor(Date.now()/75)%offsetRange-offsetRange) : 0;
 
     //addressing accessibility
-    context.attr('aria-valuemax', valueMax);
-    context.attr('aria-valuemin', valueMin);
-    context.attr('aria-valuenow', valueNow);
-    context.attr('aria-valuetext', valueNow);
+    context.setAttr('aria-valuemax', valueMax);
+    context.setAttr('aria-valuemin', valueMin);
+    context.setAttr('aria-valuenow', valueNow);
+    context.setAttr('aria-valuetext', valueNow);
 
     // offsetRange from dataSource only supported for backwards-compatibility
     if (dataSource.get('offsetRange')) {
@@ -76,16 +76,16 @@ SC.LegacyTheme.progressRenderDelegate = SC.RenderDelegate.create({
         );
       }
       this._hasGivenOffsetRangeDeprecationWarning = YES;
-      
+
       offsetRange = dataSource.get('offsetRange');
     }
-  
+
     var classNames = {
       'sc-indeterminate': isIndeterminate,
       'sc-empty': (value <= 0),
       'sc-complete': (value >= 100)
     };
-    
+
     // compute value for setting the width of the inner progress
     if (!isEnabled) {
       value = "0%" ;
@@ -94,16 +94,16 @@ SC.LegacyTheme.progressRenderDelegate = SC.RenderDelegate.create({
     } else {
       value = value + "%";
     }
-    
+
     var classString = this._createClassNameString(classNames);
-    context.push('<div class="sc-inner ', classString, '" style="width: ', 
+    context.push('<div class="sc-inner ', classString, '" style="width: ',
                   value, ';left: ', offset, 'px;">',
                   '<div class="sc-inner-head">','</div>',
                   '<div class="sc-inner-tail"></div></div>',
                   '<div class="sc-outer-head"></div>',
                   '<div class="sc-outer-tail"></div>');
   },
-  
+
   update: function(dataSource, $) {
     this.updateSizeClassName(dataSource, $);
 
@@ -124,9 +124,9 @@ SC.LegacyTheme.progressRenderDelegate = SC.RenderDelegate.create({
         isRunning = dataSource.get('isRunning'),
         isEnabled = dataSource.get('isEnabled'),
         offsetRange = dataSource.get('offsetRange'),
-        offset = (isIndeterminate && isRunning) ? 
+        offset = (isIndeterminate && isRunning) ?
                 (Math.floor(Date.now()/75)%offsetRange-offsetRange) : 0;
-  
+
     // compute value for setting the width of the inner progress
     if (!isEnabled) {
       value = "0%" ;
@@ -141,10 +141,10 @@ SC.LegacyTheme.progressRenderDelegate = SC.RenderDelegate.create({
       'sc-empty': (value <= 0),
       'sc-complete': (value >= 100)
     };
-    
+
     $.setClass(classNames);
     inner = $.find('.sc-inner');
-    
+
     // animatedBackground from dataSource only supported for backwards-compatibility
     if (dataSource.get('animatedBackgroundMatrix')) {
       if (!this._hasGivenAnimatedBackgroundDeprecationWarning) {
@@ -154,28 +154,28 @@ SC.LegacyTheme.progressRenderDelegate = SC.RenderDelegate.create({
           "its PROGRESS_ANIMATED_BACKGROUND_MATRIX property."
         );
       }
-      
+
       this._hasGivenAnimatedBackgroundDeprecationWarning = YES;
-      
+
       animatedBackground = dataSource.get('animatedBackgroundMatrix');
     }
-    
+
     if (!animatedBackground) {
       animatedBackground = theme.PROGRESS_ANIMATED_BACKGROUND_MATRIX;
     }
-    
+
     cssString = "width: "+value+"; ";
     cssString = cssString + "left: "+offset+"px; ";
     if (animatedBackground.length === 3 ) {
-      inner.css('backgroundPosition', '0px -'+ 
-              (animatedBackground[0] + 
+      inner.css('backgroundPosition', '0px -'+
+              (animatedBackground[0] +
               animatedBackground[1]*this._currentBackground)+'px');
       if(this._currentBackground===animatedBackground[2]-1
          || this._currentBackground===0){
         this._nextBackground *= -1;
       }
       this._currentBackground += this._nextBackground;
-      
+
       cssString = cssString + "backgroundPosition: "+backPosition+"px; ";
       //Instead of using css() set attr for faster perf.
       inner.attr('style', cssString);
@@ -183,8 +183,8 @@ SC.LegacyTheme.progressRenderDelegate = SC.RenderDelegate.create({
       inner.attr('style', cssString);
     }
   },
-  
-  
+
+
   _createClassNameString: function(classNames) {
     var classNameArray = [], key;
     for(key in classNames) {