From d852bde5f3aa99c9703808ed4d4853aa47f2fb42 Mon Sep 17 00:00:00 2001
From: Thibaut Courouble <thibaut@me.com>
Date: Sun, 6 Aug 2017 11:23:02 -0400
Subject: [PATCH] Improve "update ready" notification

---
 assets/javascripts/templates/notif_tmpl.coffee | 4 ++--
 assets/javascripts/views/misc/notif.coffee     | 1 +
 assets/stylesheets/components/_notif.scss      | 2 ++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/assets/javascripts/templates/notif_tmpl.coffee b/assets/javascripts/templates/notif_tmpl.coffee
index 38c36305..45882e87 100644
--- a/assets/javascripts/templates/notif_tmpl.coffee
+++ b/assets/javascripts/templates/notif_tmpl.coffee
@@ -6,8 +6,8 @@ textNotif = (title, message) ->
   notif title, """<p class="_notif-text">#{message}"""
 
 app.templates.notifUpdateReady = ->
-  textNotif """ DevDocs has been updated. """,
-            """ <a href="#" data-behavior="reboot">Reload the page</a> to use the new version. """
+  textNotif """<span data-behavior="reboot">DevDocs has been updated.</span>""",
+            """<span data-behavior="reboot"><a href="#" data-behavior="reboot">Reload the page</a> to use the new version.</span>"""
 
 app.templates.notifError = ->
   textNotif """ Oops, an error occured. """,
diff --git a/assets/javascripts/views/misc/notif.coffee b/assets/javascripts/views/misc/notif.coffee
index e1b4bc40..44db6e5a 100644
--- a/assets/javascripts/views/misc/notif.coffee
+++ b/assets/javascripts/views/misc/notif.coffee
@@ -51,6 +51,7 @@ class app.views.Notif extends app.View
 
   onClick: (event) =>
     return if event.which isnt 1
+    return if event.target.hasAttribute('data-behavior')
     if event.target.tagName isnt 'A' or event.target.classList.contains('_notif-close')
       $.stopEvent(event)
       @hide()
diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss
index 6df50661..5a32948a 100644
--- a/assets/stylesheets/components/_notif.scss
+++ b/assets/stylesheets/components/_notif.scss
@@ -55,6 +55,8 @@
     left: .625rem;
     @extend %icon, %icon-close-white;
   }
+
+  &:hover { opacity: 1; }
 }
 
 ._notif-content {