(css) Improve contacts and messages lists

UI/Templates/ContactsUI/UIxContactFoldersView.wox

@@ -293,24 +293,23 @@
              </div>
         -->
         <md-list vs-repeat="72" vs-scroll-parent="#contactsList">
-          <md-list-item ng-repeat="currentCard in currentFolder.cards track by currentCard.id">
-            <div layout="row" flex="true"
-                 ng-class="{_selected: card.id == currentCard.id}"
-                 ng-click="toggleDetailView()"
-                 ui-sref="app.addressbook.card.view({addressbookId: currentFolder.id, cardId: currentCard.id})">
-              <div ng-show="currentCard.tag == 'vcard'">
-                <sg-gravatar-image class="md-tile-left"
-                                   email="{{currentCard.$preferredEmail(currentFolder.$query)}}"
-                                   size="48"><!-- gravatar -->
-                </sg-gravatar-image>
-              </div>
-              <div class="sg-list-avatar" ng-show="currentCard.tag == 'vlist'">
-                <!--list avatar-->
-              </div>
-              <div class="sg-tile-content">
-                <div class="sg-md-body-multi contact-name" ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
-                <div class="sg-md-subhead-multi contact-email">{{currentCard.$preferredEmail(currentFolder.$query)}}</div>
-              </div>
+          <md-list-item
+              ng-repeat="currentCard in currentFolder.cards track by currentCard.id"
+              ng-class="{'sg-active': card.id == currentCard.id}"
+              ng-click="selectCard(currentCard)"
+              ui-sref-active="sg-active"
+              ui-sref="app.addressbook.card.view({addressbookId: currentFolder.id, cardId: currentCard.id})">
+            <sg-gravatar-image class="md-tile-left"
+                               ng-show="currentCard.tag == 'vcard'"
+                               email="{{currentCard.$preferredEmail(currentFolder.$query)}}"
+                               size="48"><!-- gravatar -->
+            </sg-gravatar-image>
+            <div class="sg-list-avatar" ng-show="currentCard.tag == 'vlist'">
+              <!--list avatar-->
+            </div>
+            <div class="sg-tile-content">
+              <div class="sg-md-subhead-multi" ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
+              <div class="sg-md-body-multi">{{currentCard.$preferredEmail(currentFolder.$query)}}</div>
             </div>
           </md-list-item>
         </md-list>

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -15,34 +15,29 @@
     <md-list vs-repeat="72"
         vs-scroll-parent="#messagesList">
       <md-list-item
-          class="md-clickable"
           ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
-          ng-class="{unread: !currentMessage.isread}">
-        <md-item-content ui-sref-active="_selected" layout="row" class="md-flex">
-          <div>
-            <sg-gravatar-image class="md-tile-left"
-                               email="{{currentMessage['from'][0].email}}"
-                               size="48"><!-- gravatar -->
-            </sg-gravatar-image>
-          </div>
-          <div class="sg-tile-content">
-            <a ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})">
-              <div class="sg-md-subhead-multi subject">
-                {{currentMessage.subject}}
-              </div>
-              <span class="right msg-date" ng-bind-html="currentMessage.relativedate"><!-- date --></span>
-              <div class="sg-md-body-multi name">{{currentMessage.$shortAddress('from')}}</div>
-              <i class="icon-ion-refresh"
-                  ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
-            </a>
-          </div>
-          <div class="sg-tile-icons">
-            <i class="md-icon-star" ng-show="currentMessage.isflagged"> </i>
-            <i class="md-icon-reply" ng-show="currentMessage.isanswered"> </i>
-            <i class="md-icon-forward" ng-show="currentMessage.isforwarded"> </i>
-            <i class="md-icon-attach-file disable" ng-show="currentMessage.hasattachment"> </i>
-          </div>
-        </md-item-content>
+          ng-class="{unread: !currentMessage.isread}"
+          ng-click="selectMessage(currentMessage)"
+          ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
+          ui-sref-active="sg-active">
+        <sg-gravatar-image class="md-tile-left"
+                           email="{{currentMessage['from'][0].email}}"
+                           size="48"><!-- gravatar -->
+        </sg-gravatar-image>
+        <div class="sg-tile-content">
+          <span class="msg-date"
+                ng-bind-html="currentMessage.relativedate"><!-- date --></span>
+          <div class="sg-md-subhead-multi">{{currentMessage.$shortAddress('from')}}</div>
+          <div class="sg-md-body-multi">{{currentMessage.subject}}</div>
+          <i class="icon-ion-refresh"
+             ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
+        </div>
+        <div class="sg-tile-icons">
+          <i class="md-icon-star" ng-show="currentMessage.isflagged"> </i>
+          <i class="md-icon-reply" ng-show="currentMessage.isanswered"> </i>
+          <i class="md-icon-forward" ng-show="currentMessage.isforwarded"> </i>
+          <i class="md-icon-attach-file disable" ng-show="currentMessage.hasattachment"> </i>
+        </div>
       </md-list-item>
     </md-list>
   </md-content>

UI/WebServerResources/js/Contacts/AddressBookController.js

@@ -13,6 +13,10 @@
     $rootScope.currentFolder = stateAddressbook;
     $rootScope.card = null;
 
+    $scope.selectCard = function(card) {
+      $state.go('app.addressbook.card.view', {addressbookId: stateAddressbook.id, cardId: card.id});
+    };
+
       $scope.newComponent = function(ev) {
         $mdDialog.show({
           parent: angular.element(document.body),

UI/WebServerResources/js/Mailer/MailboxController.js

@@ -6,11 +6,14 @@
   /**
    * @ngInject
    */
-  MailboxController.$inject = ['$scope', '$rootScope', '$stateParams', 'stateAccount', 'stateMailbox', '$timeout', 'sgFocus', 'Dialog', 'Account', 'Mailbox'];
-  function MailboxController($scope, $rootScope, $stateParams, stateAccount, stateMailbox, $timeout, focus, Dialog, Account, Mailbox) {
+  MailboxController.$inject = ['$scope', '$rootScope', '$state', '$stateParams', 'stateAccount', 'stateMailbox', '$timeout', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox'];
+  function MailboxController($scope, $rootScope, $state, $stateParams, stateAccount, stateMailbox, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox) {
     $scope.account = stateAccount;
     $rootScope.mailbox = stateMailbox;
     $rootScope.currentFolder = stateMailbox;
+    $scope.selectMessage = function(message) {
+      $state.go('mail.account.mailbox.message', {accountId: stateAccount.id, mailboxId: encodeUriFilter(stateMailbox.path), messageId: message.uid});
+    };
   }
 
   angular

UI/WebServerResources/scss/_shame.scss

@@ -23,5 +23,5 @@
 
 .sg-tile-content .sg-md-subhead-multi, 
 .sg-tile-content .sg-md-subhead-solo {
-  min-width: 65%;
+  //min-width: 65%;
 }

UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss

@@ -18,12 +18,9 @@
     position: absolute;
   }
 
-  // In use in MAILER messages list but re-usable
-  // --------------------------------------------
-  md-item-content {
-    padding: 0 0 0 $mg;
-    margin: $mg 0;
-    transition: all 0.20s $swift-ease-in-timing-function 0.12s;
+  md-list-item {
+    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
+                color 0.12s linear;
     &:hover {
       background-color: sg-color($sogoPaper, 300);
       color: sg-color($sogoBlue, 800);
@@ -33,62 +30,44 @@
       color: sg-color($sogoBlue, 800);
     }
     &:focus,
-    &._selected {
+    &.sg-active {
       background-color: sg-color($sogoBlue, 100);
     }
   }
-  .sg-md-subhead-solo {
-    margin: 0;
-  }
 }
 
 .sg {
   &-tile-content {
-    //@extend .md-tile-content; content of :
+    align-items: baseline;
+    flex-direction: row;
+    flex-wrap: wrap;
     flex: 1;
-    padding: $baseline-grid * 2;
-    text-overflow: ellipsis;
-
-    .name,
-    .contact-email {
-      font-weight: $sg-font-light;
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-    .subject,
-    .contact-name {
-      font-weight: $sg-font-medium;
-      // dirty fix for vs-repeat damages
-      max-width: 75%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
+    justify-content: space-between;
     p {
       margin: $list-p-margin;
       font-size: sg-size(body);
     }
     .msg-date {
+      float: right;
       font-size: sg-size(body);
+      font-weight: $sg-font-light;
+      line-height: $sg-line-height-2;
+      margin-left: 1em;
+    }
+    .#{$md}-subhead-multi,
+    .#{$md}-subhead-solo,
+    .#{$md}-body-multi {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .#{$md}-subhead-multi {
+      @extend .#{$md}-body-1;
+      font-size: initial;
+    }
+    .#{$md}-body-multi {
+      @extend .#{$md}-caption;
     }
-  }
-}
-
-.sg-tile-content {
-  padding: 0 0 0 $layout-gutter-width;
-  .sg-md-subhead-multi,
-  .sg-md-subhead-solo {
-    margin: 0;
-  }
-  .sg-md-body-multi {
-    margin: 0;
-  }
-  a {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    justify-content: space-between;
-    flex-wrap: wrap;
   }
 }
 .sg-avatar {

UI/WebServerResources/scss/components/button/button.scss

@@ -8,8 +8,8 @@
 
 // Buttons for the sidenav folder tree
 // ------------------------------------
-sg-folder-tree .md-button,
-md-sidenav md-list .md-button {
+md-sidenav md-list .md-button,
+.view-list md-list .md-button {
   // dirty fix to squash the theme style
   background-color: transparent !important;
   padding: 0 $mg;
@@ -20,6 +20,11 @@ md-sidenav md-list .md-button {
   -webkit-font-smoothing: auto;
 }
 
+.view-list md-list .md-button {
+  // Gain some space in lists
+  padding: 0;
+}
+
 .md-sidenav-left .md-button [class^="md-icon"] {
   //margin-right: 1em;
 }

UI/WebServerResources/scss/components/list/list.scss

@@ -34,7 +34,7 @@ md-list {
   }
 
  .sg-inline-list-icon-label {
-  text-transform: uppercase;
+   text-transform: uppercase;
   }
 }
 
@@ -59,8 +59,8 @@ md-list {
   padding: $layout-gutter-width;
   width: $sg-md-grid-pitch + $baseline-grid;
   height: $sg-md-grid-pitch + $baseline-grid;
+  line-height: $sg-md-grid-pitch + $baseline-grid;
   background-clip: content-box;
-  margin-left: -$layout-gutter-width;
 }
 .md-tile-right {
   margin-right: -$layout-gutter-width;

UI/WebServerResources/scss/core/typography.scss

@@ -386,10 +386,6 @@ html p {
   line-height: $sg-line-height-2;
   font-weight: $sg-font-regular;
 }
-/// @alias .body-1
-.#{$md}-body-multi {
-  @extend .#{$md}-body-1;
-}
 .#{$md}-body-2 {
   $lineHeight : $sg-line-height-2 + $sg-md-typo-baseline;
   font-size: $sg-font-size-2;
@@ -398,10 +394,6 @@ html p {
   margin-top: ($lineHeight * -1);
   margin-bottom: $lineHeight;
 }
-/// @alias .body-2
-.#{$md}-body-solo {
-  @extend .#{$md}-body-2;
-}
 .#{$md}-subhead-1 {
   $lineHeight : $sg-line-height-3;
   font-size: $sg-font-size-3;
@@ -410,10 +402,6 @@ html p {
   margin-top: ($lineHeight * -1);
   margin-bottom: $lineHeight;
 }
-/// @alias .subhead-1
-.#{$md}-subhead-multi {
-  @extend .#{$md}-subhead-1;
-}
 .#{$md}-subhead-2 {
   $lineHeight : $sg-line-height-3 + $sg-md-typo-baseline;
   font-size: $sg-font-size-3;

UI/WebServerResources/scss/views/MailerUI.scss

@@ -11,6 +11,16 @@
   transform: translateY(-100%); // Compensate the container top-margin
 }
 
+.unread {
+  .#{$md}-subhead-multi,
+  .#{$md}-body-multi {
+    font-weight: $sg-font-medium;
+  }
+  .msg-date {
+    color: sg-color($sogoBlue, 600);
+  }
+}
+
 .msg-header-content {
   display: flex;
   flex-direction: column;