(css) Merge autoScrollList.scss with list.scss

Alinto · Aug 7, 2015 · 5255908 · 5255908
1 parent fb7d5b6
commit 5255908
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 128 deletions.
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -386,7 +386,7 @@
                </div>
           -->
           <md-virtual-repeat-container class="md-flex">
-            <md-list>
+            <md-list class="sg-section-list">
               <div md-virtual-repeat="currentCard in addressbook.selectedFolder.cards">
                 <md-list-item
                     ng-class="{'sg-active': currentCard.id == addressbook.selectedFolder.selectedCard}"

diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -13,7 +13,7 @@
         </h2>
       </header>
       <md-virtual-repeat-container class="md-flex">
-        <md-list>
+        <md-list class="sg-section-list">
           <div md-virtual-repeat="currentMessage in mailbox.selectedFolder.$messages">
             <md-list-item
                 ng-class="{'sg-active': currentMessage.uid == mailbox.selectedFolder.selectedMessage, unread: !currentMessage.isread}"

diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -534,20 +534,20 @@
             <!-- Events list -->
             <md-tab label:label="Events"
                     md-on-select="list.selectComponentType('events')">
-              <md-list>
-                <md-list-item class="md-clickable md-2-line"
+              <md-list class="sg-section-list">
+                <md-list-item class="md-2-line"
                               ng-repeat="event in list.component.$events"
                               ng-click="list.openEvent($event, event)">
-                  <i class="md-avatar" ng-class="event.getClassName('bg')" ><!-- calendar color --></i>
+                  <i class="md-tile-left" ng-class="event.getClassName('bg')" ><!-- calendar color --></i>
                   <div class="md-list-item-text">
                     <h3>{{event.c_title}}</h3>
                     <p>{{event.c_location}}</p>
                     <p class="md-secondary" layout="row">
                       {{event.formatted_startdate}}
-                      <span class="sg-tile-icons">
+                      <i class="sg-tile-icons">
                         <md-icon ng-show="event.c_iscycle">repeat</md-icon>
                         <md-icon ng-show="event.c_nextalarm">alarm</md-icon>
-                      </span>
+                      </i>
                     </p>
                   </div>
                 </md-list-item>
@@ -559,11 +559,11 @@
             <!-- Tasks list -->
             <md-tab label:label="Tasks"
                     md-on-select="list.selectComponentType('tasks')">
-              <md-list>
-                <md-list-item class="md-clickable md-2-line"
+              <md-list class="sg-section-list">
+                <md-list-item class="md-2-line"
                               ng-repeat="task in list.component.$tasks"
                               ng-click="list.openTask($event, task)">
-                  <i class="md-avatar" ng-class="task.getClassName('bg')" ><!-- calendar color --></i>
+                  <i class="md-tile-left" ng-class="task.getClassName('bg')" ><!-- calendar color --></i>
                   <div class="md-list-item-text">
                     <h3>{{task.c_title}}</h3>
                     <p class="md-secondary" layout="row">
@@ -575,7 +575,7 @@
                     </p>
                   </div>
                 </md-list-item>
-                <md-list-item ng-if="list.component.$tasks.length == 0">
+                <md-list-item disabled="disabled" ng-if="list.component.$tasks.length == 0">
                   <p class="sg-md-caption"><var:string label:value="No tasks for selected criteria"/></p>
                 </md-list-item>
               </md-list>

diff --git a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
@@ -25,11 +25,11 @@ md-list-item {
 }
 
 // Add some padding to the first icon in a list item
-.md-list-item-inner {
-  > i:first-child {
-    margin-left: $mg;
-  }
-}
+//.md-list-item-inner {
+//  > i:first-child {
+//    margin-left: $mg;
+//  }
+//}
 
 // The right tile for a list item.
 // ----------------------------------------------------------------------------
@@ -55,18 +55,85 @@ md-list-item {
 div.md-tile-left {
   min-width: $sg-md-grid-pitch + $baseline-grid;
 }
-.sg-tile-icons {
-  md-icon {
-    font-size: $sg-font-size-1;
-    color: $colorGray;
-    margin: 2px;
+
+// Specific lists with a single subheader (sg-md-subheader--fixed) at the top
+[id='messagesList'],
+[id='contactsList'] {
+  border-top: 44px solid transparent;   // padding for the header.subheader until md-subheader is fixed
+}
+
+.sg-section-list {
+  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);
+      cursor: pointer;
+    }
+    &:active {
+      color: sg-color($sogoBlue, 800);
+    }
+    &:focus,
+    &.sg-active {
+      background-color: sg-color($sogoBlue, 100);
+    }
+    .md-list-item-inner {
+      .md-secondary {
+        // Expect the container to include a sg-tile-icons
+        right: 0px;
+      }
+    }
+  }
+}
+
+.sg {
+  &-tile-content {
+    align-items: baseline;
+    flex-direction: row;
+    flex-wrap: wrap;
+    flex: 1;
+    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;
+    }
+  }
+  // Small tile of vertically-aligned icons
+  &-tile-icons {
+    md-icon {
+      font-size: $sg-font-size-1;
+      color: $colorGray;
+      margin: 2px;
+    }
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+    width: (2 * $mg);
+    height:(7 * $line);
   }
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: start;
-  width: (2 * $mg);
-  height:(7 * $line);
 }
 .sg-avatars {
   margin: ($mg / 2) 0 0 ($mg / 2);
@@ -123,3 +190,43 @@ div.md-tile-left {
   background-color: rgba(255, 255, 0, 0.3) !important;
   content: "\e7fd"; // person
 }
+.sg-avatar {
+  @extend .md-tile-left-card;
+  margin-right: 0;
+  margin-left: 0;
+}
+.sg-list-avatar {
+  @extend .md-tile-left-list;
+  margin-right: 0;
+  margin-left: 0;
+}
+.sg-selected-avatar {
+  @extend .md-tile-left-selected;
+  margin-right: 0;
+  margin-left: 0;
+}
+.sg-accepted {
+  @extend .md-tile-left-accepted;
+  margin-right: 0;
+  margin-left: 0;
+}
+.sg-declined {
+  @extend .md-tile-left-declined;
+  margin-right: 0;
+  margin-left: 0;
+}
+.sg-delegated {
+  @extend .md-tile-left-delegated;
+  margin-right: 0;
+  margin-left: 0;
+}
+.sg-needs-action {
+  @extend .md-tile-left-needs-action;
+  margin-right: 0;
+  margin-left: 0;
+}
+.sg-tentative {
+  @extend .md-tile-left-tentative;
+  margin-right: 0;
+  margin-left: 0;
+}
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
@@ -26,7 +26,6 @@
 // Original angular-material components
 // ------------------------------------------------------------------------------
 @import 'components/autocomplete/autocomplete';
-@import 'components/autoScrollList/autoScrollList';
 @import 'components/backdrop/backdrop';
 @import 'components/bottomSheet/bottomSheet';
 @import 'components/button/button';