From a2f4cfd8bf2fcb4f95c92e00dc3a44aff9d7b58c Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Mon, 25 Apr 2016 16:13:07 -0700 Subject: [PATCH] Re-implemented filtering in the Sidbare --- app/components/RequestPane.js | 2 +- app/components/RequestUrlBar.js | 4 +- app/components/ResponsePane.js | 27 ++--- app/components/Sidebar.js | 148 +++++++++-------------- app/components/SidebarRequestGroupRow.js | 71 +++++++++++ app/css/components/dropdown.scss | 2 +- app/css/components/tabs.scss | 27 +++-- app/css/constants/dimensions.scss | 4 + 8 files changed, 168 insertions(+), 117 deletions(-) create mode 100644 app/components/SidebarRequestGroupRow.js diff --git a/app/components/RequestPane.js b/app/components/RequestPane.js index f5350d3993..44917e2da3 100644 --- a/app/components/RequestPane.js +++ b/app/components/RequestPane.js @@ -48,7 +48,7 @@ class RequestPane extends Component { - +
    • diff --git a/app/components/RequestUrlBar.js b/app/components/RequestUrlBar.js index 44aa46d8b9..fb07b1e4d3 100644 --- a/app/components/RequestUrlBar.js +++ b/app/components/RequestUrlBar.js @@ -21,7 +21,9 @@ class UrlInput extends Component {
      {METHODS.map(m => (
    • - +
      • ))}
    diff --git a/app/components/ResponsePane.js b/app/components/ResponsePane.js index 5011b9f895..b89e0ac9f0 100644 --- a/app/components/ResponsePane.js +++ b/app/components/ResponsePane.js @@ -1,8 +1,9 @@ import React, {Component, PropTypes} from 'react' import {Tab, Tabs, TabList, TabPanel} from 'react-tabs' -import StatusTag from '../components/StatusTag' +import Dropdown from '../components/base/Dropdown' import Editor from '../components/base/Editor' +import StatusTag from '../components/StatusTag' import SizeTag from '../components/SizeTag' import TimeTag from '../components/TimeTag' @@ -39,8 +40,17 @@ class ResponsePane extends Component { - - + + + + +
      +
      • +
      • +
      • +
    +     +     @@ -54,17 +64,6 @@ class ResponsePane extends Component { }} /> - - -
    diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js index 09ebd0ce77..331f9820ff 100644 --- a/app/components/Sidebar.js +++ b/app/components/Sidebar.js @@ -1,8 +1,7 @@ import React, {Component, PropTypes} from 'react' -import classnames from 'classnames' import WorkspaceDropdown from './../containers/WorkspaceDropdown' -import RequestGroupActionsDropdown from './../containers/RequestGroupActionsDropdown' import DebouncingInput from './base/DebouncingInput' +import SidebarRequestGroupRow from './SidebarRequestGroupRow' import SidebarRequestRow from './SidebarRequestRow' class Sidebar extends Component { @@ -10,105 +9,70 @@ class Sidebar extends Component { this.props.changeFilter(value); } - renderRequestGroupRow (child, parent) { - const { - filter, - activeRequestId, - addRequestToRequestGroup, - toggleRequestGroup - } = this.props; - - const requestGroup = child.doc.type === 'RequestGroup' ? child.doc : null; + _filterChildren (filter, children, extra = null) { + return children.filter(child => { + if (child.doc.type !== 'Request') { + return true; + } - if (!requestGroup) { - return child.children.map(c => this._renderChild(c, child)); - } + const request = child.doc; - // Don't show folder if it was not in the filter - if (filter && !child.children.length) { - return null; - } - - const isActive = activeRequestId && child.children.find(c => c.doc._id == activeRequestId); - - let folderIconClass = 'fa-folder'; - let expanded = !requestGroup.collapsed; - folderIconClass += !expanded ? '' : '-open'; - folderIconClass += isActive ? '' : '-o'; - - const sidebarItemClassNames = classnames( - 'sidebar__item', - 'sidebar__item--bordered', - {'sidebar__item--active': isActive} - ); - - child.children.sort((a, b) => a.doc._id > b.doc._id ? -1 : 1); - - return ( -
  • -
    -
    - -
    -
    - - -
    -
    -
      - {expanded && !child.children.length ? this.renderRequestRow() : null} - {!expanded ? null : child.children.map(c => this._renderChild(c, child))} -
    -
    • - ); - } - - renderRequestRow (child = null, parent = null) { - const request = child ? child.doc : null; - const requestGroup = parent ? parent.doc : null; - const {activeRequestId, activateRequest} = this.props; - const isActive = request && activeRequestId && request._id === activeRequestId || false; - - return ( - - ) - } - - _renderChild (child, parent = null) { - const {filter} = this.props; - - if (child.doc.type === 'Request') { - const r = child.doc; - const toMatch = `${r.method}❅${r.name}`.toLowerCase(); + const otherMatches = extra || ''; + const toMatch = `${request.method}❅${request.name}❅${otherMatches}`.toLowerCase(); const matchTokens = filter.toLowerCase().split(' '); + for (let i = 0; i < matchTokens.length; i++) { let token = `${matchTokens[i]}`; if (toMatch.indexOf(token) === -1) { // Filter failed. Don't render children - return null; + return false; } } - return this.renderRequestRow(child, parent) - } else if (child.doc.type === 'RequestGroup') { - return this.renderRequestGroupRow(child, parent); - } else { - console.error('Unknown child type', child.doc.type); - } + return true; + }) + } + + _renderChildren (children, requestGroup) { + const {filter} = this.props; + + const filteredChildren = this._filterChildren( + filter, + children, + requestGroup && requestGroup.name + ).sort((a, b) => a.doc._id > b.doc._id ? -1 : 1); + + return filteredChildren.map(child => { + if (child.doc.type === 'Request') { + return ( + + ) + } else if (child.doc.type === 'RequestGroup') { + const requestGroup = child.doc; + const isActive = !!child.children.find(c => c.doc._id === this.props.activeRequestId); + + return ( + + {this._renderChildren(child.children, requestGroup)} + + ) + } else { + console.error('Unknown child type', child.doc.type); + return null; + } + }) } render () { @@ -122,7 +86,7 @@ class Sidebar extends Component {
      - {children.map(c => this._renderChild(c))} + {this._renderChildren(children)}
    diff --git a/app/components/SidebarRequestGroupRow.js b/app/components/SidebarRequestGroupRow.js new file mode 100644 index 0000000000..38b5c2cc0a --- /dev/null +++ b/app/components/SidebarRequestGroupRow.js @@ -0,0 +1,71 @@ +import React, {Component, PropTypes} from 'react' +import classnames from 'classnames' +import RequestGroupActionsDropdown from './../containers/RequestGroupActionsDropdown' + +class SidebarRequestGroupRow extends Component { + render () { + const { + children, + numChildren, + requestGroup, + isActive, + toggleRequestGroup, + addRequestToRequestGroup + } = this.props; + + // If we are supposed to have children, but aren't passed any, we are probably + // filtering so don't render anything + if (numChildren >= 0 && children.length === 0) { + return null; + } + + let folderIconClass = 'fa-folder'; + let expanded = !requestGroup.collapsed; + folderIconClass += !expanded ? '' : '-open'; + folderIconClass += isActive ? '' : '-o'; + + const sidebarItemClassNames = classnames( + 'sidebar__item', + 'sidebar__item--bordered', + {'sidebar__item--active': isActive} + ); + + return ( +
  • +
    +
    + +
    +
    + + +
    +
    +
      + {expanded ? children : null} +
    +
    • + ); + } +} + +SidebarRequestGroupRow.propTypes = { + // Functions + toggleRequestGroup: PropTypes.func.isRequired, + addRequestToRequestGroup: PropTypes.func.isRequired, + + // Other + isActive: PropTypes.bool.isRequired, + numChildren: PropTypes.number.isRequired, + requestGroup: PropTypes.object.isRequired +}; + +export default SidebarRequestGroupRow; diff --git a/app/css/components/dropdown.scss b/app/css/components/dropdown.scss index 1cdc6c2eb5..3de31edd07 100644 --- a/app/css/components/dropdown.scss +++ b/app/css/components/dropdown.scss @@ -28,7 +28,7 @@ padding: $padding-sm $padding-md $padding-sm $padding-sm; width: 100%; display: block; - color: $font-super-light-bg; + color: $font-super-light-bg !important; &:hover { background: $hl-sm; diff --git a/app/css/components/tabs.scss b/app/css/components/tabs.scss index 7480531738..c3dfdc5d64 100644 --- a/app/css/components/tabs.scss +++ b/app/css/components/tabs.scss @@ -9,6 +9,7 @@ $border-color: $hl-md; align-items: flex-start; align-content: flex-start; height: $line-height-sm; + line-height: $line-height-sm; &::after { width: 100%; @@ -21,12 +22,16 @@ $border-color: $hl-md; .ReactTabs__Tab { align-self: flex-start; - padding: $padding-sm / 4 $padding-md; height: $line-height-sm; box-sizing: border-box; + border: 1px solid transparent; border-bottom: 1px solid $border-color; border-top: 0 !important; + * { + color: $hl-xxl; + } + &:first-child { border-left-color: transparent; } @@ -35,23 +40,29 @@ $border-color: $hl-md; outline: 0; } - & > button { - color: $hl-xxl; - position: relative; + & > * { height: 100%; width: 100%; - border-left: 1px solid transparent; - border-right: 1px solid transparent; + padding-left: $padding-md / 3; + padding-right: $padding-md / 3; + + &:first-child { + padding-left: $padding-md; + } + + &:last-child { + padding-right: $padding-md; + } } + } .ReactTabs__Tab--selected { border: 1px solid $border-color; border-bottom-color: transparent; - & > button { + * { color: inherit; - border: 0 !important; } & > button:hover { diff --git a/app/css/constants/dimensions.scss b/app/css/constants/dimensions.scss index bf01b3f3ea..b0ae578f43 100644 --- a/app/css/constants/dimensions.scss +++ b/app/css/constants/dimensions.scss @@ -37,6 +37,10 @@ $modal-width: 50rem; $breakpoint-md: 790px; $breakpoint-sm: 580px; +.txt-xs { + font-size: $font-size-xs; +} + .txt-sm { font-size: $font-size-sm; }