add searchbar to sketches dashboard view, adjust sketch list and asset list styling to have sticky header

This commit is contained in:
Cassie Tarakajian 2019-09-24 17:52:45 -04:00
parent 5900e62904
commit 5c54983c24
7 changed files with 48 additions and 5 deletions

View file

@ -58,7 +58,7 @@ class Searchbar extends React.Component {
className="searchbar__input" className="searchbar__input"
type="text" type="text"
value={searchValue} value={searchValue}
placeholder="Search files..." placeholder="Search sketches..."
onChange={this.handleSearchChange} onChange={this.handleSearchChange}
onKeyUp={this.handleSearchEnter} onKeyUp={this.handleSearchEnter}
/> />

View file

@ -9,6 +9,7 @@ import Nav from '../../../components/Nav';
import AssetList from '../../IDE/components/AssetList'; import AssetList from '../../IDE/components/AssetList';
import SketchList from '../../IDE/components/SketchList'; import SketchList from '../../IDE/components/SketchList';
import Searchbar from '../../IDE/components/Searchbar';
import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher'; import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher';
@ -75,6 +76,7 @@ class DashboardView extends React.Component {
<h2 className="dashboard-header__header__title">{this.ownerName()}</h2> <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
<DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} /> <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
{ currentTab === TabKey.sketches && <Searchbar /> }
</div> </div>
<div className="dashboard-content"> <div className="dashboard-content">

View file

@ -7,7 +7,7 @@
.asset-table { .asset-table {
width: 100%; width: 100%;
padding: #{10 / $base-font-size}rem 0; padding-bottom: #{10 / $base-font-size}rem;
max-height: 100%; max-height: 100%;
border-spacing: 0; border-spacing: 0;
& .asset-list__delete-column { & .asset-list__delete-column {
@ -22,8 +22,15 @@
} }
& th { & th {
padding-top: #{10 / $base-font-size}rem;
padding-bottom: #{15 / $base-font-size}rem;
height: #{32 / $base-font-size}rem; height: #{32 / $base-font-size}rem;
font-weight: normal; 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 { .asset-table__total {
padding: 0 #{20 / $base-font-size}rem; padding: 0 #{20 / $base-font-size}rem;
position: sticky;
top: 0;
@include themify() {
background-color: getThemifyVariable('background-color');
}
} }

View file

@ -1,5 +1,10 @@
.dashboard-header { .dashboard-header {
padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem; 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 { .dashboard-header__tabs {

View file

@ -2,8 +2,8 @@
position: absolute; position: absolute;
display: flex; display: flex;
padding-left: #{17 / $base-font-size}rem; padding-left: #{17 / $base-font-size}rem;
right: #{50 / $base-font-size}rem; right: #{66 / $base-font-size}rem;
top: #{14 / $base-font-size}rem; top: #{65 / $base-font-size}rem;
} }
.searchbar__input { .searchbar__input {
@ -18,15 +18,26 @@
} }
} }
.searchbar__button { button[type="submit"].searchbar__button {
background-color: unset;
width: #{31 / $base-font-size}rem; width: #{31 / $base-font-size}rem;
height: #{36 / $base-font-size}rem; height: #{36 / $base-font-size}rem;
position: absolute; position: absolute;
padding: 0; padding: 0;
border: 0;
border-right: solid 1px; border-right: solid 1px;
@include themify() { @include themify() {
border-right-color: getThemifyVariable('input-border-color'); 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 { .searchbar__icon {

View file

@ -17,6 +17,11 @@
.sketches-table thead th { .sketches-table thead th {
height: #{32 / $base-font-size}rem; height: #{32 / $base-font-size}rem;
position: sticky;
top: 0;
@include themify() {
background-color: getThemifyVariable('background-color');
}
} }
.sketch-list__sort-button { .sketch-list__sort-button {

View file

@ -6,4 +6,12 @@
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('primary-text-color');
background-color: getThemifyVariable('background-color'); background-color: getThemifyVariable('background-color');
} }
height: 100%;
}
.dashboard-content {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
} }