Revert "Restyle messages drop-down."

This reverts commit 3a8a2f1325.

app/views/base/layout.scala.html

@@ -180,16 +180,10 @@ openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context)
           <div class="ping">PING <strong>?</strong> ms</div>
         </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">
-          <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>
-      </div>
+      <a data-href="@routes.Message.preview" class="goto_nav message blank_if_play @{(active exists (_.code == "message")).??("current")}" href="@routes.Message.inbox(page=1)">
+        <span class="is2" data-icon="e"></span>
+        <span id="nb_messages" class="new_messages@if(ctx.nbMessages > 0) { unread}">@ctx.nbMessages</span>
+      </a>
       <div class="challenge_notifications">
         <a id="challenge_notifications_tag" class="toggle toggle_challenge_notifications">
           <span data-icon="U"></span>

app/views/message/preview.scala.html

@@ -1,23 +1,24 @@
 @(me: User, threads: List[lila.message.Thread])(implicit ctx: Context)
 
 @if(threads.nonEmpty) {
+<table><tbody>
     @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>
-      </div>
-      <a href="@routes.Message.thread(thread.id)">
-        <span class="inner">
-          <span class="message_infos" data-icon="c">
-            <span class="header">
-              <strong>@usernameOrId(thread otherUserId me)</strong> • @thread.name
-              <span class="content">
-                @thread.firstPostUnreadBy(me).map(p => shorten(p.text, 100))
-              </span>
-            </span>
-          </span>
-        </span>
-      </a>
-    </div>
+    <tr>
+      <td>
+        <a data-icon="c" class="revert-underline" href="@routes.Message.thread(thread.id)">
+          @thread.name
+          <strong>@usernameOrId(thread otherUserId me)</strong>
+          @thread.firstPostUnreadBy(me).map(p => shorten(p.text, 100))
+        </a>
+      </td>
+      <td>
+        <a class="button mark_as_read hint--bottom" data-hint="Mark as read" href="@routes.Message.markAsRead(thread.id)">
+          <span data-icon="E"></span>
+        </a>
+      </td>
+    </tr>
     }
+</tbody></table>
+} else {
+@trans.noNewMessages()
 }

public/javascripts/big.js

@@ -319,22 +319,26 @@ var storage = {
     setTimeout(userPowertips, 600);
     $('body').on('lichess.content_loaded', userPowertips);
 
-    $('#message_notifications_tag').on('click', function() {
-      $.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'
+    $('#top a.message').powerTip({
+      placement: 'sw',
+      mouseOnToPopup: true,
+      closeDelay: 200
+    }).on({
+      powerTipPreRender: function() {
+        $.ajax({
+          url: $(this).data('href'),
+          success: function(html) {
+            $('#powerTip').html(html).addClass('messages').find('a.mark_as_read').click(function() {
+              $.ajax({
+                url: $(this).attr('href'),
+                method: 'post'
+              });
+              return false;
             });
-            $('#message_notifications_parent').toggleClass("shown", false);
-            return false;
-          });
-        }
-      });
-    });
+          }
+        });
+      }
+    }).data('powertip', ' ');
 
     function setMoment() {
       $("time.moment").removeClass('moment').each(function() {

public/stylesheets/common.css

@@ -804,7 +804,6 @@ div.side_box .top {
 div.side_box .padded {
   padding: 7px;
 }
-.notification .message_infos,
 .notification .game_infos,
 div.side_box .game_infos {
   padding-left: 36px;
@@ -815,7 +814,6 @@ div.side_box .game_infos {
   padding-bottom: 8px;
   margin-bottom: 6px;
 }
-.notification .message_infos::before,
 .notification .game_infos::before,
 div.side_box .game_infos::before {
   position: absolute;
@@ -961,18 +959,15 @@ body.offline #nb_connected_players {
 #user_tag {
   font-weight: bold;
 }
-#top div.message_notifications,
 #top div.challenge_notifications,
 #top div.auth {
   float: right;
   position: relative;
 }
-#top div.message_notifications.shown .links,
 #top div.challenge_notifications.shown .links,
 #top div.auth.shown .links {
   display: block;
 }
-#top div.message_notificatiosn .links > a,
 #top div.challenge_notifications .links > a,
 #top div.auth .links > a {
   display: block;
@@ -1004,40 +999,26 @@ body.offline #nb_connected_players {
   display: block;
   padding: 5px 10px 10px 10px;
 }
-#top #message_notifications_tag span:before,
 #top #challenge_notifications_tag span:before {
-  font-size: 1.45em;
   padding-left: 3px;
 }
-#top div.message_notifications div.title {
-  padding: 5px 3% 5px 3%;
-  text-align: center;
-  width: 200px;
-}
-#top div.message_notifications div.title a {
-  text-decoration: underline;
-}
 #top #challenge_notifications div.title {
   padding: 5px 3% 5px 3%;
   text-align: center;
 }
-#message_notifications div.notification,
 #challenge_notifications div.notification {
   border-top: 1px solid #c0c0c0;
   position: relative;
 }
-#message_notifications div.notification:hover,
 #challenge_notifications div.notification:hover {
   background-color: #f0f0f0;
 }
-#message_notifications span.inner,
 #challenge_notifications span.inner {
   display: block;
   width: calc(100% - 15px);
   height: 100%;
   padding: 6px 8px 7px 8px;
 }
-#message_notifications,
 #challenge_notifications,
 #notifications {
   position: absolute;
@@ -1073,23 +1054,18 @@ body.offline #nb_connected_players {
 #challenge_notifications .user_link {
   font-weight: bold;
 }
-#message_notifications_display .content,
 #challenge_notifications .setup {
+  text-transform: uppercase;
   display: block;
   margin-left: 37px;
   margin-bottom: -18px;
 }
-#challenge_notifications .setup {
-  text-transform: uppercase;
-}
-#message_notifications .actions,
 #challenge_notifications .actions,
 #notifications .actions {
   position: relative;
   float: right;
   text-decoration: none;
 }
-#message_notifications a,
 #challenge_notifications a {
   text-decoration: none;
 }
@@ -1097,7 +1073,6 @@ body.offline #nb_connected_players {
   font-weight: bold;
   text-decoration: none;
 }
-#message_notifications .actions a,
 #challenge_notifications .actions a {
   font-weight: bold;
   margin-right: 5px;
@@ -1105,7 +1080,6 @@ body.offline #nb_connected_players {
 #notifications .actions a {
   margin-left: 10px;
 }
-#message_notifications .actions a:hover,
 #challenge_notifications .actions a:hover,
 #notifications .actions a:hover {
   color: #d85000;

public/stylesheets/dark.css

@@ -125,8 +125,7 @@ body.dark div.training div.box,
 body.dark div.force_resign_zone,
 body.dark div.negotiation,
 body.dark div.side_box div.game_infos,
-body.dark #challenge_notifications div.notification,
-body.dark #message_notifications div.notification {
+body.dark #challenge_notifications > div.notification {
   border-color: #3d3d3d;
 }
 body.dark .crosstable td.last {
@@ -145,8 +144,7 @@ body.dark #hooks_wrap > div.tabs > a,
 body.dark #top div.auth .links a:hover,
 body.dark #top ul.language_links a:hover,
 body.dark #top ul.language_links a.current,
-body.dark #challenge_notifications > div.notification:hover,
-body.dark #message_notifications div.notification:hover {
+body.dark #challenge_notifications > div.notification:hover {
   background-color: #3e3e3e;
   color: #b0b0b0;
 }