INT-727 Implement feature tour #182

src/home/index.js

@@ -1,3 +1,4 @@
+var _ = require('lodash');
 var View = require('ampersand-view');
 var format = require('util').format;
 var SidebarView = require('../sidebar');
@@ -50,8 +51,9 @@ var HomeView = View.extend({
   },
   render: function() {
     this.renderWithTemplate(this);
-    if (app.isFeatureEnabled('First Run Tour')) {
+    if (_.isUndefined(localStorage.tourHasRun)) {
       this.renderSubview(new TourView(), this.queryByHook('tour-container'));
+      localStorage.tourHasRun = 'true';
     }
   },
   onInstanceFetched: function() {

src/refine-view/index.less

@@ -20,7 +20,7 @@
     }
   }
   .sampling-message {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 200;
     padding: 5px 25px;
     border-bottom: 2px solid @gray7

src/sidebar/index.jade

@@ -1,6 +1,5 @@
 div
   .sidebar.panel
-    div.compass-logo
     div(data-hook='instance-properties-subview')
     div(data-hook='collection-filter-subview')
     div(data-hook='collection-list-subview')

src/tour/index.js

@@ -1,23 +1,22 @@
+var $ = require('jquery');
 var View = require('ampersand-view');
 
 var TourView = View.extend({
   props: {
-    tourCount: {
-      type: 'number',
-      default: 0
-    },
-    tourImages: {
-      type: 'array',
-      default: function() {
-        return ['f1.gif', 'f2.gif', 'f3.gif', 'f4.gif', 'f5.gif'];
-      }
-    },
-    tourImagesFolder: {
-      type: 'string',
-      default: './images/tour/'
+    isAnimating: { type: 'boolean', default: true },
+    tourCount: { type: 'number', default: 0 },
+    tourImages: { type: 'array', default: function() {
+      return [
+        { file: 'f1.gif', duration: 4000 },
+        { file: 'f2.gif', duration: 9000 },
+        { file: 'f3.gif', duration: 9000 },
+        { file: 'f4.gif', duration: 6000 },
+        { file: 'f5.gif', duration: 9000 }
+      ];
     }
+    },
+    tourImagesFolder: { type: 'string', default: './images/tour/' }
   },
-
   template: require('./index.jade'),
   events: {
     'click #features ul': 'showFeature',
@@ -27,39 +26,44 @@ var TourView = View.extend({
   render: function() {
     var that = this;
     this.renderWithTemplate(this);
-
     this.$featuresUL = this.query('#features ul');
     this.$featuresLI = this.queryAll('#features li');
     this.$animationGIF = this.query('#animation-gif');
     this.$tourRemove = this.query('#tour-remove');
-
-    this.playAuto = setInterval(function() {
-      that.$featuresLI[that.tourCount].className = '';
-
+    function showAnimation() {
+      var duration = that.tourImages[that.tourCount].duration;
+      // deselect old
+      $('#features li.selected').removeClass('selected');
+      // select new
+      that.$featuresLI[that.tourCount].className = 'selected';
+      that.$animationGIF.src = that.tourImagesFolder + that.tourImages[that.tourCount].file;
       if (that.tourCount === 4) {
         that.tourCount = 0;
       } else {
         that.tourCount++;
       }
-      that.$featuresLI[that.tourCount].className = 'selected';
-      that.$animationGIF.src = that.tourImagesFolder + that.tourImages[that.tourCount];
-    }, 1000 * 7);
+      if (that.isAnimating) {
+        setTimeout(showAnimation, duration);
+      }
+    }
+    showAnimation();
   },
-
   showFeature: function(ev) {
+    this.isAnimating = false;
     var nCLick = ev.target.getAttribute('data-n');
-    if (!nCLick) {
+    if (nCLick === null) {
       return false;
     }
     var nFeature = parseInt(nCLick, 10);
-    this.$featuresLI[this.tourCount].className = '';
+    // deselect old
+    $('#features li.selected').removeClass('selected');
+    // select new
     ev.target.className = 'selected';
     this.$animationGIF.src = this.tourImagesFolder + ev.target.id + '.gif';
     this.tourCount = nFeature;
-    clearInterval(this.playAuto);
   },
   tourRemove: function() {
-    clearInterval(this.playAuto);
+    this.isAnimating = false;
     this.remove();
   }
 });

src/tour/index.less

@@ -21,27 +21,26 @@
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
 
-  width: 80%;
-  max-width: 925px;
+  width: 90%;
+  max-width: 1200px;
   position: absolute;
   background-color: white;
-  border-radius: 9px;
 
   #animation, #features {
     float: left;
   }
   #animation {
-    width: 66%;
+    width: 70%;
 
     img {
-      width: 80%;
+      width: 83%;
       margin: 60px auto;
       display: block;
       border: 1px lightgrey solid;
     }
   }
   #features {
-    width: 33%;
+    width: 30%;
 
     h2 {
       margin: 60px 0 0;

styles/sidebar.less

@@ -17,7 +17,7 @@
 
   .instance-properties {
     position: absolute;
-    top: 78px;
+    top: 18px;
     left: 10px;
 
     .hostname {
@@ -84,7 +84,7 @@
 
   .list-filter {
     position: absolute;
-    top: 156px;
+    top: 96px;
     width: 100%;
     // padding-bottom: 12px;
     box-shadow: 0 2px 0 rgba(0,0,0,0.2);
@@ -137,7 +137,7 @@
   .list-group {
     line-height: 24px;
     position: absolute;
-    top: 189px;
+    top: 129px;
     bottom: 0px;
     overflow-y: auto;
     width: 100%;