(ui) add a "new record" button at the bottom of grid and detail views

very beginning wip:

- there are no tests
- the show/hide condition certainly needs refinement
- clicking behavior certainly needs refinement

But: something works!

Author: manuhabitela

app/client/components/buildViewSectionDom.ts

@@ -13,6 +13,7 @@ import {menu} from 'app/client/ui2018/menus';
 import {getWidgetTypes} from "app/client/ui/widgetTypesMap";
 import {Computed, dom, DomElementArg, Observable, styled} from 'grainjs';
 import {defaultMenuOptions} from 'popweasel';
+import {newRecordButton} from 'app/client/ui/NewRecordButton';
 
 const t = makeT('ViewSection');
 
@@ -129,7 +130,12 @@ export function buildViewSectionDom(options: {
           dom('div.viewsection_truncated', t('Not all data is shown'))
         ),
         dom.cls((use) => 'viewsection_type_' + use(vs.parentKey)),
-        viewInstance.viewPane
+        viewInstance.viewPane,
+        dom.domComputed(use =>
+          (use(viewInstance.viewSection.hasFocus) && use(viewInstance.enableAddRow)),
+          (showNewRecordButton) =>
+            showNewRecordButton ? newRecordButton(viewInstance) : null
+        )
       ),
       dom.maybe(use => !use(isNarrowScreenObs()), () => viewInstance.selectionSummary?.buildDom()),
     ]),

app/client/declarations.d.ts

@@ -63,6 +63,7 @@ declare module "app/client/components/BaseView" {
     public tableModel: DataTableModel;
     public selectionSummary?: SelectionSummary;
     public currentEditingColumnIndex: ko.Observable<number>;
+    public enableAddRow: ko.Computed<boolean>;
 
     constructor(gristDoc: GristDoc, viewSectionModel: any, options?: {addNewRow?: boolean, isPreview?: boolean});
     public setCursorPos(cursorPos: CursorPos): void;
@@ -79,6 +80,7 @@ declare module "app/client/components/BaseView" {
     public getAnchorLinkForSection(sectionId: number): IGristUrlState;
     public viewSelectedRecordAsCard(): void;
     public isRecordCardDisabled(): boolean;
+    public insertRow(index?: number): Promise<any> | undefined | null;
   }
   export = BaseView;
 }

app/client/ui/NewRecordButton.ts

@@ -0,0 +1,39 @@
+import {dom, styled} from 'grainjs';
+import {testId, vars} from 'app/client/ui2018/cssVars';
+import {makeT} from 'app/client/lib/localization';
+import {primaryButton} from 'app/client/ui2018/buttons';
+import {iconSpan} from 'app/client/ui2018/icons';
+import BaseView from 'app/client/components/BaseView';
+
+const t = makeT('NewRecordButton');
+
+/**
+ * "New Record" button for the given view that inserts a new record at the end on click.
+ *
+ * Appears in the bottom-left corner of its parent element.
+ */
+export function newRecordButton(view: BaseView) {
+  return cssNewRecordButton(
+    iconSpan('Plus'),
+    dom('span', t('New record')),
+    dom.on('click', () => view.insertRow()),
+    testId('new-record-button'),
+    testId(`new-record-button-${view.constructor.name}`),
+  );
+}
+
+const cssNewRecordButton = styled(primaryButton, `
+  position: absolute;
+  bottom: -12px;
+  left: -12px;
+  z-index: ${vars.newRecordButtonZIndex};
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  /* 16px on the plus icon is blurry, 17px is sharp, needs more test. */
+  & > span:first-child {
+    width: 17px;
+    height: 17px;
+  }
+`);

app/client/ui2018/cssVars.ts

@@ -136,6 +136,7 @@ export const vars = {
   stickyHeaderZIndex: new CustomProp('sticky-header-z-index', '20'),
   insertColumnLineZIndex: new CustomProp('insert-column-line-z-index', '20'),
   emojiPickerZIndex: new CustomProp('modal-z-index', '20'),
+  newRecordButtonZIndex: new CustomProp('new-record-button-z-index', '30'),
   popupSectionBackdropZIndex: new CustomProp('popup-section-backdrop-z-index', '100'),
   menuZIndex: new CustomProp('menu-z-index', '999'),
   modalZIndex: new CustomProp('modal-z-index', '999'),

static/locales/en.client.json

@@ -1886,5 +1886,8 @@
         "Name": "Name",
         "Rename and set icon": "Rename and set icon",
         "Reset icon": "Reset icon"
+    },
+    "NewRecordButton": {
+        "New record": "New record"
     }
 }