Create walkthrough for new label UI

 + Make room for walkthrough button on Label navbar
 + Add walkthrough tour targets and content

www/css/main.diary.css

@@ -162,11 +162,16 @@ a.item-content {
   border-width: 0;
 }
 
+div.labelfilterlist {
+  margin: 0 !important;
+}
+
 .button.labelfilter {
   color: #01D0A7;
   border-radius: 0px;
   border-width: 0;
   box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 2px rgba(0,0,0,0.23);
+  padding: 0 0.75em !important;
 }
 
 .button.labelfilter.on {

www/i18n/en.json

@@ -151,10 +151,10 @@
         "time": "Time",
         "mode": "Mode",
         "purpose": "Purpose",
-        "unlabeled": "All Unlabeled",
+        "unlabeled": "All Unlabeled",
         "invalid-ebike": "Invalid",
-        "to-label": "To Label",
-        "show-all": "All Trips",
+        "to-label": "To Label",
+        "show-all": "All Trips",
         "no-trips-found": "No trips found",
         "for-current-filter": "for current filter. Show All to remove filters",
         "scroll-to-load-more": "Scroll to load more",
@@ -169,6 +169,20 @@
         "list-pick-a-date": "Pick a date"
     },
 
+    "new_label_tour": {
+        "0": "This is the new Label user interface. Label trips here instead of on the Diary page. Trips take longer to appear here, but when they do they will be more accurate and you will be able to use our new features to label them faster.",
+        "1": "This is the To Label tab. On this tab, only the trips you need to label will appear; when you label them, they will automatically disappear after a few seconds.",
+        "2": "Some of your trips do not appear in To Label because an algorithm labeled them for you. If you're  curious, you can see these in the other tabs, but you only need to label trips on the To Label tab.",
+        "3": "Trips now appear with the newest trip at the bottom.",
+        "4": "To load older trips, scroll up and press the load button.",
+        "5": "Labels are now red if we couldn't predict them, yellow if we could predict them, and green if you entered or confirmed them yourself.",
+        "6": "If you see yellow labels on the To Label tab, this means you need to confirm or correct them.",
+        "7": "If all of a trip's yellow labels are correct, you can click the checkmark button, which will turn them green (the checkmark button doesn't do anything to red or green labels.",
+        "8": "If certain yellow labels are incorrect, you can correct them just like you'd enter a label normally.",
+        "9": "When there are no more trips in To Label, you're done labeling for the day.",
+        "10": "The more you label your trips, the better the algorithm gets at predicting your trips for you, so keeping up-to-date with your labeling will save you work in the long run!"
+    },
+
     "user-gender": "Gender",
     "gender-male": "Male",
     "gender-female": "Female",

www/js/diary/infinite_scroll_list.js

@@ -27,7 +27,7 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
                                     ionicDatePicker,
                                     leafletData, Timeline, CommonGraph, DiaryHelper,
                                     InfScrollFilters,
-    Config, PostTripManualMarker, ConfirmHelper, nzTour, KVStore, Logger, UnifiedDataLoader, $ionicPopover, $ionicModal, $translate) {
+    Config, PostTripManualMarker, ConfirmHelper, nzTour, KVStore, Logger, UnifiedDataLoader, $ionicPopover, $ionicModal, $translate, $q) {
 
   // TODO: load only a subset of entries instead of everything
 
@@ -611,13 +611,71 @@ angular.module('emission.main.diary.infscrolllist',['ui-leaflet',
         nextText: $translate.instant('tour-next'),
         finishText: $translate.instant('tour-finish')
       },
-      steps: []
+      steps: [{
+        target: '.ion-view-background',
+        content: $translate.instant('new_label_tour.0'),
+        before: function() {
+          var d = $q.defer();
+          $ionicScrollDelegate.scrollTop(true);
+          d.resolve();
+          return d.promise
+        }
+      },
+      {
+        target: '.labelfilter',
+        content: $translate.instant('new_label_tour.1')
+      },
+      {
+        target: '.labelfilter.last',
+        content: $translate.instant('new_label_tour.2')
+      },
+      {
+        target: '.diary-entry',
+        content: $translate.instant('new_label_tour.3')
+      },
+      {
+        target: '.control-icon-button',
+        content: $translate.instant('new_label_tour.4')
+      },
+      {
+        target: '.input-confirm-row',
+        content: $translate.instant('new_label_tour.5')
+      },
+      {
+        target: '.input-confirm-row',
+        content: $translate.instant('new_label_tour.6')
+      },
+      {
+        target: '.diary-checkmark-container i',
+        content: $translate.instant('new_label_tour.7')
+      },
+      {
+        target: '.input-confirm-row',
+        content: $translate.instant('new_label_tour.8')
+      },
+      {
+        target: '.labelfilter',
+        content: $translate.instant('new_label_tour.9')
+      },
+      {
+        target: '.ion-view-background',
+        content: $translate.instant('new_label_tour.10'),
+        after: function() {
+          var d = $q.defer();
+          $ionicScrollDelegate.scrollBottom(true);
+          d.resolve();
+          return d.promise
+        }
+      }
+      ]
     };
 
     var startWalkthrough = function () {
       nzTour.start(tour).then(function(result) {
+        // $ionicScrollDelegate.scrollBottom();
         Logger.log("list walkthrough start completed, no error");
       }).catch(function(err) {
+        // $ionicScrollDelegate.scrollBottom();
         Logger.displayError("list walkthrough start errored", err);
       });
     };

www/templates/diary/infinite_scroll_list.html

@@ -2,12 +2,15 @@
     <ion-nav-bar class="bar-stable">
     </ion-nav-bar>
     <ion-nav-buttons side="left" id="toget" class="row buttons">
-        <button ng-repeat="selF in filterInputs" ng-click="select(selF)" class="col col-50 button labelfilter" ng-class="{on:selF.state}" style="text-align: center;font-size: 14px;font-weight: 600;" translate>
-            {{selF.text}}
-        </button>
-        <button ng-click="resetSelection()" class="col col-50 button labelfilter last" ng-class="{on:allTrips}" style="text-align: center;font-size: 14px;font-weight: 600;" translate>
-            {{'.show-all'}}
-        </button>
+        <button class="button button-icon ion-help" ng-click="startWalkthrough()" style="padding-right: 0"></button>
+        <div class="labelfilterlist row buttons">
+            <button ng-repeat="selF in filterInputs" ng-click="select(selF)" class="col button labelfilter" ng-class="{on:selF.state}" style="text-align: center;font-size: 14px;font-weight: 600;" translate>
+                {{selF.text}}
+            </button>
+            <button ng-click="resetSelection()" class="col button labelfilter last" ng-class="{on:allTrips}" style="text-align: center;font-size: 14px;font-weight: 600;" translate>
+                {{'.show-all'}}
+            </button>
+        </div>
     </ion-nav-buttons>
     <ion-nav-buttons side="right">
         <button class="button button-icon" ng-click="refresh()">
@@ -77,7 +80,7 @@ <h3 ng-if="!infScrollControl.reachedEnd">{{'diary.scroll-to-load-more' | transla
                         {{input.labeltext}}
                     </div>
                     </div>
-                    <div class="row">
+                    <div class="row input-confirm-row">
                         <div ng-repeat="input in userInputDetails" class={{input.width}} style="margin-top: -7px; text-align: center;" ng-attr-id="{{ 'userinput' + input.name">
                             <div ng-if="trip.userInput[input.name]" class="input-confirm-container">
                                 <button ng-click ="openPopover($event, trip, input.name)" class="button btn-input-confirm btn-input-confirm-green">