aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xcss/ninja.css2
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js48
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.css28
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.html14
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.js53
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.css14
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.html11
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js136
-rw-r--r--js/tools/bindingTool.js27
-rw-r--r--scss/imports/scss/_Stage.scss2
10 files changed, 265 insertions, 70 deletions
diff --git a/css/ninja.css b/css/ninja.css
index 34b0b296..8139375d 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -198,7 +198,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
198 198
199#iframeContainer { position: absolute; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: scroll; background: gray; } 199#iframeContainer { position: absolute; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: scroll; background: gray; }
200 200
201.drawingCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 6; } 201.drawingCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 7; }
202 202
203.stageCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 5; } 203.stageCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 5; }
204 204
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 58f4175e..78189415 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
@@ -12,7 +12,53 @@ var Montage = require("montage/core/core").Montage,
12 Component = require("montage/ui/component").Component; 12 Component = require("montage/ui/component").Component;
13 13
14exports.BindingHudOption = Montage.create(Component, { 14exports.BindingHudOption = Montage.create(Component, {
15 _title: {
16 value: null
17 },
18
15 title: { 19 title: {
16 value: "value" 20 get: function() {
21 return this._title;
22 },
23 set: function(val) {
24 this._title = val;
25 this.needsDraw = true;
26 }
27 },
28
29 bound: {
30 value: false
31 },
32
33 _hudOptions: {
34 value: []
35 },
36
37 hudOptions: {
38 get: function() {
39 return this._hudOptions;
40 },
41 set: function(val) {
42 this._hudOptions = val;
43 this.title = val.title;
44 this.bound = val.bound;
45 this.needsDraw = true;
46 }
47 },
48
49 draw: {
50 value:function() {
51 if(this.bound) {
52 console.log(this.title);
53 this.element.classList.add("bound");
54 } else {
55 this.element.classList.remove("bound");
56 }
57// if(this.bindings.length > 0) {
58// this.element.classList.add("bound");
59// } else {
60// this.element.classList.remove("bound");
61// }
62 }
17 } 63 }
18}); \ No newline at end of file 64}); \ No newline at end of file
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 626706ed..aa204be7 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,7 +6,7 @@
6 6
7.bindingHud { 7.bindingHud {
8 position: absolute; 8 position: absolute;
9 background: #282828; 9 background: rgba(0, 0, 0, 0.8);
10 padding: 0px; 10 padding: 0px;
11 color: #FFF; 11 color: #FFF;
12 font-size: 11px; 12 font-size: 11px;
@@ -15,6 +15,7 @@
15 padding: 3px; 15 padding: 3px;
16 padding-top:0px; 16 padding-top:0px;
17 border:1px solid #000; 17 border:1px solid #000;
18 text-shadow: 1px 1px 0px #000;
18} 19}
19 20
20.bindingHud .bindingTitle { 21.bindingHud .bindingTitle {
@@ -27,18 +28,21 @@
27} 28}
28 29
29.bindingHud .hudRepetition { 30.bindingHud .hudRepetition {
30 background: #555; 31 background: rgba(0, 0, 0, 0.3);
31 padding:1px 9px;
32 line-height:16px; 32 line-height:16px;
33 border:1px solid #000;
34 box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A; 33 box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;
35 min-width: 65px; 34 min-width: 80px;
36} 35}
37 36
38.bindingHud .hudOption { 37.bindingHud .hudOption {
39 position:relative; 38 position:relative;
40 border-bottom:1px solid #505050; 39 border-bottom:1px solid #505050;
41 line-height:16px; 40 line-height:16px;
41 padding:1px 9px;
42}
43.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble {
44 background: #5e9eff;
45 display:block;
42} 46}
43 47
44.bindingHud .hudOption:last-child { 48.bindingHud .hudOption:last-child {
@@ -47,14 +51,14 @@
47 51
48.bindingHud .hudOption .connectorBubble { 52.bindingHud .hudOption .connectorBubble {
49 position: absolute; 53 position: absolute;
50 right: -20px; 54 right: -10px;
51 top: 2px; 55 top: 1px;
52 background: #555; 56 background: rgba(0, 0, 0, 0.3);
53 border: 1px solid black; 57 border-radius: 50%;
54 border-radius: 0px; 58 width: 16px;
55 width: 12px; 59 height: 16px;
56 height: 12px;
57 border-left: 0px; 60 border-left: 0px;
61 display: none;
58 /*border-bottom-right-radius: 50%; 62 /*border-bottom-right-radius: 50%;
59 border-top-right-radius: 50%;*/ 63 border-top-right-radius: 50%;*/
60 64
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 1f3b181c..afa4cd47 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
@@ -14,7 +14,8 @@
14 "owner": { 14 "owner": {
15 "prototype": "js/stage/binding-view.reel/binding-hud.reel", 15 "prototype": "js/stage/binding-view.reel/binding-hud.reel",
16 "properties": { 16 "properties": {
17 "element": {"#": "bindingHud"} 17 "element": {"#": "bindingHud"},
18 "titleElement": {"#": "title"}
18 } 19 }
19 }, 20 },
20 "repeater": { 21 "repeater": {
@@ -32,16 +33,7 @@
32 "element": {"#" : "hudOption"} 33 "element": {"#" : "hudOption"}
33 }, 34 },
34 "bindings": { 35 "bindings": {
35 "title": {"<-": "@repeater.objectAtCurrentIteration.title"} 36 "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"}
36 }
37 },
38 "Title": {
39 "prototype": "montage/ui/dynamic-text.reel",
40 "properties": {
41 "element": {"#": "title"}
42 },
43 "bindings": {
44 "value": {"<-": "@owner.title"}
45 } 37 }
46 } 38 }
47 } 39 }
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 029a1a39..14347a32 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
@@ -12,13 +12,30 @@ var Montage = require("montage/core/core").Montage,
12 Component = require("montage/ui/component").Component; 12 Component = require("montage/ui/component").Component;
13 13
14exports.BindingHud = Montage.create(Component, { 14exports.BindingHud = Montage.create(Component, {
15 title: { 15 _bindingArgs: {
16 value: "default" 16 value: null
17 },
18
19 titleElement: {
20 value: null
21 },
22