From cc1c7be1f4bdd3cbaa9dd3490a843d48c734cc7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Thu, 15 Oct 2020 20:22:42 +0200
Subject: [PATCH 1/2] Sidebar menus migrated to the new menus system

---
 src/client/components/sidebar.tsx  | 81 ++++++++----------------------
 src/client/widgets/menu.tsx        |  6 ++-
 src/client/widgets/menuWrapper.tsx |  2 +-
 src/static/main.css                |  8 +++
 4 files changed, 35 insertions(+), 62 deletions(-)

diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index d7b989ea5..99d0b25ed 100644
--- a/src/client/components/sidebar.tsx
+++ b/src/client/components/sidebar.tsx
@@ -2,9 +2,9 @@ import React from "react"
 import { Archiver } from "../archiver"
 import { Board } from "../board"
 import { BoardTree } from "../boardTree"
-import { Menu, MenuOption } from "../menu"
+import Menu from '../widgets/menu'
+import MenuWrapper from '../widgets/menuWrapper'
 import mutator from "../mutator"
-import { IPageController } from "../octoTypes"
 import { WorkspaceTree } from "../workspaceTree"
 
 type Props = {
@@ -32,7 +32,19 @@ class Sidebar extends React.Component<Props> {
 							<div key={board.id} className="octo-sidebar-item octo-hover-container">
 								<div className="octo-sidebar-title" onClick={() => { this.boardClicked(board) }}>{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}</div>
 								<div className="octo-spacer"></div>
-								<div className="octo-button square octo-hover-item" onClick={(e) => { this.showOptions(e, board) }}><div className="imageOptions" /></div>
+                                <MenuWrapper>
+								    <div className="octo-button square octo-hover-item"><div className="imageOptions" /></div>
+                                    <Menu>
+                                        <Menu.Text id="delete" name="Delete board" onClick={async () => {
+		                                    const nextBoardId = boards.length > 1 ? boards.find(o => o.id !== board.id).id : undefined
+                                            mutator.deleteBlock(
+                                                board,
+                                                "delete block",
+                                                async () => { nextBoardId && this.props.showBoard(nextBoardId!) },
+                                                async () => { this.props.showBoard(board.id) },
+                                            )}} />
+                                    </Menu>
+                                </MenuWrapper>
 							</div>
 						)
 					})
@@ -44,66 +56,17 @@ class Sidebar extends React.Component<Props> {
 
 				<div className="octo-spacer"></div>
 
-				<div className="octo-button" onClick={(e) => { this.settingsClicked(e) }}>Settings</div>
+                <MenuWrapper>
+                    <div className="octo-button">Settings</div>
+                    <Menu position="top">
+                        <Menu.Text id="import" name="Import Archive" onClick={async () => Archiver.importFullArchive(() => { this.forceUpdate() })} />
+                        <Menu.Text id="export" name="Export Archive" onClick={async () => Archiver.exportFullArchive()} />
+                    </Menu>
+                </MenuWrapper>
 			</div>
 		)
 	}
 
-	private showOptions(e: React.MouseEvent, board: Board) {
-		const { showBoard, workspaceTree } = this.props
-		const { boards } = workspaceTree
-
-		const options: MenuOption[] = []
-
-		const nextBoardId = boards.length > 1 ? boards.find(o => o.id !== board.id).id : undefined
-		if (nextBoardId) {
-			options.push({ id: "delete", name: "Delete board" })
-		}
-
-		Menu.shared.options = options
-		Menu.shared.onMenuClicked = (optionId: string, type?: string) => {
-			switch (optionId) {
-				case "delete": {
-					mutator.deleteBlock(
-						board,
-						"delete block",
-						async () => { showBoard(nextBoardId!) },
-						async () => { showBoard(board.id) },
-					)
-					break
-				}
-			}
-		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
-	}
-
-	private settingsClicked(e: React.MouseEvent) {
-		Menu.shared.options = [
-			{ id: "import", name: "Import Archive" },
-			{ id: "export", name: "Export Archive" },
-		]
-		Menu.shared.onMenuClicked = (optionId: string, type?: string) => {
-			switch (optionId) {
-				case "import": {
-					Archiver.importFullArchive(() => {
-						this.forceUpdate()
-					})
-					break
-				}
-				case "export": {
-					Archiver.exportFullArchive()
-					break
-				}
-			}
-		}
-
-		// HACKHACK: Show menu above (TODO: refactor menu code to do this automatically)
-		const element = e.target as HTMLElement
-		const bodyRect = document.body.getBoundingClientRect()
-		const rect = element.getBoundingClientRect()
-		Menu.shared.showAt(rect.left - bodyRect.left + 20, rect.top - bodyRect.top - 30 * Menu.shared.options.length)
-	}
-
 	private boardClicked(board: Board) {
 		this.props.showBoard(board.id)
 	}
diff --git a/src/client/widgets/menu.tsx b/src/client/widgets/menu.tsx
index 7588ee4f0..12dec1889 100644
--- a/src/client/widgets/menu.tsx
+++ b/src/client/widgets/menu.tsx
@@ -117,6 +117,7 @@ class TextOption extends React.Component<TextOptionProps> {
 
 type MenuProps = {
     children: React.ReactNode
+    position?: 'top'|'bottom'
 }
 
 export default class Menu extends React.Component<MenuProps> {
@@ -127,10 +128,11 @@ export default class Menu extends React.Component<MenuProps> {
     static Text = TextOption
 
     render() {
+        const {position, children} = this.props
         return (
-            <div className="Menu menu noselect">
+            <div className={"Menu menu noselect " + (position ? position : "bottom")}>
                 <div className="menu-options">
-                    {this.props.children}
+                    {children}
                 </div>
             </div>
         )
diff --git a/src/client/widgets/menuWrapper.tsx b/src/client/widgets/menuWrapper.tsx
index 42bee48b0..088951fcb 100644
--- a/src/client/widgets/menuWrapper.tsx
+++ b/src/client/widgets/menuWrapper.tsx
@@ -82,7 +82,7 @@ export default class MenuWrapper extends React.PureComponent<Props, State> {
 
         return (
             <div
-                className={'MenuWrapper'}
+                className={'MenuWrapper menu-wrapper'}
                 onClick={this.toggle}
                 ref={this.node}
             >
diff --git a/src/static/main.css b/src/static/main.css
index 09054a7f8..ddeb89cc9 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -329,6 +329,14 @@ hr {
 	background-color: #ffffff;
 }
 
+.menu.top {
+    bottom: 100%;
+}
+
+.menu-wrapper {
+    position: relative;
+}
+
 .menu-options {
 	display: flex;
 	flex-direction: column;

From 5139ee4ac650503a4c1bacae93a052ddbf00844c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Thu, 15 Oct 2020 20:24:02 +0200
Subject: [PATCH 2/2] Using tabs instead of spaces

---
 src/client/components/sidebar.tsx | 40 +++++++++++++++----------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index 99d0b25ed..2b5d491a0 100644
--- a/src/client/components/sidebar.tsx
+++ b/src/client/components/sidebar.tsx
@@ -32,19 +32,19 @@ class Sidebar extends React.Component<Props> {
 							<div key={board.id} className="octo-sidebar-item octo-hover-container">
 								<div className="octo-sidebar-title" onClick={() => { this.boardClicked(board) }}>{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}</div>
 								<div className="octo-spacer"></div>
-                                <MenuWrapper>
-								    <div className="octo-button square octo-hover-item"><div className="imageOptions" /></div>
-                                    <Menu>
-                                        <Menu.Text id="delete" name="Delete board" onClick={async () => {
-		                                    const nextBoardId = boards.length > 1 ? boards.find(o => o.id !== board.id).id : undefined
-                                            mutator.deleteBlock(
-                                                board,
-                                                "delete block",
-                                                async () => { nextBoardId && this.props.showBoard(nextBoardId!) },
-                                                async () => { this.props.showBoard(board.id) },
-                                            )}} />
-                                    </Menu>
-                                </MenuWrapper>
+								<MenuWrapper>
+									<div className="octo-button square octo-hover-item"><div className="imageOptions" /></div>
+									<Menu>
+										<Menu.Text id="delete" name="Delete board" onClick={async () => {
+											const nextBoardId = boards.length > 1 ? boards.find(o => o.id !== board.id).id : undefined
+											mutator.deleteBlock(
+												board,
+												"delete block",
+												async () => { nextBoardId && this.props.showBoard(nextBoardId!) },
+												async () => { this.props.showBoard(board.id) },
+											)}} />
+									</Menu>
+								</MenuWrapper>
 							</div>
 						)
 					})
@@ -56,13 +56,13 @@ class Sidebar extends React.Component<Props> {
 
 				<div className="octo-spacer"></div>
 
-                <MenuWrapper>
-                    <div className="octo-button">Settings</div>
-                    <Menu position="top">
-                        <Menu.Text id="import" name="Import Archive" onClick={async () => Archiver.importFullArchive(() => { this.forceUpdate() })} />
-                        <Menu.Text id="export" name="Export Archive" onClick={async () => Archiver.exportFullArchive()} />
-                    </Menu>
-                </MenuWrapper>
+				<MenuWrapper>
+					<div className="octo-button">Settings</div>
+					<Menu position="top">
+						<Menu.Text id="import" name="Import Archive" onClick={async () => Archiver.importFullArchive(() => { this.forceUpdate() })} />
+						<Menu.Text id="export" name="Export Archive" onClick={async () => Archiver.exportFullArchive()} />
+					</Menu>
+				</MenuWrapper>
 			</div>
 		)
 	}