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/css/cloudpopup.scss | 122 +++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100755 js/io/ui/cloudpopup.reel/css/cloudpopup.scss (limited to 'js/io/ui/cloudpopup.reel/css/cloudpopup.scss') 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/ui/cloudpopup.reel/css/cloudpopup.scss | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) (limited to 'js/io/ui/cloudpopup.reel/css/cloudpopup.scss') 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/css/cloudpopup.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/io/ui/cloudpopup.reel/css/cloudpopup.scss') 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/css/cloudpopup.scss | 24 +----------------------- 1 file changed, 1 insertion(+), 23 deletions(-) (limited to 'js/io/ui/cloudpopup.reel/css/cloudpopup.scss') 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 54ccd309722797e79ca35fe115b0372e86850551 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 1 Feb 2012 13:31:35 -0800 Subject: Removing filesytem class, no longer used Also cleaning up cloud popup IU. --- js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'js/io/ui/cloudpopup.reel/css/cloudpopup.scss') diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss index 047e2dd1..5137beff 100755 --- a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss +++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss @@ -40,7 +40,6 @@ $grey_light: #494949; { text-shadow: 1px 1px 1px #222; margin: 0px 0px 12px 0px; - text-align: justify; color: #EEE; } -- cgit v1.2.3 From 8e06b63e5eab5558823f4923e20a832c8b36cbe2 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 2 Feb 2012 23:55:33 -0800 Subject: Chrome FileSystem API Testing Doing benchmark testing of the native HTML5 FileSystem API available in Chrome. Need to run testing of local XHR requests and also getting files from packaged app. --- js/io/ui/cloudpopup.reel/css/cloudpopup.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/io/ui/cloudpopup.reel/css/cloudpopup.scss') diff --git a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss index 5137beff..b8c9f880 100755 --- a/js/io/ui/cloudpopup.reel/css/cloudpopup.scss +++ b/js/io/ui/cloudpopup.reel/css/cloudpopup.scss @@ -47,7 +47,7 @@ $grey_light: #494949; { float: right; clear: right; - margin: 0px 0px 0px 8px; + margin: 1px 2px 0px 8px; width: 60px; } @@ -98,5 +98,5 @@ $grey_light: #494949; width: 80px; text-align: center; float: right; - margin: 8px 0px 0px 8px; + margin: 8px 2px 2px 8px; } \ No newline at end of file -- cgit v1.2.3 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/ui/cloudpopup.reel/css/cloudpopup.scss | 46 ++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) (limited to 'js/io/ui/cloudpopup.reel/css/cloudpopup.scss') 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