feat: update styling of preview resize handles (#410)

* fix(component): update resize pattern ux * fix(app): remove unneeded comma * fix(component): adjust resize hover styling * fix(component): add transition on hover
meetalva · May 7, 2018 · 41149a9 · 41149a9
1 parent da75608
commit 41149a9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/src/component/container/app.tsx b/src/component/container/app.tsx
@@ -163,7 +163,7 @@ export class App extends React.Component {
 								key="center"
 								id="preview"
 								previewFrame={`http://localhost:${store.getServerPort()}/preview.html`}
-							/>,
+							/>
 							<SideBar side="right" directionVertical hasBorder>
 								{store.getRightPane() === RightPane.Properties && (
 									<PropertyPane>

diff --git a/src/lsg/patterns/panes/preview-pane/index.tsx b/src/lsg/patterns/panes/preview-pane/index.tsx
@@ -22,34 +22,48 @@ const StyledPreviewWrapper = styled.div`
 `;
 
 const StyledPreviewResizer = styled.div`
-	width: 9px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 11px;
 	height: 100%;
 	cursor: ew-resize;
+	background-color: ${colors.blackAlpha13.toString()};
+	opacity: 0;
+	transition: opacity 0.15s ease-in-out;
+
 	&::after {
 		content: '';
 		position: absolute;
 		top: 50%;
 		transform: translateY(-50%);
 		height: 36px;
 		width: 3px;
-		margin: 3px;
+		margin: 4px;
 		border-radius: 2px;
 		background: ${colors.grey80.toString()};
 	}
 
 	&:hover {
+		opacity: 1;
 		&::after {
 			background: ${colors.grey60.toString()};
 		}
 	}
 	&:active {
+		opacity: 1;
 		&::after {
-			background: ${colors.blue40.toString()};
+			background: ${colors.white.toString()};
 		}
 	}
+	&:last-of-type {
+		right: 0;
+		left: auto;
+	}
 `;
 
 const BaseStyledPreviewPane = styled.div`
+	position: relative;
 	flex-grow: 1;
 	overflow: hidden;
 	background: ${colors.white.toString()};
@@ -83,11 +97,11 @@ export default class PreviewPane extends React.Component<PreviewPaneProps> {
 				onMouseMove={props.onMouseMove}
 				onMouseUp={props.onMouseUp}
 			>
-				<StyledPreviewResizer onMouseDown={props.onMouseDownLeft} />
 				<StyledPreviewPane width={props.width}>
+					<StyledPreviewResizer onMouseDown={props.onMouseDownLeft} />
 					<StyledPreviewFrame src={props.previewFrame} />
+					<StyledPreviewResizer onMouseDown={props.onMouseDownRight} />
 				</StyledPreviewPane>
-				<StyledPreviewResizer onMouseDown={props.onMouseDownRight} />
 			</StyledPreviewWrapper>
 		);
 	}