From 6dd5210cbf507ec038fe18c9689a69d3c31dbc11 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 14 Dec 2015 10:39:10 -0500
Subject: [PATCH] (css) Use md-secondary button in messages list

This fixes an issue with Firefox where it's impossible to select
multiple messages by clicking on the avatar.
---
 .../MailerUI/UIxMailFolderTemplate.wox        | 22 ++++++++++---------
 UI/WebServerResources/scss/views/_view.scss   | 16 +++++++++++---
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 420751ff1..b35ee895f 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -216,19 +216,21 @@
         <md-list class="sg-section-list">
           <md-list-item
               class="md-default-theme md-background md-hue-1"
-              md-virtual-repeat="currentMessage in mailbox.service.selectedFolder"
-              md-on-demand="md-on-demand"
               ng-class="{'md-bg': mailbox.selectedFolder.isSelectedMessage(currentMessage.uid, currentMessage.$mailbox.path),
                           unread: !currentMessage.isread}"
+              md-virtual-repeat="currentMessage in mailbox.service.selectedFolder"
+              md-on-demand="md-on-demand" md-item-size="56"
               ng-click="mailbox.selectMessage(currentMessage)">
-            <sg-avatar-image class="md-avatar"
-                             ng-if="!currentMessage.selected"
-                             ng-click="mailbox.toggleMessageSelection($event, currentMessage)"
-                             sg-email="::currentMessage.from[0].email"
-                             size="40"><!-- avatar --></sg-avatar-image>
-            <div class="md-avatar sg-avatar-selected"
-                 ng-if="currentMessage.selected"
-                 ng-click="mailbox.toggleMessageSelection($event, currentMessage)"><!-- selected avatar --></div>
+            <div class="md-secondary"
+                 ng-click="mailbox.toggleMessageSelection($event, currentMessage)"
+                 ng-switch="currentMessage.selected">
+              <sg-avatar-image class="md-avatar"
+                               ng-switch-when="false"
+                               sg-email="::currentMessage.from[0].email"
+                               size="40"><!-- avatar --></sg-avatar-image>
+              <div class="md-avatar sg-avatar-selected"
+                   ng-switch-when="true"><!-- selected avatar --></div>
+            </div>
             <div class="sg-tile-content">
               <div class="sg-md-subhead">
                 <div>
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index 65162448c..e02711a39 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -60,11 +60,21 @@ $detailView-width: grid-step(8) !global;
 .view-list {
   z-index: ($z-index-view - 1);
   min-width: ($listView-width - ($pitch * 2));
-  md-list-item {
-    .md-button {
-      margin: 0;
+
+  // With Material, when a button inside a md-list uses the class md-secondary, it has an absolute position on the
+  // right side of the list item. Since we define the avatar as the secondary button, we must move it to the left
+  // side of the list item and add some padding to the main button (.md-no-style).
+  .md-with-secondary {
+    .md-no-style {
+      padding-left: 40 + $baseline-grid * 3;
+    }
+    .md-secondary-container {
+      left: $baseline-grid * 2;
+      right: initial;
+      padding: 0;
     }
   }
+
   @include at(sm){
     @include flex-col(sm, 6, 1, 1);
     min-width: ($pitch * 3);