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/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 +++++++++++++++++++++++++++
5 files changed, 358 insertions(+)
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/ui/cloudpopup.reel')
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 @@
+
+
+
+
+
+
+
+
+This file contains proprietary software owned by Motorola Mobility, Inc. */
+
+////////////////////////////////////////////////////////////////////////
+//
+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. */
+/* 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. */
+
+$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/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 ++++++++-------
4 files changed, 79 insertions(+), 31 deletions(-)
(limited to 'js/io/ui/cloudpopup.reel')
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.
- Cloud Server URL: Cloud Server URL: Test
+ Test
- Status: Disconnected
+ Status:
- Cancel
+ Cancel
- Ok
+ Ok
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/ui/cloudpopup.reel/cloudpopup.js | 2 +-
js/io/ui/cloudpopup.reel/css/cloudpopup.css | 2 +-
js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
(limited to 'js/io/ui/cloudpopup.reel')
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/ui/cloudpopup.reel')
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 @@
Cloud Server URL: Test
+ Test
Status:
- Cancel
+ Cancel
- Ok
+ Ok
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 fb5d5994b8d729ce6233549844817d2b7043d8a5 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Wed, 1 Feb 2012 12:05:08 -0800
Subject: Adding cloud popup copy
---
js/io/ui/cloudpopup.reel/cloudpopup.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'js/io/ui/cloudpopup.reel')
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html
index fa4533d7..eb5e8178 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.html
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.html
@@ -34,7 +34,7 @@
Cloud Service Dialog
- Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas.
+ Connection to the Ninja Cloud Server was not detected. Please verify that the server is running and the URL below is correct.
Cloud Server URL: Cloud Service Dialog
- Connection to the Ninja Cloud Server was not detected. Please verify that the server is running and the URL below is correct.
+ Connection to the Cloud Server was not detected. Please verify
Cloud Server URL: Ok
+
+
+ Install Ninja Cloud App
+
+ Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus.
+
+
+
+ Download
+
+
+
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
--
cgit v1.2.3
From 632a5daca17acb774b9344ccc0e9107f1643924c Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Fri, 10 Feb 2012 15:29:12 -0800
Subject: File Open
Adding the functionality to open a basic file.
---
js/io/ui/cloudpopup.reel/cloudpopup.js | 3 +++
1 file changed, 3 insertions(+)
(limited to 'js/io/ui/cloudpopup.reel')
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.js b/js/io/ui/cloudpopup.reel/cloudpopup.js
index 1344661b..e5bad98e 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.js
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.js
@@ -51,6 +51,9 @@ exports.CloudPopup = Montage.create(Component, {
this._os = 'windows';
} else if (navigator.appVersion.indexOf("Mac")!=-1) {
this._os = 'mac';
+ } else {
+ //Alternate message for no OS detected (probably Linux)
+ this.element.getElementsByTagName('section')[0].style.display = 'none';
}
}
},
--
cgit v1.2.3
From 018a6132d93a73d28bd349122404c236e61cb765 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Mon, 13 Feb 2012 15:03:23 -0800
Subject: Save 'code' view files
Added functionality (temp) to save files in code view.
---
js/io/ui/cloudpopup.reel/cloudpopup.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'js/io/ui/cloudpopup.reel')
diff --git a/js/io/ui/cloudpopup.reel/cloudpopup.html b/js/io/ui/cloudpopup.reel/cloudpopup.html
index 8e65a705..2c1c169a 100755
--- a/js/io/ui/cloudpopup.reel/cloudpopup.html
+++ b/js/io/ui/cloudpopup.reel/cloudpopup.html
@@ -50,7 +50,7 @@
Install Ninja Cloud App
- Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus.
+ The Local Cloud App is required to run Ninja. Please download and unzip the file. Start the Local Cloud and copy/paste the server URL into the field above. Click the ‘Test’ button to verify the connection.
--
cgit v1.2.3