feat(component): move splash screen from preview to app main section,…

… create styled splash screen
meetalva · Dec 20, 2017 · b559d1b · b559d1b
1 parent 4e04463
commit b559d1b
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 55 deletions.
diff --git a/src/component/app.tsx b/src/component/app.tsx
@@ -1,25 +1,35 @@
+import Button, { Order } from '../lsg/patterns/button';
 import { Chrome } from './container/chrome';
-import { WebviewTag } from 'electron';
+import { colors } from '../lsg/patterns/colors';
+import Copy, { Size as CopySize } from '../lsg/patterns/copy';
+import { remote, WebviewTag } from 'electron';
 import ElementPane from '../lsg/patterns/panes/element-pane';
 import { ElementList } from './container/element_list';
+import * as FileExtraUtils from 'fs-extra';
 import globalStyles from '../lsg/patterns/global-styles';
+import { Headline } from '../lsg/patterns/headline';
 import { IconName, IconRegistry } from '../lsg/patterns/icons';
 import { JsonObject } from '../store/json';
 import Layout, { MainArea, SideBar } from '../lsg/patterns/layout';
+import Link from '../lsg/patterns/link';
 import { createMenu } from '../electron/menu';
 import * as MobX from 'mobx';
 import { observer } from 'mobx-react';
 import { Page } from '../store/page/page';
 import { PageList } from './container/page_list';
+import * as PathUtils from 'path';
 import { PatternListContainer } from './container/pattern_list';
 import PatternsPane from '../lsg/patterns/panes/patterns-pane';
 import PreviewPane from '../lsg/patterns/panes/preview-pane';
+import * as ProcessUtils from 'process';
 import { ProjectList } from './container/project_list';
 import PropertyPane from '../lsg/patterns/panes/property-pane';
 import { PropertyList } from './container/property_list';
+const { app, dialog } = remote;
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
-import Space, { Size } from '../lsg/patterns/space';
+import Space, { Size as SpaceSize } from '../lsg/patterns/space';
+import SplashScreen from '../lsg/patterns/splash-screen';
 import { Store } from '../store/store';
 
 globalStyles();
@@ -49,6 +59,8 @@ class App extends React.Component<AppProps> {
 		this.handleTabNaviagtionClick = this.handleTabNaviagtionClick.bind(this);
 		this.handleMainWindowClick = this.handleMainWindowClick.bind(this);
 		this.handleChromeToggle = this.handleChromeToggle.bind(this);
+		this.handleCreateNewSpaceClick = this.handleCreateNewSpaceClick.bind(this);
+		this.handleOpenSpaceClick = this.handleOpenSpaceClick.bind(this);
 	}
 
 	private handleMainWindowClick(): void {
@@ -68,40 +80,69 @@ class App extends React.Component<AppProps> {
 		} catch (error) {
 			// Ignored
 		}
-
-		return (
-			<Layout directionVertical handleClick={this.handleMainWindowClick}>
-				<Chrome
-					title={title}
-					handleClick={this.handleChromeToggle}
-					open={this.projectListVisible}
-				>
-					<ProjectList store={this.props.store} open={this.projectListVisible} />
-				</Chrome>
-				<MainArea>
-					<SideBar directionVertical hasPaddings>
-						<ElementPane>
-							<Space sizeBottom={Size.XL}>
+		if (project) {
+			return (
+				<Layout directionVertical handleClick={this.handleMainWindowClick}>
+					<Chrome
+						title={title}
+						handleClick={this.handleChromeToggle}
+						open={this.projectListVisible}
+					>
+						<ProjectList store={this.props.store} open={this.projectListVisible} />
+					</Chrome>
+					<MainArea>
+						<SideBar directionVertical hasPaddings>
+							<ElementPane>
 								<PageList store={this.props.store} />
+								<ElementList store={this.props.store} />
+							</ElementPane>
+							<PatternsPane>
+								<PatternListContainer store={this.props.store} />
+							</PatternsPane>
+						</SideBar>
+
+						<PreviewPane />
+						<SideBar directionVertical hasPaddings>
+							<PropertyPane>
+								<PropertyList store={this.props.store} />
+							</PropertyPane>
+						</SideBar>
+						<IconRegistry names={IconName} />
+					</MainArea>
+					{DevTools ? <DevTools /> : ''}
+				</Layout>
+			);
+		} else {
+			return (
+				<Layout directionVertical handleClick={this.handleMainWindowClick}>
+					<Chrome />
+					<MainArea>
+						<SplashScreen>
+							<Space sizeBottom={SpaceSize.L}>
+								<Headline textColor={colors.grey20} order={2}>
+									Getting started with Alva
+								</Headline>
+							</Space>
+							<Space sizeBottom={SpaceSize.XXXL}>
+								<Copy size={CopySize.M} textColor={colors.grey20}>
+									You can open an existing Alva space or create a new one based on our
+									designkit including some basic components to kickstart your project.
+								</Copy>
+							</Space>
+							<Space sizeBottom={SpaceSize.S}>
+								<Button handleClick={this.handleCreateNewSpaceClick} order={Order.Primary}>
+									Create new Alva space
+								</Button>
 							</Space>
-							<ElementList store={this.props.store} />
-						</ElementPane>
-						<PatternsPane>
-							<PatternListContainer store={this.props.store} />
-						</PatternsPane>
-					</SideBar>
-
-					<PreviewPane />
-					<SideBar directionVertical hasPaddings>
-						<PropertyPane>
-							<PropertyList store={this.props.store} />
-						</PropertyPane>
-					</SideBar>
-					<IconRegistry names={IconName} />
-				</MainArea>
-				{DevTools ? <DevTools /> : ''}
-			</Layout>
-		);
+							<Link color={colors.grey50} onClick={this.handleOpenSpaceClick}>
+								<Copy size={CopySize.S}>or open existing Alva space</Copy>
+							</Link>
+						</SplashScreen>
+					</MainArea>
+					{DevTools ? <DevTools /> : ''}
+				</Layout>
+			);
+		}
 	}
 
 	@MobX.action
@@ -113,6 +154,32 @@ class App extends React.Component<AppProps> {
 	protected handleChromeToggle(evt: React.MouseEvent<HTMLElement>): void {
 		this.projectListVisible = !this.projectListVisible;
 	}
+
+	protected handleCreateNewSpaceClick(): void {
+		let appPath: string = app.getAppPath().replace('.asar', '.asar.unpacked');
+		if (appPath.indexOf('node_modules') >= 0) {
+			appPath = ProcessUtils.cwd();
+		}
+
+		const designkitPath = PathUtils.join(appPath, 'build', 'designkit');
+		console.log(`Design kit path is: ${designkitPath}`);
+		dialog.showOpenDialog({ properties: ['openDirectory', 'createDirectory'] }, filePaths => {
+			if (filePaths.length <= 0) {
+				return;
+			}
+
+			FileExtraUtils.copySync(designkitPath, PathUtils.join(filePaths[0], 'designkit'));
+			store.openStyleguide(`${filePaths[0]}/designkit`);
+			store.openFirstPage();
+		});
+	}
+
+	protected handleOpenSpaceClick(): void {
+		dialog.showOpenDialog({ properties: ['openDirectory'] }, filePaths => {
+			store.openStyleguide(filePaths[0]);
+			store.openFirstPage();
+		});
+	}
 }
 
 const store = new Store();

diff --git a/src/component/presentation/preview.tsx b/src/component/presentation/preview.tsx
@@ -19,30 +19,11 @@ export class Preview extends React.Component<PreviewProps> {
 		this.patternFactories = {};
 	}
 
-	public render(): JSX.Element {
+	public render(): JSX.Element | null {
 		if (this.props.page) {
 			return this.createComponent(this.props.page.getRoot()) as JSX.Element;
-		} else {
-			return (
-				<div>
-					<h1>Welcome to Alva.</h1>
-					<p>
-						Alva is a radically new design tool that enables cross-functional teams to design
-						digital products.
-					</p>
-					<p>
-						To get started, you need a styleguide project (like a Patternplate project), or
-						alternatively, you can download a prototype styleguide (design kit) from:
-					</p>
-					<p>
-						<a href="https://github.com/meetalva/designkit/archive/master.zip">
-							https://github.com/meetalva/designkit
-						</a>
-					</p>
-					<p>Then, click File &gt; Open Styleguide to open it.</p>
-				</div>
-			);
 		}
+		return null;
 	}
 
 	/**