From c596bacccbc58171c293adc9c1e066d104e7e98c Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Wed, 9 Nov 2016 10:18:12 -0500
Subject: [PATCH] (css,html) Improve display of mailboxes list

---
 UI/Templates/MailerUI/UIxMailMainFrame.wox      | 15 ++++++++-------
 .../scss/components/sidenav/sidenav.scss        |  9 +++++----
 UI/WebServerResources/scss/views/MailerUI.scss  | 17 +++++++++++++++++
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index d73661aa8..68570fb8e 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -86,20 +86,21 @@
                             ng-class="{'md-bg': folder.id == app.service.selectedFolder.id}"
                             sg-droppable="app.isDroppableFolder(dragFolder, folder)"
                             sg-drop="app.dragSelectedMessages(dragFolder, folder, dragMode)">
-                <div ng-class="'sg-child-level-' + folder.level">
-                  <md-icon class="ng-hide"
-                           ng-hide="folder.children.length">{{app.metadataForFolder(folder).icon}}</md-icon>
-                  <md-checkbox class="sg-folder ng-hide"
+                <div class="sg-child-level-0"
+                     ng-class="'sg-child-level-' + folder.level">
+                  <md-checkbox class="sg-folder"
+                               ng-class="app.metadataForFolder(folder).icon"
                                label:aria-label="Expanded"
-                               ng-show="folder.children.length"
                                ng-model="folder.$expanded"
-                               ng-change="account.$flattenMailboxes({ reload: true, saveState: true })"><!-- expanded --></md-checkbox>
+                               ng-disabled="folder.children.length == 0"
+                               ng-change="account.$flattenMailboxes({ reload: true, saveState: true })">
+                  <md-icon>{{app.metadataForFolder(folder).icon}}</md-icon></md-checkbox>
                 </div>
                 <p class="sg-item-name ng-hide"
                    ng-click="app.selectFolder($event, account, folder)"
                    ng-dblclick="app.editFolder(folder)"
                    ng-show="app.editMode != folder.path">
-                  {{app.metadataForFolder(folder).name}}
+                  {{app.metadataForFolder(folder).name}} -- {{folder.type}}
                   <span class="sg-counter-badge ng-hide" ng-show="folder.unseenCount">{{folder.unseenCount}}</span>
                 </p>
                 <md-input-container class="md-flex ng-hide"
diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
index 6ab8206e7..170f178f6 100644
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
@@ -25,13 +25,13 @@ md-sidenav {
   }
 }
 
-// MAIN SIDENAV, actually to the left
-// ----------------------------------------------------------------------------
-
 // Mailboxes tree
 $i: 1;
 @while $i < 12 {
-  .sg-child-level-#{$i} { padding-left: $mg * $i; }
+  .sg-child-level-#{$i} {
+    max-height: 24px;
+    padding-left: $mg * $i;
+  }
   $i: $i + 1;
 }
 
@@ -40,5 +40,6 @@ $i: 1;
   md-checkbox {
     margin-right: $bl * 2;
     max-width: 24px;
+    min-height: 24px;
   }
 }
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index df1ed47f6..9d77c7572 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -98,6 +98,23 @@ md-sidenav {
           }
         }
       }
+      // Hide the label (which contains an icon) if the checkbox is enabled ..
+      .md-label {
+        display: none;
+      }
+      // .. but show the label and hide the checkbox when disabled (no children)
+      &[disabled] {
+        .md-container {
+          width: 0;
+          &:after {
+            content: '';
+          }
+        }
+        .md-label {
+          display: inline-block;
+          margin-left: 0;
+        }
+      }
     }
   }
   .sg-item-name {