From 2545caf2e540e80d3437060a1412b88a5506d457 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 2 Jul 2020 17:21:56 -0400
Subject: [PATCH] fix(mail(css)): add explicit expanded/collapsed mailbox
 status

---
 SoObjects/Mailer/SOGoMailAccount.m            | 13 +++++--
 .../js/Mailer/Mailbox.service.js              |  2 +-
 .../js/Mailer/sgMailboxListItem.directive.js  |  5 ++-
 .../scss/core/structure.scss                  |  4 ++
 .../scss/views/MailerUI.scss                  | 39 ++++++++++---------
 5 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/SoObjects/Mailer/SOGoMailAccount.m b/SoObjects/Mailer/SOGoMailAccount.m
index baba805ee..129de0a97 100644
--- a/SoObjects/Mailer/SOGoMailAccount.m
+++ b/SoObjects/Mailer/SOGoMailAccount.m
@@ -546,13 +546,18 @@ static NSString *inboxFolderName = @"INBOX";
                    && [currentFolderName caseInsensitiveCompare: sharedFoldersName] == NSOrderedSame)
 	    currentFolderName = [self labelForKey: @"SharedFoldersName"];
 
-          flags = [NSMutableArray array];;
+          flags = [NSMutableArray array];
 
           if (last)
-            folderType = [self _folderType: currentPath
-                                     flags: flags];
+            {
+              folderType = [self _folderType: currentPath
+                                       flags: flags];
+            }
           else
-            folderType = @"additional";
+            {
+              folderType = @"additional";
+              [flags addObject: @"noselect"];
+            }
 
 	  if ([subscribedFolders objectForKey: folderPath])
 	    isSubscribed = YES;
diff --git a/UI/WebServerResources/js/Mailer/Mailbox.service.js b/UI/WebServerResources/js/Mailer/Mailbox.service.js
index 1af0ea0eb..18992430a 100644
--- a/UI/WebServerResources/js/Mailer/Mailbox.service.js
+++ b/UI/WebServerResources/js/Mailer/Mailbox.service.js
@@ -203,7 +203,7 @@
       }
       else {
         this.$isSpecial = false;
-        this.$icon = 'folder_open';
+        this.$icon = 'folder';
       }
     }
     this.$isNoInferiors = this.isNoInferiors();
diff --git a/UI/WebServerResources/js/Mailer/sgMailboxListItem.directive.js b/UI/WebServerResources/js/Mailer/sgMailboxListItem.directive.js
index 37247a116..867d2504a 100644
--- a/UI/WebServerResources/js/Mailer/sgMailboxListItem.directive.js
+++ b/UI/WebServerResources/js/Mailer/sgMailboxListItem.directive.js
@@ -25,11 +25,12 @@
         '                 ng-model="$ctrl.mailbox.$expanded"',
         '                 ng-disabled="$ctrl.mailbox.children.length == 0"',
         '                 ng-change="$ctrl.mailbox.$account.$flattenMailboxes({ reload: true, saveState: true })">',
-        '    <md-icon>{{$ctrl.mailbox.$icon}}</md-icon></md-checkbox>',
+        '    </md-checkbox>',
         '  </div>',
         '  <p class="sg-item-name"',
         '    ng-click="$ctrl.selectFolder($event)"',
         '    ng-dblclick="$ctrl.editFolder($event)">',
+        '    <md-icon ng-class="{ \'sg-opacity-70\': $ctrl.mailbox.isNoSelect() }">{{$ctrl.mailbox.$icon}}</md-icon>',
         '    <span ng-bind="$ctrl.mailbox.$displayName"></span>',
         '    <span class="sg-counter-badge ng-hide"',
         '          ng-show="$ctrl.mailbox.unseenCount"',
@@ -111,7 +112,7 @@
       this.inputElement.value = this.mailbox.name;
       this.clickableElement.classList.add('ng-hide');
       this.inputContainer.classList.remove('ng-hide');
-      if ($event.srcEvent.type == 'touchend') {
+      if ($event.srcEvent && $event.srcEvent.type == 'touchend') {
         $timeout(function() {
           $ctrl.inputElement.select();
           $ctrl.inputElement.focus();
diff --git a/UI/WebServerResources/scss/core/structure.scss b/UI/WebServerResources/scss/core/structure.scss
index a1f8ec329..b5d4d6f81 100644
--- a/UI/WebServerResources/scss/core/structure.scss
+++ b/UI/WebServerResources/scss/core/structure.scss
@@ -29,6 +29,10 @@ html * {
   }
 }
 
+.sg-opacity-70 {
+  opacity: .7;
+}
+
 .sg-category {
   position: absolute;
   top: 0;
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index 746841d39..b073effe9 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -92,16 +92,30 @@
 }
 
 md-sidenav {
+  md-list-item.sg-mailbox-list-item {
+    // Lower by half the left padding of list items to accomodate the expand/collapse button
+    padding-left: $bl;
+    .sg-item-name {
+      transform: translateX(-$bl);
+      margin-right: 0;
+      md-icon {
+        margin-right: $bl;
+      }
+      &:focus {
+        outline: none;
+      }
+    }
+  }
   md-checkbox {
     &.sg-folder {
-      // Show checkbox as a "closed" folder when unchecked and "opened" folder when checked
+      // Show checkbox as a collapsed/right arrow when unchecked and expanded/down arrow when checked
       .md-container:after {
         color: rgba(0,0,0,0.54);
         font-family: 'Material Icons';
         font-size: 24px;
-        content: "\e2c7"; // folder
-        top: -4px;
-        left: 0px;
+        content: "\e5df"; // arrow_right (collapsed folder)
+        top: 0;
+        left: 0;
         width: 1em;
         height: 1em;
       }
@@ -110,7 +124,7 @@ md-sidenav {
       }
       &.md-checked {
         .md-container:after {
-          content: "\e2c8"; // folder open
+          content: "\e5c5"; // arrow_drop_down (expanded folder)
         }
         .md-icon {
           background-color: initial !important;
@@ -119,11 +133,7 @@ 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)
+      // Hide the checkbox when disabled (no children)
       &[disabled] {
         .md-container {
           width: 0;
@@ -131,18 +141,9 @@ md-sidenav {
             content: '';
           }
         }
-        .md-label {
-          display: inline-block;
-          margin-left: 0;
-        }
       }
     }
   }
-  .sg-item-name {
-    &:focus {
-      outline: none;
-    }
-  }
 }
 .msg-attachment-image,
 .msg-attachment-link {