(core) Changing shortcuts for adding and removing rows

Summary:
New shortcuts for removing and adding rows.
For adding a row we now have Mod+(Shift)+Enter
For removing rows we now have Mod+Delete/Mod+Backspace

Before removing rows, the user is prompted to confirm, this prompt
can be dismissed and this setting can be remembered. User needs
to confirm only when using shortcut.

Old shortcuts are still active and shows information about this change.
This information is shown only once, after this shortcuts have default
behavior (zooming).
New users don't see this explanation.

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3655

app/client/ui2018/modals.ts

@@ -6,6 +6,7 @@ import {bigBasicButton, bigPrimaryButton, cssButton} from 'app/client/ui2018/but
 import {mediaSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {loadingSpinner} from 'app/client/ui2018/loaders';
 import {waitGrainObs} from 'app/common/gutil';
+import {IOpenController, IPopupDomCreator, IPopupOptions, PopupControl, popupOpen} from 'popweasel';
 import {Computed, Disposable, dom, DomContents, DomElementArg, input, keyframes,
   MultiHolder, Observable, styled} from 'grainjs';
 
@@ -468,8 +469,40 @@ export function cssModalWidth(style: ModalWidth) {
   return cssModalDialog.cls('-' + style);
 }
 
+/**
+ * Shows a little modal as a tooltip.
+ *
+ * Example:
+ * dom.on('click', (_, element) => modalTooltip(element, (ctl) => {
+ *  return dom('div', 'Hello world', dom.on('click', () => ctl.close()));
+ * }))
+ */
+export function modalTooltip(
+  reference: Element,
+  domCreator: IPopupDomCreator,
+  options: IPopupOptions = {}
+): PopupControl {
+  return popupOpen(reference, (ctl: IOpenController) => {
+    const element = cssModalTooltip(
+      domCreator(ctl)
+    );
+    return element;
+  }, options);
+}
+
 /* CSS styled components */
 
+const cssModalTooltip = styled('div', `
+  padding: 16px;
+  background: ${theme.modalBg};
+  border-radius: 3px;
+  box-shadow: 0 2px 18px 0 ${theme.modalInnerShadow}, 0 0 1px 0 ${theme.modalOuterShadow};
+  outline: none;
+  & > div {
+    outline: none;
+  }
+`);
+
 // For centering, we use 'margin: auto' on the flex item instead of 'justify-content: center' on
 // the flex container, to ensure the full item can be scrolled in case of overflow.
 // See https://stackoverflow.com/a/33455342/328565