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/system/coreioapi.js | 17 +++++++---- 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 ++++++++------- 5 files changed, 90 insertions(+), 37 deletions(-) (limited to 'js') diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js index 4407d59a..6b803f22 100755 --- a/js/io/system/coreioapi.js +++ b/js/io/system/coreioapi.js @@ -47,7 +47,7 @@ exports.CoreIoApi = Montage.create(Component, { return true; } else { //Inactive - if (!this._cloudDialogOpen || this.application.ninja) { + if (!this._cloudDialogOpen && this.application.ninja) { this.showCloudDialog(); } return false; @@ -71,11 +71,13 @@ exports.CoreIoApi = Montage.create(Component, { showCloudDialog: { enumerable: false, value: function () { + // + this._cloudDialogOpen = true; // this._cloudDialogComponents.blackout = document.createElement('div'); this._cloudDialogComponents.blackout.style.width = '100%'; this._cloudDialogComponents.blackout.style.height = '100%'; - this._cloudDialogComponents.blackout.style.background = 'rgba(0, 0, 0, .6)'; + this._cloudDialogComponents.blackout.style.background = '-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,0.8) 80%)'; this.application.ninja.popupManager.addPopup(this._cloudDialogComponents.blackout); // //////////////////////////////////////////////////// @@ -93,28 +95,31 @@ exports.CoreIoApi = Montage.create(Component, { this._cloudDialogComponents.dialog.addEventListener('firstDraw', this, false); } }, - + //////////////////////////////////////////////////////////////////// + // handleFirstDraw: { value: function (e) { if (e._target._element.className === 'cloud_popup') { this._cloudDialogComponents.dialog.removeEventListener('firstDraw', this, false); // - this._cloudDialogComponents.popup = this.application.ninja.popupManager.createPopup(this._cloudDialogComponents.dialog.element, {x: '200px', y: '200px'}); + this._cloudDialogComponents.popup = this.application.ninja.popupManager.createPopup(this._cloudDialogComponents.dialog.element, {x: '50%', y: '50%'}); this._cloudDialogComponents.popup.addEventListener('firstDraw', this, false); } else { // this._cloudDialogComponents.dialog.element.style.opacity = 1; this._cloudDialogComponents.popup.element.style.opacity = 1; + this._cloudDialogComponents.popup.element.style.margin = '-100px 0px 0px -190px'; } } }, - - //////////////////////////////////////////////////////////////////// // hideCloudDialog: { enumerable: false, value: function () { + // + this.application.ninja.popupManager.removePopup(this._cloudDialogComponents.blackout); + this.application.ninja.popupManager.removePopup(this._cloudDialogComponents.popup.element); } }, //////////////////////////////////////////////////////////////////// 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