(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.
This commit is contained in:
Francis Lachapelle
2015-12-14 10:39:10 -05:00
parent 04a6e579cf
commit 6dd5210cbf
2 changed files with 25 additions and 13 deletions
+12 -10
View File
@@ -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>
+13 -3
View File
@@ -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);