From d2ff7026abd7e40b49917491773cba9367221f99 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 31 Jan 2012 22:44:15 -0800
Subject: Hooking cloud popup UI to core
Set up the popup UI for cloud to core API to detected cloud API connection.
---
js/io/ui/cloudpopup.reel/cloudpopup.html | 10 +++----
js/io/ui/cloudpopup.reel/cloudpopup.js | 43 ++++++++++++++++++++++++++++
js/io/ui/cloudpopup.reel/css/cloudpopup.css | 34 +++++++++++-----------
js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 23 ++++++++-------
4 files changed, 79 insertions(+), 31 deletions(-)
(limited to 'js/io/ui/cloudpopup.reel')
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 @@
Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas.
-
+
-
+
- Disconnected
+
-
+
-
+
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, {
},
////////////////////////////////////////////////////////////////////
//
+ components: {
+ enumerable: false,
+ value: {test_btn: null, ok_btn: null, cancel_btn: null, status: null, url: null}
+ },
+ ////////////////////////////////////////////////////////////////////
+ //
prepareForDraw: {
enumerable: false,
value: function () {
//
+ this.components.test_btn = this.element.getElementsByClassName('btn_test')[0];
+ this.components.ok_btn = this.element.getElementsByClassName('btn_ok')[0];
+ this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel')[0];
+ this.components.status = this.element.getElementsByClassName('status')[0];
+ this.components.url = this.element.getElementsByClassName('cloud_url')[0];
}
},
////////////////////////////////////////////////////////////////////
@@ -30,6 +41,7 @@ exports.CloudPopup = Montage.create(Component, {
enumerable: false,
value: function() {
//
+
}
},
////////////////////////////////////////////////////////////////////
@@ -38,6 +50,7 @@ exports.CloudPopup = Montage.create(Component, {
enumerable: false,
value: function() {
//
+ this.testConnection();
}
},
////////////////////////////////////////////////////////////////////
@@ -46,6 +59,36 @@ exports.CloudPopup = Montage.create(Component, {
enumerable: false,
value: function() {
//
+ this.components.test_btn.addEventListener('click', this.testConnection.bind(this), false);
+ //
+ this.components.ok_btn.addEventListener('click', this.closeDialog.bind(this), false);
+ this.components.cancel_btn.addEventListener('click', this.closeDialog.bind(this), false);
+ }
+ },
+ ////////////////////////////////////////////////////////////////////
+ //this.application.ninja.coreIoApi.hideCloudDialog
+ testConnection: {
+ enumerable: false,
+ value: function() {
+ //
+ this.application.ninja.coreIoApi.rootUrl = this.components.url.value;
+ //
+ if (this.application.ninja.coreIoApi.cloudAvailable()) {
+ this.components.status.style.color = '#77FF00';
+ this.components.status.innerHTML = 'Connected';
+ } else {
+ this.components.status.style.color = '#FF3A3A';
+ this.components.status.innerHTML = 'Disconnected';
+ }
+ }
+ },
+ ////////////////////////////////////////////////////////////////////
+ //
+ closeDialog: {
+ enumerable: false,
+ value: function() {
+ //
+ this.application.ninja.coreIoApi.hideCloudDialog();
}
}
////////////////////////////////////////////////////////////////////
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 @@
/* line 40, cloudpopup.scss */
.cloud_popup .content p {
- text-shadow: 1px 1px 1px #333;
+ text-shadow: 1px 1px 1px #222;
margin: 0px 0px 12px 0px;
text-align: justify;
color: #EEE;
}
/* line 48, cloudpopup.scss */
-.cloud_popup .content .test {
+.cloud_popup .content .btn_test {
float: right;
clear: right;
margin: 0px 0px 0px 8px;
+ width: 60px;
}
-/* line 55, cloudpopup.scss */
+/* line 56, cloudpopup.scss */
.cloud_popup .content label {
float: left;
margin: 5px 8px 0px 0px;
@@ -56,28 +57,30 @@
text-align: right;
}
-/* line 64, cloudpopup.scss */
+/* line 65, cloudpopup.scss */
.cloud_popup .content input {
display: block;
+ float: left;
+ color: #FFF;
border: 0px;
padding: 4px;
margin: 0px;
- background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929));
- border: 1px #5c5c5c solid;
- color: #FFF;
- float: left;
- width: 202px;
+ width: 176px;
border-radius: 4px;
+ text-shadow: 1px 1px 1px #222;
+ border: 1px #5c5c5c solid;
+ background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929));
}
-/* line 77, cloudpopup.scss */
+/* line 80, cloudpopup.scss */
.cloud_popup .content input:focus {
+ text-shadow: none;
background: #FFF;
border: 1px #292929 solid;
color: #292929;
}
-/* line 84, cloudpopup.scss */
+/* line 88, cloudpopup.scss */
.cloud_popup .content button {
display: block;
border: 0px;
@@ -92,16 +95,15 @@
text-shadow: 1px 1px 1px #000;
}
-/* line 99, cloudpopup.scss */
+/* line 103, cloudpopup.scss */
.cloud_popup .content button:hover {
border: 1px #222 solid;
background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5c5c5c), color-stop(100%, #161616));
color: #EEE;
}
-/* line 107, cloudpopup.scss */
+/* line 111, cloudpopup.scss */
.cloud_popup .content .status {
- color: red;
float: left;
clear: right;
margin: 5px 0px 0px 6px;
@@ -109,8 +111,8 @@
width: 240px;
}
-/* line 117, cloudpopup.scss */
-.cloud_popup .content .handle_ok, .cloud_popup .content .handle_cancel {
+/* line 120, cloudpopup.scss */
+.cloud_popup .content .btn_ok, .cloud_popup .content .btn_cancel {
width: 80px;
text-align: center;
float: right;
diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
index ea54b1d8..ec03eb01 100755
--- a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
+++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss
@@ -38,17 +38,18 @@ $grey_light: #494949;
.cloud_popup .content p
{
- text-shadow: 1px 1px 1px #333;
+ text-shadow: 1px 1px 1px #222;
margin: 0px 0px 12px 0px;
text-align: justify;
color: #EEE;
}
-.cloud_popup .content .test
+.cloud_popup .content .btn_test
{
float: right;
clear: right;
margin: 0px 0px 0px 8px;
+ width: 60px;
}
.cloud_popup .content label
@@ -63,18 +64,21 @@ $grey_light: #494949;
.cloud_popup .content input
{
display: block;
+ float: left;
+ color: #FFF;
border: 0px;
padding: 4px;
margin: 0px;
- background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(45%, lighten($grey_dark, 10%)), color-stop(100%, $grey_dark));
- border: 1px lighten($grey_dark, 20%) solid;
- color: #FFF;
- float: left;
- width: 202px;
+ width: 176px;
border-radius: 4px;
+ text-shadow: 1px 1px 1px #222;
+ border: 1px lighten($grey_dark, 20%) solid;
+ background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(45%, lighten($grey_dark, 10%)), color-stop(100%, $grey_dark));
}
-.cloud_popup .content input:focus {
+.cloud_popup .content input:focus
+{
+ text-shadow: none;
background: #FFF;
border: 1px $grey_dark solid;
color: $grey_dark;
@@ -105,7 +109,6 @@ $grey_light: #494949;
.cloud_popup .content .status
{
- color: red;
float: left;
clear: right;
margin: 5px 0px 0px 6px;
@@ -113,7 +116,7 @@ $grey_light: #494949;
width: 240px;
}
-.cloud_popup .content .handle_ok, .cloud_popup .content .handle_cancel
+.cloud_popup .content .btn_ok, .cloud_popup .content .btn_cancel
{
width: 80px;
text-align: center;
--
cgit v1.2.3