From 5c54983c24f1aa3ac8cd17880ef26773ffab5b66 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Tue, 24 Sep 2019 17:52:45 -0400
Subject: [PATCH] add searchbar to sketches dashboard view, adjust sketch list
 and asset list styling to have sticky header

---
 client/modules/IDE/components/Searchbar.jsx     |  2 +-
 client/modules/User/pages/DashboardView.jsx     |  2 ++
 client/styles/components/_asset-list.scss       | 14 +++++++++++++-
 client/styles/components/_dashboard-header.scss |  5 +++++
 client/styles/components/_searchbar.scss        | 17 ++++++++++++++---
 client/styles/components/_sketch-list.scss      |  5 +++++
 client/styles/layout/_dashboard.scss            |  8 ++++++++
 7 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/client/modules/IDE/components/Searchbar.jsx b/client/modules/IDE/components/Searchbar.jsx
index f3047b91..4f5f350e 100644
--- a/client/modules/IDE/components/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar.jsx
@@ -58,7 +58,7 @@ class Searchbar extends React.Component {
           className="searchbar__input"
           type="text"
           value={searchValue}
-          placeholder="Search files..."
+          placeholder="Search sketches..."
           onChange={this.handleSearchChange}
           onKeyUp={this.handleSearchEnter}
         />
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index af93db70..d6c02bfd 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -9,6 +9,7 @@ import Nav from '../../../components/Nav';
 
 import AssetList from '../../IDE/components/AssetList';
 import SketchList from '../../IDE/components/SketchList';
+import Searchbar from '../../IDE/components/Searchbar';
 
 import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher';
 
@@ -75,6 +76,7 @@ class DashboardView extends React.Component {
             <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
 
             <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
+            { currentTab === TabKey.sketches && <Searchbar /> }
           </div>
 
           <div className="dashboard-content">
diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss
index 5bf835b0..1df44f20 100644
--- a/client/styles/components/_asset-list.scss
+++ b/client/styles/components/_asset-list.scss
@@ -7,7 +7,7 @@
 
 .asset-table {
   width: 100%;
-  padding: #{10 / $base-font-size}rem 0;
+  padding-bottom: #{10 / $base-font-size}rem;
   max-height: 100%;
   border-spacing: 0;
   & .asset-list__delete-column {
@@ -22,8 +22,15 @@
   }
 
   & th {
+    padding-top: #{10 / $base-font-size}rem;
+    padding-bottom: #{15 / $base-font-size}rem;
     height: #{32 / $base-font-size}rem;
     font-weight: normal;
+    position: sticky;
+    top: #{15 / $base-font-size}rem;
+    @include themify() {
+      background-color: getThemifyVariable('background-color');
+    }
   }
 }
 
@@ -57,4 +64,9 @@
 
 .asset-table__total {
   padding: 0 #{20 / $base-font-size}rem;
+  position: sticky;
+  top: 0; 
+  @include themify() {
+    background-color: getThemifyVariable('background-color');
+  }
 }
diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss
index 6737e672..126f88a9 100644
--- a/client/styles/components/_dashboard-header.scss
+++ b/client/styles/components/_dashboard-header.scss
@@ -1,5 +1,10 @@
 .dashboard-header {
   padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction:column;
 }
 
 .dashboard-header__tabs {
diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss
index 47a5fc84..07e8585b 100644
--- a/client/styles/components/_searchbar.scss
+++ b/client/styles/components/_searchbar.scss
@@ -2,8 +2,8 @@
   position: absolute;
   display: flex;
   padding-left: #{17 / $base-font-size}rem;
-  right: #{50 / $base-font-size}rem;
-  top: #{14 / $base-font-size}rem;
+  right: #{66 / $base-font-size}rem;
+  top: #{65 / $base-font-size}rem;
 }
 
 .searchbar__input {
@@ -18,15 +18,26 @@
   }
 }
 
-.searchbar__button {
+button[type="submit"].searchbar__button {
+  background-color: unset;
   width: #{31 / $base-font-size}rem;
   height: #{36 / $base-font-size}rem;
   position: absolute;
   padding: 0;
+  border: 0;
   border-right: solid 1px;
   @include themify() {
     border-right-color: getThemifyVariable('input-border-color');
   }
+  &:enabled:hover {
+    background-color: unset;
+    @include themify() {
+      border-right-color: getThemifyVariable('input-border-color');
+    }
+    & g {
+      fill: unset;
+    }
+  }
 }
 
 .searchbar__icon {
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 730581cf..05e2bd4f 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -17,6 +17,11 @@
 
 .sketches-table thead th {
   height: #{32 / $base-font-size}rem;
+  position: sticky;
+  top: 0;
+  @include themify() {
+    background-color: getThemifyVariable('background-color');
+  }
 }
 
 .sketch-list__sort-button {
diff --git a/client/styles/layout/_dashboard.scss b/client/styles/layout/_dashboard.scss
index f928ffd3..74a94d23 100644
--- a/client/styles/layout/_dashboard.scss
+++ b/client/styles/layout/_dashboard.scss
@@ -6,4 +6,12 @@
     color: getThemifyVariable('primary-text-color');
     background-color: getThemifyVariable('background-color');
   }
+  height: 100%;
+}
+
+.dashboard-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
 }