Adding download cloud app UI

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 @@
                         
                         <button class="btn_ok nj-skinned">Ok</button>
                         
+                        <section>
+                                
+                                <h4>Install Ninja Cloud App</h4>
+                                
+                                <p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus.</p>
+                                
+                                <div class="cloud_icon"></div>
+                                
+                                <button class="btn_download nj-skinned">Download</button>
+                                
+                        </section>
+                        
                 </div>
         </div>
     
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
@@ -17,10 +17,15 @@ exports.CloudPopup = Montage.create(Component, {
         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';
+                }
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -62,6 +72,8 @@ exports.CloudPopup = Montage.create(Component, {
         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);
                 //
                 this.components.ok_btn.addEventListener('click', this.closeDialog.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;