(core) updates from grist-core

Author: paulfitz

app/client/aclui/AccessRules.ts

@@ -42,7 +42,7 @@ import {
   UserAttributeRule
 } from 'app/common/GranularAccessClause';
 import {getDefaultForType, isHiddenCol} from 'app/common/gristTypes';
-import {isNonNullish, unwrap} from 'app/common/gutil';
+import {isNonNullish, localeCompare, unwrap} from 'app/common/gutil';
 import {EmptyRecordView, InfoView, RecordView} from 'app/common/RecordView';
 import {
   getPredicateFormulaProperties,
@@ -129,6 +129,7 @@ export class AccessRules extends Disposable {
 
   // Array of all per-table rules.
   private _tableRules = this.autoDispose(obsArray<TableRules>());
+  private _sortedTableRules: Computed<TableRules[]>;
 
   // The default rule set for the document (for "*:*").
   private _docDefaultRuleSet = Observable.create<DefaultObsRuleSet|null>(this, null);
@@ -184,6 +185,12 @@ export class AccessRules extends Disposable {
       );
     });
 
+    this._sortedTableRules = Computed.create(this, (use) =>
+      [...use(this._tableRules)].sort((a, b) =>
+        localeCompare(a.tableId, b.tableId)
+      )
+    );
+
     this._savingEnabled = Computed.create(this, this._ruleStatus, (use, s) =>
       (s === RuleStatus.ChangedValid));
 
@@ -253,7 +260,6 @@ export class AccessRules extends Disposable {
     this._tableRules.set(
       rules.getAllTableIds()
       .filter(tableId => (tableId !== SPECIAL_RULES_TABLE_ID))
-      .sort((a, b) => a.localeCompare(b))
       .map(tableId => TableRules.create(this._tableRules,
           tableId, this, rules.getAllColumnRuleSets(tableId), rules.getTableDefaultRuleSet(tableId)))
     );
@@ -480,7 +486,7 @@ export class AccessRules extends Disposable {
             ),
           ),
         ),
-        dom.forEach(this._tableRules, (tableRules) => tableRules.buildDom()),
+        dom.forEach(this._sortedTableRules, (tableRules) => tableRules.buildDom()),
         cssSection(
           cssSectionHeading(t("Default Rules"), testId('rule-table-header')),
           dom.maybe(this._specialRulesWithDefault, tableRules => cssSeedRule(

app/client/components/Forms/Field.ts

@@ -17,8 +17,8 @@ import {
 } from 'app/client/ui/FormAPI';
 import {autoGrow} from 'app/client/ui/forms';
 import {cssCheckboxSquare, cssLabel, squareCheckbox} from 'app/client/ui2018/checkbox';
-import {colors} from 'app/client/ui2018/cssVars';
 import {cssRadioInput} from 'app/client/ui2018/radio';
+import {toggleSwitch} from 'app/client/ui2018/toggleSwitch';
 import {isBlankValue} from 'app/common/gristTypes';
 import {Constructor, not} from 'app/common/gutil';
 import {
@@ -487,12 +487,7 @@ class BoolModel extends Question {
   }
 
   private _renderSwitchInput() {
-    return css.cssWidgetSwitch(
-      dom.style('--grist-actual-cell-color', colors.lightGreen.toString()),
-      dom.cls('switch_transition'),
-      dom('div.switch_slider'),
-      dom('div.switch_circle'),
-    );
+    return toggleSwitch();
   }
 
   private _renderCheckboxInput() {

app/client/components/Forms/styles.ts

@@ -262,11 +262,6 @@ export const cssTextArea = styled('textarea', `
 
 export const cssSpinner = styled(numericSpinner, `
   height: 29px;
-
-  &-hidden {
-    color: ${theme.inputDisabledFg};
-    background-color: ${theme.inputDisabledBg};
-  }
 `);
 
 export const cssSelect = styled('select', `
@@ -290,12 +285,6 @@ export const cssToggle = styled('div', `
   --grist-actual-cell-color: ${colors.lightGreen};
 `);
 
-export const cssWidgetSwitch = styled('div.widget_switch', `
-  &-hidden {
-    opacity: 0.6;
-  }
-`);
-
 export const cssWarningMessage = styled('div', `
   margin-top: 8px;
   display: flex;

app/client/components/RegionFocusSwitcher.ts

@@ -662,7 +662,7 @@ const isSpecialPage = (doc: GristDoc | null) => {
   return false;
 };
 
-const cssFocusedPanel = styled('div', `
+export const cssFocusedPanel = styled('div', `
   &-focused:focus {
     outline: 3px solid ${components.kbFocusHighlight} !important;
     outline-offset: -3px !important;

app/client/formMain.ts

@@ -2,4 +2,7 @@ import {createPage} from 'app/client/ui/createPage';
 import {FormPage} from 'app/client/ui/FormPage';
 import {dom} from 'grainjs';
 
-createPage(() => dom.create(FormPage), {disableTheme: true});
+createPage(() => {
+  document.documentElement.setAttribute('data-grist-form', '');
+  return dom.create(FormPage);
+}, {disableTheme: true});

app/client/ui/AccountWidget.ts

@@ -7,6 +7,7 @@ import {createUserImage} from 'app/client/ui/UserImage';
 import * as viewport from 'app/client/ui/viewport';
 import {bigPrimaryButtonLink, primaryButtonLink} from 'app/client/ui2018/buttons';
 import {mediaDeviceNotSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
+import {unstyledButton} from 'app/client/ui2018/unstyled';
 import {icon} from 'app/client/ui2018/icons';
 import {
   menu,
@@ -280,11 +281,12 @@ const cssAccountWidget = styled('div', `
   white-space: nowrap;
 `);
 
-export const cssUserIcon = styled('div', `
+export const cssUserIcon = styled(unstyledButton, `
   height: 48px;
   width: 48px;
   padding: 8px;
   cursor: pointer;
+  outline-offset: -3px;
 `);
 
 const cssUserInfo = styled('div', `

app/client/ui/AddNewButton.ts

@@ -1,6 +1,7 @@
 import {theme, vars} from 'app/client/ui2018/cssVars';
 import {makeT} from 'app/client/lib/localization';
 import {icon} from 'app/client/ui2018/icons';
+import {unstyledButton} from 'app/client/ui2018/unstyled';
 import {dom, DomElementArg, Observable, styled} from "grainjs";
 
 const t = makeT(`AddNewButton`);
@@ -31,7 +32,7 @@ export function addNewButton(
   );
 }
 
-export const cssAddNewButton = styled('div', `
+export const cssAddNewButton = styled(unstyledButton, `
   display: flex;
   align-items: center;
   margin: 22px 0px 22px 0px;
@@ -46,6 +47,10 @@ export const cssAddNewButton = styled('div', `
   font-weight: bold;
   overflow: hidden;
 
+  /* make sure keyboard highlight is not glued to the button,
+  as it is the same color as the button background */
+  outline-offset: 2px;
+
   --circle-color: ${theme.addNewCircleSmallBg};
 
   &:hover, &.weasel-popup-open {

app/client/ui/AdminPanel.ts

@@ -19,9 +19,9 @@ import {ToggleEnterpriseWidget} from 'app/client/ui/ToggleEnterpriseWidget';
 import {createTopBarHome} from 'app/client/ui/TopBar';
 import {cssBreadcrumbs, separator} from 'app/client/ui2018/breadcrumbs';
 import {basicButton} from 'app/client/ui2018/buttons';
-import {toggle} from 'app/client/ui2018/checkbox';
 import {mediaSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {cssLink, makeLinks} from 'app/client/ui2018/links';
+import {toggleSwitch} from 'app/client/ui2018/toggleSwitch';
 import {BootProbeInfo, BootProbeResult, SandboxingBootProbeDetails} from 'app/common/BootProbe';
 import {AdminPanelPage, commonUrls, getPageTitleSuffix, LatestVersionAvailable} from 'app/common/gristUrls';
 import {InstallAPI, InstallAPIImpl} from 'app/common/InstallAPI';
@@ -148,7 +148,11 @@ Please log in as an administrator.`)),
           id: 'telemetry',
           name: t('Telemetry'),
           description: t('Help us make Grist better'),
-          value: dom.create(HidableToggle, this._supportGrist.getTelemetryOptInObservable()),
+          value: dom.create(
+            HidableToggle,
+            this._supportGrist.getTelemetryOptInObservable(),
+            {labelId: 'admin-panel-item-description-telemetry'}
+          ),
           expandedContent: this._supportGrist.buildTelemetrySection(),
         }),
         dom.create(AdminSectionItem, {
@@ -218,7 +222,11 @@ Please log in as an administrator.`)),
       return null;
     }
 
-    let makeToggle = () => dom.create(HidableToggle, this._toggleEnterprise.getEnterpriseToggleObservable());
+    let makeToggle = () => dom.create(
+      HidableToggle,
+      this._toggleEnterprise.getEnterpriseToggleObservable(),
+      {labelId: 'admin-panel-item-description-enterprise'}
+    );
 
     // If the enterprise edition is forced, we don't show the toggle.
     if (getGristConfig().forceEnableEnterprise) {
@@ -527,8 +535,11 @@ in the future as session IDs generated since v1.1.16 are inherently cryptographi
         )),
         dom.domComputed(allowAutomaticVersionChecking, (allowAutomaticChecks) =>
           allowAutomaticChecks ? cssExpandedContent(
-            dom('span', t('Auto-check weekly')),
-            dom( 'div', toggle(enabledController, testId('admin-panel-updates-auto-check')))
+            dom('label', t('Auto-check weekly'), {for: 'admin-panel-updates-auto-check-switch'}),
+            dom('div', toggleSwitch(enabledController, {
+              args: [testId('admin-panel-updates-auto-check')],
+              inputArgs: [{id: 'admin-panel-updates-auto-check-switch'}],
+            }))
           ) :
           cssExpandedContent(
             dom('span', t('Automatic checks are disabled. \

app/client/ui/AdminPanelCss.ts

@@ -1,12 +1,19 @@
 import {hoverTooltip} from 'app/client/ui/tooltips';
 import {transition} from 'app/client/ui/transitions';
-import {toggle} from 'app/client/ui2018/checkbox';
+import {toggleSwitch} from 'app/client/ui2018/toggleSwitch';
 import {mediaSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {dom, DomContents, DomElementArg, IDisposableOwner, Observable, styled} from 'grainjs';
 
-export function HidableToggle(owner: IDisposableOwner, value: Observable<boolean|null>) {
-  return toggle(value, dom.hide((use) => use(value) === null));
+export function HidableToggle(
+  owner: IDisposableOwner,
+  value: Observable<boolean|null>,
+  options: {labelId?: string} = {}
+) {
+  return toggleSwitch(value, {
+    args: [dom.hide((use) => use(value) === null)],
+    inputArgs: [options.labelId ? {"aria-labelledby": options.labelId} : undefined],
+  });
 }
 
 export function AdminSection(owner: IDisposableOwner, title: DomContents, items: DomElementArg[]) {
@@ -51,7 +58,7 @@ export function AdminSectionItem(owner: IDisposableOwner, options: {
         }, 0);
       },
     ),
-    cssItemDescription(options.description),
+    cssItemDescription(options.description, {id: `admin-panel-item-description-${options.id}`}),
     cssItemValue(options.value,
       testId(`admin-panel-item-value-${options.id}`),
       dom.on('click', ev => ev.stopPropagation())),

app/client/ui/AppHeader.ts

@@ -2,12 +2,12 @@ import {getWelcomeHomeUrl, urlState} from 'app/client/models/gristUrlState';
 import {getTheme} from 'app/client/ui/CustomThemes';
 import {cssLeftPane} from 'app/client/ui/PagePanels';
 import {colors, theme, vars} from 'app/client/ui2018/cssVars';
-import * as version from 'app/common/version';
 import {menu, menuItem, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
 import {commonUrls} from 'app/common/gristUrls';
 import {getOrgName, isTemplatesOrg, Organization} from 'app/common/UserAPI';
 import {AppModel} from 'app/client/models/AppModel';
 import {icon} from 'app/client/ui2018/icons';
+import {unstyledButton} from 'app/client/ui2018/unstyled';
 import {DocPageModel} from 'app/client/models/DocPageModel';
 import * as roles from 'app/common/roles';
 import {manageTeamUsersApp} from 'app/client/ui/OpenUserManager';
@@ -81,7 +81,7 @@ export class AppHeader extends Disposable {
     // Check if we have a custom image.
     const customImage = this._appModel.currentOrg?.orgPrefs?.customLogoUrl;
 
-    const variant = () => [cssUserImage.cls('-border'), cssUserImage.cls('-square')];
+    const variant = () => [cssUserImage.cls('-border'), cssUserImage.cls('-square'), cssUserImage.cls('-inAppLogo')];
 
     // Personal avatar is shown only for logged in users.
     const personalAvatar = () => !this._appModel.currentValidUser
@@ -108,18 +108,13 @@ export class AppHeader extends Disposable {
                           ? null
                           : image();
 
-    const title = `Version ${version.version}` +
-          ((version.gitcommit as string) !== 'unknown' ? ` (${version.gitcommit})` : '');
+    const altText = t('{{ organizationName }} - Back to home', { organizationName: this._appLogoOrg.get().name });
 
     return cssAppHeader(
       cssAppHeader.cls('-widelogo', productFlavor.wideLogo || false),
       cssAppHeaderBox(
         dom.domComputed(this._appLogoOrgLink, orgLink => cssAppLogo(
-          // Show version when hovering over the application icon.
-          // Include gitcommit when known. Cast version.gitcommit since, depending
-          // on how Grist is compiled, tsc may believe it to be a constant and
-          // believe that testing it is unnecessary.
-          {title},
+          {'aria-label': altText},
           this._setHomePageUrl(orgLink),
           content(),
           testId('logo'),
@@ -141,6 +136,7 @@ export class AppHeader extends Disposable {
       );
     } else {
       return cssOrg(
+        dom.cls('_cssOrg'),
         cssOrgName(dom.text(this._appLogoOrgName), testId('orgname')),
         productPill(this._currentOrg),
         dom.maybe(this._appLogoOrgName, () => [
@@ -277,7 +273,7 @@ export function productPill(org: Organization|null, options: {large?: boolean} =
 }
 
 
-const cssAppHeader = styled('div._cssAppHeader', `
+const cssAppHeader = styled('header._cssAppHeader', `
   width: 100%;
   height: 100%;
   background-color: ${theme.leftPanelBg};
@@ -330,7 +326,11 @@ const cssAppLogo = styled('a._cssAppLogo', `
   overflow: hidden;
   border-right-color: var(--middle-border-color, ${theme.appHeaderBorder});
 
-  outline-offset: -1px;
+  /* make sure keyboard highlight is visible
+  (it wouldn't be without the offset because of the overflow: hidden) */
+  outline-offset: -3px;
+  position: relative;
+  z-index: 1;
 
   &-grist-logo {
     background-image: var(--icon-GristLogo);
@@ -361,7 +361,7 @@ const cssAppLogo = styled('a._cssAppLogo', `
   }
 `);
 
-const cssOrg = styled('div._cssOrg', `
+const cssOrg = styled(unstyledButton, `
   display: none;
   flex-grow: 1;
   flex-basis: 0px;
@@ -377,6 +377,10 @@ const cssOrg = styled('div._cssOrg', `
   border-bottom-left-radius: 0;
   border-left: 0px;
 
+  /* make sure keyboard highlight is visible
+  (it wouldn't be without the offset because of the overflow: hidden) */
+  outline-offset: -3px;
+
   &:hover {
     border-color: ${theme.appHeaderBorderHover};
   }