feat: add option to hide sidebars

* feat: add option to hide sidebars * fix: make ts happy * fix: rename to left and right sidebar * fix: adjust shortcut * fix: show sidebar options only on page detail
meetalva · Jun 10, 2018 · dd93217 · dd93217
1 parent 3826fb5
commit dd93217
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 51 deletions.
diff --git a/src/container/app.tsx b/src/container/app.tsx
@@ -78,60 +78,65 @@ export class App extends React.Component {
 					)}
 					{props.store.getActiveAppView() === Types.AlvaView.PageDetail && (
 						<React.Fragment>
-							<Resizeable
-								handleStyles={{ right: { zIndex: 1 } }}
-								defaultSize={{ width: 240, height: '100%' }}
-								enable={{ right: true }}
-								minWidth={240}
-							>
-								<SideBar
-									side={LayoutSide.Left}
-									direction={LayoutDirection.Column}
-									border={LayoutBorder.Side}
+							{props.store.getShowLeftSidebar() && (
+								<Resizeable
+									handleStyles={{ right: { zIndex: 1 } }}
+									defaultSize={{ width: 240, height: '100%' }}
+									enable={{ right: true }}
+									minWidth={240}
 								>
-									<ElementPane>
-										<ElementList />
-									</ElementPane>
-
-									<Resizeable
-										handleStyles={{ top: { zIndex: 1 } }}
-										defaultSize={{ height: 500, width: '100%' }}
-										enable={{ top: true }}
-										minHeight={240}
+									<SideBar
+										side={LayoutSide.Left}
+										direction={LayoutDirection.Column}
+										border={LayoutBorder.Side}
 									>
-										<PatternsPane>
-											<PatternListContainer />
-										</PatternsPane>
-									</Resizeable>
-								</SideBar>
-							</Resizeable>
+										<ElementPane>
+											<ElementList />
+										</ElementPane>
+
+										<Resizeable
+											handleStyles={{ top: { zIndex: 1 } }}
+											defaultSize={{ height: 500, width: '100%' }}
+											enable={{ top: true }}
+											minHeight={240}
+										>
+											<PatternsPane>
+												<PatternListContainer />
+											</PatternsPane>
+										</Resizeable>
+									</SideBar>
+								</Resizeable>
+							)}
 							<PreviewPaneWrapper
 								isDragging={props.store.getDragging()}
 								key="center"
 								previewFrame={`http://localhost:${props.store.getServerPort()}/preview.html`}
 							/>
-							<Resizeable
-								handleStyles={{ left: { zIndex: 1 } }}
-								defaultSize={{ width: 240, height: '100%' }}
-								enable={{ left: true }}
-								minWidth={240}
-							>
-								<SideBar
-									side={LayoutSide.Right}
-									direction={LayoutDirection.Column}
-									border={LayoutBorder.Side}
+
+							{props.store.getShowRightSidebar() && (
+								<Resizeable
+									handleStyles={{ left: { zIndex: 1 } }}
+									defaultSize={{ width: 240, height: '100%' }}
+									enable={{ left: true }}
+									minWidth={240}
 								>
-									{props.store.getPatternLibraryState() ===
-										Types.PatternLibraryState.Pristine && (
-										<ConnectPaneContainer
-											onPrimaryButtonClick={() => props.store.connectPatternLibrary()}
-										/>
-									)}
-									<PropertyPane>
-										<PropertyListContainer />
-									</PropertyPane>
-								</SideBar>
-							</Resizeable>
+									<SideBar
+										side={LayoutSide.Right}
+										direction={LayoutDirection.Column}
+										border={LayoutBorder.Side}
+									>
+										{props.store.getPatternLibraryState() ===
+											Types.PatternLibraryState.Pristine && (
+											<ConnectPaneContainer
+												onPrimaryButtonClick={() => props.store.connectPatternLibrary()}
+											/>
+										)}
+										<PropertyPane>
+											<PropertyListContainer />
+										</PropertyPane>
+									</SideBar>
+								</Resizeable>
+							)}
 						</React.Fragment>
 					)}
 				</MainArea>

diff --git a/src/electron/create-menu.ts b/src/electron/create-menu.ts
@@ -365,6 +365,32 @@ export function createMenu(ctx: MenuContext): void {
 						}
 					}
 				},
+				{
+					type: 'separator'
+				},
+				{
+					label: '&Show Left Sidebar',
+					type: 'checkbox',
+					checked: true,
+					enabled: ctx.store.getActiveAppView() === Types.AlvaView.PageDetail,
+					accelerator: 'CmdOrCtrl+Alt+1',
+					click: (item, checked) => {
+						ctx.store.setShowLeftSidebar(item.checked);
+					}
+				},
+				{
+					label: '&Show Right Sidebar',
+					type: 'checkbox',
+					checked: true,
+					enabled: ctx.store.getActiveAppView() === Types.AlvaView.PageDetail,
+					accelerator: 'CmdOrCtrl+Alt+2',
+					click: (item, checked) => {
+						ctx.store.setShowRightSidebar(item.checked);
+					}
+				},
+				{
+					type: 'separator'
+				},
 				{
 					label: 'Toggle &Developer Tools',
 					accelerator: (() => {

diff --git a/src/store/view-store.ts b/src/store/view-store.ts
@@ -52,6 +52,10 @@ export class ViewStore {
 
 	private savedProjects: Types.SavedProject[] = [];
 
+	@Mobx.observable private showLeftSidebar: boolean = true;
+
+	@Mobx.observable private showRightSidebar: boolean = true;
+
 	@Mobx.observable private serverPort: number;
 
 	@Mobx.observable private usedPatternLibrary: Model.PatternLibrary | undefined;
@@ -853,6 +857,22 @@ export class ViewStore {
 		}
 	}
 
+	public getShowLeftSidebar(): boolean {
+		return this.showLeftSidebar;
+	}
+
+	public setShowLeftSidebar(show: boolean): void {
+		this.showLeftSidebar = show;
+	}
+
+	public getShowRightSidebar(): boolean {
+		return this.showRightSidebar;
+	}
+
+	public setShowRightSidebar(show: boolean): void {
+		this.showRightSidebar = show;
+	}
+
 	@Mobx.action
 	public setActiveAppView(appView: Types.AlvaView): void {
 		this.app.setActiveView(appView);

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -131,11 +131,6 @@ export enum AlvaView {
 
 export type SerializedAlvaView = 'Pages' | 'PageDetail' | 'SplashScreen';
 
-export enum RightPane {
-	Patterns = 'Patterns',
-	Properties = 'Properties'
-}
-
 export enum EditState {
 	Editable = 'Editable',
 	Editing = 'Editing'