Add collapsed classes on app element

app/assets/javascripts/app/controllers/home.js

@@ -11,6 +11,17 @@ angular.module('app')
       $rootScope.$broadcast('new-update-available', version);
     }
 
+    $rootScope.$on("panel-resized", (event, info) => {
+      if(info.panel == "notes") { this.notesCollapsed = info.collapsed; }
+      if(info.panel == "tags") { this.tagsCollapsed = info.collapsed; }
+
+      let appClass = "";
+      if(this.notesCollapsed) { appClass += "collapsed-notes"; }
+      if(this.tagsCollapsed) { appClass += " collapsed-tags"; }
+
+      $scope.appClass = appClass;
+    })
+
     /* Used to avoid circular dependencies where syncManager cannot be imported but rootScope can */
     $rootScope.sync = function(source) {
       syncManager.sync();

app/assets/javascripts/app/controllers/notes.js

@@ -66,14 +66,18 @@ angular.module('app')
       let width = authManager.getUserPrefValue("notesPanelWidth");
       if(width) {
         this.panelController.setWidth(width);
+        if(this.panelController.isCollapsed) {
+          $rootScope.$broadcast("panel-resized", {panel: "notes", collapsed: this.panelController.isCollapsed})
+        }
       }
     }
 
     this.loadPreferences();
 
-    this.onPanelResize = function(newWidth) {
+    this.onPanelResize = function(newWidth, lastLeft, isAtMaxWidth, isCollapsed) {
       authManager.setUserPrefValue("notesPanelWidth", newWidth);
       authManager.syncUserPreferences();
+      $rootScope.$broadcast("panel-resized", {panel: "notes", collapsed: isCollapsed})
     }
 
     angular.element(document).ready(() => {

app/assets/javascripts/app/controllers/tags.js

@@ -47,13 +47,17 @@ angular.module('app')
       let width = authManager.getUserPrefValue("tagsPanelWidth");
       if(width) {
         this.panelController.setWidth(width);
+        if(this.panelController.isCollapsed) {
+          $rootScope.$broadcast("panel-resized", {panel: "tags", collapsed: this.panelController.isCollapsed})
+        }
       }
     }
 
     this.loadPreferences();
 
-    this.onPanelResize = function(newWidth) {
+    this.onPanelResize = function(newWidth, lastLeft, isAtMaxWidth, isCollapsed) {
       authManager.setUserPrefValue("tagsPanelWidth", newWidth, true);
+      $rootScope.$broadcast("panel-resized", {panel: "tags", collapsed: isCollapsed})
     }
 
     this.componentManager = componentManager;

app/assets/javascripts/app/directives/views/panelResizer.js

@@ -32,6 +32,10 @@ class PanelResizer {
     scope.control.flash = function() {
       scope.flash();
     }
+
+    scope.control.isCollapsed = function() {
+      return scope.isCollapsed();
+    }
   }
 
   controller($scope, $element, modelManager, actionsManager, $timeout, $compile) {
@@ -61,7 +65,7 @@ class PanelResizer {
           $scope.setWidth(minWidth);
         }
         $scope.finishSettingWidth();
-        $scope.onResizeFinish()(lastWidth, lastLeft, $scope.isAtMaxWidth());
+        $scope.onResizeFinish()(lastWidth, lastLeft, $scope.isAtMaxWidth(), collapsed);
       })
     }
 
@@ -274,7 +278,7 @@ class PanelResizer {
         let isMaxWidth = $scope.isAtMaxWidth();
 
         if($scope.onResizeFinish) {
-          $scope.onResizeFinish()(lastWidth, lastLeft, isMaxWidth);
+          $scope.onResizeFinish()(lastWidth, lastLeft, isMaxWidth, $scope.isCollapsed());
         }
 
         $scope.finishSettingWidth();

app/assets/stylesheets/app/_main.scss

@@ -147,7 +147,8 @@ $footer-height: 32px;
 
     &.collapsed {
       opacity: 1;
-      background-color: var(--sn-stylekit-contrast-background-color);
+      // so it blends in with editor a bit more
+      background-color: var(--sn-stylekit-editor-background-color);
     }
 
     &.dragging {

app/assets/templates/editor.html.haml

@@ -82,7 +82,7 @@
     %p.medium-padding{"style" => "padding-top: 0 !important;"} There was an error decrypting this item. Ensure you are running the latest version of this app, then sign out and sign back in to try again.
 
   #editor-pane-component-stack
-    #component-stack-menu-bar.sk-app-bar
+    #component-stack-menu-bar.sk-app-bar.no-edges{"ng-if" => "ctrl.componentStack.length"}
       .left
         .sk-app-bar-item{"ng-repeat" => "component in ctrl.componentStack", "ng-click" => "ctrl.toggleStackComponentForCurrentItem(component)"}
           .sk-app-bar-item-column

app/assets/templates/home.html.haml

@@ -1,11 +1,11 @@
 .main-ui-view{"ng-class" => "platform"}
+
   %lock-screen{"ng-if" => "needsUnlock", "on-success" => "onSuccessfulUnlock"}
-  .app#app{"ng-if" => "!needsUnlock"}
+
+  .app#app{"ng-if" => "!needsUnlock", "ng-class" => "appClass"}
     %tags-section{"save" => "tagsSave", "add-new" => "tagsAddNew", "selection-made" => "tagsSelectionMade",
     "all-tag" => "allTag", "archive-tag" => "archiveTag", "tags" => "tags", "remove-tag" => "removeTag"}
-
     %notes-section{"add-new" => "notesAddNew", "selection-made" => "notesSelectionMade", "tag" => "selectedTag"}
-
     %editor-section{"note" => "selectedNote", "remove" => "deleteNote", "update-tags" => "updateTagsForNote"}
 
   %footer{"ng-if" => "!needsUnlock"}