From 8cd463b321d082770a4300756b6664bb7a519c93 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 27 Jun 2012 10:30:12 -0700 Subject: Binding HUD - Show promoted PI properties at top of list --- .../binding-hud.reel/binding-hud.js | 46 +++++++++++++++++++--- js/stage/binding-view.reel/binding-view.html | 6 ++- 2 files changed, 45 insertions(+), 7 deletions(-) (limited to 'js/stage') 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 9918b06d..0f1b99c9 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 @@ -45,7 +45,10 @@ exports.BindingHud = Montage.create(Component, { optionsRepeater: { value: null }, - + panelData : { + value: null, + serializable: true + }, _userComponent: { value: null }, userComponent: { get: function() { @@ -59,7 +62,7 @@ exports.BindingHud = Montage.create(Component, { isOffStage, icon, iconOffsets; this._userComponent = val; - this.properties = controller.getPropertiesFromObject(val, true); + this.properties = this.getPropertyList(val); //controller.getPropertiesFromObject(val, true); controller.getObjectBindings(this.userComponent).forEach(function(obj) { this.boundProperties.push(obj.sourceObjectPropertyPath); @@ -84,6 +87,37 @@ exports.BindingHud = Montage.create(Component, { } }, + getPropertyList : { + value: function(component) { + var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true); + + var objectName, promotedProperties; + + if(this.userComponent._montage_metadata) { + objectName = this.userComponent._montage_metadata.objectName; + + if(this.panelData && this.panelData[objectName + 'Pi']) { + + promotedProperties = this.panelData[objectName + 'Pi'][0].Section.map(function(item) { + return item[0].prop; + }); + + //// Remove promoted properties from current position in array + props = props.filter(function(prop) { + return promotedProperties.indexOf(prop) === -1; + }); + + //// Add them at the top + + props = promotedProperties.concat(props); + + } + } + + return props; + } + }, + properties: { value: [] }, _isResizing: { @@ -248,11 +282,11 @@ exports.BindingHud = Montage.create(Component, { if(direction === "down") { this.scrollInterval = setInterval(function() { this.optionsRepeater.element.scrollTop += 3; - }.bind(this), 50); + }.bind(this), 20); } else { this.scrollInterval = setInterval(function() { this.optionsRepeater.element.scrollTop -= 3; - }.bind(this), 50); + }.bind(this), 20); } } } @@ -267,11 +301,11 @@ exports.BindingHud = Montage.create(Component, { //e._event.target.parentElement.controller.currentScrollDirection = "down"; this.scrollInterval = setInterval(function() { self.optionsRepeater.element.scrollTop += 3; - }, 50); + }, 20); } else { this.scrollInterval = setInterval(function() { self.optionsRepeater.element.scrollTop -= 3; - }, 50); + }, 20); } } } diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 9eb338d8..b6c5ff40 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -37,7 +37,8 @@ "hud": { "prototype": "js/stage/binding-view.reel/binding-hud.reel", "properties": { - "element": {"#" : "hud"} + "element": {"#" : "hud"}, + "panelData": {"@": "panelData"} }, "bindings": { "userComponent": {"<-": "@hudRepeater.objectAtCurrentIteration"} @@ -48,6 +49,9 @@ "listener": {"@": "owner"} } ] + }, + "panelData": { + "object": "js/data/pi/pi-data[PiData]" } } -- cgit v1.2.3 From 230a1a2f2848c27edf7d01f8d3a5585c8d0d4ac9 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 27 Jun 2012 15:29:23 -0700 Subject: Binding HUD - CSS Update --- .../binding-hud.reel/binding-hud.css | 24 ++++++++++------------ 1 file changed, 11 insertions(+), 13 deletions(-) (limited to 'js/stage') 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 680f9183..5818eca8 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 @@ -6,14 +6,12 @@ .bindingHud { position: absolute; - background: rgba(0, 0, 0, 0.85); - /*padding: 0px;*/ + background: rgba(24, 24, 24, 0.85); color: #C4C4C4; font-size: 11px; - box-shadow: inset 0px 0px 0px 0px #CCC; + box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.61); border-radius: 6px; - padding: 3px 1px 1px; - border:1px solid #000; + padding: 3px 8px; text-shadow: 1px 1px 0px #000; } @@ -58,35 +56,35 @@ .bindingHud .hudOption .connectorBubble { position: absolute; - right: 5px; + right: 2px; top: 3px; border-radius: 50%; width: 10px; height: 10px; border-left: 0px; display: block; - background-color: #313131; - box-shadow: inset 0px 2px 7px 1px #0F0F0F, 0 1px #424242; + background-color: #353535; + box-shadow: inset 0px 2px 3px 1px #222, 0 1px #666; } .splitter.scrollArea { background-color: transparent; - background-size: 12%; + background-size: 10%; background-position-y: 2px; display: none; height:11px; text-align: center; } .splitter.scrollAreaTop { - border-top: 1px solid #353535; - box-shadow: 0 -1px 0 0 #141414; + border-bottom: 1px solid #141414; + box-shadow: 0 1px 0 0 #525252; } .splitter.scrollAreaBottom { -webkit-transform: rotate(180deg); border-top-left-radius: 6px; border-top-right-radius: 6px; - border-bottom: 1px solid #353535; + border-bottom: 1px solid #525252; box-shadow: 0 1px 0 0 #141414; margin-top: 4px; } @@ -95,7 +93,7 @@ opacity: 0.5; } .splitter.scrollArea:hover:not(.disabled) { - background-color: #252525; + background-color: #303030; } -- cgit v1.2.3