sproutcore 1.6.0.beta.3 → 1.6.0.rc.1

data/lib/frameworks/sproutcore/frameworks/desktop/resources/progress.css

@@ -0,0 +1,29 @@
+/* SC.ProgressView */
+
+.sc-progress-view {
+	border: 1px solid #555555;
+	background-color: #c8c8c8;
+	-webkit-border-radius: 2px;
+	border-radius: 2px;
+	&.disabled {
+  	background-color: #e8e8e8;
+  	border: 1px #9a9a9a solid;
+  }
+  .sc-inner {
+  	position: absolute;
+  	left: 0px;
+  	top: 0px;
+  	bottom: 0px;
+   	background: #555555;
+  	border-right: 1px solid #555555;
+  	-webkit-transition: all 0.01s linear;
+  	-webkit-transform: translate3d(0,0,0);
+  }
+  &.sc-indeterminate .sc-inner {
+   	background: #555555;
+   	border: 0;
+  }
+  &.sc-empty .sc-inner {
+  	border: none;
+  }
+}

data/lib/frameworks/sproutcore/frameworks/desktop/resources/radio.css

@@ -0,0 +1,11 @@
+/* Common SC.RadioView support */
+
+.sc-radio-view{
+  &.sc-layout-vertical .sc-radio-button {
+    display: block;
+  }
+  &.sc-layout-horizontal .sc-radio-button {
+    display: inline-block;
+    -moz-display: inline-block;
+  }
+}

data/lib/frameworks/sproutcore/frameworks/desktop/resources/segmented.css

@@ -0,0 +1,121 @@
+.sc-segmented-view {
+  display: block;
+  white-space: nowrap;
+  img.icon {
+    position: relative;
+    vertical-align: middle;
+    top: -2px;
+    margin-right: 2px;
+    height: 16px;
+    width: 16px;
+  }
+  .sc-segment-view {
+    position: relative;
+    display: inline-block;
+    top: 0;
+    height: 22px;
+    line-height: 22px;
+    border-right: 1px #555 solid;
+    text-shadow: #b0b0b0 0px 1px 0px;
+    text-decoration: none ;
+    color: black ;
+    text-align: center;
+    &:focus {
+      outline: none;
+    }
+    &.sc-first-segment {
+      padding-left: 10px;
+      padding-right: 10px;
+      background: #DDDDDD;
+      .sc-button-inner {
+        padding-right: 10px;
+      }
+      .active,
+      .sel {
+        background: #999999;
+      }
+    }
+    &.sc-last-segment {
+      padding-right: 10px;
+      border:none;
+      background: #DDDDDD;
+      .sc-button-inner {
+        padding-left: 10px;
+      }
+      .active,
+      .sel {
+        background: #999999;
+      }
+    }
+    .sc-middle-segment .sc-button-inner {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+    
+    .sc-button-inner {
+      background: #DDDDDD;
+    }
+    
+    .sel .sc-button-inner {
+      background: #999999;
+      text-shadow: #909090 0px 1px 0px;
+    }
+    
+    .active .sc-button-inner {
+      background: #999999;
+      text-shadow: #909090 0px 1px 0px;
+    }
+    
+    &.disabled .sc-button-inner {
+      background: #FFFFFF;
+      color: #999;
+    }
+
+    &.sc-first-segment.disabled {
+      background: #FFFFFF;
+      .sel.disabled {
+        background: #FFFFFF;
+      }
+    }
+    
+    &.sc-last-segment.disabled {
+      background: #FFFFFF;
+      .sel.disabled {
+        background: #FFFFFF;
+      }
+    }
+
+    &.sel .sc-button-inner.disabled {
+      background: #FFFFFF;
+    }
+  }
+  .sc-button-inner {
+    display: block;
+    min-width: 20px;
+    min-height: 22px;
+  }
+  
+  &.disabled{
+    .sc-segment-view .sc-button-inner {
+      background: #FFFFFF;
+      color: #999;
+    }
+    .sc-segment-view{
+      &.sc-first-segment {
+        background: #FFFFFF;
+        .sel {
+          background: #FFFFFF;
+        }
+      }
+      &.sc-last-segment {
+        background: #FFFFFF;
+        &.sel {
+          background: #FFFFFF;
+        }
+      } 
+      &.sel .sc-button-inner {
+        background: #FFFFFF;
+      }
+    }
+  }
+}

data/lib/frameworks/sproutcore/frameworks/desktop/resources/separator.css

@@ -0,0 +1,20 @@
+.sc-separator-view{
+  span{
+    position: absolute;
+    background-color: #fefefe;
+  }
+  &.sc-layout-horizontal span {
+    top: 50%;
+    height: 1px;
+    border-top: 1px #ccc solid;
+    left: 0;
+    right: 0;
+  } 
+  &.sc-layout-vertical span {
+    left: 50%;
+    width: 1px;
+    border-left: 1px #ccc solid;
+    top: 0;
+    bottom: 0;
+  }
+}

data/lib/frameworks/sproutcore/frameworks/desktop/resources/slider.css

@@ -0,0 +1,34 @@
+/* @group SC.SliderView */
+
+.sc-slider-view {
+	height: 21px;
+	.sc-inner {
+  	position: absolute;
+  	left: 8px;
+  	right: 8px;
+  	height: 5px;
+  	top: 6px;
+  	background: gray ;
+  	-webkit-border-radius: 3px;
+  	-moz-border-radius: 3px;
+  	border-radius: 3px;
+    .sc-leftcap{
+      display: none;
+    }
+    .sc-righcap {
+      display: none;
+    }
+  }
+  .sc-handle {
+  	height: 12px;
+  	width: 12px;
+  	margin-left: -9px;
+  	top: -4px;
+  	position: absolute ;
+  	background: black;
+  	border-radius:6px;
+  	-moz-border-radius:6px;
+  	-webkit-transform: translate3d(0,0,0);
+  	-webkit-transition: left 0.01s ease-in-out;
+  }
+}

data/lib/frameworks/sproutcore/frameworks/desktop/{english.lproj → resources}/touch-scroller.css

@@ -1,40 +1,40 @@
 /* Track */
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .track {
+.sc-view.sc-touch-scroller-view.sc-vertical .track {
   background: none;
   display: none;
 }
 
 /* Cap */
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .cap,
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .endcap {
+.sc-view.sc-touch-scroller-view.sc-vertical .cap,
+.sc-view.sc-touch-scroller-view.sc-vertical .endcap {
   background: none;
   display: none;
 }
 
 /* Buttons */
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .button-top {
+.sc-view.sc-touch-scroller-view.sc-vertical .button-top {
   background: none;
   display: none;
 }
 
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .button-bottom {
+.sc-view.sc-touch-scroller-view.sc-vertical .button-bottom {
   background: none;
   display: none;
 }
 
 /* Active */
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .button-top:active {
+.sc-view.sc-touch-scroller-view.sc-vertical .button-top:active {
   background: none;
   display: none;
 }
 
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .button-bottom:active {
+.sc-view.sc-touch-scroller-view.sc-vertical .button-bottom:active {
   background: none;
   display: none;
 }
 
 /* Thumb */
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .thumb {
+.sc-view.sc-touch-scroller-view.sc-vertical .thumb {
   position: absolute;
   opacity: 0.5;
   -webkit-transform: translateZ(0px);
@@ -45,7 +45,7 @@
 
 
 
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .thumb-top {
+.sc-view.sc-touch-scroller-view.sc-vertical .thumb-top {
   -webkit-border-top-left-radius: 4px;
   -webkit-border-top-right-radius: 4px;
   position: absolute;
@@ -56,7 +56,7 @@
   background: black;
 }
 
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .thumb-clip {
+.sc-view.sc-touch-scroller-view.sc-vertical .thumb-clip {
   position: absolute;
   overflow:hidden;
   height: 1034px;
@@ -65,7 +65,7 @@
   left: 5px;
 }
 
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .thumb-inner {
+.sc-view.sc-touch-scroller-view.sc-vertical .thumb-inner {
   -webkit-transform: translate3d(0px,0px,0px);
   position: absolute;
   left: 0px;
@@ -74,7 +74,7 @@
   height: 1034px;
 }
 
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .thumb-center {
+.sc-view.sc-touch-scroller-view.sc-vertical .thumb-center {
   position: absolute;
   width: 5px;
   left: 0px;
@@ -83,7 +83,7 @@
   background: black;
 }
 
-.sc-theme .sc-view.sc-touch-scroller-view.sc-vertical .thumb-bottom {
+.sc-view.sc-touch-scroller-view.sc-vertical .thumb-bottom {
   -webkit-border-bottom-left-radius: 4px;
   -webkit-border-bottom-right-radius: 4px;
   position: absolute;

data/lib/frameworks/sproutcore/frameworks/desktop/resources/well.css

@@ -0,0 +1,65 @@
+.sc-well-view{
+  .top-right-edge {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    top: 0px;
+    right: 0px;
+  }
+  .top-left-edge {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    top: 0px;
+    left: 0px;
+  }
+  .bottom-left-edge {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    bottom: 0px;
+    left: 0px;
+  }
+  .bottom-right-edge {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    bottom: 0px;
+    right: 0px;
+  }
+  .top-edge {
+    position: absolute;
+    height: 5px;
+    top: 0px;
+    right: 7px;
+    left: 7px;
+  }
+  .bottom-edge {
+    position: absolute;
+    height: 5px;
+    bottom: 0px;
+    right: 7px;
+    left: 7px;
+  }
+  .left-edge {
+    position: absolute;
+    width: 7px;
+    top: 7px;
+    bottom: 7px;
+    left: 0px;
+  }
+  .right-edge {
+    position: absolute;
+    width: 7px;
+    top: 7px;
+    bottom: 7px;
+    right: 0px;
+  }
+  .content-background {
+    position: absolute;
+    top: 5px;
+    bottom: 5px;
+    right: 7px;
+    left: 7px;
+  }  
+} 

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/checkbox/methods.js

@@ -7,120 +7,131 @@
 
 /*global module test equals context ok same htmlbody Q$ */
 
-var pane, view ;
-module("SC.Checkbox", {
-  setup: function() {
+(function() {
+  var pane, view, triggered = false;
+
+  module("SC.Checkbox", {
+    setup: function() {
+      SC.RunLoop.begin();
+      pane = SC.MainPane.create({
+        childViews: [
+          SC.CheckboxView.extend({
+            layout: { right: 20, bottom: 20, width: 100, height: 23 },
+            title: "First Name",
+            value: YES,
+            action: function() {
+              triggered = true;
+            }
+          })]
+      });
+      pane.append(); // make sure there is a layer...
+      SC.RunLoop.end();
+
+      view = pane.childViews[0];
+    }, 
+
+    teardown: function() {
+      pane.remove();
+      pane = view = null;
+      triggered = false;
+    }
+  });
+
+  test("renders something that is NOT an input tag with appropriate attributes", function() {
+    equals(view.get('value'), YES, 'precon - value should be YES');
+
+    var q = view.$();
+    equals(q.attr('role'), 'checkbox', 'should have type=checkbox');
+    equals(q.attr('aria-checked'), 'true', 'should be checked');
+  });
+
+  test("double-check that there is NO input element. Just in case.", function(){
+    equals(view.$("input").length, 0, "CoreQuery lookup for inputs should have length of 0.");
+  });
+
+  test("should have span with title inside", function() {
+    var q = Q$('span', view.get('layer'));
+    ok(view.get('displayTitle').length>0, 'precond - display title should not be empty');
+    equals(q.text(), view.get('displayTitle'), 'should have display title');
+  });
+
+  test("changing the title should update the span", function() {
+    var oldDisplayTitle = view.get('displayTitle');
     SC.RunLoop.begin();
-    pane = SC.MainPane.create({
-      childViews: [
-        SC.CheckboxView.extend({
-          layout: { right: 20, bottom: 20, width: 100, height: 23 },
-          title: "First Name",
-          value: YES 
-        })]
-    });
-    pane.append(); // make sure there is a layer...
+    view.set('title', 'Last Name');
     SC.RunLoop.end();
-    
-    view = pane.childViews[0];
-  }, 
-  
-  teardown: function() {
-    pane.remove();
-    pane = view = null ;
-  }
-});
-
-test("renders something that is NOT an input tag with appropriate attributes", function() {
-  equals(view.get('value'), YES, 'precon - value should be YES');
-
-  var q = view.$();
-  equals(q.attr('role'), 'checkbox', 'should have type=checkbox');
-  equals(q.attr('aria-checked'), 'true', 'should be checked');
-});
-
-test("double-check that there is NO input element. Just in case.", function(){
-  equals(view.$("input").length, 0, "CoreQuery lookup for inputs should have length of 0.");
-});
-
-test("should have span with title inside", function() {
-  var q = Q$('span', view.get('layer'));
-  ok(view.get('displayTitle').length>0, 'precond - display title should not be empty');
-  equals(q.text(), view.get('displayTitle'), 'should have display title');
-});
-
-test("changing the title should update the span", function() {
-  var oldDisplayTitle = view.get('displayTitle');
-  SC.RunLoop.begin();
-  view.set('title', 'Last Name');
-  SC.RunLoop.end();
-
-  ok(view.get('displayTitle') !== oldDisplayTitle, 'precond - should have changed display title');
-
-  var q = Q$('span', view.get('layer'));
-  equals(q.text(), view.get('displayTitle'), 'should have display title');
-});
-
-test("isEnabled=NO should add disabled class", function() {
-  SC.RunLoop.begin();
-  view.set('isEnabled', NO);
-  SC.RunLoop.end();
-  
-  ok(view.$().hasClass('disabled'), 'should have disabled class');
-});
 
+    ok(view.get('displayTitle') !== oldDisplayTitle, 'precond - should have changed display title');
 
-test("isSelected should alter sel classname and sync with value property", function() {
+    var q = Q$('span', view.get('layer'));
+    equals(q.text(), view.get('displayTitle'), 'should have display title');
+  });
 
-  // check initial render state
-  ok(view.get('isSelected'), 'isSelected should match value');
-  ok(view.$().hasClass('sel'), 'should have sel class');
+  test("isEnabled=NO should add disabled class", function() {
+    SC.RunLoop.begin();
+    view.set('isEnabled', NO);
+    SC.RunLoop.end();
 
-  // update value -- make sure isSelected changes.  
-  SC.RunLoop.begin();
-  view.set('value', 0); // make falsy. (but not NO exactly)
-  SC.RunLoop.end();
-  
-  ok(!view.get('isSelected'), 'isSelected should now be NO');
-  ok(!view.$().hasClass('sel'), 'should no longer have sel class');
-  equals(view.$().attr('aria-checked'), 'false', 'view should not be checked');
-  
-  // update isSelected -- make sure it edits the value
-  SC.RunLoop.begin();
-  view.set('isSelected', YES);
-  SC.RunLoop.end();
-  
-  ok(view.get('isSelected'), 'isSelected should match value');
-  ok(view.$().hasClass('sel'), 'should have sel class');
-  equals(view.$().attr('aria-checked'), 'true', 'aria-checked should be true');
-});
+    ok(view.$().hasClass('disabled'), 'should have disabled class');
+  });
+
+
+  test("isSelected should alter sel classname and sync with value property", function() {
+
+    // check initial render state
+    ok(view.get('isSelected'), 'isSelected should match value');
+    ok(view.$().hasClass('sel'), 'should have sel class');
+
+    // update value -- make sure isSelected changes.  
+    SC.RunLoop.begin();
+    view.set('value', 0); // make falsy. (but not NO exactly)
+    SC.RunLoop.end();
+
+    ok(!view.get('isSelected'), 'isSelected should now be NO');
+    ok(!view.$().hasClass('sel'), 'should no longer have sel class');
+    equals(view.$().attr('aria-checked'), 'false', 'view should not be checked');
+
+    // update isSelected -- make sure it edits the value
+    SC.RunLoop.begin();
+    view.set('isSelected', YES);
+    SC.RunLoop.end();
 
-test("mouseDown and then mouseUp anywhere in the checkbox should toggle the selection", function() {
+    ok(view.get('isSelected'), 'isSelected should match value');
+    ok(view.$().hasClass('sel'), 'should have sel class');
+    equals(view.$().attr('aria-checked'), 'true', 'aria-checked should be true');
+  });
 
-  var elem = view.get('layer');
+  test("mouseDown and then mouseUp anywhere in the checkbox should toggle the selection", function() {
+    var elem = view.get('layer');
 
-  SC.Event.trigger(elem, 'mousedown');
-  ok(view.get('isActive'), 'view should be active');
-  ok(view.get('value'), 'value should not change yet');
-  equals(view.$().attr('aria-checked'), 'true', 'aria-checked should be true');
+    ok(!triggered, 'precond - action should not have been triggered yet');
 
-  // simulate mouseUp and browser-native change to control
-  SC.Event.trigger(elem,'mouseup');
+    SC.Event.trigger(elem, 'mousedown');
+    ok(view.get('isActive'), 'view should be active');
+    ok(view.get('value'), 'value should not change yet');
+    equals(view.$().attr('aria-checked'), 'true', 'aria-checked should be true');
 
-  ok(!view.get('isActive'), 'view should no longer be active');
-  ok(!view.get('value'), 'value should change to NO');
-  equals(view.$().attr('aria-checked'), 'false', 'aria-checked should be false');
+    // simulate mouseUp and browser-native change to control
+    SC.Event.trigger(elem,'mouseup');
 
-  elem = null ;
-});
+    ok(!view.get('isActive'), 'view should no longer be active');
+    ok(!view.get('value'), 'value should change to NO');
+    equals(view.$().attr('aria-checked'), 'false', 'aria-checked should be false');
+
+    ok(triggered, 'action should have been triggered');
+
+    elem = null ;
+  });
+
+  test("isEnabled=NO should add disabled attr to input", function() {
+    SC.RunLoop.begin();
+    view.set('isEnabled', NO);
+    SC.RunLoop.end();
 
-test("isEnabled=NO should add disabled attr to input", function() {
-  SC.RunLoop.begin();
-  view.set('isEnabled', NO);
-  SC.RunLoop.end();
+    ok(view.get('value'), 'precond - value should be true');
+    view.mouseDown();
+    view.mouseUp();
+    ok(view.get('value'), 'value should not change when clicked');
+  });
   
-  ok(view.get('value'), 'precond - value should be true');
-  view.mouseDown();
-  view.mouseUp();
-  ok(view.get('value'), 'value should not change when clicked');
-});
+})();