(js) Replace vs-repeat by md-virtual-repeat

There're some issues with mdVirtualRepeat that required some changes to
our app:

1. Having multiple directives with md-virtual-repeat doesn't work well.
That why I added a dedicated div for the md-virtual-repeat directive.
2. ui-sref-active doesn't work well for child nodes of the
md-virtual-repeat element. The class was applied repetitively to a
visible child. I now save which message or card is selected and use the
ng-class directive to highlight the selected list item.

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

@@ -1,22 +1,10 @@
 /// autoScrollList.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import 'extends';
 
-// The only selector for vs-repeat lists is this id, we use attributes selector to
-// avoid overspecifying
-// todo: create new classes and refactor templates markup
-// ----------------------------------------------------------------------------
-.vs-repeat-repeated-element {
-  width: 100%;
-}
-
 [id='messagesList'],
 [id='contactsList'] {
   border-top: 44px solid transparent;   // padding for the header.subheader,
-  border-bottom: 2px solid transparent; //close to a hack
-  md-list-item {
-    // dirty fix for vs-repeat damages
-    position: absolute;
-  }
+  border-bottom: 2px solid transparent; // close to a hack
 
   md-list-item {
     transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,

UI/WebServerResources/scss/components/virtualRepeat/_extends.scss

@@ -0,0 +1,2 @@
+/*! virtualRepeat/_extends.scss - */
+@import '../../../angular-material/src/components/virtualRepeat/virtualRepeater.scss';

UI/WebServerResources/scss/components/virtualRepeat/virtualRepeat.scss

@@ -0,0 +1,9 @@
+/// virtualRepeater.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+@import 'extends';
+
+// Override some md styles
+.md-virtual-repeat-container {
+  .md-virtual-repeat-offsetter {
+    right: 0; // no need to keep space for the scrollbar
+  }
+}

UI/WebServerResources/scss/styles.scss

@@ -26,6 +26,7 @@
 // Original angular-material components
 // ------------------------------------------------------------------------------
 @import 'components/autocomplete/autocomplete';
+@import 'components/autoScrollList/autoScrollList';
 @import 'components/backdrop/backdrop';
 @import 'components/bottomSheet/bottomSheet';
 @import 'components/button/button';
@@ -35,13 +36,15 @@
 @import 'components/content/content';
 @import 'components/dialog/dialog';
 @import 'components/divider/divider';
+//@import 'components/favActions/fabActions';
 @import 'components/fabSpeedDial/fabSpeedDial';
+//@import 'components/fabToolbar/fabToolbar';
+//@import 'components/fabTrigger/fabTrigger';
 @import 'components/gridList/gridList';
 @import 'components/icon/icon';
 @import 'components/input/input';
 @import 'components/list/list';
 @import 'components/menu/menu';
-@import 'components/autoScrollList/autoScrollList';
 //@import 'components/progressCircular/progressCircular';
 @import 'components/progressLinear/progressLinear';
 @import 'components/radioButton/radio-button';
@@ -50,11 +53,13 @@
 @import 'components/slider/slider';
 @import 'components/sticky/sticky';
 @import 'components/subheader/subheader';
+//@import 'components/swipe/swipe';
 @import 'components/switch/switch';
 @import 'components/tabs/tabs';
 //@import 'components/toast/toast';
 @import 'components/toolbar/toolbar';
 @import 'components/tooltip/tooltip';
+@import 'components/virtualRepeat/virtualRepeat';
 @import 'components/whiteframe/whiteframe';
 
 // Theme

UI/WebServerResources/scss/views/_view.scss

@@ -52,7 +52,7 @@ $detailView-width: grid-step(8) !global;
 .view-detail {
   z-index: $z-index-view;
   overflow-x: hidden;
-  background-color: $background-base-color;
+  background-color: transparent;
   @include at(md) {
     @include flex-col(md, 9);
     margin: 0;