sproutcore 1.4.5 → 1.5.0.pre.3

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

@@ -0,0 +1,76 @@
+$theme.menu {
+  .sc-menu-scroll-view { background: transparent; }
+  
+  .panel-background {
+    background: transparent;
+    position: absolute;
+    top: -22px; right: -15px; bottom: -22px; left: -15px;
+    @include slices("menu.png", $left: 25, $right: 25, $top: 25, $bottom: 25, $fill: 1 1);
+  }
+  
+  /* may want to make some of this control size dependent... */
+  
+  .sc-menu-item {
+    background: transparent;
+    border: 0px none;
+    
+    .value {
+      margin-left: 20px;
+      line-height: 20px;
+    }
+    
+    &.focus, a:hover {
+      span { color: white; }
+      @include slice("menu_item.png", $width: 1, $repeat: repeat-x);
+      text-shadow: 0px -1px 1px rgba(0, 0, 0, .6);
+    }
+    
+    &.disabled a:hover, &.disabled.focus {
+      text-shadow: none;
+      background: transparent;
+      text-shadow: none;
+      color: black;
+    }
+    
+    /* CHECKBOXES */
+    .checkbox {
+      top: 3px;
+      width: 12px; height: 12px;
+      @include slice(checkmark.png);
+    }
+    
+    &.focus .checkbox, &:hover .checkbox {
+      top: 4px; /* NOTE THE SLIGHT DIFFERENCE */
+      @include slice(checkmark_active.png);
+    }
+    
+    /* SEPARATORS */
+    span.separator {
+      margin-left: 0px;
+      position: absolute;
+      top: 2px;
+      left: 1px;
+      right: 1px;
+      border-top: 1px solid rgb(255, 255, 255);
+      border-bottom: 1px solid rgb(200, 200, 200);
+    }
+  }
+  
+  /* ARROWS */
+  .sc-menu-scroller-view { background: transparent; }
+  
+  .arrowUp {
+    position: absolute;
+    left: 50%; top: -3px; margin-left: -7px;
+    height: 14px; width: 14px;
+    @include slice(up.png);
+  }
+  
+  .arrowDown {
+    position: absolute;
+    left: 50%; bottom: -3px; margin-left: -7px;
+    height: 14px; width: 14px;
+    @include slice(down.png);
+  }
+  
+}

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

@@ -0,0 +1,3 @@
+.sc-pane {
+  -webkit-transform: translate3d(0px, 0px, 0px);
+}

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

@@ -0,0 +1,13 @@
+$theme.panel {
+  background: transparent;
+  
+  .panel-background {
+    position: absolute;
+    left: -15px;
+    top: -15px;
+    bottom: -15px;
+    right: -15px;
+    
+    @include slices("panel.png", $top: 25, $left: 25, $right: 25, $bottom: 25, $fill: 1 1);
+  }
+}

data/lib/frameworks/sproutcore/themes/ace/resources/panel/panel.js

@@ -0,0 +1,20 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.AceTheme.panelRenderDelegate = SC.RenderDelegate.create({
+  name: 'panel',
+  
+  render: function(dataSource, context) {
+    context = context.begin('div').addClass('panel-background');
+    this.includeSlices(dataSource, context, SC.NINE_SLICE);
+    context = context.end();
+  },
+  
+  update: function() {
+    // doesn't get updated
+  }
+});

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

@@ -0,0 +1,32 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+sc_require("resources/picker/popover/popover");
+
+SC.AceTheme.Popover.pickerRenderDelegate = SC.RenderDelegate.create({
+  name: 'picker',
+  
+  render: function(dataSource, context) {
+    var preferType = dataSource.get('preferType');
+    var pointerPosition = dataSource.get('pointerPos');
+    var pointerPositionY = dataSource.get('pointerPosY');
+
+    if (preferType == SC.PICKER_POINTER || preferType == SC.PICKER_MENU_POINTER) {
+      context.addClass(pointerPosition);
+    }
+  },
+  
+  update: function(dataSource, $) {
+    var preferType = dataSource.get('preferType');
+    var pointerPosition = dataSource.get('pointerPos');
+    var pointerPositionY = dataSource.get('pointerPosY');
+    
+    if (preferType == SC.PICKER_POINTER || preferType == SC.PICKER_MENU_POINTER) {
+      $.addClass(pointerPosition);
+    }
+    
+  }
+});

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

@@ -0,0 +1,111 @@
+@theme(popover) {
+  $theme.picker {
+    background: none;
+  }
+  
+  $theme.toolbar {
+    background: none;
+    color: white;
+    text-shadow: none;
+    border-bottom: 0px none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+  }
+  
+  $theme.workspace {
+    overflow: visible;
+    background: none;
+    
+    .popover-background {
+      
+      position: absolute;
+      top: -25px;
+      bottom: -25px;
+      left: -25px;
+      right: -25px;
+      
+      @include slices("popover_notoolbar.png", $left: 40, $top: 40, $bottom: 40, $right: 40, $fill: 1 1, skip-middle);
+      
+      div { z-index: 5; }
+    }
+    
+    &.top-toolbar .popover-background {
+      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
+      );
+      
+      .left { top: 75px; }
+      .right { top: 75px; }
+    }
+    
+    
+    &.bottom-toolbar .popover-background {
+      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
+      );
+      
+      .left { bottom: 75px; }
+      .right { bottom: 75px; }
+    }
+    
+  }
+  
+  @theme(solid) {
+    $theme.picker .popover-background, 
+    $theme.picker.top-toolbar    .popover-background, 
+    $theme.picker.bottom-toolbar .popover-background {
+      top: -25px;
+      bottom: -25px;
+    
+      @include slices("popover_empty.png", $left: 40, $top: 75, $bottom: 40, $right: 40, $fill: 1 1);
+    }
+  }
+  
+  $theme.picker.perfectBottom {
+    .sc-pointer {
+      z-index: 6;
+      position: absolute; width: 50px; height: 25px; margin-left: -25px; left: 50%; top: 0px;
+      @include slice("popover_pointers_notoolbar.png", $left: 155, $top: 0, $width: 50, $height: 25);
+    }
+    
+    &.solid .sc-pointer, .solid .sc-pointer {
+      top: 0px;
+      @include slice("popover_pointers.png", $left: 155, $top: 0, $width: 50, $height: 25);
+    }
+    
+    .top-toolbar .sc-pointer { 
+      top: 0px;
+      @include slice("popover_pointers.png", $left: 155, $top: 0, $width: 50, $height: 25);
+    }
+    
+    &.extra-left {
+      .sc-pointer { left: 70px; }
+    }
+  }
+  
+  $theme.picker.perfectTop {
+    .sc-pointer {
+      z-index: 6;
+      position: absolute; width: 50px; height: 25px; margin-left: -25px; left: 50%; bottom: 0px;
+      @include slice("popover_pointers.png", $left: 155, $bottom: 0, $width: 50, $height: 25);
+    }
+    
+    &.solid .sc-pointer, .solid .sc-pointer {
+      bottom: 0px;
+      @include slice("popover_pointers.png", $left: 155, $bottom: 0, $width: 50, $height: 25);
+    }
+    
+    .top-toolbar .sc-pointer { 
+      bottom: 0px;
+      @include slice("popover_pointers.png", $left: 155, $bottom: 0, $width: 50, $height: 25);
+    }
+    
+    &.extra-left {
+      .sc-pointer { left: 70px; }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+sc_require("theme");
+
+// it is derived from dark, but will be available both under Ace and not.
+SC.AceTheme.Popover = SC.AceTheme.Dark.subtheme("popover");
+SC.AceTheme.addTheme(SC.AceTheme.Popover);
+
+// there is a solid variety
+SC.AceTheme.SolidPopover = SC.AceTheme.Popover.subtheme('solid');
+
+// and a shortcut to the solid variety.
+SC.AceTheme.addTheme(SC.AceTheme.SolidPopover.create({ name: 'solid-popover' }));
+

data/lib/frameworks/sproutcore/themes/ace/resources/picker/popover/workspace.js

@@ -0,0 +1,28 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.AceTheme.Popover.workspaceRenderDelegate = SC.RenderDelegate.create({
+  name: 'workspace',
+  render: function(dataSource, context) {
+    context.setClass({
+      'top-toolbar': dataSource.get('hasTopToolbar'),
+      'bottom-toolbar': dataSource.get('hasBottomToolbar')
+    });
+    
+    context = context.begin('div').addClass('popover-background');
+    this.includeSlices(dataSource, context, SC.NINE_SLICE);
+    context.push("<div class = 'sc-pointer'></div>");
+    context = context.end();
+  },
+
+  update: function(dataSource, jquery) {
+    jquery.setClass({
+      'top-toolbar': dataSource.get('hasTopToolbar'),
+      'bottom-toolbar': dataSource.get('hasBottomToolbar')
+    });
+  }
+});

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

@@ -0,0 +1,27 @@
+$theme.progress {
+  border: 0px none;
+  .track {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    bottom: 0px;
+    
+    @include slices("progress_view_track.png", $left: 1, $right: 1);
+  }
+  
+  .content {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    bottom: 0px;
+    
+    /* width set in rendering */
+    
+    @include slices("progress_view_content.png", $left: 1, $right: 1);
+  }
+  
+  &.disabled {
+    opacity: .5;
+  }
+}

data/lib/frameworks/sproutcore/themes/ace/resources/progress/progress.js

@@ -0,0 +1,78 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+sc_require("theme");
+
+/**
+  Renders and updates DOM representations of progress bars.
+  
+  Parameters
+  --------------------------
+  Expects these properties on the data source:
+  
+  - isIndeterminate
+  - isRunning
+  - isEnabled
+  - value
+  
+  Theme Constants
+  -------------------------------------
+  Ace's progressRenderDelegate's rendering process is not affected by 
+  any theme constants.
+*/
+SC.AceTheme.progressRenderDelegate = SC.RenderDelegate.create({
+  name: 'progress',
+  
+  render: function(dataSource, context) {
+    var theme = dataSource.get('theme');
+    
+    var value;
+    if (dataSource.get('isIndeterminate')) {
+      value = 120;
+    } else {
+      value = dataSource.get('value');
+    }  
+    
+    context.setClass({
+      indeterminate: dataSource.get('isIndeterminate'),
+      running: dataSource.get('isRunning'),
+      disabled: !dataSource.get('isEnabled'),
+      'sc-empty': (value <= 0),
+      'sc-complete': (value >= 100)
+    });
+    
+    context = context.begin('div').addClass('track');
+    this.includeSlices(dataSource, context, SC.THREE_SLICE);
+    context = context.end();
+    
+    context = context.begin('div').addClass('content');
+    context.css('width', (value * 100) + "%");
+    this.includeSlices(dataSource, context, SC.THREE_SLICE);
+    context = context.end();
+  },
+  
+  update: function(dataSource, $) {
+    var theme = dataSource.get('theme');
+    
+    var value;
+    if (dataSource.get('isIndeterminate')) {
+      value = 120;
+    } else {
+      value = dataSource.get('value');
+    }
+    
+    $.setClass({
+      indeterminate: dataSource.get('isIndeterminate'),
+      running: dataSource.get('isRunning'),
+      disabled: !dataSource.get('isEnabled'),
+      'sc-empty': (value <= 0),
+      'sc-complete': (value >= 100)
+    });
+    
+    $.find('.content').css('width', (value * 100) + "%");
+  }
+});