tweak challenges and messages previews

app/templating/UserHelper.scala

@@ -174,15 +174,7 @@ trait UserHelper { self: I18nHelper with StringHelper =>
     val titleS = if (withTitle) titleTag(user.title) else ""
     val space = if (withOnline) " " else ""
     val dataIcon = if (withOnline) """ data-icon="r"""" else ""
-    val rating = withPerfRating map (_.key) flatMap user.perfs.ratingOf map { rating =>
-      s" ($rating)"
-    } getOrElse {
-      withBestRating ?? {
-        user.perfs.bestPerf ?? {
-          case (pt, perf) => s" ${showPerfRating(pt, perf, "hint--bottom")}"
-        }
-      }
-    }
+    val rating = userRating(user, withPerfRating, withBestRating)
     s"""<a$dataIcon $klass $href>$space$titleS$content$rating</a>"""
   }
 
@@ -213,11 +205,26 @@ trait UserHelper { self: I18nHelper with StringHelper =>
     withPerfRating: Option[PerfType] = None,
     text: Option[String] = None) = Html {
     val klass = userClass(user.id, cssClass, withOnline, withPowerTip)
+    val href = s"data-${userHref(user.username)}"
     val content = text | user.username
     val titleS = if (withTitle) titleTag(user.title) else ""
     val space = if (withOnline) "&nbsp;" else ""
     val dataIcon = if (withOnline) """ data-icon="r"""" else ""
-    val rating = withPerfRating map (_.key) flatMap user.perfs.ratingOf map { rating =>
+    val rating = userRating(user, withPerfRating, withBestRating)
+    s"""<span$dataIcon $klass $href>$space$titleS$content$rating</span>"""
+  }
+
+  def userIdSpanMini(userId: String) = Html {
+    val user = lightUser(userId)
+    val name = user.fold(userId)(_.name)
+    val content = user.fold(userId)(_.titleNameHtml)
+    val klass = userClass(userId, none, false)
+    val href = s"data-${userHref(name)}"
+    s"""<span $klass $href>$content</span>"""
+  }
+
+  private def userRating(user: User, withPerfRating: Option[PerfType], withBestRating: Boolean) =
+    withPerfRating map (_.key) flatMap user.perfs.ratingOf map { rating =>
       s"&nbsp;($rating)"
     } getOrElse {
       withBestRating ?? {
@@ -226,8 +233,6 @@ trait UserHelper { self: I18nHelper with StringHelper =>
         }
       }
     }
-    s"""<span$dataIcon $klass>$space$titleS$content$rating</span>"""
-  }
 
   private def userHref(username: String, params: String = "") =
     s"""href="${routes.User.show(username)}$params""""

app/views/base/layout.scala.html

@@ -181,23 +181,21 @@ openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context)
         </div>
       </div>
       <div id="message_notifications_parent" class="message_notifications">
-        <a id="message_notifications_tag" class="toggle toggle_message_notifications" data-href="@routes.Message.preview">
+        <a id="message_notifications_tag" class="toggle" data-href="@routes.Message.preview">
           <span data-icon="e"></span>
           <span id="nb_messages" class="new_messages@if(ctx.nbMessages > 0) { unread}">@ctx.nbMessages</span>
         </a>
         <div id="message_notifications" class="links dropdown">
-          <div class="title">New messages (<a href="@routes.Message.inbox(page=1)">view all</a>)</div>
-          <div id="message_notifications_display" class="content">&nbsp;</div>
+          <div id="message_notifications_display" class="content"></div>
+          <div class="title"><a href="@routes.Message.inbox(page=1)">@trans.inbox() »</a></div>
         </div>
       </div>
       <div class="challenge_notifications">
-        <a id="challenge_notifications_tag" class="toggle toggle_challenge_notifications">
+        <a id="challenge_notifications_tag" class="toggle none">
           <span data-icon="U"></span>
-          <span id="nb_challenges" class="new_challenges">0</span>
+          <span id="nb_challenges" class="new_challenges unread">0</span>
         </a>
-        <div id="challenge_notifications" class="links dropdown">
-          <div class="title">Pending challenges</div>
-        </div>
+        <div id="challenge_notifications" class="links dropdown"></div>
       </div>
       }.getOrElse {
       <a href="@routes.Auth.login" class="signin button" data-icon="F">&nbsp;@trans.signIn()</a>

app/views/message/preview.scala.html

@@ -4,11 +4,12 @@
 @threads.distinct.map { thread =>
 <div class="notification message_reminder">
   <div class="actions">
-    <a class="action decline mark_as_read" href="@routes.Message.markAsRead(thread.id)" data-icon="L"></a>
+    <a class="action mark_as_read" href="@routes.Message.markAsRead(thread.id)" data-icon="L"></a>
   </div>
   <a class="block" href="@routes.Message.thread(thread.id)">
     <span class="message_infos" data-icon="c">
-      <strong>@usernameOrId(thread otherUserId me)</strong> • @thread.name
+      @userIdSpanMini(thread.otherUserId(me))
+      • <span class="title">@thread.name</span>
       <span class="content">
         @thread.firstPostUnreadBy(me).map(p => shorten(p.text, 100))
       </span>

app/views/setup/challengeNotification.scala.html

@@ -10,7 +10,7 @@
       case Some(p) => {@p.iconChar}
       case _ => {8}
       }">
-      @userSpan(user, withOnline = false, withPerfRating = g.perfType, withPowerTip = false)
+      @userSpan(user, withOnline = false, withPerfRating = g.perfType)
       <span class="setup">
         @g.clock.map(_.show).getOrElse {∞} •
         @if(g.variant.exotic) {

public/javascripts/big.js

@@ -148,15 +148,10 @@ var storage = {
       },
       challengeReminder: function(data) {
         if (!storage.get('challenge-refused-' + data.id)) {
-          var nbChallenges = function() {
-            var nb = parseInt($('#nb_challenges').text());
-            return nb ? ((nb > 0) ? nb : 0) : 0;
-          };
-          var nbChallengesAdd = function() {
-            $('#nb_challenges').text(nbChallenges() + 1).toggleClass("unread", true);
-          };
-          var nbChallengesMinus = function() {
-            $('#nb_challenges').text(nbChallenges() - 1).toggleClass("unread", nbChallenges() > 0);
+          var refreshButton = function() {
+            var nb = $('#challenge_notifications > div').length;
+            $('#nb_challenges').text(nb);
+            $('#challenge_notifications_tag').toggleClass('none', !nb);
           };
           var htmlId = 'challenge_reminder_' + data.id;
           var $notif = $('#' + htmlId);
@@ -166,13 +161,12 @@ var storage = {
               storage.set('challenge-refused-' + data.id, 1);
               $('#' + htmlId).remove();
               if ($.isFunction(callback)) callback();
-              nbChallengesMinus();
+              refreshButton();
               return false;
             });
           };
           if ($notif.length) clearTimeout($notif.data('timeout'));
           else {
-            nbChallengesAdd();
             $('#challenge_notifications').append(data.html);
             $notif = $('#' + htmlId);
             declineListener($notif.find('a.decline'));
@@ -181,6 +175,7 @@ var storage = {
               $.sound.dong();
               storage.set('challenge-' + data.id, 1);
             }
+            refreshButton();
           }
           $('div.lichess_overboard.joining.' + data.id).each(function() {
             $notif.hide();
@@ -192,7 +187,7 @@ var storage = {
           });
           $notif.data('timeout', setTimeout(function() {
             $notif.remove();
-            nbChallengesMinus();
+            refreshButton();
           }, 3000));
         }
       },
@@ -296,7 +291,7 @@ var storage = {
 
     function userPowertips() {
       var header = document.getElementById('site_header');
-      $('a.ulpt').removeClass('ulpt').each(function() {
+      $('.ulpt').removeClass('ulpt').each(function() {
         $(this).powerTip({
           fadeInTime: 100,
           fadeOutTime: 100,
@@ -306,7 +301,7 @@ var storage = {
         }).on({
           powerTipPreRender: function() {
             $.ajax({
-              url: $(this).attr('href').replace(/\?.+$/, '') + '/mini',
+              url: ($(this).attr('href') || $(this).data('href')).replace(/\?.+$/, '') + '/mini',
               success: function(html) {
                 $('#powerTip').html(html);
                 $('body').trigger('lichess.content_loaded');
@@ -323,15 +318,15 @@ var storage = {
       $.ajax({
         url: $(this).data('href'),
         success: function(html) {
-          console.log(html);
-          $('#message_notifications_display').html(html).addClass('messages').find('a.mark_as_read').click(function() {
-            $.ajax({
-              url: $(this).attr('href'),
-              method: 'post'
+          $('#message_notifications_display').html(html)
+            .find('a.mark_as_read').click(function() {
+              $.ajax({
+                url: $(this).attr('href'),
+                method: 'post'
+              });
+              return false;
             });
-            $('#message_notifications_parent').toggleClass("shown", false);
-            return false;
-          });
+          $('body').trigger('lichess.content_loaded');
         }
       });
     });

public/stylesheets/common.css

@@ -499,7 +499,7 @@ div.content_box .loader:after {
   display: inline-block;
 }
 .none {
-  display: none;
+  display: none!important;
 }
 html {
   min-height: 100%;
@@ -1014,9 +1014,8 @@ body.offline #nb_connected_players {
   padding-left: 3px;
 }
 #top div.message_notifications div.title {
-  padding: 5px 3% 5px 3%;
+  padding: 5px 0;
   text-align: center;
-  width: 200px;
 }
 #top div.message_notifications div.title a {
   text-decoration: underline;
@@ -1027,7 +1026,8 @@ body.offline #nb_connected_players {
 }
 #message_notifications div.notification,
 #challenge_notifications div.notification {
-  border-top: 1px solid #c0c0c0;
+  border-bottom: 1px solid #c0c0c0;
+  transition: 0.13s;
   position: relative;
 }
 #message_notifications div.notification:hover,
@@ -1067,7 +1067,9 @@ body.offline #nb_connected_players {
 #notifications > div a.close:hover {
   font-weight: bold;
 }
-#challenge_notifications .user_link {
+#message_notifications .user_link,
+#challenge_notifications .user_link,
+#message_notifications .block .title {
   font-weight: bold;
 }
 #message_notifications_display .content,
@@ -1080,9 +1082,13 @@ body.offline #nb_connected_players {
 #message_notifications .actions,
 #challenge_notifications .actions,
 #notifications .actions {
-  position: relative;
-  float: right;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 1;
   text-decoration: none;
+  opacity: 0;
+  transition: 0.13s;
 }
 #message_notifications a,
 #challenge_notifications a {
@@ -1102,6 +1108,10 @@ body.offline #nb_connected_players {
   font-weight: bold;
   margin-right: 5px;
 }
+#message_notifications .notification:hover .actions,
+#challenge_notifications .notification:hover .actions {
+  opacity: 0.7;
+}
 #notifications .actions a {
   margin-left: 10px;
 }
@@ -1921,15 +1931,6 @@ input.copyable {
   padding: 3px 5px;
   border: 1px solid #ccc;
 }
-#powerTip.messages {
-  max-width: 500px;
-  padding: 1em;
-  min-height: 1em;
-}
-#powerTip.messages a {
-  padding: 0.6em;
-  display: block;
-}
 .flag {
   display: inline-block;
   width: 16px;