Tutorial improvements

- Skip the build-related tutorial steps when builds are disabled
- Make the styling of the tutorial more consistent with the new layout

static/css/quay.css

@@ -3645,16 +3645,21 @@ pre.command:before {
 }
 
 .repo-name-small {
-  background: none repeat scroll 0 0 #D9EDF7;
-  border-radius: 10px;
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-left: 2px;
+  margin-right: 2px;
   display: inline-block;
   font-size: 14px;
   font-weight: bold;
   padding: 4px 8px;
 }
 
+.user-enter-box {
+  padding: 10px;
+  margin-bottom: 20px;
+  border: 1px solid #DDE7ED;
+  background: #F0FAFF;
+}
+
 .file-drop {
   padding: 10px;
   margin: 10px;

static/directives/angular-tour-ui.html

@@ -14,7 +14,7 @@
       </div>
     </div>
 
-    <div class="controls">
+    <div class="controls" ng-show="(hasNextStep && !step.signal) || (!hasNextStep && !inline)">
       <button class="btn btn-primary" ng-click="next()" ng-show="hasNextStep && !step.signal">Next</button>
       <button class="btn btn-primary" ng-click="stop()" ng-show="!hasNextStep && !inline">Done</button>
     </div>

static/js/pages/tutorial.js

@@ -13,7 +13,7 @@
     }, ['old-layout']);
   }]);
 
-  function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService, Config) {
+  function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService, Config, Features) {
     // Default to showing sudo on all commands if on linux.
     var showSudo = navigator.appVersion.indexOf("Linux") != -1;
 
@@ -149,8 +149,8 @@
           'overlayable': true
         },
         {
-          'content': 'To view the permissions for a repository, click on the gear tab',
-          'element': '#settingTab',
+          'content': 'To view the permissions for a repository, click on the Gear tab',
+          'element': '#settingsTab',
           'overlayable': true,
           'signal': AngularTourSignals.elementVisible('*[id="repoPermissions"]')
         },
@@ -177,17 +177,20 @@
           'content': 'Repositories can be automatically populated in response to a Dockerfile build. To view the build settings for a repository, click on the builds tab',
           'element': '#buildsTab',
           'overlayable': true,
-          'signal': AngularTourSignals.elementVisible('*[id="repoBuilds"]')
+          'signal': AngularTourSignals.elementVisible('*[id="repoBuilds"]'),
+          'skip': !Features.BUILD_SUPPORT
         },
         {
           'content': 'New build triggers can be created by clicking the "Create Build Trigger" button.',
           'element': '#addBuildTrigger',
-          'overlayable': true
+          'overlayable': true,
+          'skip': !Features.BUILD_SUPPORT
         },
         {
           'content': 'The full build history can always be referenced and filtered in the builds list.',
           'element': '#repoBuilds',
-          'overlayable': true
+          'overlayable': true,
+          'skip': !Features.BUILD_SUPPORT
         },
         {
           'templateUrl': '/static/tutorial/done.html',

static/js/tour.js

@@ -159,6 +159,10 @@ angular.module("angular-tour", [])
           }
 
           $scope.step = $scope.tour.steps[stepIndex];
+          if ($scope.step.skip) {
+            $scope.setStepIndex(stepIndex + 1);
+            return;
+          }
 
           fireMixpanelEvent();
 

static/tutorial/create-container.html

@@ -14,7 +14,7 @@ CONTAINER ID        IMAGE               COMMAND             CREATED
 <var class="var1">07f2065197ef</var>          ubuntu:12.04        echo fun            31 seconds ago
 </pre>
 
-<div class="alert alert-info">
+<div class="user-enter-box">
   <div class="control-group">
     <label class="control-label" for="containerId">Enter the container ID returned:</label>
     <div class="form-inline">

static/tutorial/create-image.html

@@ -1,4 +1,4 @@
-<div class="alert alert-info">
+<div class="user-enter-box">
    <div class="control-group">
     <label class="control-label" for="containerId">Enter a repository name:</label>
     <div class="form-inline">

static/tutorial/docker-login.html

@@ -1,5 +1,5 @@
 <div>
-  <div class="co-alert co-alert-info">
+  <div class="user-enter-box">
     <div class="checkbox" style="margin: 0px;">
       <input name="showSudo" type="checkbox" ng-model="tour.tourScope.showSudo" style="display: inline-block; margin-left: 10px; margin-right: 10px;">
       <label for="showSudo" style="padding-left: 30px;">

static/tutorial/welcome.html

@@ -1,10 +1,11 @@
 <p>This tutorial will walk you step-by-step through using <span class="registry-name"></span>, covering:
 <ul>
-<li>Logging into <span class="registry-name"></span> from Docker</li>
+<li>Logging into <span class="registry-name"></span> from the Docker CLI</li>
 <li>Starting a container</li>
 <li>Creating images from a container</li>
 <li>Pushing a repository to <span class="registry-name"></span></li>
 <li>Viewing a repository</li>
+<li quay-require="['BUILD_SUPPORT']">Setting up build triggers</li>
 <li>Changing a repository's permissions</li>
 </ul>
 </p>