feat: move page overview to sidebar (#554)

* fix: rename preview-tile to page-tile

* feat: move pages to left sidebar

* feat: update styling of page tile

* feat: update styling of add page button

* fix: remove unneeded page view code

* fix: set app focus on page or element selection

* fix: don’t remove last page

* feat: introduce element and page focus state

* fix: use focus-item object to handle type

* feat: add focus styling for page tile

* feat: add focused state to elements

* fix: update styling of focused page tile

* fix: fix minor styling fixes

* feat: add option to hide page sidebar

* fix: set focused item on project open

* fix: make root element not editable

* fix: show default cursor on non-editable elements

* fix: update add button demo

* fix: rename add page to add page button

* fix: remove unneeded code

* fix: update menu item names

* fix: use capabilities for elements

* fix: solve merge conflict

src/components/add-page-button/demo.tsx

@@ -0,0 +1,11 @@
+import DemoContainer from '../demo-container';
+import * as React from 'react';
+import { AddPageButton } from '.';
+
+const AddPageButtonDemo: React.StatelessComponent = (): JSX.Element => (
+	<DemoContainer title="Add Page Button">
+		<AddPageButton />
+	</DemoContainer>
+);
+
+export default AddPageButtonDemo;

src/components/add-page-button/index.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Color } from '../colors';
+import { Copy } from '../copy';
+import { getSpace, SpaceSize } from '../space';
+import { Icon, IconName, IconSize } from '../icons';
+import styled from 'styled-components';
+
+export interface AddPageButtonProps {
+	onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+const StyledAddPageButton = styled.button`
+	position: relative;
+	box-sizing: border-box;
+	height: 60px;
+	width: 100%;
+	border: 1px solid ${Color.Grey80};
+	border-radius: 6px;
+	background-color: transparent;
+	margin: ${getSpace(SpaceSize.S)}px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: border 0.2s;
+	user-select: none;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:hover {
+		border: 1px solid ${Color.Grey60};
+	}
+`;
+
+const StyledIcon = styled(Icon)`
+	margin-right: ${getSpace(SpaceSize.XS)}px;
+`;
+
+export const AddPageButton: React.SFC<AddPageButtonProps> = props => (
+	<StyledAddPageButton onClick={props.onClick}>
+		<StyledIcon name={IconName.Plus} size={IconSize.XS} color={Color.Grey60} />
+		<Copy textColor={Color.Grey50}>Add Page</Copy>
+	</StyledAddPageButton>
+);

src/components/add-page-button/pattern.json

@@ -0,0 +1,8 @@
+{
+	"name": "add-page-button",
+	"description": "Button to add pages",
+	"displayName": "Add Page Button",
+	"version": "1.0.0",
+	"tags": ["atom", "button"],
+	"flag": "alpha"
+}

src/components/colors/index.tsx

@@ -5,6 +5,7 @@ export enum Color {
 	BlueAlpha40 = 'rgba(0, 112, 214, .4)',
 	Blue20 = 'rgb(51, 141, 222)',
 	Blue40 = 'rgb(102, 169, 230)',
+	Blue60 = 'rgb(153, 198, 239)',
 	Blue80 = 'rgb(212, 226, 242)',
 	Green = 'rgb(91, 226, 122)',
 	Grey20 = 'rgb(52, 61, 69)',

src/components/element/demo.tsx

@@ -1,5 +1,5 @@
 import DemoContainer from '../demo-container';
-import { Element, ElementState } from './index';
+import { Element, ElementCapability, ElementState } from './index';
 import * as React from 'react';
 
 // tslint:disable-next-line:no-empty
@@ -9,8 +9,7 @@ const CHILD = (
 	<Element
 		id="1"
 		state={ElementState.Default}
-		draggable={false}
-		mayOpen={false}
+		capabilities={[ElementCapability.Editable]}
 		open={false}
 		onChange={NOOP}
 		title="Child Element"
@@ -25,8 +24,7 @@ const ElementDemo: React.StatelessComponent<void> = (): JSX.Element => (
 			<Element
 				id="1"
 				state={ElementState.Default}
-				draggable={false}
-				mayOpen={false}
+				capabilities={[ElementCapability.Editable]}
 				open={false}
 				onChange={NOOP}
 				title="Element"
@@ -37,8 +35,7 @@ const ElementDemo: React.StatelessComponent<void> = (): JSX.Element => (
 			Active
 			<Element
 				id="2"
-				draggable={false}
-				mayOpen={false}
+				capabilities={[ElementCapability.Editable]}
 				open={false}
 				onChange={NOOP}
 				state={ElementState.Active}
@@ -50,8 +47,7 @@ const ElementDemo: React.StatelessComponent<void> = (): JSX.Element => (
 			Highlighted
 			<Element
 				id="2"
-				draggable={false}
-				mayOpen={false}
+				capabilities={[ElementCapability.Editable]}
 				open={false}
 				onChange={NOOP}
 				state={ElementState.Highlighted}
@@ -63,8 +59,7 @@ const ElementDemo: React.StatelessComponent<void> = (): JSX.Element => (
 			Placeholder Highlighted
 			<Element
 				id="2"
-				draggable={false}
-				mayOpen={false}
+				capabilities={[ElementCapability.Editable]}
 				open={false}
 				onChange={NOOP}
 				placeholderHighlighted={true}
@@ -77,8 +72,7 @@ const ElementDemo: React.StatelessComponent<void> = (): JSX.Element => (
 			Editable
 			<Element
 				id="2"
-				draggable={false}
-				mayOpen={false}
+				capabilities={[ElementCapability.Editable]}
 				open={false}
 				onChange={NOOP}
 				state={ElementState.Editable}
@@ -90,8 +84,7 @@ const ElementDemo: React.StatelessComponent<void> = (): JSX.Element => (
 			May open, closed
 			<Element
 				id="3"
-				draggable={false}
-				mayOpen={true}
+				capabilities={[ElementCapability.Editable, ElementCapability.Openable]}
 				onChange={NOOP}
 				open={false}
 				title="Element"
@@ -105,8 +98,7 @@ const ElementDemo: React.StatelessComponent<void> = (): JSX.Element => (
 			May open, opened
 			<Element
 				id="3"
-				draggable={false}
-				mayOpen={true}
+				capabilities={[ElementCapability.Editable, ElementCapability.Openable]}
 				onChange={NOOP}
 				open
 				title="Element"
@@ -120,8 +112,7 @@ const ElementDemo: React.StatelessComponent<void> = (): JSX.Element => (
 			With child, active and open
 			<Element
 				id="4"
-				draggable={false}
-				mayOpen={true}
+				capabilities={[ElementCapability.Editable, ElementCapability.Openable]}
 				onChange={NOOP}
 				open
 				title="Element"

src/components/element/index.tsx

@@ -18,15 +18,21 @@ export enum ElementState {
 	Editable = 'editable',
 	Active = 'active',
 	Disabled = 'disabled',
-	Highlighted = 'highlighted'
+	Highlighted = 'highlighted',
+	Focused = 'focused'
+}
+
+export enum ElementCapability {
+	Draggable = 'draggable',
+	Editable = 'editable',
+	Openable = 'openable'
 }
 
 export interface ElementProps {
+	capabilities: ElementCapability[];
 	children?: React.ReactNode;
-	draggable: boolean;
 	dragging: boolean;
 	id: string;
-	mayOpen: boolean;
 	onChange: React.FormEventHandler<HTMLInputElement>;
 	open: boolean;
 	placeholderHighlighted?: boolean;
@@ -45,6 +51,7 @@ interface StyledIconProps {
 
 interface LabelContentProps {
 	active: boolean;
+	editable?: boolean;
 }
 
 export interface StyledElementChildProps {
@@ -178,7 +185,8 @@ const LabelContent = styled.div`
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	width: 100%;
-	cursor: ${(props: LabelContentProps) => (props.active ? 'text' : 'default')};
+	cursor: ${(props: LabelContentProps) => (props.active && props.editable ? 'text' : 'default')};
+	user-select: none;
 `;
 
 const StyledSeamlessInput = styled.input`
@@ -227,15 +235,18 @@ class SeamlessInput extends React.Component<SeamlessInputProps> {
 }
 
 export const Element: React.StatelessComponent<ElementProps> = props => (
-	<StyledElement {...{ [ElementAnchors.element]: props.id }} draggable={props.draggable}>
+	<StyledElement
+		{...{ [ElementAnchors.element]: props.id }}
+		draggable={props.capabilities.includes(ElementCapability.Draggable)}
+	>
 		{props.dragging && (
 			<StyledPlaceholder
 				{...{ [ElementAnchors.placeholder]: true }}
 				visible={Boolean(props.placeholderHighlighted)}
 			/>
 		)}
 		<StyledElementLabel state={props.state}>
-			{props.mayOpen && (
+			{props.capabilities.includes(ElementCapability.Openable) && (
 				<StyledIcon
 					dataIcon={props.id}
 					name={IconName.ArrowFillRight}
@@ -245,7 +256,8 @@ export const Element: React.StatelessComponent<ElementProps> = props => (
 					active={props.state === ElementState.Active}
 				/>
 			)}
-			{props.state === ElementState.Editable ? (
+			{props.state === ElementState.Editable &&
+			props.capabilities.includes(ElementCapability.Editable) ? (
 				<SeamlessInput
 					{...{ [ElementAnchors.label]: true }}
 					value={props.title}
@@ -256,6 +268,7 @@ export const Element: React.StatelessComponent<ElementProps> = props => (
 			) : (
 				<LabelContent
 					active={props.state === ElementState.Active}
+					editable={props.capabilities.includes(ElementCapability.Editable)}
 					{...{ [ElementAnchors.label]: true }}
 				>
 					{props.title}

src/components/index.ts

@@ -1,11 +1,11 @@
+export * from './add-page-button';
 export * from './bug-report';
 export * from './button';
 export * from './chrome';
 export * from './colors';
 export * from './copy';
 export * from './create-select';
 export * from './element';
-export * from './floating-button';
 export * from './fonts';
 export * from './global-styles';
 export * from './headline';
@@ -15,9 +15,9 @@ export * from './layout';
 export * from './link';
 export * from './list';
 export * from './overlay';
+export * from './page-tile';
 export * from './panes';
 export * from './pattern-list';
-export * from './preview-tile';
 export * from './property-input';
 export * from './property-item';
 export * from './property-item-asset';