Merge lp:~ya-bo-ng/juju-gui/onboarding-continued into lp:juju-gui/experimental

[Anthony Dillon]

Update to onboarding

Added a mask of the header at all time with the logo attached. Inishal onboarding is now fully masked.

[lp:~ya-bo-ng/juju-gui/onboarding-continued]

1149. By Anthony Dillon on 2013-10-23

Removed onboarding flag

1150. By Anthony Dillon on 2013-10-23

Remove flag onboarding from browser-app testing

1151. By Anthony Dillon on 2013-10-23

Update inspector image

1152. By Anthony Dillon on 2013-10-23

Update to the copy

1153. By Anthony Dillon on 2013-10-25

Resolve conflict

1154. By Anthony Dillon on 2013-10-25

Pushing up resolved file

1155. By Anthony Dillon on 2013-10-25

Linted

=== modified file 'app/assets/images/non-sprites/onboarding/3-inspector.png'
Binary files app/assets/images/non-sprites/onboarding/3-inspector.png	2013-10-10 11:44:44 +0000 and app/assets/images/non-sprites/onboarding/3-inspector.png	2013-10-25 23:04:49 +0000 differ
=== modified file 'app/subapps/browser/browser.js'
--- app/subapps/browser/browser.js	2013-10-21 23:05:08 +0000
+++ app/subapps/browser/browser.js	2013-10-25 23:04:49 +0000
@@ -855,7 +855,7 @@
       // Only show the onboarding messaging if we're hitting the sidebar view
       // without any extra url bits to the user. It's meant for a fresh user
       // to see, not someone doing what they know they want to do.
-      if (!this._onboarding && window.flags.onboard) {
+      if (!this._onboarding) {
         if (!this._viewState.search &&
             !this._viewState.charmID) {
           this.renderOnboarding();

=== modified file 'app/templates/onboarding.handlebars'
--- app/templates/onboarding.handlebars	2013-10-22 21:16:30 +0000
+++ app/templates/onboarding.handlebars	2013-10-25 23:04:49 +0000
@@ -8,27 +8,26 @@
 	  <a class="onboarding-cross sprite close-inspector-normal" href="" ></a>
 	  <div class="panel panel-0">
 	    <h3 class="header type3">Welcome to Juju</h3>
-	    <p class="text type11">Juju enables you to configure, manage, maintain, deploy and scale efficiently with best-practice Charms on any cloud or your own Ubuntu laptop.</p>
+	    <p class="text type11">Use Juju to quickly create, configure and deploy your application architectures to public clouds like EC2,  Azure and HP, any OpenStack cloud and even your own Ubuntu based laptop with Charms.</p>
 	  </div>
 	  <div class="panel panel-1">
 	    <h3 class="header type3">Build your environment</h3>
-	    <p class="text type11">The Charm browser has hundreds of Charms allowing you to build complex services which can be visualised in Juju.</p>
-	    <p class=" text type11">Drag them from the Charm browser onto your canvas to start building your environments.</p>
+	    <p class="text type11">Charms define applications as services. Write your own or use any of the hundreds of high-quality existing Charms. Just drag them from the Charm browser onto your canvas to start building your environments.</p>
 	  </div>
 	  <div class="panel panel-2">
-	    <h3 class="header type3">Connect services</h3>
-	    <p class="text type11">Configure and deploy your services and connect them with intelligent relationship lines to build your environment.</p>
+	    <h3 class="header type3">Connect your services</h3>
+	    <p class="text type11">Charms know about how services integrate with each other. After you configure and deploy your services, easily build intelligent relationships by dragging and dropping connections between the services you want.</p>
 	  	<img src="/juju-ui/assets/images/non-sprites/onboarding/2-service-blocks.png" class="service-blocks" />
 	  </div>
 	  <div class="panel panel-3">
-	    <h3 class="header type3">Monitor and manage</h3>
-	    <p class="text type11">The Juju GUI inspector offers comprehensive tools that give you ability to scale out, triage errors and update your services.</p>
+	    <h3 class="header type3">Monitor and manage your cloud</h3>
+	    <p class="text type11">The Juju inspector gives you the ability to scale out, triage errors and update your services simply and easily.</p>
 	  	<img src="/juju-ui/assets/images/non-sprites/onboarding/3-service-block.png" class="service-block" />
 	  	<img src="/juju-ui/assets/images/non-sprites/onboarding/3-inspector.png" class="inspector" />
 	  </div>
 	  <ul>
 		<li><a href="" class="onboarding-close">Get started</a></li>
-		<li><a href="" class="onboarding-start highlight">Quick tour of Juju</a></li>
+		<li><a href="" class="onboarding-start highlight">Tour</a></li>
 		<li><a href="" class="onboarding-next highlight">Next</a></li>
 		<li><a href="" class="onboarding-prev">Prev</a></li>
 	  </ul>

=== modified file 'lib/views/browser/onboarding.less'
--- lib/views/browser/onboarding.less	2013-10-22 21:16:30 +0000
+++ lib/views/browser/onboarding.less	2013-10-25 23:04:49 +0000
@@ -43,7 +43,7 @@
         left: 350px;
         width: 320px;
         background-color: @inspector-background-color;
-        padding: 20px;
+        padding: 20px 20px 0;
 
         .onboarding-cross {
             float: right;
@@ -68,10 +68,13 @@
         }
 
         ul {
+            background-color: rgba(34, 30, 28, 0.75);
             position: relative;
             list-style: none;
-            margin-left: 0;
             height: 57px;
+            margin-left: -20px;
+            margin-right: -20px;
+            padding: 20px;
 
             li {
               display: inline;
@@ -85,7 +88,7 @@
                 display: inline-block;
                 height: 40px;
                 margin-top: 17px;
-                padding: 0 30px;
+                padding: 0 29px;
                 color: #fff;
                 line-height: 40px;
 
@@ -152,8 +155,9 @@
                 display: none;
             }
             .service-blocks {
-                top: 210px;
-                left: 125px;
+                left: 90px;
+                top: 87px;
+                max-width: none;
             }
         }
     }

=== modified file 'test/test_browser_app.js'
--- test/test_browser_app.js	2013-10-25 21:00:21 +0000
+++ test/test_browser_app.js	2013-10-25 23:04:49 +0000
@@ -723,7 +723,7 @@
                   sidebar: false,
                   renderCharmDetails: false,
                   renderEditorial: false,
-                  renderOnboarding: false,
+                  renderOnboarding: true,
                   renderSearchResults: false
                 };
               };
@@ -1236,7 +1236,6 @@
       });
 
       it('onboarding is called in build mode', function() {
-        window.flags.onboard = true;
         var req = {
           path: '/sidebar/',
           params: {
@@ -1248,14 +1247,11 @@
           renderEditorial: true,
           renderOnboarding: true
         });
-
         browser.routeView(req, undefined, function() {});
         assert.deepEqual(hits, expected);
-        window.flags = {};
       });
 
       it('onboarding is not called with a charm id', function() {
-        window.flags.onboard = true;
         var req = {
           path: '/sidebar/',
           params: {
@@ -1267,16 +1263,14 @@
           sidebar: true,
           renderEditorial: true,
           renderCharmDetails: true,
-          renderOnboarding: false
+          renderOnboarding: true
         });
 
         browser.routeView(req, undefined, function() {});
         assert.deepEqual(hits, expected);
-        window.flags = {};
       });
 
       it('onboarding is not called with a search', function() {
-        window.flags.onboard = true;
         var req = {
           path: '/sidebar/search',
           params: {
@@ -1287,12 +1281,11 @@
         var expected = Y.merge(hits, {
           sidebar: true,
           renderSearchResults: true,
-          renderOnboarding: false
+          renderOnboarding: true
         });
 
         browser.routeView(req, undefined, function() {});
         assert.deepEqual(hits, expected);
-        window.flags = {};
       });
 
       it('/minimized dispatches correctly', function() {

=== modified file 'test/test_onboarding.js'
--- test/test_onboarding.js	2013-10-21 23:05:08 +0000
+++ test/test_onboarding.js	2013-10-25 23:04:49 +0000
@@ -40,13 +40,11 @@
     beforeEach(function() {
       container = utils.makeContainer('onboarding');
       env_help = utils.makeContainer('environment-help');
-      window.flags.onboard = true;
     });
 
     afterEach(function() {
       container.remove(true);
       env_help.remove(true);
-      window.flags = {};
     });
 
     after(function() {