aboutsummaryrefslogtreecommitdiff
path: root/js/io/ui
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-01-31 22:44:15 -0800
committerJose Antonio Marquez2012-01-31 22:44:15 -0800
commitd2ff7026abd7e40b49917491773cba9367221f99 (patch)
tree22ab4103ebe645dbd3d38937860c137bf1c18801 /js/io/ui
parent67097a84b13199a6e7ee3185f1c5521208f1732f (diff)
downloadninja-d2ff7026abd7e40b49917491773cba9367221f99.tar.gz
Hooking cloud popup UI to core
Set up the popup UI for cloud to core API to detected cloud API connection.
Diffstat (limited to 'js/io/ui')
-rwxr-xr-xjs/io/ui/cloudpopup.reel/cloudpopup.html10
-rwxr-xr-xjs/io/ui/cloudpopup.reel/cloudpopup.js43
-rw-r--r--js/io/ui/cloudpopup.reel/css/cloudpopup.css34
-rwxr-xr-xjs/io/ui/cloudpopup.reel/css/cloudpopup.scss23
4 files changed, 79 insertions, 31 deletions
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html
index 8e45f926..5d7de347 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.html
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.html
@@ -36,15 +36,15 @@
36 36
37 <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas.</p> 37 <p>Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas.</p>
38 38
39 <label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" value="http://localhost:16380" /> 39 <label for="cloud_url">Cloud Server URL:</label><input type="text" id="cloud_url" class="cloud_url" value="http://localhost:16380" />
40 40
41 <button class="test">Test</button> 41 <button class="btn_test">Test</button>
42 42
43 <label>Status:</label><div class="status">Disconnected</div> 43 <label>Status:</label><div class="status">&nbsp;</div>
44 44
45 <button class="handle_cancel">Cancel</button> 45 <button class="btn_cancel">Cancel</button>
46 46
47 <button class="handle_ok">Ok</button> 47 <button class="btn_ok">Ok</button>
48 48
49 </div> 49 </div>
50 </div> 50 </div>
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
index 3e104bb7..f81dc93c 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.js
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -18,10 +18,21 @@ exports.CloudPopup = Montage.create(Component, {
18 }, 18 },
19 //////////////////////////////////////////////////////////////////// 19 ////////////////////////////////////////////////////////////////////
20 // 20 //
21 components: {
22 enumerable: false,
23 value: {test_btn: null, ok_btn: null, cancel_btn: null, status: null, url: null}
24 },
25 ////////////////////////////////////////////////////////////////////
26 //
21 prepareForDraw: { 27 prepareForDraw: {
22 enumerable: false, 28 enumerable: false,
23 value: function () { 29 value: function () {
24 // 30 //
31 this.components.test_btn = this.element.getElementsByClassName('btn_test')[0];
32 this.components.ok_btn = this.element.getElementsByClassName('btn_ok')[0];
33 this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel')[0];
34 this.components.status = this.element.getElementsByClassName('status')[0];
35 this.components.url = this.element.getElementsByClassName('cloud_url')[0];
25 } 36 }
26 }, 37 },
27 //////////////////////////////////////////////////////////////////// 38 ////////////////////////////////////////////////////////////////////
@@ -30,6 +41,7 @@ exports.CloudPopup = Montage.create(Component, {
30 enumerable: false, 41 enumerable: false,
31 value: function() { 42 value: function() {
32 // 43 //
44
33 } 45 }
34 }, 46 },
35 //////////////////////////////////////////////////////////////////// 47 ////////////////////////////////////////////////////////////////////
@@ -38,6 +50,7 @@ exports.CloudPopup = Montage.create(Component, {
38 enumerable: false, 50 enumerable: false,
39 value: function() { 51 value: function() {
40 // 52 //
53 this.testConnection();
41 } 54 }
42 }, 55 },
43 //////////////////////////////////////////////////////////////////// 56 ////////////////////////////////////////////////////////////////////
@@ -46,6 +59,36 @@ exports.CloudPopup = Montage.create(Component, {
46 enumerable: false, 59 enumerable: false,
47 value: function() { 60 value: function() {
48 // 61 //
62 this.components.test_btn.addEventListener('click', this.testConnection.bind(this), false);
63 //
64 this.components.ok_btn.addEventListener('click', this.closeDialog.bind(this), false);
65 this.components.cancel_btn.addEventListener('click', this.closeDialog.bind(this), false);
66 }
67 },
68 ////////////////////////////////////////////////////////////////////
69 //this.application.ninja.coreIoApi.hideCloudDialog
70 testConnection: {
71 enumerable: false,
72 value: function() {
73 //
74 this.application.ninja.coreIoApi.rootUrl = this.components.url.value;
75 //
76 if (this.application.ninja.coreIoApi.cloudAvailable()) {
77 this.components.status.style.color = '#77FF00';
78 this.components.status.innerHTML = 'Connected';
79 } else {
80 this.components.status.style.color = '#FF3A3A';
81 this.components.status.innerHTML = 'Disconnected';
82 }
83 }
84 },
85 ////////////////////////////////////////////////////////////////////
86 //
87 closeDialog: {
88 enumerable: false,
89 value: function() {
90 //
91 this.application.ninja.coreIoApi.hideCloudDialog();
49 } 92 }
50 } 93 }
51 //////////////////////////////////////////////////////////////////// 94 ////////////////////////////////////////////////////////////////////
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
index 009ba835..81e0742f 100644
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.css
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css
@@ -34,20 +34,21 @@
34 34
35/* line 40, cloudpopup.scss */ 35/* line 40, cloudpopup.scss */
36.cloud_popup .content p { 36.cloud_popup .content p {
37 text-shadow: 1px 1px 1px #333; 37 text-shadow: 1px 1px 1px #222;
38 margin: 0px 0px 12px 0px; 38 margin: 0px 0px 12px 0px;
39 text-align: justify; 39 text-align: justify;
40 color: #EEE; 40 color: #EEE;
41} 41}
42 42
43/* line 48, cloudpopup.scss */ 43/* line 48, cloudpopup.scss */
44.cloud_popup .content .test { 44.cloud_popup .content .btn_test {
45 float: right; 45 float: right;
46 clear: right; 46 clear: right;
47 margin: 0px 0px 0px 8px; 47 margin: 0px 0px 0px 8px;
48 width: 60px;
48} 49}
49 50
50/* line 55, cloudpopup.scss */ 51/* line 56, cloudpopup.scss */
51.cloud_popup .content label { 52.cloud_popup .content label {
52 float: left; 53 float: left;
53 margin: 5px 8px 0px 0px; 54 margin: 5px 8px 0px 0px;
@@ -56,28 +57,30 @@
56 text-align: right; 57 text-align: right;
57} 58}
58 59
59/* line 64, cloudpopup.scss */ 60/* line 65, cloudpopup.scss */
60.cloud_popup .content input { 61.cloud_popup .content input {
61 display: block; 62 display: block;
63 float: left;
64 color: #FFF;
62 border: 0px; 65 border: 0px;
63 padding: 4px; 66 padding: 4px;
64 margin: 0px; 67 margin: 0px;
65 background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929)); 68 width: 176px;
66 border: 1px #5c5c5c solid;
67 color: #FFF;
68 float: left;
69 width: 202px;
70 border-radius: 4px; 69 border-radius: 4px;
70 text-shadow: 1px 1px 1px #222;
71 border: 1px #5c5c5c solid;
72 background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929));
71} 73}
72 74
73/* line 77, cloudpopup.scss */ 75/* line 80, cloudpopup.scss */
74.cloud_popup .content input:focus { 76.cloud_popup .content input:focus {
77 text-shadow: none;
75 background: #FFF; 78 background: #FFF;
76 border: 1px #292929 solid; 79 border: 1px #292929 solid;
77 color: #292929; 80 color: #292929;
78} 81}
79 82
80/* line 84, cloudpopup.scss */ 83/* line 88, cloudpopup.scss */
81.cloud_popup .content button { 84.cloud_popup .content button {
82 display: block; 85 display: block;
83 border: 0px; 86 border: 0px;
@@ -92,16 +95,15 @@
92 text-shadow: 1px 1px 1px #000; 95 text-shadow: 1px 1px 1px #000;
93} 96}
94 97
95/* line 99, cloudpopup.scss */ 98/* line 103, cloudpopup.scss */
96.cloud_popup .content button:hover { 99.cloud_popup .content button:hover {
97 border: 1px #222 solid; 100 border: 1px #222 solid;
98 background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c5c5c), color-stop(100%, #161616)); 101 background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c5c5c), color-stop(100%, #161616));
99 color: #EEE; 102 color: #EEE;
100} 103}
101 104
102/* line 107, cloudpopup.scss */ 105/* line 111, cloudpopup.scss */
103.cloud_popup .content .status { 106.cloud_popup .content .status {
104 color: red;
105 float: left; 107 float: left;