sproutcore 1.6.0.beta.3-java → 1.6.0-java

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

@@ -0,0 +1,37 @@
+/** SC.PickerPane Support */
+
+.sc-pane.sc-panel.sc-picker{
+  .perfectRight {
+    position: absolute;
+    width: 25px;
+    height: 51px;
+    top: 20px;
+    left: -25px;
+  }
+
+  .perfectLeft {
+    position: absolute;
+    width: 25px;
+    height: 51px;
+    top: 20px;
+    right: -25px;
+  }
+
+  .perfectTop {
+    position: absolute;
+    width: 51px;
+    height: 25px;
+    bottom: -25px;
+    left: 50%;
+    margin-left: -25px;
+  }
+
+  .perfectBottom {
+    position: absolute;
+    width: 51px;
+    height: 25px;
+    top: -25px;
+    left: 50%;
+    margin-left: -25px;
+  }
+} 

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,122 @@
+.sc-segmented-view {
+  display: block;
+  white-space: nowrap;
+  z-index: 1;
+  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/panes/alert/ui.js

@@ -8,11 +8,17 @@
 
 /*global module test htmlbody ok equals same stop start */
 
-module("SC.AlertPane UI");
+module("SC.AlertPane UI", {
+  setup: function(){
+    SC.TestDelegate = SC.Object.create();
+  },
+  teardown: function(){
+    delete SC.TestDelegate;SC.Object.create()}
+});
 
 var pane ;
 
-function evaluatePane(pane, message, description, caption, button1Title, button2Title, button3Title, iconClass) {
+function evaluatePane(pane, message, description, caption, button1Title, button2Title, button3Title, iconClass, themeName) {
   // wrapper
   ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be YES');
   ok(pane.$().hasClass('sc-alert'), 'pane should have sc-alert class');
@@ -67,6 +73,11 @@ function evaluatePane(pane, message, description, caption, button1Title, button2
   } else {
     ok(button3.$().hasClass('sc-hidden'), 'pane.div button3 should be hidden');
   }
+  
+  if (!themeName) themeName = 'capsule';
+  ok(button1.$().hasClass(themeName), 'pane.div.div button1 shoud have class ' + themeName);
+  ok(button2.$().hasClass(themeName), 'pane.div.div button2 shoud have class ' + themeName);
+  ok(button3.$().hasClass(themeName), 'pane.div.div button3 shoud have class ' + themeName);
 }
 
 test("AlertPane.show with icon, message, description, caption and 3 buttons", function() {
@@ -178,33 +189,38 @@ test("AlertPane.info with individual actions and targets for three buttons", fun
   
   var clickValue = null;
   
-  var delegate = SC.Object.create({
-    didClickOK: function() {
-      clickValue = 'OK';
-    },
-    didClickCancel: function() {
-      clickValue = 'Cancel';
-    }
-  });
-  
-  pane = SC.AlertPane.info({
-    message: 'AlertPane.message',
-    description: 'AlertPane.description',
-    caption: 'AlertPane.caption',
-    icon: 'sc-icon-tools-24',
-    buttons: [
-      { title: 'okButtonTitle', action: 'didClickOK', target: delegate },
-      { title: 'cancelButtonTitle', action: 'didClickCancel', target: delegate },
-      { title: 'extraButtonTitle', action: function() { clickValue = 'Extra'; } }
-    ]
-  });
+  SC.TestDelegate.didClickOK = function() {
+    clickValue = 'OK';
+  };
+
+  SC.TestDelegate.didClickCancel = function() {
+    clickValue = 'Cancel';
+  };
+
+  function showPane(){
+    pane = SC.AlertPane.info({
+      message: 'AlertPane.message',
+      description: 'AlertPane.description',
+      caption: 'AlertPane.caption',
+      icon: 'sc-icon-tools-24',
+      buttons: [
+        { title: 'okButtonTitle', action: 'didClickOK', target: SC.TestDelegate },
+        { title: 'cancelButtonTitle', action: 'didClickCancel', target: 'SC.TestDelegate' },
+        { title: 'extraButtonTitle', action: function() { clickValue = 'Extra'; } }
+      ]
+    });
+    clickValue = null;
+  }
   
+  showPane();
   pane.dismiss(pane.get('button1'));
   equals(clickValue, 'OK', 'Action for the OK button was clicked');
-  
+
+  showPane();
   pane.dismiss(pane.get('button2'));
   equals(clickValue, 'Cancel', 'Action for the Cancel button was clicked');
   
+  showPane();
   pane.dismiss(pane.get('button3'));
   equals(clickValue, 'Extra', 'Action for the Extra button was clicked');
   
@@ -318,3 +334,22 @@ test("users interaction with mutiple alert panes with 1-3 buttons - old style",
 
   ok(didDismiss, "should dismiss all buttons");
 }) ;
+
+
+test("AlertPane.show with custom themeName", function() {
+  pane = SC.AlertPane.show({
+    themeName: 'AlertPane.themeName',
+    message: 'AlertPane.message',
+    description: 'AlertPane.description',
+    caption: 'AlertPane.caption',
+    icon: 'sc-icon-tools-24',
+    delegate: this,
+    buttons: [
+      { title: 'okButtonTitle' },
+      { title: 'cancelButtonTitle' },
+      { title: 'extraButtonTitle' }
+    ]
+  });
+  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24', 'AlertPane.themeName');
+  pane.dismiss();
+});