Adds shortcut keys to rebase buttons

4 years ago · 2fccf2fad2
--- 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 @@
 				<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}
--- 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 {

 				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 {
 			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) {
--- 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 {
--- 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,