feat: introduce layout switch

src/components/bug-report/index.tsx

@@ -1,6 +1,5 @@
 import { Button, ButtonOrder, ButtonSize } from '../button';
 import * as React from 'react';
-import { getSpace, SpaceSize } from '../space';
 import styled from 'styled-components';
 
 export interface BugReportProps {
@@ -10,7 +9,7 @@ export interface BugReportProps {
 
 const StyledBugReport = styled.div`
 	justify-self: right;
-	margin-right: -${getSpace(SpaceSize.XXL) * 2 + getSpace(SpaceSize.S - SpaceSize.L)}px; // align to top right corner
+	-webkit-app-region: no-drag;
 `;
 
 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: 0 ${getSpace(SpaceSize.XXL) * 2 + getSpace(SpaceSize.S)}px;
+	padding: 0 ${getSpace(SpaceSize.M)}px;
 	border-bottom: 1px solid ${Color.Grey90};
 	@media screen and (-webkit-min-device-pixel-ratio: 2) {
 		border-bottom-width: 0.5px;

src/components/index.ts

@@ -13,6 +13,7 @@ export * from './headline';
 export * from './icons';
 export * from './image';
 export * from './layout';
+export * from './layout-switch';
 export * from './link';
 export * from './list';
 export * from './overlay';
@@ -31,7 +32,6 @@ 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/layout-switch/index.tsx

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

src/components/layout-switch/layout-switch.tsx

@@ -0,0 +1,71 @@
+import { Color } from '../colors';
+import { IconSize } from '../icons';
+import * as React from 'react';
+import { ChevronDown, Layout } from 'react-feather';
+import { getSpace, SpaceSize } from '../space';
+import styled from 'styled-components';
+
+export interface LayoutSwitchProps {
+	active?: boolean;
+	onPrimaryClick?: React.MouseEventHandler<HTMLElement>;
+	onSecondaryClick?: React.MouseEventHandler<HTMLElement>;
+	children?: React.ReactNode;
+}
+
+export enum TLayoutSwitchState {
+	Active,
+	Default
+}
+
+const StyledLayoutSwitch = styled.div`
+	display: flex;
+	box-sizing: border-box;
+	border-radius: 3px;
+	background: linear-gradient(to bottom, ${Color.White} 0%, ${Color.Grey97});
+	height: 21px;
+	width: fit-content;
+	box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 0.5px 2px 0 rgba(0, 0, 0, 0.3);
+	-webkit-app-region: no-drag;
+`;
+
+const StyledPrimaryContainer = styled.div`
+	display: flex;
+	align-items: center;
+	height: 100%;
+	padding: 0 ${getSpace(SpaceSize.XS + SpaceSize.XXS)}px;
+	border-radius: 3px 0 0 3px;
+	background: ${(props: LayoutSwitchProps) => (props.active ? Color.Grey50 : 'transparent')};
+	color: ${(props: LayoutSwitchProps) => (props.active ? Color.White : Color.Grey50)};
+
+	&:active {
+		background: ${(props: LayoutSwitchProps) => (props.active ? Color.Grey36 : Color.Grey90)};
+	}
+`;
+
+const StyledSecondaryContainer = styled.label`
+	display: flex;
+	align-items: center;
+	height: 100%;
+	padding: 0 ${getSpace(SpaceSize.XXS)}px;
+	border-left: 1px solid ${Color.Grey80};
+	@media screen and (-webkit-min-device-pixel-ratio: 2) {
+		border-left-width: 0.5px;
+	}
+	border-radius: 0 3px 3px 0;
+	color: ${Color.Grey50};
+
+	&:active {
+		background: ${Color.Grey90};
+	}
+`;
+
+export const LayoutSwitch: React.SFC<LayoutSwitchProps> = props => (
+	<StyledLayoutSwitch>
+		<StyledPrimaryContainer onClick={props.onPrimaryClick} active={props.active}>
+			<Layout size={IconSize.XS} strokeWidth={1.5} />
+		</StyledPrimaryContainer>
+		<StyledSecondaryContainer onClick={props.onSecondaryClick}>
+			<ChevronDown size={IconSize.XXS} style={{ zIndex: 10, pointerEvents: 'none' }} />
+		</StyledSecondaryContainer>
+	</StyledLayoutSwitch>
+);

src/components/layout-switch/pattern.json

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

src/components/pattern-list/index.tsx

@@ -1,7 +1,7 @@
 import { Color } from '../colors';
 import { IconSize } from '../icons';
 import * as React from 'react';
-import { Layout } from 'react-feather';
+import { Box } from 'react-feather';
 import { getSpace, SpaceSize } from '../space';
 import styled from 'styled-components';
 
@@ -52,7 +52,7 @@ const StyledPatternListItem = styled.div`
 		props.draggable ? 'cursor: move;' : props.onClick ? 'cursor: pointer;' : ''};
 `;
 
-const StyledIcon = styled(Layout)`
+const StyledIcon = styled(Box)`
 	margin-top: ${getSpace(SpaceSize.XS)}px;
 	margin-right: ${getSpace(SpaceSize.XS + SpaceSize.XXS)}px;
 	flex: 0 0 ${IconSize.XS}px;

src/container/chrome/chrome-switch.tsx

@@ -1,8 +1,7 @@
-import { IconSize, TabSwitchState } from '../../components';
+import { layoutMenu } from '../../electron/context-menus';
 import * as MobxReact from 'mobx-react';
 import * as React from 'react';
-import { File, Layers, Sliders } from 'react-feather';
-import { TabSwitch } from '../../components';
+import { getSpace, SpaceSize, LayoutSwitch } from '../../components';
 import { ViewStore } from '../../store';
 
 @MobxReact.inject('store')
@@ -11,26 +10,24 @@ export class ChromeSwitch extends React.Component {
 	public render(): JSX.Element | null {
 		const { store } = this.props as { store: ViewStore };
 
+		const next =
+			store.getShowPages() && store.getShowLeftSidebar() && store.getShowRightSidebar()
+				? false
+				: true;
+
 		return (
-			<div style={{ display: 'flex', height: '100%' }}>
-				<TabSwitch
-					active={store.getShowPages() ? TabSwitchState.Active : TabSwitchState.Default}
-					onClick={() => store.setShowPages(!store.getShowPages())}
-				>
-					<File size={IconSize.XS} />
-				</TabSwitch>
-				<TabSwitch
-					active={store.getShowLeftSidebar() ? TabSwitchState.Active : TabSwitchState.Default}
-					onClick={() => store.setShowLeftSidebar(!store.getShowLeftSidebar())}
-				>
-					<Layers size={IconSize.XS} />
-				</TabSwitch>
-				<TabSwitch
-					active={store.getShowRightSidebar() ? TabSwitchState.Active : TabSwitchState.Default}
-					onClick={() => store.setShowRightSidebar(!store.getShowRightSidebar())}
-				>
-					<Sliders size={IconSize.XS} />
-				</TabSwitch>
+			<div style={{ marginLeft: getSpace(SpaceSize.XXL * 2) }}>
+				<LayoutSwitch
+					active={!next}
+					onPrimaryClick={() => {
+						store.setShowPages(next);
+						store.setShowLeftSidebar(next);
+						store.setShowRightSidebar(next);
+					}}
+					onSecondaryClick={() => {
+						layoutMenu(store);
+					}}
+				/>
 			</div>
 		);
 	}

src/electron/context-menus.ts

@@ -97,3 +97,37 @@ export function elementMenu(element: Element, store: ViewStore): void {
 
 	remote.Menu.buildFromTemplate(template).popup({});
 }
+
+export function layoutMenu(store: ViewStore): void {
+	const template: MenuItemConstructorOptions[] = [
+		{
+			label: 'Pages',
+			type: 'checkbox',
+			checked: store.getShowPages(),
+			enabled: store.getActiveAppView() === Types.AlvaView.PageDetail,
+			click: (item, checked) => {
+				store.setShowPages(item.checked);
+			}
+		},
+		{
+			label: 'Elements',
+			type: 'checkbox',
+			checked: store.getShowLeftSidebar(),
+			enabled: store.getActiveAppView() === Types.AlvaView.PageDetail,
+			click: (item, checked) => {
+				store.setShowLeftSidebar(item.checked);
+			}
+		},
+		{
+			label: 'Properties',
+			type: 'checkbox',
+			checked: store.getShowRightSidebar(),
+			enabled: store.getActiveAppView() === Types.AlvaView.PageDetail,
+			click: (item, checked) => {
+				store.setShowRightSidebar(item.checked);
+			}
+		}
+	];
+
+	remote.Menu.buildFromTemplate(template).popup({});
+}

tsconfig.json

@@ -15,19 +15,11 @@
 		"isolatedModules": false,
 		"jsx": "react",
 		"module": "commonjs",
-		"plugins": [
-			{
-				"name": "typescript-styled-plugin",
-				"lint": {
-					"unknownProperties": "ignore"
-				}
-			}
-		],
+		"moduleResolution": "node",
 		"lib": [
 			"es2017",
 			"dom"
 		],
-		"moduleResolution": "node",
 		"plugins": [
 			{
 				"name": "typescript-styled-plugin",