Adds shortcut keys to rebase buttons

gitkraken · Nov 20, 2020 · 2fccf2f · 2fccf2f
1 parent c5bd584
commit 2fccf2f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 8 deletions.
diff --git a/src/webviews/apps/rebase/rebase.html b/src/webviews/apps/rebase/rebase.html
@@ -13,7 +13,7 @@
 	<body class="preload">
 		<div class="container">
 			<header>
-				<h2>Interactive Rebase</h2>
+				<h2>GitLens Interactive Rebase</h2>
 				<h4 id="subhead"></h4>
 			</header>
 			<ul id="entries" class="entries"></ul>
@@ -27,8 +27,12 @@ <h4 id="subhead"></h4>
 				<span class="shortcut"><kbd>alt ↓</kbd><span>Move Down</span></span>
 			</div>
 			<div class="actions">
-				<button name="start" class="button button--flat-primary" data-action="start">Start Rebase</button>
-				<button name="abort" class="button button--flat" data-action="abort">Abort</button>
+				<button name="start" class="button button--flat-primary" data-action="start">
+					Start Rebase <span class="shortcut">Ctrl+Enter</span>
+				</button>
+				<button name="abort" class="button button--flat" data-action="abort">
+					Abort <span class="shortcut">Ctrl+A</span>
+				</button>
 			</div>
 		</div>
 		#{endOfBody}

diff --git a/src/webviews/apps/rebase/rebase.ts b/src/webviews/apps/rebase/rebase.ts
@@ -1,5 +1,5 @@
 'use strict';
-/*global document*/
+/*global document window*/
 import '../scss/rebase.scss';
 import Sortable from 'sortablejs';
 import {
@@ -90,7 +90,6 @@ class RebaseEditor extends App<RebaseState> {
 
 				const ref = e.item.dataset.ref;
 				if (ref != null) {
-					console.log(ref, e.newIndex, e.oldIndex);
 					this.moveEntry(ref, e.newIndex, false);
 
 					document.querySelectorAll<HTMLLIElement>(`li[data-ref="${ref}"]`)[0]?.focus();
@@ -99,7 +98,30 @@ class RebaseEditor extends App<RebaseState> {
 			onMove: e => !e.related.classList.contains('entry--base'),
 		});
 
+		if (window.navigator.platform.startsWith('Mac')) {
+			let $shortcut = document.querySelector<HTMLSpanElement>('[data-action="start"] .shortcut')!;
+			$shortcut.textContent = 'Cmd+Enter';
+
+			$shortcut = document.querySelector<HTMLSpanElement>('[data-action="abort"] .shortcut')!;
+			$shortcut.textContent = 'Cmd+A';
+		}
+
 		disposables.push(
+			DOM.on(window, 'keydown', (e: KeyboardEvent) => {
+				if (e.ctrlKey || e.metaKey) {
+					if (e.key === 'Enter' || e.key === 'r') {
+						e.preventDefault();
+						e.stopPropagation();
+
+						this.onStartClicked();
+					} else if (e.key === 'a') {
+						e.preventDefault();
+						e.stopPropagation();
+
+						this.onAbortClicked();
+					}
+				}
+			}),
 			DOM.on('[data-action="start"]', 'click', () => this.onStartClicked()),
 			DOM.on('[data-action="abort"]', 'click', () => this.onAbortClicked()),
 			DOM.on('li[data-ref]', 'keydown', function (this: Element, e: KeyboardEvent) {

diff --git a/src/webviews/apps/scss/buttons.scss b/src/webviews/apps/scss/buttons.scss
@@ -21,6 +21,20 @@
 		cursor: default !important;
 		opacity: 0.25 !important;
 	}
+
+	.shortcut {
+		display: block;
+		font-size: 0.8rem;
+		margin: 5px 0 0 0;
+		font-weight: 200;
+		opacity: 0.6;
+	}
+
+	&:hover {
+		.shortcut {
+			opacity: 1;
+		}
+	}
 }
 
 .button--big {

diff --git a/src/webviews/apps/shared/dom.ts b/src/webviews/apps/shared/dom.ts
@@ -13,19 +13,19 @@ export namespace DOM {
 		options?: boolean | AddEventListenerOptions,
 		el?: Element,
 	): Disposable;
-	export function on<K extends keyof DocumentEventMap, T extends Element>(
+	export function on<K extends keyof DocumentEventMap, T extends Document | Element>(
 		el: Document | Element,
 		name: K,
 		listener: (this: T, ev: DocumentEventMap[K]) => any,
 		options?: boolean | AddEventListenerOptions,
 	): Disposable;
-	export function on<K extends keyof WindowEventMap, T extends Element>(
+	export function on<K extends keyof WindowEventMap, T extends Window>(
 		el: Window,
 		name: K,
 		listener: (this: T, ev: WindowEventMap[K]) => any,
 		options?: boolean | AddEventListenerOptions,
 	): Disposable;
-	export function on<K extends keyof (DocumentEventMap | WindowEventMap), T extends Element>(
+	export function on<K extends keyof (DocumentEventMap | WindowEventMap), T extends Document | Element | Window>(
 		selectorOrElement: string | Window | Document | Element,
 		name: K,
 		listener: (this: T, ev: (DocumentEventMap | WindowEventMap)[K]) => any,