mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-05-21 19:35:38 +00:00
(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:
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user