Double click panel resizer to toggle collapse

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

@@ -53,8 +53,7 @@ angular.module('app')
     this.loadPreferences();
 
     this.onPanelResize = function(newWidth) {
-      authManager.setUserPrefValue("tagsPanelWidth", newWidth);
-      authManager.syncUserPreferences();
+      authManager.setUserPrefValue("tagsPanelWidth", newWidth, true);
     }
 
     this.componentManager = componentManager;

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

@@ -7,6 +7,7 @@ class PanelResizer {
       index: "=",
       panelId: "=",
       onResize: "&",
+      defaultWidth: "=",
       onResizeFinish: "&",
       control: "=",
       alwaysVisible: "=",
@@ -44,6 +45,23 @@ class PanelResizer {
     var startWidth = panel.scrollWidth, startX = 0, lastDownX = 0, collapsed, lastWidth = startWidth, startLeft, lastLeft;
     var appFrame;
 
+
+    // Handle Double Click Event
+    var widthBeforeLastDblClick = 0;
+    panel.ondblclick = () => {
+      var collapsed = $scope.isCollapsed();
+      $timeout(() => {
+        if(collapsed) {
+          $scope.setWidth(widthBeforeLastDblClick || $scope.defaultWidth);
+        } else {
+          widthBeforeLastDblClick = lastWidth;
+          $scope.setWidth(minWidth);
+        }
+        $scope.finishSettingWidth();
+        $scope.onResizeFinish()(lastWidth, lastLeft, $scope.isAtMaxWidth());
+      })
+    }
+
     function getParentRect() {
       return panel.parentNode.getBoundingClientRect();
     }
@@ -107,6 +125,14 @@ class PanelResizer {
       }
     }
 
+    $scope.isCollapsed = function() {
+      return lastWidth <= minWidth;
+    }
+
+    $scope.isAtMaxWidth = function() {
+      return lastWidth == getParentRect().width;
+    }
+
     $scope.setLeft = function(left) {
       panel.style.left = left + "px";
       lastLeft = left;
@@ -117,11 +143,7 @@ class PanelResizer {
         return;
       }
 
-      if(lastWidth <= minWidth) {
-        collapsed = true;
-      } else {
-        collapsed = false;
-      }
+      collapsed = $scope.isCollapsed();
       if(collapsed) {
         resizerColumn.classList.add("collapsed");
       } else {
@@ -214,7 +236,7 @@ class PanelResizer {
         resizerColumn.classList.remove("dragging");
         panel.classList.remove("no-selection");
 
-        let isMaxWidth = lastWidth == getParentRect().width;
+        let isMaxWidth = $scope.isAtMaxWidth();
 
         if($scope.onResizeFinish) {
           $scope.onResizeFinish()(lastWidth, lastLeft, isMaxWidth);

app/assets/templates/notes.html.haml

@@ -67,4 +67,4 @@
             %span{"ng-if" => "ctrl.sortBy == 'client_updated_at'"} Modified {{note.updatedAtString() || 'Now'}}
             %span{"ng-if" => "ctrl.sortBy != 'client_updated_at'"} {{note.createdAtString() || 'Now'}}
 
-  %panel-resizer{"panel-id" => "'notes-column'", "on-resize-finish" => "ctrl.onPanelResize", "control" => "ctrl.panelController", "hoverable" => "true", "collapsable" => "true"}
+  %panel-resizer{"panel-id" => "'notes-column'", "default-width" => 300, "on-resize-finish" => "ctrl.onPanelResize", "control" => "ctrl.panelController", "hoverable" => "true", "collapsable" => "true"}

app/assets/templates/tags.html.haml

@@ -33,4 +33,4 @@
           .info
             %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.archiveTag.title"}
 
-  %panel-resizer{"panel-id" => "'tags-column'", "on-resize-finish" => "ctrl.onPanelResize", "control" => "ctrl.panelController", "hoverable" => "true", "collapsable" => "true"}
+  %panel-resizer{"panel-id" => "'tags-column'", "default-width" => 150, "on-resize-finish" => "ctrl.onPanelResize", "control" => "ctrl.panelController", "hoverable" => "true", "collapsable" => "true"}