(core) Multi-column configuration

Summary:
Creator panel allows now to edit multiple columns at once
for some options that are common for them. Options that
are not common are disabled.

List of options that can be edited for multiple columns:
- Column behavior (but limited to empty/formula columns)
- Alignment and wrapping
- Default style
- Number options (for numeric columns)
- Column types (but only for empty/formula columns)

If multiple columns of the same type are selected, most of
the options are available to change, except formula, trigger formula
and conditional styles.

Editing column label or column id is disabled by default for multiple
selection.

Not related: some tests were fixed due to the change in the column label
and id widget in grist-core (disabled attribute was replaced by readonly).

Test Plan: Updated and new tests.

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/common/NumberFormat.ts

@@ -30,11 +30,11 @@ export type NumMode = typeof NumMode.type;
 export type NumSign = 'parens';
 
 export interface NumberFormatOptions extends FormatOptions {
-  numMode?: NumMode;
-  numSign?: NumSign;
-  decimals?: number;      // aka minimum fraction digits
-  maxDecimals?: number;
-  currency?: string;
+  numMode?: NumMode|null;
+  numSign?: NumSign|null;
+  decimals?: number|null;      // aka minimum fraction digits
+  maxDecimals?: number|null;
+  currency?: string|null;
 }
 
 export function getCurrency(options: NumberFormatOptions, docSettings: DocumentSettings): string {
@@ -44,11 +44,10 @@ export function getCurrency(options: NumberFormatOptions, docSettings: DocumentS
 export function buildNumberFormat(options: NumberFormatOptions, docSettings: DocumentSettings): Intl.NumberFormat {
   const currency = getCurrency(options, docSettings);
   const nfOptions: Intl.NumberFormatOptions = parseNumMode(options.numMode, currency);
-
   // numSign is implemented outside of Intl.NumberFormat since the latter's similar 'currencySign'
   // option is not well-supported, and doesn't apply to non-currency formats.
 
-  if (options.decimals !== undefined) {
+  if (options.decimals !== undefined && options.decimals !== null) {
     // Should be at least 0
     nfOptions.minimumFractionDigits = clamp(Number(options.decimals), 0, 20);
   }
@@ -57,7 +56,7 @@ export function buildNumberFormat(options: NumberFormatOptions, docSettings: Doc
   // implied by numMode.
   const tmp = new Intl.NumberFormat(docSettings.locale, nfOptions).resolvedOptions();
 
-  if (options.maxDecimals !== undefined) {
+  if (options.maxDecimals !== undefined && options.maxDecimals !== null) {
     // Should be at least 0 and at least minimumFractionDigits.
     nfOptions.maximumFractionDigits = clamp(Number(options.maxDecimals), tmp.minimumFractionDigits || 0, 20);
   } else if (!options.numMode) {
@@ -80,7 +79,7 @@ const currencyDisplay = (function(){
   }
 })();
 
-export function parseNumMode(numMode?: NumMode, currency?: string): Intl.NumberFormatOptions {
+export function parseNumMode(numMode?: NumMode|null, currency?: string): Intl.NumberFormatOptions {
   switch (numMode) {
     case 'currency': return {style: 'currency', currency, currencyDisplay};
     case 'decimal': return {useGrouping: true};

app/common/gutil.ts

@@ -959,3 +959,21 @@ export function assertIsDefined<T>(name: string, value: T): asserts value is Non
     return await fn();
   }
 }
+
+/**
+ * Checks if value is 'empty' (like null, undefined, empty string, empty array/set/map, empty object).
+ * Values like 0, true, false are not empty.
+ */
+ export function notSet(value: any) {
+  return value === undefined || value === null || value === ''
+         || (Array.isArray(value) && !value.length)
+         || (typeof value === 'object' && !Object.keys(value).length)
+         || (['[object Map]', '[object Set'].includes(value.toString()) && !value.size);
+}
+
+/**
+ * Checks if value is 'empty', if it is, returns the default value (which is null).
+ */
+export function ifNotSet(value: any, def: any = null) {
+  return notSet(value) ? def : value;
+}

app/common/themes/GristDark.ts

@@ -229,7 +229,7 @@ export const GristDark: ThemeColors = {
   'right-panel-toggle-button-enabled-bg': '#555563',
   'right-panel-toggle-button-enabled-hover-fg': '#D9D9D9',
   'right-panel-toggle-button-disabled-fg': '#FFFFFF',
-  'right-panel-toggle-button-disabled-bg': '#E8E8E8',
+  'right-panel-toggle-button-disabled-bg': '#333333',
   'right-panel-field-settings-bg': '#414358',
   'right-panel-field-settings-button-bg': '#57575F',
 

app/common/themes/GristLight.ts

@@ -224,7 +224,7 @@ export const GristLight: ThemeColors = {
   'right-panel-subtab-selected-underline': '#16B378',
   'right-panel-subtab-hover-fg': '#009058',
   'right-panel-subtab-hover-underline': '#16B378',
-  'right-panel-disabled-overlay': 'white',
+  'right-panel-disabled-overlay': '#F7F7F7',
   'right-panel-toggle-button-enabled-fg': '#FFFFFF',
   'right-panel-toggle-button-enabled-bg': '#262633',
   'right-panel-toggle-button-enabled-hover-fg': '#D9D9D9',