feat: add tab switch to hide pages and sidebar (#560)

* feat: add tab switch to hide pages and sidebar

* fix: remove underline

* fix: use enum for tab switch state

* fix: use color variable for startup background

* fix: install color module

package.json

@@ -90,6 +90,7 @@
     "@patternplate/cli": "2.5.11",
     "@patternplate/render-styled-components": "2.1.6",
     "@types/chokidar": "1.7.5",
+    "@types/color": "3.0.0",
     "@types/deep-assign": "0.1.1",
     "@types/electron-devtools-installer": "2.0.3",
     "@types/electron-is-dev": "0.3.0",
@@ -148,6 +149,7 @@
     "@types/loader-utils": "1.1.3",
     "chokidar": "2.0.3",
     "cli": "1.0.1",
+    "color": "3.0.0",
     "common-dir": "2.0.2",
     "commondir": "1.0.1",
     "deep-assign": "2.0.0",

src/components/bug-report/index.tsx

@@ -10,7 +10,7 @@ export interface BugReportProps {
 
 const StyledBugReport = styled.div`
 	justify-self: right;
-	margin-right: -${getSpace(SpaceSize.XXL) * 3 - getSpace(SpaceSize.L)}px; // align to top right corner
+	margin-right: -${getSpace(SpaceSize.XXL) * 2 + getSpace(SpaceSize.S - SpaceSize.L)}px; // align to top right corner
 `;
 
 export const BugReport: React.StatelessComponent<BugReportProps> = props => (

src/components/chrome/index.tsx

@@ -16,7 +16,7 @@ const StyledChrome = styled.div`
 	align-items: center;
 	width: 100%;
 	height: 40px;
-	padding: ${getSpace(SpaceSize.XS)}px ${getSpace(SpaceSize.XXL) * 3}px;
+	padding: 0 ${getSpace(SpaceSize.XXL) * 2 + getSpace(SpaceSize.S)}px;
 	border-bottom: 1px solid ${Color.Grey90};
 	@media screen and (-webkit-min-device-pixel-ratio: 2) {
 		border-bottom-width: 0.5px;

src/components/icons/index.tsx

@@ -8,11 +8,13 @@ export enum IconName {
 	ArrowFillRight,
 	ArrowFillLeft,
 	Check,
-	Uncheck,
-	Robo,
+	Element,
+	Page,
 	Plus,
 	Pattern,
-	Search
+	Robo,
+	Search,
+	Uncheck
 }
 
 export interface IconProps {
@@ -101,6 +103,22 @@ const icons: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = {
 				d="M14.89 13.477l6.024 6.023-1.414 1.414-6.023-6.023a6 6 0 1 1 1.414-1.414zm-1.649-1.132a4 4 0 1 0-.896.896l.896-.896z"
 			/>
 		]
+	],
+	[IconName.Page]: [
+		[
+			<path
+				key="page"
+				d="M6 6h10c.552 0 1 .418 1 .933v12.134c0 .515-.448.933-1 .933H6c-.552 0-1-.418-1-.933V6.933C5 6.418 5.448 6 6 6zm1.5 4a.5.5 0 1 0 0 1h3a.5.5 0 1 0 0-1h-3zm0-2a.5.5 0 0 0 0 1h5a.5.5 0 1 0 0-1h-5zm0 4a.5.5 0 1 0 0 1h6a.5.5 0 1 0 0-1h-6zM19 4.5v13a.5.5 0 1 1-1 0V5H8.5a.5.5 0 0 1 0-1h10a.5.5 0 0 1 .5.5z"
+			/>
+		]
+	],
+	[IconName.Element]: [
+		[
+			<path
+				key="element"
+				d="M12.757 5.077l7.04 5.28a1 1 0 0 1 0 1.6l-7.04 5.28a1 1 0 0 1-1.2 0l-7.04-5.28a1 1 0 0 1 0-1.6l7.04-5.28a1 1 0 0 1 1.2 0zm7.127 8.63c.151.241.093.557-.133.729l-7.06 5.35a1 1 0 0 1-1.205.002l-7.29-5.494A.494.494 0 0 1 4.1 13.6l.003-.004a.506.506 0 0 1 .705-.095l6.677 5.035a1 1 0 0 0 1.207-.001l6.527-4.951a.459.459 0 0 1 .665.122z"
+			/>
+		]
 	]
 };
 

src/components/index.ts

@@ -30,6 +30,7 @@ export * from './search';
 export * from './select';
 export * from './space';
 export * from './splash-screen';
+export * from './tab-switch';
 export * from './teaser';
 export * from './tag';
 export * from './view-switch';

src/components/tab-switch/index.tsx

@@ -0,0 +1 @@
+export * from './tab-switch';

src/components/tab-switch/pattern.json

@@ -0,0 +1,8 @@
+{
+	"name": "tab-switch",
+	"displayName": "Tab Switch",
+	"description": "Tab to switch between Views",
+	"version": "1.0.0",
+	"tags": ["tab", "switch"],
+	"flag": "alpha"
+}

src/components/tab-switch/tab-switch.tsx

@@ -0,0 +1,46 @@
+import { Color } from '../colors';
+import { Copy } from '../copy';
+import { Icon, IconName, IconSize } from '../icons';
+import * as React from 'react';
+import { getSpace, SpaceSize } from '../space';
+import styled from 'styled-components';
+
+export interface TabSwitchProps {
+	active?: TabSwitchState;
+	icon?: IconName;
+	label?: string;
+	onClick?: React.MouseEventHandler<HTMLElement>;
+	title: string;
+}
+
+export enum TabSwitchState {
+	Active,
+	Default
+}
+
+const StyledTabSwitch = styled.div`
+	display: flex;
+	box-sizing: border-box;
+	padding: 0 ${getSpace(SpaceSize.XS)}px;
+	color: ${(props: TabSwitchProps) =>
+		props.active === TabSwitchState.Active ? Color.Blue : Color.Grey50};
+	height: 100%;
+	align-items: center;
+
+	&:active {
+		color: ${Color.Grey20};
+	}
+`;
+
+export const TabSwitch: React.SFC<TabSwitchProps> = props => (
+	<StyledTabSwitch
+		active={props.active}
+		icon={props.icon}
+		label={props.label}
+		onClick={props.onClick}
+		title={props.title}
+	>
+		{props.icon && <Icon name={props.icon} size={IconSize.S} />}
+		{props.label && <Copy>{props.label}</Copy>}
+	</StyledTabSwitch>
+);

src/components/view-switch/index.tsx

@@ -17,22 +17,6 @@ export interface ViewSwitchProps {
 	title: string;
 }
 
-export interface StyledViewButtonProps {
-	onClick?: React.MouseEventHandler<SVGElement>;
-}
-
-export interface ViewButtonProps {
-	onClick?: React.MouseEventHandler<SVGElement>;
-	rotateIcon?: boolean;
-	title: string;
-}
-
-export interface ViewTitleProps {
-	fontSize?: CopySize;
-	justify?: JustifyType;
-	title: string;
-}
-
 interface StyledIconProps extends IconProps {
 	rotate?: boolean;
 	visible: boolean;
@@ -56,21 +40,6 @@ const StyledViewSwitch = styled.div`
 		props.fontSize ? `${props.fontSize}px` : `${CopySize.S}px`};
 `;
 
-// tslint:disable-next-line:no-any
-const StyledViewButton: any = styled.div`
-	display: flex;
-	align-self: center;
-	justify-self: start;
-	font-size: ${`${CopySize.S}px`};
-	border-radius: ${getSpace(SpaceSize.XXS)}px;
-	&:hover {
-		background: ${Color.Grey90};
-	}
-	&:active {
-		background: ${Color.Grey80};
-	}
-`;
-
 const StyledTitle = styled.strong`
 	position: relative;
 	align-self: center;
@@ -103,25 +72,6 @@ const StyledIcons = styled(Icon)`
 	}
 `;
 
-export const ViewTitle: React.SFC<ViewTitleProps> = (props): JSX.Element => (
-	<StyledViewSwitch justify={props.justify} fontSize={props.fontSize}>
-		<StyledTitle>{props.title}</StyledTitle>
-	</StyledViewSwitch>
-);
-
-export const ViewButton: React.SFC<ViewButtonProps> = (props): JSX.Element => (
-	<StyledViewButton onClick={props.onClick}>
-		<StyledIcons
-			color={Color.Grey60}
-			size={IconSize.XS}
-			name={IconName.ArrowLeft}
-			rotate={props.rotateIcon}
-			visible={true}
-		/>
-		<StyledTitle grow>{props.title}</StyledTitle>
-	</StyledViewButton>
-);
-
 export const ViewSwitch: React.SFC<ViewSwitchProps> = (props): JSX.Element => (
 	<StyledViewSwitch justify={props.justify} fontSize={props.fontSize}>
 		<StyledIcons

src/container/chrome/chrome-container.tsx

@@ -2,11 +2,10 @@ import * as AlvaUtil from '../../alva-util';
 import { BugReport, Chrome, CopySize, ViewSwitch } from '../../components';
 import { ServerMessageType } from '../../message';
 import * as MobxReact from 'mobx-react';
-import { OverviewSwitchContainer } from './overview-switch-container';
+import { ChromeSwitch } from './chrome-switch';
 import * as React from 'react';
 import * as Sender from '../../message/client';
 import { ViewStore } from '../../store';
-import * as Types from '../../types';
 import * as uuid from 'uuid';
 
 interface InjectedChromeContainerProps {
@@ -58,22 +57,16 @@ export const ChromeContainer = MobxReact.inject('store')(
 					});
 				}}
 			>
-				{store.getActiveAppView() === Types.AlvaView.PageDetail ? (
-					<OverviewSwitchContainer />
-				) : (
-					<div />
-				)}
-				{store.getActiveAppView() === Types.AlvaView.PageDetail && (
-					<ViewSwitch
-						fontSize={CopySize.M}
-						justify="center"
-						leftVisible={index > 0}
-						rightVisible={index < pages.length - 1}
-						onLeftClick={previous}
-						onRightClick={next}
-						title={page ? page.getName() : ''}
-					/>
-				)}
+				<ChromeSwitch />
+				<ViewSwitch
+					fontSize={CopySize.M}
+					justify="center"
+					leftVisible={index > 0}
+					rightVisible={index < pages.length - 1}
+					onLeftClick={previous}
+					onRightClick={next}
+					title={page ? page.getName() : ''}
+				/>
 				<BugReport
 					title="Found a bug?"
 					onClick={() => {

src/container/chrome/chrome-switch.tsx

@@ -0,0 +1,30 @@
+import { IconName, TabSwitchState } from '../../components';
+import * as MobxReact from 'mobx-react';
+import * as React from 'react';
+import { TabSwitch } from '../../components';
+import { ViewStore } from '../../store';
+
+@MobxReact.inject('store')
+@MobxReact.observer
+export class ChromeSwitch extends React.Component {
+	public render(): JSX.Element | null {
+		const { store } = this.props as { store: ViewStore };
+
+		return (
+			<div style={{ display: 'flex', height: '100%' }}>
+				<TabSwitch
+					icon={IconName.Page}
+					title={'Pages'}
+					active={store.getShowPages() ? TabSwitchState.Active : TabSwitchState.Default}
+					onClick={() => store.setShowPages(!store.getShowPages())}
+				/>
+				<TabSwitch
+					icon={IconName.Element}
+					title={'Elements & Library'}
+					active={store.getShowLeftSidebar() ? TabSwitchState.Active : TabSwitchState.Default}
+					onClick={() => store.setShowLeftSidebar(!store.getShowLeftSidebar())}
+				/>
+			</div>
+		);
+	}
+}

src/electron/create-menu.ts

@@ -384,7 +384,7 @@ export function createMenu(ctx: MenuContext): void {
 				{
 					type: 'separator'
 				},
-				{
+        {
 					label: 'Previous Page',
 					accelerator: 'CmdOrCtrl+Alt+Left',
 					enabled: typeof ctx.store.getPreviousPage() !== 'undefined',
@@ -409,21 +409,31 @@ export function createMenu(ctx: MenuContext): void {
 					}
 				},
 				{
-					label: '&Show Elements & Components',
+					label: 'Show Pages',
 					type: 'checkbox',
-					checked: true,
+					checked: ctx.store.getShowPages(),
 					enabled: ctx.store.getActiveAppView() === Types.AlvaView.PageDetail,
 					accelerator: 'CmdOrCtrl+Alt+1',
 					click: (item, checked) => {
-						ctx.store.setShowLeftSidebar(item.checked);
+						ctx.store.setShowPages(item.checked);
 					}
 				},
 				{
-					label: '&Show Properties',
+					label: 'Show Elements and Library',
 					type: 'checkbox',
-					checked: true,
+					checked: ctx.store.getShowLeftSidebar(),
 					enabled: ctx.store.getActiveAppView() === Types.AlvaView.PageDetail,
 					accelerator: 'CmdOrCtrl+Alt+2',
+					click: (item, checked) => {
+						ctx.store.setShowLeftSidebar(item.checked);
+					}
+				},
+				{
+					label: 'Show Properties',
+					type: 'checkbox',
+					checked: ctx.store.getShowRightSidebar(),
+					enabled: ctx.store.getActiveAppView() === Types.AlvaView.PageDetail,
+					accelerator: 'CmdOrCtrl+Alt+3',
 					click: (item, checked) => {
 						ctx.store.setShowRightSidebar(item.checked);
 					}

src/electron/main.ts

@@ -1,6 +1,7 @@
 import * as Analyzer from '../analyzer';
 import { checkForUpdates } from './auto-updater';
-import { Color } from '../components';
+import * as ConvertColor from 'color';
+import { Color } from '../components/colors';
 import { createCompiler } from '../compiler/create-compiler';
 import { app, BrowserWindow, dialog, screen, shell } from 'electron';
 import * as electronIsDev from 'electron-is-dev';
@@ -544,7 +545,9 @@ async function createWindow(): Promise<void> {
 		minWidth: 780,
 		minHeight: 380,
 		titleBarStyle: 'hiddenInset',
-		backgroundColor: Color.Grey97,
+		backgroundColor: ConvertColor(Color.Grey97)
+			.hex()
+			.toString(),
 		title: 'Alva'
 	});