active class on help cursor

2 files changed, 8 insertions, 2 deletions

diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js
index de0ca01..7268b32 100644
--- a/public/assets/javascripts/ui/editor/HelpCursor.js
+++ b/public/assets/javascripts/ui/editor/HelpCursor.js
@@ -16,7 +16,9 @@ var HelpCursor = View.extend({
 	},
 
   initialize: function(){
-		$('#help-button').click(this.toggle.bind(this))
+		this.helpButton = $('#help-button')
+		
+		this.helpButton.click(this.toggle.bind(this))
   },
   
   toggle: function(){
@@ -27,6 +29,7 @@ var HelpCursor = View.extend({
     if (this.active) return
     this.active = true
     this.message('start')
+    this.helpButton.addClass('active')
     this.$el.show()
     this.move({ pageX: -1000, pageY: -10000 })
     this.moveFn = this.move.bind(this)
@@ -36,6 +39,7 @@ var HelpCursor = View.extend({
   stop: function(){
     this.active = false
     this.$el.hide()
+    this.helpButton.removeClass('active')
     document.removeEventListener("mousemove", this.moveFn)
   },
   
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index bc52d5a..d7876da 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -153,10 +153,12 @@ a{
 	font-size: 24px;
 	padding: 18px 27px 0 8px;
 }
-.topLinks a.ion-help-circled:hover  {
+.topLinks a.ion-help-circled.active,
+.topLinks a.ion-help-circled:hover {
 	background:transparent;
 	color:red;
 }
+
 .page #header {
 	background: white;
 	border-bottom: 1px solid;