[FIX] mail: various ui improvements

- display star/mark as read icon next to the message title instead on
  the far right
- display unstar all message in channel starred
- enable/disable the 'unstar all' and 'mark read' buttons depending on
  the number of messages in the corresponding channels
- display star on the left sidebar in 'squashed messages'
- tweaks to padding in client action
- display hash in channel name in lighter tone
- light opacity in sidebar
- star icon in message sidebar is clickable + small less refactoring
- message sidebar is aligned with the message now
- messages are not squashed in inbox/starred

1 files changed, 34 insertions, 28 deletions

diff --git a/addons/mail/static/src/less/thread.less b/addons/mail/static/src/less/thread.less
index 7f27ab228cc..bcb73d4dd7c 100644
--- a/addons/mail/static/src/less/thread.less
+++ b/addons/mail/static/src/less/thread.less
@@ -29,19 +29,50 @@
         .o_thread_message_sidebar {
             .o-flex(0, 0, @mail-thread-avatar-size);
             margin-right: 10px;
+            margin-top: 2px;
             text-align: center;
+            font-size: smaller;
+
+            @media (max-width: @screen-xs-max) {
+                margin-top: 4px;
+                font-size: x-small;
+            }
 
             .o_thread_message_avatar {
                 max-width: @mail-thread-avatar-size;
             }
+            .o_thread_message_side_date {
+                margin-left: -5px;
+            }
+            .o_thread_message_star {
+                margin-right: -5px;
+            }
 
             .o_thread_message_side_date {
-                font-size: smaller;
                 opacity: 0;
             }
         }
-        &:hover .o_thread_message_side_date {
-            opacity: @mail-thread-side-date-opacity;
+
+        i.o_thread_message_star, i.o_thread_message_needaction  {
+            cursor: pointer;
+            opacity: 0;
+            &.fa-star {
+                opacity: @mail-thread-icon-opacity;
+                color: gold;
+            }
+        }
+
+        &:hover, &.o_thread_selected_message {
+            .o_thread_message_side_date {
+                opacity: @mail-thread-side-date-opacity;
+            }
+
+            i.o_thread_message_star, i.o_thread_message_needaction {
+                opacity: @mail-thread-icon-opacity;
+                &:hover {
+                    opacity: 1;
+                }
+            }
         }
 
         .o_mail_redirect {
@@ -76,32 +107,7 @@
             }
 
             .o_thread_message_star, .o_thread_message_needaction {
-                cursor: pointer;
-                opacity: 0;
                 padding: 4px;
-                &.fa-star {
-                    opacity: @mail-thread-icon-opacity;
-                    color: gold;
-                }
-            }
-        }
-
-        &:hover .o_thread_message_core {
-            .o_thread_message_star, .o_thread_message_needaction {
-                opacity: @mail-thread-icon-opacity;
-                &:hover {
-                    opacity: 1;
-                }
-            }
-        }
-
-        &.o_thread_selected_message {
-            .o_thread_message_side_date {
-                opacity: @mail-thread-side-date-opacity;
-            }
-
-            .o_thread_message_star, .o_thread_message_needaction {
-                opacity: @mail-thread-icon-opacity;
             }
         }
     }