diff options
author | Armen Kesablyan | 2012-06-13 11:37:11 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-06-13 11:37:11 -0700 |
commit | d2e2a39feeba51e976d139eddf6f1cf331457f4f (patch) | |
tree | 7616fb59b5210d0d0128f1fd5dde34a43eb13f11 /js/panels | |
parent | cfa2d42f6ca65eb3ce1bea92db5f4af87dd68bb5 (diff) | |
parent | d57ab6509805ba4e97d6c74be913a2c1b324af3a (diff) | |
download | ninja-d2e2a39feeba51e976d139eddf6f1cf331457f4f.tar.gz |
Merge pull request #12 from ericguzman/binding
Binding Panel update
Diffstat (limited to 'js/panels')
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 { | ||
90 | position: relative; | ||
91 | top: -3px; | ||