aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorArmen Kesablyan2012-06-13 11:37:11 -0700
committerArmen Kesablyan2012-06-13 11:37:11 -0700
commitd2e2a39feeba51e976d139eddf6f1cf331457f4f (patch)
tree7616fb59b5210d0d0128f1fd5dde34a43eb13f11 /js/panels
parentcfa2d42f6ca65eb3ce1bea92db5f4af87dd68bb5 (diff)
parentd57ab6509805ba4e97d6c74be913a2c1b324af3a (diff)
downloadninja-d2e2a39feeba51e976d139eddf6f1cf331457f4f.tar.gz
Merge pull request #12 from ericguzman/binding
Binding Panel update
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/binding-panel.reel/binding-panel.css5
-rw-r--r--js/panels/binding-panel.reel/binding-panel.js56
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.css87
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.html59
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.js2
-rwxr-xr-xjs/panels/components-panel.reel/components-panel.js1
-rw-r--r--js/panels/objects/object.reel/object.css44
-rw-r--r--js/panels/objects/object.reel/object.js30
-rw-r--r--js/panels/objects/objects-panel.reel/objects-panel.css17
-rw-r--r--js/panels/objects/objects-panel.reel/objects-panel.html18
10 files changed, 244 insertions, 75 deletions
diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css
index a1d5be0f..787cf114 100644
--- a/js/panels/binding-panel.reel/binding-panel.css
+++ b/js/panels/binding-panel.reel/binding-panel.css
@@ -20,3 +20,8 @@
20.binding-panel-toolbar-container { 20.binding-panel-toolbar-container {
21 -webkit-box-flex: 0; 21 -webkit-box-flex: 0;
22} 22}
23
24.binding-panel .edit-view-docked {
25 left: 0;
26 -webkit-transition-duration: 0;
27} \ No newline at end of file
diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js
index 0641ecf5..45fa4005 100644
--- a/js/panels/binding-panel.reel/binding-panel.js
+++ b/js/panels/binding-panel.reel/binding-panel.js
@@ -6,6 +6,19 @@ exports.BindingPanel = Montage.create(Component, {
6 6
7 bindings : { value: null }, 7 bindings : { value: null },
8 editView : { value: null }, 8 editView : { value: null },
9
10 _dockEditView : { value: null },
11 dockEditView : {
12 get : function() { return this._dockEditView; },
13 set : function(value) {
14 if(value === this._dockEditView) { return; }
15
16 this._dockEditView = value;
17
18 this.needsDraw = true;
19 }
20 },
21
9 _editing: { value: null }, 22 _editing: { value: null },
10 editing: { 23 editing: {
11 get: function() { 24 get: function() {
@@ -14,6 +27,11 @@ exports.BindingPanel = Montage.create(Component, {
14 set: function(value) { 27 set: function(value) {
15 if(value === this._editing) { return; } 28 if(value === this._editing) { return; }
16 this._editing = value; 29 this._editing = value;
30
31 if(!value) {
32 this.dockEditView = false;
33 }
34
17 this.needsDraw = true; 35 this.needsDraw = true;
18 } 36 }
19 }, 37 },
@@ -29,6 +47,18 @@ exports.BindingPanel = Montage.create(Component, {
29 }, 47 },
30 48
31 /* ------------------------- 49 /* -------------------------
50 Event handlers
51 ------------------------- */
52
53 handleWebkitTransitionEnd : {
54 value: function(e) {
55 console.log("trans end");
56
57 this.dockEditView = this.editing;
58 }
59 },
60
61 /* -------------------------
32 Toolbar Button Actions 62 Toolbar Button Actions
33 ------------------------- */ 63 ------------------------- */
34 64
@@ -54,8 +84,16 @@ exports.BindingPanel = Montage.create(Component, {
54 } 84 }
55 }, 85 },
56 86
87 prepareForDraw : {
88 value: function() {
89
90 }
91 },
92
57 willDraw: { 93 willDraw: {
58 value: function() { 94 value: function() {
95 this.editView.element.addEventListener('webkitTransitionEnd', this, false);
96
59 if(this.editing) { 97 if(this.editing) {
60 this._translateDistance = this.element.offsetWidth; 98 this._translateDistance = this.element.offsetWidth;
61 } 99 }
@@ -64,15 +102,21 @@ exports.BindingPanel = Montage.create(Component, {
64 102
65 draw : { 103 draw : {
66 value: function() { 104 value: function() {
67 var transStr = '-webkit-transform'; 105 var transStr = '-webkit-transform',
106 editViewEl = this.editView.element;
68 107
69 if(this.editing) { 108 if(this.dockEditView) {
70 this.editView.element.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)'); 109 editViewEl.classList.add('edit-view-docked');
71 this.editView.element.style.setProperty('box-shadow', '0 0 10px rgba(0,0,0,0.2)') 110 editViewEl.style.removeProperty(transStr);
72 } else { 111 } else {
73 this.editView.element.style.removeProperty(transStr); 112 editViewEl.classList.remove('edit-view-docked');
74 this.editView.element.style.removeProperty('box-shadow'); 113 if(this.editing) {
114 editViewEl.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)');
115 } else {
116 editViewEl.style.removeProperty(transStr);
117 }
75 } 118 }
119
76 } 120 }
77 } 121 }
78}); \ No newline at end of file 122}); \ No newline at end of file
diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.css b/js/panels/binding/edit-binding-view.reel/edit-binding-view.css
index aa539cd6..23585aca 100644
--- a/js/panels/binding/edit-binding-view.reel/edit-binding-view.css
+++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.css
@@ -13,12 +13,60 @@
13 position: absolute; 13 position: absolute;
14 top: 0; 14 top: 0;
15 width: 100%; 15 width: 100%;
16 -webkit-transition-property: -webkit-transform, box-shadow; 16 -webkit-transition-property: -webkit-transform;
17 -webkit-transition-duration: .55s, .2s; 17 -webkit-transition-duration: .55s;
18 -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99); 18 -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99);
19 -webkit-user-select: text; 19 -webkit-user-select: text;
20} 20}
21 21
22/* -------------------
23 Object Editing Section
24 --------------------- */
25.edit-object-binding {
26 border-bottom: 1px solid #505050;
27 display: -webkit-box;
28 margin: 5px;
29 padding-bottom: 5px;
30 -webkit-box-orient: horizontal;
31}
32.object-container {
33 display: -webkit-box;
34 -webkit-box-orient: horizontal;
35 -webkit-box-flex: 1;
36 overflow: hidden;
37}
38.object-container:first-child {
39 margin-right: 5px;
40}
41.object-icon-container {
42 background-color: #414141;
43 border-radius: 5px;
44 border: 1px solid #333;
45 box-shadow: inset 0 0 5px 0px #333, 0 1px 0 #585858;
46 height: 40px;
47 width: 40px;
48 -webkit-box-flex: 0;
49}
50.object-icon-container > div {
51 height: 100%;
52 width: 100%;
53}
54.edit-object-binding .object-icon {
55 -webkit-transform: scale(.75);
56 height: 100%;
57 margin: 0;
58 width: 100%;
59 position:relative;
60 top: -1px;
61 left: -1px;
62}
63.object-fields-container {
64 -webkit-box-flex: 1;
65 padding-top: 1px;
66 width: 1px;
67}
68
69
22.edit-binding-view ul { 70.edit-binding-view ul {
23 padding: 0; 71 padding: 0;
24 margin: 0; 72 margin: 0;
@@ -34,14 +82,43 @@
34 width: 50%; 82 width: 50%;
35} 83}
36 84
85.checkbox-container {
86 position: absolute;
87 left: 50%;
88}
89.checkbox-container label {