From e1f83a2c603bf9ddb74889f7ba5b697bb474edaa Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 28 Jun 2012 11:00:18 -0700 Subject: Binding HUD - Updated CSS for hud and promoted/bound properties. --- .../binding-hud-option.reel/binding-hud-option.js | 30 ++++++++++++++++++++-- .../binding-hud.reel/binding-hud.css | 16 +++++++++--- .../binding-hud.reel/binding-hud.html | 3 ++- .../binding-hud.reel/binding-hud.js | 16 +++++++++--- 4 files changed, 55 insertions(+), 10 deletions(-) diff --git a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js index fb0fd57e..a7fbb297 100755 --- a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js +++ b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js @@ -26,8 +26,28 @@ exports.BindingHudOption = Montage.create(Component, { } }, - bound: { - value: false + _promoted : { value: null }, + promoted : { + get : function() { return this._promoted; }, + set : function(value) { + if(value === this._promoted) { return; } + + this._promoted = value; + + this.needsDraw = true; + } + }, + + _bound : { value: null }, + bound : { + get : function() { return this._bound; }, + set : function(value) { + if(value === this._bound) { return; } + + this._bound = value; + + this.needsDraw = true; + } }, prepareForDraw: { @@ -47,6 +67,12 @@ exports.BindingHudOption = Montage.create(Component, { } else { this.element.classList.remove("bound"); } + + if(this.promoted || this.bound) { + this.element.classList.add("promoted"); + } else { + this.element.classList.remove("promoted"); + } // if(this.bindings.length > 0) { // this.element.classList.add("bound"); // } else { diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css index 5818eca8..1536c706 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css @@ -11,7 +11,7 @@ font-size: 11px; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.61); border-radius: 6px; - padding: 3px 8px; + padding: 3px; text-shadow: 1px 1px 0px #000; } @@ -29,6 +29,8 @@ /*background: rgba(0, 0, 0, 0.3);*/ line-height:16px; /*box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;*/ + padding-top: 4px; + margin: 0 5px; min-width: 80px; } @@ -38,7 +40,10 @@ line-height:16px; padding:1px 25px 1px 8px; } - +.bindingHud .hudOption.promoted { + color: #FFF; + font-weight: bold; +} .bindingHud .hudOption .connectorBubble:hover { background-color: #1B52A7; box-shadow: inset 0px 2px 2px 1px rgba(15, 15, 15, 0.78), 0 1px #474747; @@ -94,8 +99,13 @@ } .splitter.scrollArea:hover:not(.disabled) { background-color: #303030; + border-bottom: 1px solid #252525; + box-shadow: 0 1px 0 0 #3F3F3F; +} +.splitter.scrollAreaBottom:hover:not(.disabled) { + border-bottom: 1px solid #3F3F3F; + box-shadow: 0 1px 0 0 #252525; } - .hudRepetition { overflow: hidden; diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html index 7bb888d5..f7e1a1d2 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html @@ -36,7 +36,8 @@ "element": {"#" : "hudOption"} }, "bindings": { - "title": {"<-": "@repeater.objectAtCurrentIteration"} + "title": {"<-": "@repeater.objectAtCurrentIteration.property"}, + "promoted": {"<-": "@repeater.objectAtCurrentIteration.promoted"} } }, "resizer1": { diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index 0f1b99c9..a62fe78d 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js @@ -89,9 +89,17 @@ exports.BindingHud = Montage.create(Component, { getPropertyList : { value: function(component) { - var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true); - - var objectName, promotedProperties; + var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true), + promotedProperties = [], + objectName; + + ///// Mapper - property to property object + function propertyMapper(property) { + return { + property: property, + promoted: promotedProperties.indexOf(property) !== -1 + } + } if(this.userComponent._montage_metadata) { objectName = this.userComponent._montage_metadata.objectName; @@ -114,7 +122,7 @@ exports.BindingHud = Montage.create(Component, { } } - return props; + return props.map(propertyMapper); } }, -- cgit v1.2.3