Move request to collapsed folder by opening on hover (#1442)

* Move request to collapsed folder by opening on hover * only show open tag if group is collapsed * height * efficiency
Kong · Apr 22, 2019 · a9e66f0 · a9e66f0
1 parent 497a708
commit a9e66f0
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/packages/insomnia-app/app/ui/components/sidebar/sidebar-request-group-row.js b/packages/insomnia-app/app/ui/components/sidebar/sidebar-request-group-row.js
@@ -22,6 +22,14 @@ class SidebarRequestGroupRow extends PureComponent {
     this._requestGroupActionsDropdown = n;
   }
 
+  _setExpandTagRef(n) {
+    this._expandTag = n;
+  }
+
+  getExpandTag() {
+    return this._expandTag;
+  }
+
   _handleCollapse() {
     const { requestGroup, handleSetRequestGroupCollapsed, isCollapsed } = this.props;
     handleSetRequestGroupCollapsed(requestGroup._id, !isCollapsed);
@@ -78,6 +86,15 @@ class SidebarRequestGroupRow extends PureComponent {
           <div className="sidebar__clickable">
             <i className={'sidebar__item__icon fa ' + folderIconClass} />
             <Highlight search={filter} text={requestGroup.name} />
+            <div
+              ref={this._setExpandTagRef}
+              className={classnames('sidebar__expand', {
+                'sidebar__expand-hint': isDraggingOver && isCollapsed,
+              })}>
+              <div className="tag tag--no-bg tag--small">
+                <span className="tag__inner">OPEN</span>
+              </div>
+            </div>
           </div>
         </button>,
       ),
@@ -181,6 +198,18 @@ function isAbove(monitor, component) {
   return hoveredTop > draggedTop;
 }
 
+function isOnExpandTag(monitor, component) {
+  const rect = component.getExpandTag().getBoundingClientRect();
+  const pointer = monitor.getClientOffset();
+
+  return (
+    rect.left <= pointer.x &&
+    pointer.x <= rect.right &&
+    rect.top <= pointer.y &&
+    pointer.y <= rect.bottom
+  );
+}
+
 const dragTarget = {
   drop(props, monitor, component) {
     const movingDoc = monitor.getItem().requestGroup || monitor.getItem().request;
@@ -194,7 +223,10 @@ const dragTarget = {
     }
   },
   hover(props, monitor, component) {
-    if (isAbove(monitor, component)) {
+    if (isOnExpandTag(monitor, component)) {
+      component.props.handleSetRequestGroupCollapsed(props.requestGroup._id, false);
+      component.setDragDirection(0);
+    } else if (isAbove(monitor, component)) {
       component.setDragDirection(1);
     } else {
       component.setDragDirection(-1);

diff --git a/packages/insomnia-app/app/ui/css/components/sidebar.less b/packages/insomnia-app/app/ui/css/components/sidebar.less
@@ -279,7 +279,7 @@
 
   .sidebar__clickable {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
     height: 100%;
 
@@ -333,6 +333,20 @@
     padding-left: calc(@padding-sm + @padding-md * 6);
   }
 
+  // ~~~~~~~~~~~~~~~ //
+  // Sidebar Expand  //
+  // ~~~~~~~~~~~~~~~ //
+
+  .sidebar__expand {
+    display: none;
+    height: 100%;
+
+    &.sidebar__expand-hint {
+      display: flex;
+      align-items: center;
+    }
+  }
+
   // ~~~~~~~~~~~~~~~ //
   // Sidebar Actions //
   // ~~~~~~~~~~~~~~~ //