(core) Import redesign

Summary: New UI design for incremental imports.

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/ui2018/IconList.ts

@@ -37,6 +37,9 @@ export type IconName = "ChartArea" |
   "GristLogo" |
   "ThumbPreview" |
   "AddUser" |
+  "ArrowLeft" |
+  "ArrowRight" |
+  "ArrowRightOutlined" |
   "BarcodeQR" |
   "BarcodeQR2" |
   "Board" |
@@ -56,6 +59,7 @@ export type IconName = "ChartArea" |
   "Dropdown" |
   "DropdownUp" |
   "Empty" |
+  "Exclamation" |
   "Expand" |
   "EyeHide" |
   "EyeShow" |
@@ -80,6 +84,7 @@ export type IconName = "ChartArea" |
   "ImportArrow" |
   "Info" |
   "LeftAlign" |
+  "Lighting" |
   "Lock" |
   "Log" |
   "Mail" |
@@ -180,6 +185,9 @@ export const IconList: IconName[] = ["ChartArea",
   "GristLogo",
   "ThumbPreview",
   "AddUser",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowRightOutlined",
   "BarcodeQR",
   "BarcodeQR2",
   "Board",
@@ -199,6 +207,7 @@ export const IconList: IconName[] = ["ChartArea",
   "Dropdown",
   "DropdownUp",
   "Empty",
+  "Exclamation",
   "Expand",
   "EyeHide",
   "EyeShow",
@@ -223,6 +232,7 @@ export const IconList: IconName[] = ["ChartArea",
   "ImportArrow",
   "Info",
   "LeftAlign",
+  "Lighting",
   "Lock",
   "Log",
   "Mail",

app/client/ui2018/cssVars.ts

@@ -626,6 +626,14 @@ export const theme = {
   importerSkippedTableOverlay: new CustomProp('theme-importer-skipped-table-overlay', undefined,
     colors.mediumGrey),
   importerMatchIcon: new CustomProp('theme-importer-match-icon', undefined, colors.darkGrey),
+  importerOutsideBg: new CustomProp('theme-importer-outside-bg', undefined, colors.lightGrey),
+  importerMainContentBg: new CustomProp('theme-importer-main-content-bg', undefined, '#FFFFFF'),
+
+  // tabs
+  importerActiveFileBg: new CustomProp('theme-importer-active-file-bg', undefined, colors.lightGreen),
+  importerActiveFileFg: new CustomProp('theme-importer-active-file-fg', undefined, colors.light),
+  importerInactiveFileBg: new CustomProp('theme-importer-inactive-file-bg', undefined, colors.mediumGrey),
+  importerInactiveFileFg: new CustomProp('theme-importer-inactive-file-fg', undefined, colors.light),
 
   /* Menu Toggles */
   menuToggleFg: new CustomProp('theme-menu-toggle-fg', undefined, colors.slate),

app/client/ui2018/menus.ts

@@ -1,4 +1,5 @@
 import { Command } from 'app/client/components/commands';
+import { FocusLayer } from 'app/client/lib/FocusLayer';
 import { makeT } from 'app/client/lib/localization';
 import { NeedUpgradeError, reportError } from 'app/client/models/errors';
 import { textButton } from 'app/client/ui2018/buttons';
@@ -203,6 +204,7 @@ export function multiSelect<T>(selectedOptions: MutableObsArray<T>,
     return cssMultiSelectMenu(
       { tabindex: '-1' }, // Allow menu to be focused.
       dom.cls(menuCssClass),
+      FocusLayer.attach({pauseMousetrap: true}),
       dom.onKeyDown({
         Enter: () => ctl.close(),
         Escape: () => ctl.close()
@@ -508,12 +510,6 @@ const cssSelectBtnLink = styled('div', `
   }
 `);
 
-const cssOptionIcon = styled(icon, `
-  height: 16px;
-  width: 16px;
-  background-color: ${theme.menuItemIconFg};
-  margin: -3px 8px 0 2px;
-`);
 
 export const cssOptionRow = styled('span', `
   display: flex;
@@ -521,7 +517,11 @@ export const cssOptionRow = styled('span', `
   width: 100%;
 `);
 
-export const cssOptionRowIcon = styled(cssOptionIcon, `
+export const cssOptionRowIcon = styled(icon, `
+  height: 16px;
+  width: 16px;
+  background-color: var(--icon-color, ${theme.menuItemIconFg});
+  margin: -3px 8px 0 2px;
   margin: 0 8px 0 0;
   flex: none;
 

app/client/ui2018/modals.ts

@@ -524,17 +524,35 @@ export const cssModalTooltip = styled(cssMenuElem, `
   }
 `);
 
+export const cssModalTopPadding = styled('div', `
+  padding-top: var(--css-modal-dialog-padding-vertical);
+`);
+
+export const cssModalBottomPadding = styled('div', `
+  padding-bottom: var(--css-modal-dialog-padding-vertical);
+`);
+
+export const cssModalHorizontalPadding = styled('div', `
+  padding-left: var(--css-modal-dialog-padding-horizontal);
+  padding-right: var(--css-modal-dialog-padding-horizontal);
+`);
+
 // 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
-const cssModalDialog = styled('div', `
+//
+// If you want to control the padding yourself, use the cssModalTopPadding and other classes above and add -full-body
+// variant to the modal.
+export const cssModalDialog = styled('div', `
+  --css-modal-dialog-padding-horizontal: 64px;
+  --css-modal-dialog-padding-vertical: 40px;
   background-color: ${theme.modalBg};
   min-width: 428px;
   color: ${theme.darkText};
   margin: auto;
   border-radius: 3px;
   box-shadow: 0 2px 18px 0 ${theme.modalInnerShadow}, 0 0 1px 0 ${theme.modalOuterShadow};
-  padding: 40px 64px;
+  padding: var(--css-modal-dialog-padding-vertical) var(--css-modal-dialog-padding-horizontal);
   outline: none;
 
   &-normal {
@@ -552,9 +570,13 @@ const cssModalDialog = styled('div', `
     & {
       width: unset;
       min-width: unset;
-      padding: 24px 16px;
+      --css-modal-dialog-padding-horizontal: 16px;
+      --css-modal-dialog-padding-vertical: 24px;
     }
   }
+  &-full-body {
+    padding: 0;
+  }
 `);
 
 export const cssModalTitle = styled('div', `

app/client/ui2018/select.ts

@@ -41,7 +41,7 @@ export const cssSelectBtn = styled('div', `
     box-shadow: 0px 0px 2px 2px #5E9ED6;
   }
 
-  &.disabled {
+  &.disabled, &-disabled {
     --icon-color: ${theme.selectButtonDisabledFg};
     color: ${theme.selectButtonDisabledFg};
     cursor: pointer;