From 946ed40623a0315e249491845cc5f4b9c27b68fd Mon Sep 17 00:00:00 2001
From: Mo Bitar <me@bitar.io>
Date: Thu, 16 Aug 2018 09:15:00 -0500
Subject: [PATCH] Double click panel resizer to toggle collapse

---
 .../javascripts/app/controllers/tags.js       |  3 +-
 .../app/directives/views/panelResizer.js      | 34 +++++++++++++++----
 app/assets/templates/notes.html.haml          |  2 +-
 app/assets/templates/tags.html.haml           |  2 +-
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/tags.js b/app/assets/javascripts/app/controllers/tags.js
index 2017b7679..52d15de84 100644
--- a/app/assets/javascripts/app/controllers/tags.js
+++ b/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;
diff --git a/app/assets/javascripts/app/directives/views/panelResizer.js b/app/assets/javascripts/app/directives/views/panelResizer.js
index 646bc1ab4..07dd35fc2 100644
--- a/app/assets/javascripts/app/directives/views/panelResizer.js
+++ b/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);
diff --git a/app/assets/templates/notes.html.haml b/app/assets/templates/notes.html.haml
index 87e837568..ec2eebc92 100644
--- a/app/assets/templates/notes.html.haml
+++ b/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"}
diff --git a/app/assets/templates/tags.html.haml b/app/assets/templates/tags.html.haml
index 9fd9e3c80..66c401a33 100644
--- a/app/assets/templates/tags.html.haml
+++ b/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"}