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. --- .gitignore | 3 +- js/components/popup-manager.reel/popup-manager.js | 3 +- 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 ++++++++++++++++++++++ js/ninja.reel/ninja.js | 4 + 9 files changed, 439 insertions(+), 13 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 diff --git a/.gitignore b/.gitignore index fd016bd0..6c288e8c 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,5 @@ cloud/ /.idea/scopes/scope_settings.xml _scss/imports/scss/_Stage.scss -compass_app_log.txt \ No newline at end of file +compass_app_log.txt +js/io/ui/cloudpopup.reel/.sass-cache/5fd824121af95f6044b06681535cf0639ffb5db3/cloudpopup.scssc \ No newline at end of file diff --git a/js/components/popup-manager.reel/popup-manager.js b/js/components/popup-manager.reel/popup-manager.js index be3c1e8d..bc755f74 100755 --- a/js/components/popup-manager.reel/popup-manager.js +++ b/js/components/popup-manager.reel/popup-manager.js @@ -32,7 +32,8 @@ exports.PopupMananger = Montage.create(Component, { addPopup: { enumerable: true, value: function (popup, depth, blackout) { - // + //Fix to ensure always highest + this.element.style.zIndex = this._getNextHighestZindex(document.body); // Highest z-index in body //TODO: Add blackout background //Checking for manual or setting auto to next highest depth if (depth) { 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 diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 465533cd..38bc22fb 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -97,6 +97,10 @@ exports.Ninja = Montage.create(Component, { didDraw: { value: function() { NJevent("appLoaded"); + // + if (!this.application.ninja.coreIoApi.ioServiceDetected) { + var check = this.application.ninja.coreIoApi.cloudAvailable(); + } } }, -- cgit v1.2.3