Vastly improve the filter drawer

factore · Apr 1, 2016 · d38c608 · d38c608
1 parent 059edf8
commit d38c608
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 52 deletions.
diff --git a/...ets/javascripts/tenon/components/resource-index/components/custom/posts-filter-drawer.es6 b/...ets/javascripts/tenon/components/resource-index/components/custom/posts-filter-drawer.es6
@@ -2,40 +2,78 @@ window.ResourceIndexComponents.PostsFilterDrawer = ({ data, onChange }) => {
   const query = data.query;
 
   return (
-    <div className="panel panel--padded">
-      <TextField
-        label="Keywords"
-        name="q"
-        value={query.q}
-        onChange={onChange} />
-
-      <DatepickerField
-        label="Start Date"
-        name="start_date"
-        value={query.start_date}
-        onChange={onChange} />
-
-      <DatepickerField
-        label="End"
-        name="end_date"
-        value={query.end_date}
-        onChange={onChange} />
-
-      <SelectField
-        label="Published"
-        name="published"
-        value={query.published}
-        onChange={onChange}>
-        <option value="">All</option>
-        <option value="published">Published Only</option>
-        <option value="unpublished">Unpublished Only</option>
-      </SelectField>
-
-      <CheckBoxField
-        label="Hide Unpublished?"
-        name="hide_unpublished"
-        value={query.hide_unpublished}
-        onChange={onChange} />
+    <div>
+      <div className="panel panel--padded">
+        <TextField
+          label="Keywords"
+          name="q"
+          value={query.q}
+          onChange={onChange} />
+
+        <DatepickerField
+          label="Start Date"
+          name="start_date"
+          value={query.start_date}
+          onChange={onChange} />
+
+        <DatepickerField
+          label="End"
+          name="end_date"
+          value={query.end_date}
+          onChange={onChange} />
+
+        <SelectField
+          label="Published"
+          name="published"
+          value={query.published}
+          onChange={onChange}>
+          <option value="">All</option>
+          <option value="published">Published Only</option>
+          <option value="unpublished">Unpublished Only</option>
+        </SelectField>
+
+        <CheckBoxField
+          label="Hide Unpublished?"
+          name="hide_unpublished"
+          value={query.hide_unpublished}
+          onChange={onChange} />
+      </div>
+
+      <div className="panel panel--padded">
+        <TextField
+          label="Keywords"
+          name="q"
+          value={query.q}
+          onChange={onChange} />
+
+        <DatepickerField
+          label="Start Date"
+          name="start_date"
+          value={query.start_date}
+          onChange={onChange} />
+
+        <DatepickerField
+          label="End"
+          name="end_date"
+          value={query.end_date}
+          onChange={onChange} />
+
+        <SelectField
+          label="Published"
+          name="published"
+          value={query.published}
+          onChange={onChange}>
+          <option value="">All</option>
+          <option value="published">Published Only</option>
+          <option value="unpublished">Unpublished Only</option>
+        </SelectField>
+
+        <CheckBoxField
+          label="Hide Unpublished?"
+          name="hide_unpublished"
+          value={query.hide_unpublished}
+          onChange={onChange} />
+      </div>
     </div>
   );
 };
diff --git a/app/assets/javascripts/tenon/components/resource-index/components/default/dropdown.es6 b/app/assets/javascripts/tenon/components/resource-index/components/default/dropdown.es6
@@ -56,7 +56,9 @@ class Dropdown extends React.Component {
   }
 
   _onOutsideClick(e) {
-    if (ReactDOM.findDOMNode(this).contains(e.target)) {
+    const { isDropdownOpened } = this.state;
+
+    if (!isDropdownOpened || ReactDOM.findDOMNode(this).contains(e.target)) {
       return;
     }
 

diff --git a/...s/javascripts/tenon/components/resource-index/components/default/filter-drawer-toggle.es6 b/...s/javascripts/tenon/components/resource-index/components/default/filter-drawer-toggle.es6
@@ -3,8 +3,14 @@ window.ResourceIndexComponents.DefaultFilterDrawerToggle = (props) => {
     return <div></div>;
   }
 
+  const classNames = ['toolbar__action'];
+
+  if (props.className) {
+    classNames.push(props.className);
+  }
+
   return (
-    <div className={'toolbar__action ' + props.className || ''}>
+    <div className={classNames.join(' ')}>
       <a
         className="toolbar__action-icon"
         onClick={props.actions.toggleFilterDrawer}

diff --git a/app/assets/javascripts/tenon/components/resource-index/components/default/filtering.es6 b/app/assets/javascripts/tenon/components/resource-index/components/default/filtering.es6
@@ -9,6 +9,7 @@ class DefaultFiltering extends React.Component {
 
   render() {
     const { FilterDrawer, FilterOverlay } = this.props.childComponents;
+    const { toggleFilterDrawer } = this.props.actions;
 
     if (!FilterDrawer) {
       return <div></div>;
@@ -20,6 +21,14 @@ class DefaultFiltering extends React.Component {
           <FilterDrawer
             { ...this.props }
             onChange={(e) => this._changeFilter(e)} />
+
+          <div className="filter-drawer__submit">
+            <button
+              className="btn btn--block"
+              onClick={() => toggleFilterDrawer('off')}>
+              Search
+            </button>
+          </div>
         </div>
         <FilterOverlay { ...this.props } />
       </div>

diff --git a/...ets/javascripts/tenon/components/resource-index/components/default/quick-search-input.es6 b/...ets/javascripts/tenon/components/resource-index/components/default/quick-search-input.es6
@@ -19,12 +19,6 @@
             name="q"
             value={q}
             onChange={(e) => updateQuery({ q: e.target.value, page: 1 })}
-            onFocus={() => toggleQuickSearch('on')}
-            onBlur={(e) => {
-              if (e.target.value === '') {
-                toggleQuickSearch('off');
-              }
-            }}
             className="search-content__field"
             placeholder="Search"
             title="Search" />

diff --git a/...s/javascripts/tenon/components/resource-index/components/default/quick-search-overlay.es6 b/...s/javascripts/tenon/components/resource-index/components/default/quick-search-overlay.es6
@@ -14,16 +14,16 @@
 
     render() {
       const {
-        ui: { quickSearchOpen },
+        ui: { quickSearchOpen, filterDrawerOpen },
         childComponents: { QuickSearchInput, FilterDrawerToggle },
-        actions: { toggleQuickSearch, updateQuery }
+        actions: { toggleQuickSearch, toggleFilterDrawer, replaceQuery }
       } = this.props;
 
       const className = classNames({
         'toolbar': true,
         'toolbar--quicksearch': true,
         'toolbar--overlay-z1': true,
-        'toolbar--is-open': quickSearchOpen
+        'toolbar--is-open': quickSearchOpen || filterDrawerOpen
       });
 
       return (
@@ -36,7 +36,8 @@
                 onClick={(e) => {
                   e.preventDefault();
                   toggleQuickSearch('off');
-                  updateQuery({ q: '', page: 1 });
+                  toggleFilterDrawer('off');
+                  replaceQuery({ q: '', page: 1 });
                 }}>
                 <i className="material-icon">arrow_back</i>
                 &nbsp;

diff --git a/app/assets/javascripts/tenon/components/resource-index/containers/app.js b/app/assets/javascripts/tenon/components/resource-index/containers/app.js
@@ -17,10 +17,11 @@ export default class App extends Component {
       AddButton, ModalAddButton, ModalForm, ModalFields
     } = this.props.childComponents;
     const { addWithModal } = this.props;
+    const { quickSearchOpen, filterDrawerOpen, modalFormOpen } = this.props.ui;
     const outerClassNames = classNames({
-      'quick-search-open': this.props.ui.quickSearchOpen,
-      'filter-drawer-open': this.props.ui.filterDrawerOpen,
-      'modal-form-open': this.props.ui.modalFormOpen
+      'quick-search-open': quickSearchOpen || filterDrawerOpen,
+      'filter-drawer-open': filterDrawerOpen,
+      'modal-form-open': modalFormOpen
     });
 
     return (

diff --git a/app/assets/stylesheets/tenon/modules/filter-drawer.scss b/app/assets/stylesheets/tenon/modules/filter-drawer.scss
@@ -3,8 +3,33 @@
   @include drawer-transition;
   z-index: $z-layout-drawer;
   padding: $default-spacing;
+  padding-bottom: ($default-spacing * 2) + 75px;
+
+  @include bp-md {
+    padding-bottom: $default-spacing * 2;
+  }
+
+  .filter-drawer-open & {
+    left: 0;
+  }
+}
+
+.filter-drawer__submit {
+  @include drawer-transition;
+  position: fixed;
+  bottom: 0;
+  left: -100%;
+  border-top: 1px solid $light-border-color;
+  padding: ($default-spacing / 2) $default-spacing;
+  background-color: $body-bg-color;
+  width: 100%;
+  height: 75px;
+
+  @include bp-md {
+    display: none;
+  }
 
   .filter-drawer-open & {
-    @include bp-md { left: 0; }
+    left: 0;
   }
 }
diff --git a/app/assets/stylesheets/tenon/modules/toolbar.scss b/app/assets/stylesheets/tenon/modules/toolbar.scss
@@ -123,8 +123,15 @@
   background-color: $white;
 
   @include bp-md {
-    background-color: $toolbar-quicksearch-bg-color;
-    color: $toolbar-quicksearch-fg-color;
+    display: none;
+  }
+
+  .toolbar__action-icon {
+    color: $light-fg-color;
+
+    @include bp-md {
+      color: $toolbar-quicksearch-fg-color;
+    }
   }
 }