aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/controllers/objects-controller.js4
-rwxr-xr-xjs/ninja.reel/ninja.js2
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.css24
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.js63
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.html6
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js8
-rw-r--r--js/tools/bindingTool.js2
7 files changed, 75 insertions, 34 deletions
diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js
index 6557c14e..f6d400f4 100644
--- a/js/controllers/objects-controller.js
+++ b/js/controllers/objects-controller.js
@@ -150,9 +150,9 @@ var objectsController = exports.ObjectsController = Montage.create(Montage, {
150 var properties = []; 150 var properties = [];
151 151
152 for(var key in object) { 152 for(var key in object) {
153 if(object.hasOwnProperty(key)) { 153 //if(object.hasOwnProperty(key)) {
154 properties.push(key); 154 properties.push(key);
155 } 155 //}
156 } 156 }
157 157
158 if(excludeUnderscoreProperties) { 158 if(excludeUnderscoreProperties) {
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 859268a0..9942300c 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -519,10 +519,12 @@ exports.Ninja = Montage.create(Component, {
519// background = "#000000"; 519// background = "#000000";
520// overflow = "hidden"; 520// overflow = "hidden";
521 transitionStopRule = "nj-css-garbage-selector"; 521 transitionStopRule = "nj-css-garbage-selector";
522 this.stage.bindingView.hide = true;
522 } else { 523 } else {
523// background = "#808080"; 524// background = "#808080";
524// overflow = "visible"; 525// overflow = "visible";
525 transitionStopRule = "*" 526 transitionStopRule = "*"
527 this.stage.bindingView.hide = false;
526 } 528 }
527 529
528 // TODO: Remove marker for old template: NINJA-STAGE-REWORK 530 // TODO: Remove marker for old template: NINJA-STAGE-REWORK
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 @@
6 6
7.bindingHud { 7.bindingHud {
8 position: absolute; 8 position: absolute;
9 background: rgba(0, 0, 0, 0.85); 9 background: rgba(24, 24, 24, 0.85);
10 /*padding: 0px;*/
11 color: #C4C4C4; 10 color: #C4C4C4;
12 font-size: 11px; 11 font-size: 11px;
13 box-shadow: inset 0px 0px 0px 0px #CCC; 12 box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.61);
14 border-radius: 6px; 13 border-radius: 6px;
15 padding: 3px 1px 1px; 14 padding: 3px 8px;
16 border:1px solid #000;
17 text-shadow: 1px 1px 0px #000; 15 text-shadow: 1px 1px 0px #000;
18} 16}
19 17
@@ -58,35 +56,35 @@
58 56
59.bindingHud .hudOption .connectorBubble { 57.bindingHud .hudOption .connectorBubble {
60 position: absolute; 58 position: absolute;
61 right: 5px; 59 right: 2px;
62 top: 3px; 60 top: 3px;
63 border-radius: 50%; 61 border-radius: 50%;
64 width: 10px; 62 width: 10px;
65 height: 10px; 63 height: 10px;
66 border-left: 0px; 64 border-left: 0px;
67 display: block; 65 display: block;
68 background-color: #313131; 66 background-color: #353535;
69 box-shadow: inset 0px 2px 7px 1px #0F0F0F, 0 1px #424242; 67 box-shadow: inset 0px 2px 3px 1px #222, 0 1px #666;
70 68
71} 69}
72 70
73.splitter.scrollArea { 71.splitter.scrollArea {
74 background-color: transparent; 72 background-color: transparent;
75 background-size: 12%; 73 background-size: 10%;
76 background-position-y: 2px; 74 background-position-y: 2px;
77 display: none; 75 display: none;
78 height:11px; 76 height:11px;
79 text-align: center; 77 text-align: center;
80} 78}
81.splitter.scrollAreaTop { 79.splitter.scrollAreaTop {
82 border-top: 1px solid #353535; 80 border-bottom: 1px solid #141414;
83 box-shadow: 0 -1px 0 0 #141414; 81 box-shadow: 0 1px 0 0 #525252;
84} 82}
85.splitter.scrollAreaBottom { 83.splitter.scrollAreaBottom {
86 -webkit-transform: rotate(180deg); 84 -webkit-transform: rotate(180deg);
87 border-top-left-radius: 6px; 85 border-top-left-radius: 6px;
88 border-top-right-radius: 6px; 86 border-top-right-radius: 6px;
89 border-bottom: 1px solid #353535; 87 border-bottom: 1px solid #525252;
90 box-shadow: 0 1px 0 0 #141414; 88 box-shadow: 0 1px 0 0 #141414;
91 margin-top: 4px; 89 margin-top: 4px;
92} 90}
@@ -95,7 +93,7 @@
95 opacity: 0.5; 93 opacity: 0.5;
96} 94}
97.splitter.scrollArea:hover:not(.disabled) { 95.splitter.scrollArea:hover:not(.disabled) {
98 background-color: #252525; 96 background-color: #303030;
99} 97}
100 98
101 99
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..6b802cb0 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, {
45 optionsRepeater: { 45 optionsRepeater: {
46 value: null 46 value: null
47 }, 47 },
48 48 panelData : {
49 value: null,
50 serializable: true
51 },
49 _userComponent: { value: null }, 52 _userComponent: { value: null },
50 userComponent: { 53 userComponent: {
51 get: function() { 54 get: function() {
@@ -59,7 +62,7 @@ exports.BindingHud = Montage.create(Component, {
59 isOffStage, icon, iconOffsets; 62 isOffStage, icon, iconOffsets;
60 63
61 this._userComponent = val; 64 this._userComponent = val;
62 this.properties = controller.getPropertiesFromObject(val, true); 65 this.properties = this.getPropertyList(val); //controller.getPropertiesFromObject(val, true);
63 66
64 controller.getObjectBindings(this.userComponent).forEach(function(obj) { 67 controller.getObjectBindings(this.userComponent).forEach(function(obj) {
65 this.boundProperties.push(obj.sourceObjectPropertyPath); 68 this.boundProperties.push(obj.sourceObjectPropertyPath);
@@ -73,17 +76,43 @@ exports.BindingHud = Montage.create(Component, {
73 this.title = icon.name; 76 this.title = icon.name;
74 this.x = iconOffsets.x; 77 this.x = iconOffsets.x;
75 this.y = iconOffsets.y - 80; 78 this.y = iconOffsets.y - 80;
76 } else {
77 this.title = val.identifier;
78 this.x = val.element.offsetLeft;
79 this.y = val.element.offsetTop;
80 } 79 }
81
82 this.needsDraw = true; 80 this.needsDraw = true;
83 81
84 } 82 }
85 }, 83 },
86 84
85 getPropertyList : {
86 value: function(component) {
87 var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true);
88
89 var objectName, promotedProperties;
90
91 if(this.userComponent._montage_metadata) {
92 objectName = this.userComponent._montage_metadata.objectName;
93
94 if(this.panelData && this.panelData[objectName + 'Pi']) {
95
96 promotedProperties = this.panelData[objectName + 'Pi'][0].Section.map(function(item) {
97 return item[0].prop;
98 });
99
100 //// Remove promoted properties from current position in array
101 props = props.filter(function(prop) {
102 return promotedProperties.indexOf(prop) === -1;
103 });
104
105 //// Add them at the top
106
107 props = promotedProperties.concat(props);
108
109 }
110 }
111
112 return props;
113 }
114 },
115
87 properties: { value: [] }, 116 properties: { value: [] },
88 117
89 _isResizing: { 118 _isResizing: {
@@ -202,6 +231,12 @@ exports.BindingHud = Montage.create(Component, {
202 this.scrollUp.style.display = "block"; 231 this.scrollUp.style.display = "block";
203 this.scrollDown.style.display = "block";