UI improvements for the tutorial:

- Have a show sudo checkbox which defaults to on for linux
  - Have the repository name be highlighted in a light blue bubble/chit

static/css/quay.css

@@ -3173,3 +3173,23 @@ pre.command:before {
 .about-basic-text {
   display: inline-block;
 }
+
+.repo-name-small:before {
+  content: "\f0a0";
+  font-family: FontAwesome;
+  font-size: 20px;
+  margin-right: 6px;
+  vertical-align: middle;
+  font-weight: normal;
+}
+
+.repo-name-small {
+  background: none repeat scroll 0 0 #D9EDF7;
+  border-radius: 10px;
+  margin-left: 6px;
+  margin-right: 6px;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 4px 8px;
+}

static/js/controllers.js

@@ -49,9 +49,13 @@ function PlansCtrl($scope, $location, UserService, PlanService) {
 }
 
 function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService) {
+  // Default to showing sudo on all commands if on linux.
+  var showSudo = navigator.appVersion.indexOf("Linux") != -1;
+
   $scope.tour = {
     'title': 'Quay.io Tutorial',
     'initialScope': {
+      'showSudo': showSudo
     },
     'steps': [
       {

static/tutorial/create-container.html

@@ -3,13 +3,13 @@
 <p>First we'll create a container with a single new file based off of the <code>ubuntu</code> base image:</p>
 
 <pre class="command">
-docker run ubuntu echo "fun" > newfile
+<code ng-show="tour.tourScope.showSudo">sudo </code>docker run ubuntu echo "fun" > newfile
 </pre>
 
 <p>The container will immediately terminate (because its one command is <code>echo</code>), so we'll use <code>docker ps -l</code> to list it:
 
 <pre class="command">
-docker ps -l
+<code ng-show="tour.tourScope.showSudo">sudo </code>docker ps -l
 CONTAINER ID        IMAGE               COMMAND             CREATED 
 <var class="var1">07f2065197ef</var>          ubuntu:12.04        echo fun            31 seconds ago   
 </pre>

static/tutorial/create-image.html

@@ -18,5 +18,5 @@
 <p>Docker lets us do this in one step with the <i>commit</i> command. To do so, we run the <code>docker commit</code> with the container ID from the previous step and tag it to be a repository under <code>quay.io</code>.
 
 <pre class="command">
-docker commit <var class="var1">{{ tour.tourScope.containerId || 'containerId' }}</var> quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName || 'myfirstrepo' }}</var>
+<code ng-show="tour.tourScope.showSudo">sudo </code>docker commit <var class="var1">{{ tour.tourScope.containerId || 'containerId' }}</var> quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName || 'myfirstrepo' }}</var>
 </pre>

static/tutorial/docker-login.html

@@ -1,7 +1,16 @@
 <div class="container">
+  <div class="alert alert-info" style="padding: 4px;">
+    <div class="checkbox">
+      <label>
+        <input name="showSudo" type="checkbox" ng-model="tour.tourScope.showSudo" style="display: inline-block; margin-left: 0px; margin-right: 10px;">
+        Start all commands with <code>sudo</code>
+      </label>
+    </div>
+  </div>
+
   <p>The first step when using Quay.io is to login via the <code>docker login</code> command.</p>
   <p>Enter your Quay.io username and your password when prompted.</p>
-  <pre class="command">docker login quay.io
+  <pre class="command"><code ng-show="tour.tourScope.showSudo">sudo </code>docker login quay.io
 Username: {{ tour.tourScope.username }}
 Password: (password here)
 Email: {{ tour.tourScope.email }}</pre>

static/tutorial/push-image.html

@@ -1,7 +1,7 @@
 <p>Now that we've tagged our image with a repository name, we can <code>push</code> the repository to Quay.io:</p>
 
 <pre class="command">
-docker push quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName || 'myfirstrepo' }}</var>
+<code ng-show="tour.tourScope.showSudo">sudo </code>docker push quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName || 'myfirstrepo' }}</var>
 The push refers to a repository [quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName || 'myfirstrepo' }}</var>] (len: 1)
 Sending image list
 Pushing repository quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName || 'myfirstrepo' }}</var> (1 tags)

static/tutorial/pushing.html

@@ -1 +1 @@
-Your repository {{ tour.tourScope.username }}/{{ tour.tourScope.repoName }} is currently being pushed to Quay.io...
+Your repository <span class="repo-name-small">{{ tour.tourScope.username }}/{{ tour.tourScope.repoName }}</span> is currently being pushed to Quay.io...

static/tutorial/view-repo.html

@@ -1,3 +1,3 @@
-<p>Your repository {{ tour.tourScope.username }}/{{ tour.tourScope.repoName }} has been pushed to Quay.io!</p>
+<p>Your repository <span class="repo-name-small">{{ tour.tourScope.username }}/{{ tour.tourScope.repoName }}</span> has been pushed to Quay.io!</p>
 
 <p>To view your repository, first click on the <strong>Repositories</strong> link in the header to continue. This will display the repositories list.</p>

static/tutorial/welcome.html

@@ -1 +1 @@
-This tutorial will walk you step-by-step through using Quay.io, including pushing/pulling repositories, making permissions changes and managing your repository.
+<p>This tutorial will walk you step-by-step through using Quay.io, including pushing/pulling repositories, making permissions changes and managing your repository.</p>