feat: set search to sticky

meetalva · Sep 10, 2018 · fc1c8fe · fc1c8fe
1 parent b43b8c0
commit fc1c8fe
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx
@@ -20,6 +20,7 @@ export interface SearchProps {
 
 const StyledContainer = styled.div`
 	position: relative;
+	padding: 0 ${getSpace(SpaceSize.M)}px;
 `;
 
 const StyledSearch = styled.input`
@@ -61,8 +62,8 @@ const StyledSearch = styled.input`
 
 const StyledIcon = styled(Icon.Search)`
 	position: absolute;
-	left: 0;
-	top: ${getSpace(SpaceSize.M) - 1}px; // fix to propertly align icon
+	left: ${getSpace(SpaceSize.M)}px;
+	top: ${getSpace(SpaceSize.M) - 1}px; /* fix to propertly align icon */
 	pointer-events: none;
 `;
 

diff --git a/src/container/pattern-list/pattern-list-container.tsx b/src/container/pattern-list/pattern-list-container.tsx
@@ -4,6 +4,7 @@ import * as MobxReact from 'mobx-react';
 import * as Model from '../../model';
 import { PatternItemContainer } from './pattern-item-container';
 import * as React from 'react';
+import styled from 'styled-components';
 import * as Types from '../../types';
 import { ViewStore } from '../../store';
 
@@ -31,27 +32,39 @@ export class PatternListContainer extends React.Component {
 		const searchResult = project.getPatternSearch().query(store.getPatternSearchTerm());
 
 		return (
-			<div onDragStart={e => this.handleDragStart(e)}>
-				<Components.Space sizeBottom={Components.SpaceSize.XXS}>
-					<Components.Search
-						placeholder="Search Library"
-						onChange={e => store.setPatternSearchTerm(e.target.value)}
-						value={store.getPatternSearchTerm()}
-					/>
-				</Components.Space>
-				{store
-					.getPatternLibraries()
-					.map(library => (
-						<PatternLibraryContainer
-							key={library.getId()}
-							library={library}
-							searchResult={searchResult}
+			<div>
+				<div
+					style={{
+						position: 'sticky',
+						top: 0,
+						backgroundColor: Components.Color.Grey97,
+						marginLeft: -1 * Components.getSpace(Components.SpaceSize.M),
+						marginRight: -1 * Components.getSpace(Components.SpaceSize.M)
+					}}
+				>
+					<Components.Space sizeBottom={Components.SpaceSize.XXS}>
+						<Components.Search
+							placeholder="Search Library"
+							onChange={e => store.setPatternSearchTerm(e.target.value)}
+							value={store.getPatternSearchTerm()}
 						/>
-					))}
-				<ElementDragImage
-					element={store.getDraggedElement()}
-					innerRef={ref => (this.dragImg = ref)}
-				/>
+					</Components.Space>
+				</div>
+				<div onDragStart={e => this.handleDragStart(e)} style={{}}>
+					{store
+						.getPatternLibraries()
+						.map(library => (
+							<PatternLibraryContainer
+								key={library.getId()}
+								library={library}
+								searchResult={searchResult}
+							/>
+						))}
+					<ElementDragImage
+						element={store.getDraggedElement()}
+						innerRef={ref => (this.dragImg = ref)}
+					/>
+				</div>
 			</div>
 		);
 	}