From e75223a2c4c1e13d66639841e6418e94fe9b726f Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 31 Jan 2012 15:59:46 -0800 Subject: Cloud IO Prompt Setting up UI for the file IO prompt on initialization of Ninja and whenever a cloud IO call is made and the server is not detected. --- js/io/system/coreioapi.js | 84 +++++++++++++++--- js/io/ui/cloudpopup.reel/cloudpopup.html | 54 ++++++++++++ js/io/ui/cloudpopup.reel/cloudpopup.js | 55 ++++++++++++ js/io/ui/cloudpopup.reel/config.rb | 9 ++ js/io/ui/cloudpopup.reel/css/cloudpopup.css | 118 ++++++++++++++++++++++++++ js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 122 +++++++++++++++++++++++++++ 6 files changed, 431 insertions(+), 11 deletions(-) create mode 100755 js/io/ui/cloudpopup.reel/cloudpopup.html create mode 100755 js/io/ui/cloudpopup.reel/cloudpopup.js create mode 100755 js/io/ui/cloudpopup.reel/config.rb create mode 100644 js/io/ui/cloudpopup.reel/css/cloudpopup.css create mode 100755 js/io/ui/cloudpopup.reel/css/cloudpopup.scss (limited to 'js/io') diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js index 33c7bc28..4407d59a 100755 --- a/js/io/system/coreioapi.js +++ b/js/io/system/coreioapi.js @@ -10,7 +10,9 @@ NOTES: //////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// */ var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component; + Component = require("montage/ui/component").Component, + Popup = require("js/components/popup.reel").Popup, + CloudPopup = require("js/io/ui/cloudpopup.reel").CloudPopup; //////////////////////////////////////////////////////////////////////// //Exporting as Project I/O exports.CoreIoApi = Montage.create(Component, { @@ -26,16 +28,11 @@ exports.CoreIoApi = Montage.create(Component, { //Checks for IO API to be active this.ioServiceDetected = this.cloudAvailable(); // - console.log('FileIO: localStorage URL detected | IO Service Detected: '+ this.ioServiceDetected); - // + console.log('Cloud Status: URL detected in localStorage as '+this.rootUrl); } else { - //TODO: Remove, automatically prompt user on welcome - this.rootUrl = 'http://localhost:16380'; - //TODO: Changed to false, welcome screen prompts user - this.ioServiceDetected = this.cloudAvailable(); - // - console.log('FileIO: localStorage URL NOT detected | IO Service Detected: '+ this.ioServiceDetected); // + this.ioServiceDetected = false; + console.log('Cloud Status: No URL detected in localStorage'); } } }, @@ -45,18 +42,83 @@ exports.CoreIoApi = Montage.create(Component, { enumerable: false, value: function () { // - if (this.getCloudStatus().status === 200) { + if (this.rootUrl && this.getCloudStatus().status === 200) { //Active return true; } else { //Inactive - //TODO: Logic to prompt the user for cloud, otherwise return false + if (!this._cloudDialogOpen || this.application.ninja) { + this.showCloudDialog(); + } return false; } } }, //////////////////////////////////////////////////////////////////// // + _cloudDialogOpen: { + enumerable: false, + value: false + }, + //////////////////////////////////////////////////////////////////// + // + _cloudDialogComponents: { + enumerable: false, + value: {blackout: null, popup: null, dialog: null} + }, + //////////////////////////////////////////////////////////////////// + // + showCloudDialog: { + enumerable: false, + value: function () { + // + 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.application.ninja.popupManager.addPopup(this._cloudDialogComponents.blackout); + // + //////////////////////////////////////////////////// + //Creating popup from m-js component + var popup = document.createElement('div'); + // + this._cloudDialogComponents.dialog = CloudPopup.create(); + // + document.body.appendChild(popup); + // + this._cloudDialogComponents.dialog.element = popup; + this._cloudDialogComponents.dialog.needsDraw = true; + this._cloudDialogComponents.dialog.element.style.opacity = 0; + // + 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.addEventListener('firstDraw', this, false); + } else { + // + this._cloudDialogComponents.dialog.element.style.opacity = 1; + this._cloudDialogComponents.popup.element.style.opacity = 1; + } + } + }, + + + //////////////////////////////////////////////////////////////////// + // + hideCloudDialog: { + enumerable: false, + value: function () { + } + }, + //////////////////////////////////////////////////////////////////// + // _ioServiceDetected: { enumerable: false, value: false diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html new file mode 100755 index 00000000..8e45f926 --- /dev/null +++ b/js/io/ui/cloudpopup.reel/cloudpopup.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + +
+
+ +

Cloud Service Dialog

+ +

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas.

+ + + + + +
Disconnected
+ + + + + +
+
+ + + + \ No newline at end of file diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js new file mode 100755 index 00000000..3e104bb7 --- /dev/null +++ b/js/io/ui/cloudpopup.reel/cloudpopup.js @@ -0,0 +1,55 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +//////////////////////////////////////////////////////////////////////// +// +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; +//////////////////////////////////////////////////////////////////////// +// +exports.CloudPopup = Montage.create(Component, { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { + value: true + }, + //////////////////////////////////////////////////////////////////// + // + prepareForDraw: { + enumerable: false, + value: function () { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + willDraw: { + enumerable: false, + value: function() { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + draw: { + enumerable: false, + value: function() { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + didDraw: { + enumerable: false, + value: function() { + // + } + } + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// +}); +//////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////// \ No newline at end of file diff --git a/js/io/ui/cloudpopup.reel/config.rb b/js/io/ui/cloudpopup.reel/config.rb new file mode 100755 index 00000000..9b55af19 --- /dev/null +++ b/js/io/ui/cloudpopup.reel/config.rb @@ -0,0 +1,9 @@ +# Require any additional compass plugins here. +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "css" +sass_dir = "css" +images_dir = "img" +javascripts_dir = "../" +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css new file mode 100644 index 00000000..009ba835 --- /dev/null +++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css @@ -0,0 +1,118 @@ +@charset "UTF-8"; +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +/* line 12, cloudpopup.scss */ +.cloud_popup { + font-size: 12px; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; +} + +/* line 19, cloudpopup.scss */ +.cloud_popup .content { + width: 360px; +} + +/* line 24, cloudpopup.scss */ +.cloud_popup .content h3 { + text-transform: uppercase; + font-weight: normal; + font-size: 14px; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; + display: block; + float: left; + clear: both; + margin: 4px 0px 8px 0px; + padding: 0px; + width: 100%; + text-align: center; +} + +/* line 40, cloudpopup.scss */ +.cloud_popup .content p { + text-shadow: 1px 1px 1px #333; + margin: 0px 0px 12px 0px; + text-align: justify; + color: #EEE; +} + +/* line 48, cloudpopup.scss */ +.cloud_popup .content .test { + float: right; + clear: right; + margin: 0px 0px 0px 8px; +} + +/* line 55, cloudpopup.scss */ +.cloud_popup .content label { + float: left; + margin: 5px 8px 0px 0px; + display: block; + width: 96px; + text-align: right; +} + +/* line 64, cloudpopup.scss */ +.cloud_popup .content input { + display: block; + 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; + border-radius: 4px; +} + +/* line 77, cloudpopup.scss */ +.cloud_popup .content input:focus { + background: #FFF; + border: 1px #292929 solid; + color: #292929; +} + +/* line 84, cloudpopup.scss */ +.cloud_popup .content button { + display: block; + border: 0px; + margin: 0px; + padding: 4px; + border: 1px #333 solid; + background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #494949), color-stop(100%, #292929)); + border-radius: 4px; + color: #FFF; + text-transform: uppercase; + cursor: pointer; + text-shadow: 1px 1px 1px #000; +} + +/* line 99, 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 */ +.cloud_popup .content .status { + color: red; + float: left; + clear: right; + margin: 5px 0px 0px 6px; + text-shadow: 1px 1px 1px #333; + width: 240px; +} + +/* line 117, cloudpopup.scss */ +.cloud_popup .content .handle_ok, .cloud_popup .content .handle_cancel { + width: 80px; + text-align: center; + float: right; + margin: 4px 0px 0px 8px; +} diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss new file mode 100755 index 00000000..ea54b1d8 --- /dev/null +++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss @@ -0,0 +1,122 @@ +@charset "UTF-8"; +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +$grey_dark: #292929; +$grey_light: #494949; + +.cloud_popup +{ + font-size: 12px; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; +} + +.cloud_popup .content +{ + width: 360px; +} + +.cloud_popup .content h3 +{ + text-transform: uppercase; + font-weight: normal; + font-size: 14px; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; + display: block; + float: left; + clear: both; + margin: 4px 0px 8px 0px; + padding: 0px; + width: 100%; + text-align: center; +} + +.cloud_popup .content p +{ + text-shadow: 1px 1px 1px #333; + margin: 0px 0px 12px 0px; + text-align: justify; + color: #EEE; +} + +.cloud_popup .content .test +{ + float: right; + clear: right; + margin: 0px 0px 0px 8px; +} + +.cloud_popup .content label +{ + float: left; + margin: 5px 8px 0px 0px; + display: block; + width: 96px; + text-align: right; +} + +.cloud_popup .content input +{ + display: block; + 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; + border-radius: 4px; +} + +.cloud_popup .content input:focus { + background: #FFF; + border: 1px $grey_dark solid; + color: $grey_dark; +} + +.cloud_popup .content button +{ + display: block; + border: 0px; + margin: 0px; + padding: 4px; + border: 1px #333 solid; + background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, $grey_light), color-stop(100%, $grey_dark)); + border-radius: 4px; + color: #FFF; + text-transform: uppercase; + cursor: pointer; + text-shadow: 1px 1px 1px #000; +} + +.cloud_popup .content button:hover +{ + + border: 1px #222 solid; + background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, lighten($grey_dark, 20%)), color-stop(100%, darken($grey_light, 20%))); + color: #EEE; +} + +.cloud_popup .content .status +{ + color: red; + float: left; + clear: right; + margin: 5px 0px 0px 6px; + text-shadow: 1px 1px 1px #333; + width: 240px; +} + +.cloud_popup .content .handle_ok, .cloud_popup .content .handle_cancel +{ + width: 80px; + text-align: center; + float: right; + margin: 4px 0px 0px 8px; +} \ No newline at end of file -- cgit v1.2.3 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/io') 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 From 372604713c2f7ac5c0b0ef475cf4043ba3194fec Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 31 Jan 2012 23:34:44 -0800 Subject: Cloud API Popup Fixes Minor layout fixes, adjusted functionality slightly, need to check into adjusting the file and directory URL constructs for API changes. --- js/io/system/coreioapi.js | 21 ++++++++++++++------- js/io/ui/cloudpopup.reel/cloudpopup.js | 2 +- js/io/ui/cloudpopup.reel/css/cloudpopup.css | 2 +- js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 2 +- 4 files changed, 17 insertions(+), 10 deletions(-) (limited to 'js/io') diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js index 6b803f22..74b066ac 100755 --- a/js/io/system/coreioapi.js +++ b/js/io/system/coreioapi.js @@ -27,12 +27,9 @@ exports.CoreIoApi = Montage.create(Component, { this.rootUrl = window.localStorage['ioRootUrl']; //Checks for IO API to be active this.ioServiceDetected = this.cloudAvailable(); - // - console.log('Cloud Status: URL detected in localStorage as '+this.rootUrl); } else { - // + //IO API to be inactive this.ioServiceDetected = false; - console.log('Cloud Status: No URL detected in localStorage'); } } }, @@ -41,9 +38,12 @@ exports.CoreIoApi = Montage.create(Component, { cloudAvailable: { enumerable: false, value: function () { + var cloud = this.getCloudStatus(); // - if (this.rootUrl && this.getCloudStatus().status === 200) { + if (this.rootUrl && cloud.status === 200) { //Active + this.cloudData.name = cloud.response['name']; + this.cloudData.root = cloud.response['server-root']; return true; } else { //Inactive @@ -62,6 +62,12 @@ exports.CoreIoApi = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // + cloudData: { + enumerable: false, + value: {name: null, root: ''} + }, + //////////////////////////////////////////////////////////////////// + // _cloudDialogComponents: { enumerable: false, value: {blackout: null, popup: null, dialog: null} @@ -223,8 +229,8 @@ exports.CoreIoApi = Montage.create(Component, { if((urlOut.length > 1) && (urlOut.charAt(urlOut.length - 1) === "/")){ urlOut = urlOut.substring(0, (urlOut.length - 1)); } - - return serviceURL + urlOut; + // + return String(serviceURL+urlOut); } }, //////////////////////////////////////////////////////////////////// @@ -1009,6 +1015,7 @@ exports.CoreIoApi = Montage.create(Component, { // if (xhr.readyState === 4) { retValue.status = xhr.status; + eval('retValue.response = '+xhr.response); retValue.success = true; } } diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js index f81dc93c..d256f226 100755 --- a/js/io/ui/cloudpopup.reel/cloudpopup.js +++ b/js/io/ui/cloudpopup.reel/cloudpopup.js @@ -75,7 +75,7 @@ exports.CloudPopup = Montage.create(Component, { // if (this.application.ninja.coreIoApi.cloudAvailable()) { this.components.status.style.color = '#77FF00'; - this.components.status.innerHTML = 'Connected'; + this.components.status.innerHTML = 'Connected to '+this.application.ninja.coreIoApi.cloudData.name; } else { this.components.status.style.color = '#FF3A3A'; this.components.status.innerHTML = 'Disconnected'; diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css index 81e0742f..b42263b9 100644 --- a/js/io/ui/cloudpopup.reel/css/cloudpopup.css +++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css @@ -116,5 +116,5 @@ width: 80px; text-align: center; float: right; - margin: 4px 0px 0px 8px; + margin: 8px 0px 0px 8px; } diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss index ec03eb01..1ae5579b 100755 --- a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss +++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss @@ -121,5 +121,5 @@ $grey_light: #494949; width: 80px; text-align: center; float: right; - margin: 4px 0px 0px 8px; + margin: 8px 0px 0px 8px; } \ No newline at end of file -- cgit v1.2.3 From e824b4901817429231cd9ab6aa068cc0a0849e3a Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 1 Feb 2012 10:16:16 -0800 Subject: Applying global button styles to cloud popup --- js/io/ui/cloudpopup.reel/cloudpopup.html | 6 +++--- js/io/ui/cloudpopup.reel/cloudpopup.js | 6 +++--- js/io/ui/cloudpopup.reel/css/cloudpopup.css | 29 ++++------------------------ js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 24 +---------------------- 4 files changed, 11 insertions(+), 54 deletions(-) (limited to 'js/io') diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html index 5d7de347..fa4533d7 100755 --- a/js/io/ui/cloudpopup.reel/cloudpopup.html +++ b/js/io/ui/cloudpopup.reel/cloudpopup.html @@ -38,13 +38,13 @@ - +
 
- + - + diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js index d256f226..e8558179 100755 --- a/js/io/ui/cloudpopup.reel/cloudpopup.js +++ b/js/io/ui/cloudpopup.reel/cloudpopup.js @@ -28,9 +28,9 @@ exports.CloudPopup = Montage.create(Component, { 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.test_btn = this.element.getElementsByClassName('btn_test nj-skinned')[0]; + this.components.ok_btn = this.element.getElementsByClassName('btn_ok nj-skinned')[0]; + this.components.cancel_btn = this.element.getElementsByClassName('btn_cancel nj-skinned')[0]; this.components.status = this.element.getElementsByClassName('status')[0]; this.components.url = this.element.getElementsByClassName('cloud_url')[0]; } diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css index b42263b9..eac18083 100644 --- a/js/io/ui/cloudpopup.reel/css/cloudpopup.css +++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css @@ -68,11 +68,12 @@ width: 176px; border-radius: 4px; text-shadow: 1px 1px 1px #222; + font-family: 'Droid Sans', sans-serif; border: 1px #5c5c5c solid; background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(45%, #434343), color-stop(100%, #292929)); } -/* line 80, cloudpopup.scss */ +/* line 81, cloudpopup.scss */ .cloud_popup .content input:focus { text-shadow: none; background: #FFF; @@ -80,29 +81,7 @@ color: #292929; } -/* line 88, cloudpopup.scss */ -.cloud_popup .content button { - display: block; - border: 0px; - margin: 0px; - padding: 4px; - border: 1px #333 solid; - background: #292929 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #494949), color-stop(100%, #292929)); - border-radius: 4px; - color: #FFF; - text-transform: uppercase; - cursor: pointer; - text-shadow: 1px 1px 1px #000; -} - -/* 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 111, cloudpopup.scss */ +/* line 89, cloudpopup.scss */ .cloud_popup .content .status { float: left; clear: right; @@ -111,7 +90,7 @@ width: 240px; } -/* line 120, cloudpopup.scss */ +/* line 98, cloudpopup.scss */ .cloud_popup .content .btn_ok, .cloud_popup .content .btn_cancel { width: 80px; text-align: center; diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss index 1ae5579b..047e2dd1 100755 --- a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss +++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss @@ -72,6 +72,7 @@ $grey_light: #494949; width: 176px; border-radius: 4px; text-shadow: 1px 1px 1px #222; + font-family: 'Droid Sans', sans-serif; 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)); } @@ -84,29 +85,6 @@ $grey_light: #494949; color: $grey_dark; } -.cloud_popup .content button -{ - display: block; - border: 0px; - margin: 0px; - padding: 4px; - border: 1px #333 solid; - background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, $grey_light), color-stop(100%, $grey_dark)); - border-radius: 4px; - color: #FFF; - text-transform: uppercase; - cursor: pointer; - text-shadow: 1px 1px 1px #000; -} - -.cloud_popup .content button:hover -{ - - border: 1px #222 solid; - background: $grey_dark -webkit-gradient(linear, left top, left bottom, color-stop(0%, lighten($grey_dark, 20%)), color-stop(100%, darken($grey_light, 20%))); - color: #EEE; -} - .cloud_popup .content .status { float: left; -- cgit v1.2.3 From d74910a897f2db920f6f67d922532d245074c8f7 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 1 Feb 2012 11:51:24 -0800 Subject: Fixing coreIO API referencing --- js/io/system/coreioapi.js | 3 ++- js/io/system/fileio.js | 11 ++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) (limited to 'js/io') diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js index 74b066ac..7e883b81 100755 --- a/js/io/system/coreioapi.js +++ b/js/io/system/coreioapi.js @@ -207,6 +207,7 @@ exports.CoreIoApi = Montage.create(Component, { directoryServiceURL: { enumerable: false, get: function() { + console.log(this); return String(this.rootUrl+this._directoryServiceURL); }, set: function(value) { @@ -1015,7 +1016,7 @@ exports.CoreIoApi = Montage.create(Component, { // if (xhr.readyState === 4) { retValue.status = xhr.status; - eval('retValue.response = '+xhr.response); + retValue.response = JSON.parse(xhr.response); retValue.success = true; } } diff --git a/js/io/system/fileio.js b/js/io/system/fileio.js index 38ab05e8..ac5812e9 100755 --- a/js/io/system/fileio.js +++ b/js/io/system/fileio.js @@ -11,11 +11,12 @@ NOTES: empty file will be created. 'contents' should be a string to be saved as the file. 'contentType' is the mime type of the file. + coreIoApi: this.application.ninja.coreIoApi + //////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// */ // -var Montage = require("montage/core/core").Montage, - CoreIoApi = require("js/io/system/coreioapi").CoreIoApi; +var Montage = require("montage/core/core").Montage; //////////////////////////////////////////////////////////////////////// //Exporting as File I/O exports.FileIo = Montage.create(Object.prototype, { @@ -28,12 +29,12 @@ exports.FileIo = Montage.create(Object.prototype, { enumerable: true, value: function(file) { //Checking for API to be available - if (!CoreIoApi.cloudAvailable()) { + if (!this.application.ninja.coreIoApi.cloudAvailable()) { //API not available, no IO action taken return null; } //Peforming check for file to exist - var check = CoreIoApi.fileExists(file.uri), status, create; + var check = this.application.ninja.coreIoApi.fileExists(file.uri), status, create; //Upon successful check, handling results if (check.success) { //Handling status of check @@ -44,7 +45,7 @@ exports.FileIo = Montage.create(Object.prototype, { break; case 404: //File does not exists, ready to be created - create = CoreIoApi.createFile(file); + create = this.application.ninja.coreIoApi.createFile(file); //Storing status to be returned (for UI handling) if (create.success) { status = check.status; -- cgit v1.2.3