aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js30
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.css38
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.html3
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.js105
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.html8
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js38
6 files changed, 149 insertions, 73 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, {
26 } 26 }
27 }, 27 },
28 28
29 bound: { 29 _promoted : { value: null },
30 value: false 30 promoted : {
31 get : function() { return this._promoted; },
32 set : function(value) {
33 if(value === this._promoted) { return; }
34
35 this._promoted = value;
36
37 this.needsDraw = true;
38 }
39 },
40
41 _bound : { value: null },
42 bound : {
43 get : function() { return this._bound; },
44 set : function(value) {
45 if(value === this._bound) { return; }
46
47 this._bound = value;
48
49 this.needsDraw = true;
50 }
31 }, 51 },
32 52
33 prepareForDraw: { 53 prepareForDraw: {
@@ -47,6 +67,12 @@ exports.BindingHudOption = Montage.create(Component, {
47 } else { 67 } else {
48 this.element.classList.remove("bound"); 68 this.element.classList.remove("bound");
49 } 69 }
70
71 if(this.promoted || this.bound) {
72 this.element.classList.add("promoted");
73 } else {
74 this.element.classList.remove("promoted");
75 }
50// if(this.bindings.length > 0) { 76// if(this.bindings.length > 0) {
51// this.element.classList.add("bound"); 77// this.element.classList.add("bound");
52// } else { 78// } 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 680f9183..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
@@ -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;
16 border:1px solid #000;
17 text-shadow: 1px 1px 0px #000; 15 text-shadow: 1px 1px 0px #000;
18} 16}
19 17
@@ -31,6 +29,8 @@
31 /*background: rgba(0, 0, 0, 0.3);*/ 29 /*background: rgba(0, 0, 0, 0.3);*/
32 line-height:16px; 30 line-height:16px;
33 /*box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;*/ 31 /*box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;*/
32 padding-top: 4px;
33 margin: 0 5px;
34 min-width: 80px; 34 min-width: 80px;
35} 35}
36 36
@@ -40,7 +40,10 @@
40 line-height:16px; 40 line-height:16px;
41 padding:1px 25px 1px 8px; 41 padding:1px 25px 1px 8px;
42} 42}
43 43.bindingHud .hudOption.promoted {
44 color: #FFF;
45 font-weight: bold;
46}
44.bindingHud .hudOption .connectorBubble:hover { 47.bindingHud .hudOption .connectorBubble:hover {
45 background-color: #1B52A7; 48 background-color: #1B52A7;
46 box-shadow: inset 0px 2px 2px 1px rgba(15, 15, 15, 0.78), 0 1px #474747; 49 box-shadow: inset 0px 2px 2px 1px rgba(15, 15, 15, 0.78), 0 1px #474747;
@@ -58,35 +61,35 @@
58 61
59.bindingHud .hudOption .connectorBubble { 62.bindingHud .hudOption .connectorBubble {
60 position: absolute; 63 position: absolute;
61 right: 5px; 64 right: 2px;
62 top: 3px; 65 top: 3px;
63 border-radius: 50%; 66 border-radius: 50%;
64 width: 10px; 67 width: 10px;
65 height: 10px; 68 height: 10px;
66 border-left: 0px; 69 border-left: 0px;
67 display: block; 70 display: block;
68 background-color: #313131; 71 background-color: #353535;
69 box-shadow: inset 0px 2px 7px 1px #0F0F0F, 0 1px #424242; 72 box-shadow: inset 0px 2px 3px 1px #222, 0 1px #666;
70 73
71} 74}
72 75
73.splitter.scrollArea { 76.splitter.scrollArea {
74 background-color: transparent; 77 background-color: transparent;
75 background-size: 12%; 78 background-size: 10%;
76 background-position-y: 2px; 79 background-position-y: 2px;
77 display: none; 80 display: none;
78 height:11px; 81 height:11px;
79 text-align: center; 82 text-align: center;
80} 83}
81.splitter.scrollAreaTop { 84.splitter.scrollAreaTop {
82 border-top: 1px solid #353535; 85 border-bottom: 1px solid #141414;
83 box-shadow: 0 -1px 0 0 #141414; 86 box-shadow: 0 1px 0 0 #525252;
84} 87}
85.splitter.scrollAreaBottom { 88.splitter.scrollAreaBottom {
86 -webkit-transform: rotate(180deg); 89 -webkit-transform: rotate(180deg);
87 border-top-left-radius: 6px; 90 border-top-left-radius: 6px;
88 border-top-right-radius: 6px; 91 border-top-right-radius: 6px;
89 border-bottom: 1px solid #353535; 92 border-bottom: 1px solid #525252;
90 box-shadow: 0 1px 0 0 #141414; 93 box-shadow: 0 1px 0 0 #141414;
91 margin-top: 4px; 94 margin-top: 4px;
92} 95}
@@ -95,9 +98,14 @@
95 opacity: 0.5; 98 opacity: 0.5;
96} 99}
97.splitter.scrollArea:hover:not(.disabled) { 100.splitter.scrollArea:hover:not(.disabled) {
98 background-color: #252525; 101 background-color: #303030;
102 border-bottom: 1px solid #252525;
103 box-shadow: 0 1px 0 0 #3F3F3F;
104}
105.splitter.scrollAreaBottom:hover:not(.disabled) {
106 border-bottom: 1px solid #3F3F3F;
107 box-shadow: 0 1px 0 0 #252525;
99} 108}
100
101 109
102.hudRepetition { 110.hudRepetition {
103 overflow: hidden; 111 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 @@
36 "element": {"#" : "hudOption"} 36 "element": {"#" : "hudOption"}
37 }, 37 },
38 "bindings": { 38 "bindings": {
39 "title": {"<-": "@repeater.objectAtCurrentIteration"} 39 "title": {"<-": "@repeater.objectAtCurrentIteration.property"},
40 "promoted": {"<-": "@repeater.objectAtCurrentIteration.promoted"}
40 } 41 }
41 }, 42 },
42 "resizer1": { 43 "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 9918b06d..1b0af09d 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
@@ -10,6 +10,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
10*/ 10*/
11var Montage = require("montage/core/core").Montage, 11var Montage = require("montage/core/core").Montage,
12 Component = require("montage/ui/component").Component; 12 Component = require("montage/ui/component").Component;
13var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
13 14
14exports.BindingHud = Montage.create(Component, { 15exports.BindingHud = Montage.create(Component, {
15 scrollUp: { 16 scrollUp: {
@@ -45,11 +46,14 @@ exports.BindingHud = Montage.create(Component, {
45 optionsRepeater: { 46 optionsRepeater: {
46 value: null 47 value: null