Add toolbar mockup

app/static/app/css/theme.scss

@@ -188,7 +188,7 @@ footer,
 	border-bottom-color: theme("border");
 }
 .theme-border{
-    border-color: theme("border");
+    border-color: theme("border") !important;
 }
 
 /* Highlight */

app/static/app/js/components/EditTaskForm.jsx

@@ -527,10 +527,10 @@ class EditTaskForm extends React.Component {
 
         {!this.state.presetActionPerforming ?
         <div className="btn-group presets-dropdown">
-            <button type="button" className="btn btn-default" title={_("Edit Task Options")} onClick={this.handleEditPreset}>
+            <button type="button" className="btn btn-sm btn-default" title={_("Edit Task Options")} onClick={this.handleEditPreset}>
             <i className="fa fa-sliders-h"></i> {_("Edit")}
             </button>
-            <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            <button type="button" className="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
                 <span className="caret"></span>
             </button>
             <ul className="dropdown-menu">

app/static/app/js/components/Paginator.jsx

@@ -1,44 +1,63 @@
 import React from 'react';
+import '../css/Paginator.scss';
 import { Link } from 'react-router-dom';
+import { _ } from '../classes/gettext';
 
 class Paginator extends React.Component {
+    constructor(props){
+        super(props);
+
+        this.state = {
+            showSearch: false
+        }
+    }
+
+    toggleSearch = () => {
+
+    }
+
     render() {
         const { itemsPerPage, totalItems, currentPage } = this.props;
         let paginator = null;
+        let toolbar = (
+            <ul className="pagination pagination-sm toolbar">
+                <li><a href="javascript:void(0);" onClick={this.toggleSearch} title={_("Search")}><i class="fa fa-search"></i></a></li>
+                <li><a href="javascript:void(0);"><i class="fa fa-filter" title={_("Filter")}></i></a></li>
+                <li><a href="javascript:void(0);"><i class="fa fa-sort-alpha-down" title={_("Sort")}></i></a></li>
+            </ul>
+        );
 
         if (itemsPerPage && itemsPerPage && totalItems > itemsPerPage){
             const numPages = Math.ceil(totalItems / itemsPerPage),
                   pages = [...Array(numPages).keys()]; // [0, 1, 2, ...numPages]
-
+            
             paginator = (
-                <div className={this.props.className}>
-                    <ul className="pagination pagination-sm">
-                        <li className={currentPage === 1 ? "disabled" : ""}>
-                          <Link to={{search: "?page=1"}}>
-                            <span>&laquo;</span>
-                          </Link>
-                        </li>
-                        {pages.map(page => {
-                            return (<li     
-                                key={page + 1}
-                                className={currentPage === (page + 1) ? "active" : ""}
-                            ><Link to={{search: "?page=" + (page + 1)}}>{page + 1}</Link></li>);
-                        })}
-                        <li className={currentPage === numPages ? "disabled" : ""}>
-                          <Link to={{search: "?page=" + numPages}}>
-                            <span>&raquo;</span>
-                          </Link>
-                        </li>
-                    </ul>
-                </div>
-                );
+                <ul className="pagination pagination-sm">
+                    <li className={currentPage === 1 ? "disabled" : ""}>
+                      <Link to={{search: "?page=1"}}>
+                        <span>&laquo;</span>
+                      </Link>
+                    </li>
+                    {pages.map(page => {
+                        return (<li     
+                            key={page + 1}
+                            className={currentPage === (page + 1) ? "active" : ""}
+                        ><Link to={{search: "?page=" + (page + 1)}}>{page + 1}</Link></li>);
+                    })}
+                    <li className={currentPage === numPages ? "disabled" : ""}>
+                      <Link to={{search: "?page=" + numPages}}>
+                        <span>&raquo;</span>
+                      </Link>
+                    </li>
+                </ul>
+              );
         }
 
-        return (<div>
-            {paginator}
-            {this.props.children}
-            {paginator}
-        </div>);
+        return [
+            <div className="text-right paginator">{toolbar}{paginator}</div>,
+            this.props.children,
+            <div className="text-right paginator">{paginator}</div>,
+        ];
     }
 }
 

app/static/app/js/components/ProjectList.jsx

@@ -21,7 +21,8 @@ class ProjectList extends Paginated {
             loading: true,
             refreshing: false,
             error: "",
-            projects: []
+            projects: [],
+            showSearch: false
         }
 
         this.PROJECTS_PER_PAGE = 10;
@@ -95,13 +96,23 @@ class ProjectList extends Paginated {
         this.refresh();
     }
 
+    toggleSearch = (e) => {
+        this.setState({showSearch: !this.state.showSearch});
+    }
+
+    search = () => {
+
+    }
+
+
     render() {
         if (this.state.loading){
             return (<div className="project-list text-center"><i className="fa fa-sync fa-spin fa-2x fa-fw"></i></div>);
         }else{
+            let test = (<button>hi</button>);
             return (<div className="project-list">
                 <ErrorMessage bind={[this, 'error']} />
-                <Paginator className="text-right" {...this.state.pagination} {...this.props}>
+                <Paginator {...this.state.pagination} {...this.props}>
                     <ul className={"list-group project-list " + (this.state.refreshing ? "refreshing" : "")}>
                         {this.state.projects.map(p => (
                             <ProjectListItem 

app/static/app/js/components/ProjectListItem.jsx

@@ -551,10 +551,6 @@ class ProjectListItem extends React.Component {
               <i className="glyphicon glyphicon-remove-circle"></i>
               Cancel Upload
             </button> 
-
-            <button type="button" className="btn btn-default btn-sm" onClick={this.viewMap}>
-              <i className="fa fa-globe"></i> {_("View Map")}
-            </button>
           </div>
 
           <div className="project-name">
@@ -591,11 +587,19 @@ class ProjectListItem extends React.Component {
                 </div>
               </div> : ""}
 
+              {numTasks > 0 ? 
+                [<i key="edit-icon" className='fa fa-globe'></i>
+                ,<a key="edit-text" href="javascript:void(0);" onClick={this.viewMap}>
+                  {_("View Map")}
+                </a>]
+              : ""}
+              
             {canEdit ? 
                 [<i key="edit-icon" className='far fa-edit'></i>
                 ,<a key="edit-text" href="javascript:void(0);" onClick={this.handleEditProject}> {_("Edit")}
                 </a>]
             : ""}
+
           </div>
         </div>
         <i className="drag-drop-icon fa fa-inbox"></i>

app/static/app/js/css/Paginator.scss

@@ -0,0 +1,8 @@
+.paginator{
+    .toolbar{
+        i{
+            opacity: 0.8;
+        }
+        margin-right: 8px;
+    }
+}