From fbe830fabe497d01f4f2eaddb867161a8187c101 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 9 Feb 2012 23:42:04 -0800 Subject: Adding download cloud app UI --- js/io/system/coreioapi.js | 2 +- js/io/ui/cloudpopup.reel/cloudpopup.html | 12 ++++++++ js/io/ui/cloudpopup.reel/cloudpopup.js | 26 ++++++++++++++-- js/io/ui/cloudpopup.reel/css/cloudpopup.css | 46 ++++++++++++++++++++++++++++ js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 46 ++++++++++++++++++++++++++++ js/mediators/io-mediator.js | 20 ++++++------ 6 files changed, 138 insertions(+), 14 deletions(-) diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js index f62133ac..b19f1e70 100755 --- a/js/io/system/coreioapi.js +++ b/js/io/system/coreioapi.js @@ -323,7 +323,7 @@ window.hack = function (name, type) { // this._cloudDialogComponents.dialog.element.style.opacity = 1; this._cloudDialogComponents.popup.element.style.opacity = 1; - this._cloudDialogComponents.popup.element.style.margin = '-100px 0px 0px -190px'; + this._cloudDialogComponents.popup.element.style.margin = '-170px 0px 0px -190px'; } } }, diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html index 1ab0892d..8e65a705 100755 --- a/js/io/ui/cloudpopup.reel/cloudpopup.html +++ b/js/io/ui/cloudpopup.reel/cloudpopup.html @@ -46,6 +46,18 @@ +
+ +

Install Ninja Cloud App

+ +

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus.

+ +
+ + + +
+ diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js index 7f494dcf..1344661b 100755 --- a/js/io/ui/cloudpopup.reel/cloudpopup.js +++ b/js/io/ui/cloudpopup.reel/cloudpopup.js @@ -16,11 +16,16 @@ exports.CloudPopup = Montage.create(Component, { hasTemplate: { value: true }, + //////////////////////////////////////////////////////////////////// + // + _os: { + value: null + }, //////////////////////////////////////////////////////////////////// // components: { enumerable: false, - value: {test_btn: null, ok_btn: null, cancel_btn: null, status: null, url: null} + value: {test_btn: null, ok_btn: null, cancel_btn: null, download_btn: null, status: null, url: null} }, //////////////////////////////////////////////////////////////////// // @@ -33,6 +38,7 @@ exports.CloudPopup = Montage.create(Component, { 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]; + this.components.download_btn = this.element.getElementsByClassName('btn_download nj-skinned')[0]; } }, //////////////////////////////////////////////////////////////////// @@ -41,7 +47,11 @@ exports.CloudPopup = Montage.create(Component, { enumerable: false, value: function() { // - + if (navigator.appVersion.indexOf("Win")!=-1) { + this._os = 'windows'; + } else if (navigator.appVersion.indexOf("Mac")!=-1) { + this._os = 'mac'; + } } }, //////////////////////////////////////////////////////////////////// @@ -61,6 +71,8 @@ exports.CloudPopup = Montage.create(Component, { didDraw: { enumerable: false, value: function() { + // + this.components.download_btn.addEventListener('click', this.downloadCloudApp.bind(this), false); // this.components.test_btn.addEventListener('click', this.testConnection.bind(this), false); // @@ -69,7 +81,15 @@ exports.CloudPopup = Montage.create(Component, { } }, //////////////////////////////////////////////////////////////////// - //this.application.ninja.coreIoApi.hideCloudDialog + // + downloadCloudApp: { + enumerable: false, + value: function() { + console.log(this._os); + } + }, + //////////////////////////////////////////////////////////////////// + // testConnection: { enumerable: false, value: function() { diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.css b/js/io/ui/cloudpopup.reel/css/cloudpopup.css index fcf85e75..85c80ad5 100644 --- a/js/io/ui/cloudpopup.reel/css/cloudpopup.css +++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.css @@ -96,3 +96,49 @@ float: right; margin: 8px 2px 2px 8px; } + +/* line 105, cloudpopup.scss */ +.cloud_popup section { + float: left; + clear: both; + margin: 16px 0px 0px 0px; + background: #333333 -webkit-linear-gradient(top, #323232 0%, #3c3c3c 100%); + border: 1px solid #333; + padding: 8px; + border-radius: 6px; +} + +/* line 116, cloudpopup.scss */ +.cloud_popup section h4 { + text-transform: uppercase; + font-weight: normal; + font-size: 12px; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; + display: block; + float: left; + clear: both; + margin: 2px 0px 6px 0px; + padding: 0px; + width: 100%; + text-align: center; +} + +/* line 132, cloudpopup.scss */ +.cloud_popup section .btn_download { + width: 120px; + text-align: center; + margin: 10px 0px 2px 4px; + float: left; + font-size: 11px; +} + +/* line 141, cloudpopup.scss */ +.cloud_popup section .cloud_icon { + background-image: url(../../../../../ninja_icon_128.png); + background-size: 100% 100%; + width: 60px; + height: 60px; + float: left; + margin: -10px 0px -6px 56px; +} diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss index b8c9f880..deab188e 100755 --- a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss +++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss @@ -99,4 +99,50 @@ $grey_light: #494949; text-align: center; float: right; margin: 8px 2px 2px 8px; +} + +.cloud_popup section +{ + float: left; + clear: both; + margin: 16px 0px 0px 0px; + background: #333 -webkit-linear-gradient(top, rgb(50, 50, 50) 0%, rgb(60, 60, 60) 100%); + border: 1px solid #333; + padding: 8px; + border-radius: 6px; +} + +.cloud_popup section h4 +{ + text-transform: uppercase; + font-weight: normal; + font-size: 12px; + text-shadow: 1px 1px 1px #000; + font-family: 'Droid Sans', sans-serif; + display: block; + float: left; + clear: both; + margin: 2px 0px 6px 0px; + padding: 0px; + width: 100%; + text-align: center; +} + +.cloud_popup section .btn_download +{ + width: 120px; + text-align: center; + margin: 10px 0px 2px 4px; + float: left; + font-size: 11px; +} + +.cloud_popup section .cloud_icon +{ + background-image: url(../../../../../ninja_icon_128.png); + background-size: 100% 100%; + width: 60px; + height: 60px; + float: left; + margin: -10px 0px -6px 56px; } \ No newline at end of file diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js index 630b0aa2..2f286e5e 100644 --- a/js/mediators/io-mediator.js +++ b/js/mediators/io-mediator.js @@ -86,16 +86,17 @@ exports.IoMediator = Montage.create(Component, { case 204: //Creating and formatting result object for callbak result = read.file.details; - //TODO: Add handling for converting HTML to Ninja format + //Checking for type of content to returns if (result.extension !== 'html' && result.extension !== 'htm') { + //Simple string result.content = read.file.content; } else { - // + //Object to be used by Ninja Template result.content = this.parseHtmlToNinjaTemplate(read.file.content); } - + //Status of call result.status = read.status; - // + //Calling back with result if (callback) callback(result); break; case 404: @@ -143,7 +144,7 @@ exports.IoMediator = Montage.create(Component, { // fileSaveAs: { enumerable: false, - value: function (file, copy, callback) { + value: function (copyTo, copyFrom, callback) { // } }, @@ -152,13 +153,12 @@ exports.IoMediator = Montage.create(Component, { parseHtmlToNinjaTemplate: { enumerable: false, value: function (html) { + //Creating temp object to mimic HTML var doc = window.document.implementation.createHTMLDocument(), template; - // + //Setting content to temp doc.getElementsByTagName('html')[0].innerHTML = html; - template = {head: doc.head, body: doc.body, document: doc}; - doc = null; - // - return template; + //Creating return object + return {head: doc.head.innerHTML, body: doc.body.innerHTML, document: doc}; } } //////////////////////////////////////////////////////////////////// -- cgit v1.2.3