diff --git a/images/tour/f1.gif b/images/tour/f1.gif index 6b27348c0aa..2c374eac92a 100644 Binary files a/images/tour/f1.gif and b/images/tour/f1.gif differ diff --git a/images/tour/f2.gif b/images/tour/f2.gif index ed77f135450..e570496441c 100644 Binary files a/images/tour/f2.gif and b/images/tour/f2.gif differ diff --git a/images/tour/f3.gif b/images/tour/f3.gif index f24743859d7..af27019b275 100644 Binary files a/images/tour/f3.gif and b/images/tour/f3.gif differ diff --git a/images/tour/f4.gif b/images/tour/f4.gif index 8f83157471d..fb112be60c3 100644 Binary files a/images/tour/f4.gif and b/images/tour/f4.gif differ diff --git a/images/tour/f5.gif b/images/tour/f5.gif index 0e7a4040869..2abc296f47c 100644 Binary files a/images/tour/f5.gif and b/images/tour/f5.gif differ diff --git a/src/home/index.js b/src/home/index.js index 96ca1bc400c..bdc55610fda 100644 --- a/src/home/index.js +++ b/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() { diff --git a/src/refine-view/index.less b/src/refine-view/index.less index b8f22def19e..acc2f1fb720 100644 --- a/src/refine-view/index.less +++ b/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 diff --git a/src/sidebar/index.jade b/src/sidebar/index.jade index d95e7b07a90..92a4439e105 100644 --- a/src/sidebar/index.jade +++ b/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') diff --git a/src/tour/index.js b/src/tour/index.js index dc8ca47cd7e..36e1672bb0c 100644 --- a/src/tour/index.js +++ b/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(); } }); diff --git a/src/tour/index.less b/src/tour/index.less index 8198a3fd299..874c7e80a94 100644 --- a/src/tour/index.less +++ b/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; diff --git a/styles/sidebar.less b/styles/sidebar.less index aad6ac784eb..0957f9adb7a 100644 --- a/styles/sidebar.less +++ b/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%;