git ssb - Add keyboard tab controls · Dominic/patchbay@2cb8123f

Commit 2cb8123fabc8c9afd098f2f7d134679e1eea8a71

Add keyboard tab controls

Tab keyboard shortcuts like Chrome or Firefox

I couldn't prove that windows has a different `Window` menu, if I'm wrong I'm happy to put back the conditional.

Chrome and Firefox has their tab controls under `File` but that seems weird here. Also I'd love to bring in a new tab window but that's a completely new view and I have no idea what it might look like. Additionally I'd love to do an undo close tab but I'm not sure how we'd want to keep history.

Francis Gulotta committed on 2/2/2018, 2:16:12 PM
Parent: a3577fc70f3b65a93d2d0e8cd6c529f6695a70a4

Files changed

README.md	changed
app/html/app.js	changed
app/html/tabs.js	changed
index.js	changed

README.mdView
		@@ -7,9 +7,8 @@
7	7 …	Patchbay is built using [patchcore](https://github.com/ssbc/patchcore) + [depject](https://github.com/dominictarr/depject). The goal is to make it easier to develop new features, and enable or disable features. This has so far been quite successful!
8	8 …
9	9 …	This makes in very easy to create say, a renderer for a new message type, or switch to a different method for choosing user names.
10	10 …
11		-
12	11 …	## Setup
13	12 …
14	13 …	Libsodium has some build dependencies. On ubuntu systems the following might help:
15	14 …
		@@ -99,8 +98,16 @@
99	98 …	# from the patchbay repo folder
100	99 …	npm run dev
101	100 …	```
102	101 …
	102 …	+## Keyboard shortcuts
	103 …	+`CmdOrCtrl` is the `command` key on Apple keyboards or the `ctrl` key on PC keyboards.
	104 …	+
	105 …	+### Tabs and Window
	106 …	+- `CmdOrCtrl+Shift+]` and `CmdOrCtrl+Shift+[` will cycle the tabs left and right
	107 …	+- `CmdOrCtrl+w` will close the current tab
	108 …	+- `CmdOrCtrl+Shift+w` will close the current window
	109 …	+
103	110 …	## How to add a feature
104	111 …
105	112 …	To add a new message type, add add a js to `./modules/` that exports a function named `message_content` (it should return an HTML element). To add a new tab, export a function named `screen_view` (returns an html element).
106	113 …

app/html/app.jsView
		@@ -29,9 +29,8 @@
29	29 …
30	30 …	api.app.sync.initialise()
31	31 …
32	32 …	window = api.app.sync.window(window)
33		-
34	33 …	const css = values(api.styles.css()).join('\n')
35	34 …	insertCss(css)
36	35 …
37	36 …	const initialTabs = ['/public', '/inbox', '/notifications']
		@@ -39,8 +38,20 @@
39	38 …	const tabs = api.app.html.tabs(initialTabs)
40	39 …
41	40 …	const App = h('App', tabs)
42	41 …
	42 …	+ electron.ipcRenderer.on('nextTab', () => {
	43 …	+ tabs.nextTab()
	44 …	+ })
	45 …	+
	46 …	+ electron.ipcRenderer.on('previousTab', () => {
	47 …	+ tabs.previousTab()
	48 …	+ })
	49 …	+
	50 …	+ electron.ipcRenderer.on('closeTab', () => {
	51 …	+ tabs.closeCurrentTab()
	52 …	+ })
	53 …	+
43	54 …	// Catch user actions
44	55 …	api.app.sync.catchKeyboardShortcut(window, { tabs })
45	56 …	api.app.async.catchLinkClick(App)
46	57 …

app/html/tabs.jsView
		@@ -42,18 +42,24 @@
42	42 …	return JSON.stringify(loc) != page.id
43	43 …	})
44	44 …	history.set(prunedHistory)
45	45 …	}
46		-
	46 …	+
WritePreview
47	47 …	const search = api.app.html.searchBar()
48	48 …	const menu = api.app.html.menu()
49	49 …
50	50 …	_tabs = Tabs({
51	51 …	onSelect,
52	52 …	onClose,
53	53 …	append: h('div.navExtra', [ search, menu ])
54	54 …	})
55		- _tabs.currentPage = () => _tabs.get(_tabs.selected[0]).firstChild
	55 …	+ _tabs.currentPage = () => {
	56 …	+ const currentPage = _tabs.get(_tabs.selected[0])
	57 …	+ return currentPage && currentPage.firstChild
	58 …	+ }
	59 …	+ _tabs.nextTab = () => _tabs.currentPage() && _tabs.selectRelative(1)
	60 …	+ _tabs.previousTab = () => _tabs.currentPage() && _tabs.selectRelative(-1)
	61 …	+ _tabs.closeCurrentTab = () => _tabs.currentPage() && _tabs.remove(_tabs.selected[0])
56	62 …
57	63 …	// # TODO: review - this works but is strange
58	64 …	initialTabs.forEach(p => api.app.sync.goTo(p))
59	65 …	api.app.sync.goTo(initialTabs[0])

index.jsView
		@@ -21,18 +21,38 @@
21	21 …	{ role: 'zoomout' },
22	22 …	{ type: 'separator' },
23	23 …	{ role: 'togglefullscreen' }
24	24 …	]
25		- if (process.platform === 'darwin') {
26		- var win = menu.find(x => x.label === 'Window')
27		- win.submenu = [
28		- { role: 'minimize' },
29		- { role: 'zoom' },
30		- { role: 'close', label: 'Close' },
31		- { type: 'separator' },
32		- { role: 'front' }
33		- ]
34		- }
	25 …	+ var win = menu.find(x => x.label === 'Window')
	26 …	+ win.submenu = [
	27 …	+ { role: 'minimize' },
	28 …	+ { role: 'zoom' },
	29 …	+ { role: 'close', label: 'Close Window', accelerator: 'CmdOrCtrl+Shift+W' },
	30 …	+ { type: 'separator' },
	31 …	+ {
	32 …	+ label: 'Close Tab',
	33 …	+ accelerator: 'CmdOrCtrl+W',
	34 …	+ click() {
	35 …	+ windows.main.webContents.send('closeTab')
	36 …	+ }
	37 …	+ },
	38 …	+ {
	39 …	+ label: 'Select Next Tab',
	40 …	+ accelerator: 'CmdOrCtrl+Shift+]',
	41 …	+ click() {
	42 …	+ windows.main.webContents.send('nextTab')
	43 …	+ }
	44 …	+ },
	45 …	+ {
	46 …	+ label: 'Select Previous Tab',
	47 …	+ accelerator: 'CmdOrCtrl+Shift+[',
	48 …	+ click() {
	49 …	+ windows.main.webContents.send('previousTab')
	50 …	+ }
	51 …	+ },
	52 …	+ { type: 'separator' },
	53 …	+ { role: 'front' }
	54 …	+ ]
35	55 …
36	56 …	Menu.setApplicationMenu(Menu.buildFromTemplate(menu))
37	57 …
38	58 …	startBackgroundProcess()

Built with git-ssb-web

Dominic / patchbay

Commit 2cb8123fabc8c9afd098f2f7d134679e1eea8a71

Add keyboard tab controls

Files changed