Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

Change translation keys for ui directory

Browse Source
This commit is contained in:
Louis Delbosc 2022-12-06 14:57:29 +01:00
parent 24a656406e
commit b76fe50bf9
42 changed files with 354 additions and 354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/client/ui/AccountPage.ts
View File

@ -58,13 +58,13 @@ export class AccountPage extends Disposable {
const {enableCustomCss} = getGristConfig(); const {enableCustomCss} = getGristConfig();
return domComputed(this._userObs, (user) => user && ( return domComputed(this._userObs, (user) => user && (
css.container(css.accountPage( css.container(css.accountPage(
css.header(t('AccountSettings')), css.header(t("Account settings")),
css.dataRow( css.dataRow(
css.inlineSubHeader(t('Email')), css.inlineSubHeader(t("Email")),
css.email(user.email), css.email(user.email),
), ),
css.dataRow( css.dataRow(
css.inlineSubHeader(t('Name')), css.inlineSubHeader(t("Name")),
domComputed(this._isEditingName, (isEditing) => ( domComputed(this._isEditingName, (isEditing) => (
isEditing ? [ isEditing ? [
transientInput( transientInput(
@ -78,13 +78,13 @@ export class AccountPage extends Disposable {
css.flexGrow.cls(''), css.flexGrow.cls(''),
), ),
css.textBtn( css.textBtn(
css.icon('Settings'), t('Save'), css.icon('Settings'), t("Save"),
// No need to save on 'click'. The transient input already does it on close. // No need to save on 'click'. The transient input already does it on close.
), ),
] : [ ] : [
css.name(user.name), css.name(user.name),
css.textBtn( css.textBtn(
css.icon('Settings'), t('Edit'), css.icon('Settings'), t("Edit"),
dom.on('click', () => this._isEditingName.set(true)), dom.on('click', () => this._isEditingName.set(true)),
), ),
] ]
@ -93,11 +93,11 @@ export class AccountPage extends Disposable {
), ),
// show warning for invalid name but not for the empty string // show warning for invalid name but not for the empty string
dom.maybe(use => use(this._nameEdit) && !use(this._isNameValid), cssWarnings), dom.maybe(use => use(this._nameEdit) && !use(this._isNameValid), cssWarnings),
css.header(t('PasswordSecurity')), css.header(t("Password & Security")),
css.dataRow( css.dataRow(
css.inlineSubHeader(t("LoginMethod")), css.inlineSubHeader(t("Login Method")),
css.loginMethod(user.loginMethod), css.loginMethod(user.loginMethod),
user.loginMethod === 'Email + Password' ? css.textBtn(t("ChangePassword"), user.loginMethod === 'Email + Password' ? css.textBtn(t("Change Password"),
dom.on('click', () => this._showChangePasswordDialog()), dom.on('click', () => this._showChangePasswordDialog()),
) : null, ) : null,
testId('login-method'), testId('login-method'),
@ -106,24 +106,24 @@ export class AccountPage extends Disposable {
css.dataRow( css.dataRow(
labeledSquareCheckbox( labeledSquareCheckbox(
this._allowGoogleLogin, this._allowGoogleLogin,
t('AllowGoogleSigning'), t("Allow signing in to this account with Google"),
testId('allow-google-login-checkbox'), testId('allow-google-login-checkbox'),
), ),
testId('allow-google-login'), testId('allow-google-login'),
), ),
css.subHeader(t('TwoFactorAuth')), css.subHeader(t("Two-factor authentication")),
css.description( css.description(
t("TwoFactorAuthDescription") t("Two-factor authentication is an extra layer of security for your Grist account designed to ensure that you're the only person who can access your account, even if someone knows your password.")
), ),
dom.create(MFAConfig, user), dom.create(MFAConfig, user),
), ),
// Custom CSS is incompatible with custom themes. // Custom CSS is incompatible with custom themes.
enableCustomCss ? null : [ enableCustomCss ? null : [
css.header(t('Theme')), css.header(t("Theme")),
dom.create(ThemeConfig, this._appModel), dom.create(ThemeConfig, this._appModel),
], ],
css.header(t('API')), css.header(t("API")),
css.dataRow(css.inlineSubHeader(t('APIKey')), css.content( css.dataRow(css.inlineSubHeader(t("API Key")), css.content(
dom.create(ApiKey, { dom.create(ApiKey, {
apiKey: this._apiKey, apiKey: this._apiKey,
onCreate: () => this._createApiKey(), onCreate: () => this._createApiKey(),
@ -214,7 +214,7 @@ export function checkName(name: string): boolean {
*/ */
function buildNameWarningsDom() { function buildNameWarningsDom() {
return css.warning( return css.warning(
t("WarningUsername"), t("Names only allow letters, numbers and certain special characters"),
testId('username-warning'), testId('username-warning'),
); );
} }

20
app/client/ui/AccountWidget.ts
View File

@ -36,7 +36,7 @@ export class AccountWidget extends Disposable {
cssUserIcon(createUserImage(user, 'medium', testId('user-icon')), cssUserIcon(createUserImage(user, 'medium', testId('user-icon')),
menu(() => this._makeAccountMenu(user), {placement: 'bottom-end'}), menu(() => this._makeAccountMenu(user), {placement: 'bottom-end'}),
) : ) :
cssSignInButton(t('SignIn'), icon('Collapse'), testId('user-signin'), cssSignInButton(t("Sign in"), icon('Collapse'), testId('user-signin'),
menu(() => this._makeAccountMenu(user), {placement: 'bottom-end'}), menu(() => this._makeAccountMenu(user), {placement: 'bottom-end'}),
) )
) )
@ -57,24 +57,24 @@ export class AccountWidget extends Disposable {
// The 'Document Settings' item, when there is an open document. // The 'Document Settings' item, when there is an open document.
const documentSettingsItem = (gristDoc ? const documentSettingsItem = (gristDoc ?
menuItem(async () => (await loadGristDoc()).showDocSettingsModal(gristDoc.docInfo, this._docPageModel!), menuItem(async () => (await loadGristDoc()).showDocSettingsModal(gristDoc.docInfo, this._docPageModel!),
t('DocumentSettings'), t("Document Settings"),
testId('dm-doc-settings')) : testId('dm-doc-settings')) :
null); null);
// The item to toggle mobile mode (presence of viewport meta tag). // The item to toggle mobile mode (presence of viewport meta tag).
const mobileModeToggle = menuItem(viewport.toggleViewport, const mobileModeToggle = menuItem(viewport.toggleViewport,
cssSmallDeviceOnly.cls(''), // Only show this toggle on small devices. cssSmallDeviceOnly.cls(''), // Only show this toggle on small devices.
t('ToggleMobileMode'), t("Toggle Mobile Mode"),
cssCheckmark('Tick', dom.show(viewport.viewportEnabled)), cssCheckmark('Tick', dom.show(viewport.viewportEnabled)),
testId('usermenu-toggle-mobile'), testId('usermenu-toggle-mobile'),
); );
if (!user) { if (!user) {
return [ return [
menuItemLink({href: getLoginOrSignupUrl()}, t('SignIn')), menuItemLink({href: getLoginOrSignupUrl()}, t("Sign in")),
menuDivider(), menuDivider(),
documentSettingsItem, documentSettingsItem,
menuItemLink({href: commonUrls.plans}, t('Pricing')), menuItemLink({href: commonUrls.plans}, t("Pricing")),
mobileModeToggle, mobileModeToggle,
]; ];
} }
@ -88,14 +88,14 @@ export class AccountWidget extends Disposable {
cssEmail(user.email, testId('usermenu-email')) cssEmail(user.email, testId('usermenu-email'))
) )
), ),
menuItemLink(urlState().setLinkUrl({account: 'account'}), t('ProfileSettings')), menuItemLink(urlState().setLinkUrl({account: 'account'}), t("Profile Settings")),
documentSettingsItem, documentSettingsItem,
// Show 'Organization Settings' when on a home page of a valid org. // Show 'Organization Settings' when on a home page of a valid org.
(!this._docPageModel && currentOrg && this._appModel.isTeamSite ? (!this._docPageModel && currentOrg && this._appModel.isTeamSite ?
menuItem(() => manageTeamUsers(currentOrg, user, this._appModel.api), menuItem(() => manageTeamUsers(currentOrg, user, this._appModel.api),
roles.canEditAccess(currentOrg.access) ? t('ManageTeam') : t('AccessDetails'), roles.canEditAccess(currentOrg.access) ? t("Manage Team") : t("Access Details"),
testId('dm-org-access')) : testId('dm-org-access')) :
// Don't show on doc pages, or for personal orgs. // Don't show on doc pages, or for personal orgs.
null), null),
@ -111,7 +111,7 @@ export class AccountWidget extends Disposable {
// org-listing UI below. // org-listing UI below.
this._appModel.topAppModel.isSingleOrg || shouldHideUiElement("multiAccounts") ? [] : [ this._appModel.topAppModel.isSingleOrg || shouldHideUiElement("multiAccounts") ? [] : [
menuDivider(), menuDivider(),
menuSubHeader(dom.text((use) => use(users).length > 1 ? t('SwitchAccounts') : t('Accounts'))), menuSubHeader(dom.text((use) => use(users).length > 1 ? t("Switch Accounts") : t("Accounts"))),
dom.forEach(users, (_user) => { dom.forEach(users, (_user) => {
if (_user.id === user.id) { return null; } if (_user.id === user.id) { return null; }
return menuItem(() => this._switchAccount(_user), return menuItem(() => this._switchAccount(_user),
@ -119,10 +119,10 @@ export class AccountWidget extends Disposable {
cssOtherEmail(_user.email, testId('usermenu-other-email')), cssOtherEmail(_user.email, testId('usermenu-other-email')),
); );
}), }),
isExternal ? null : menuItemLink({href: getLoginUrl()}, t("AddAccount"), testId('dm-add-account')), isExternal ? null : menuItemLink({href: getLoginUrl()}, t("Add Account"), testId('dm-add-account')),
], ],
menuItemLink({href: getLogoutUrl()}, t("SignOut"), testId('dm-log-out')), menuItemLink({href: getLogoutUrl()}, t("Sign Out"), testId('dm-log-out')),
maybeAddSiteSwitcherSection(this._appModel), maybeAddSiteSwitcherSection(this._appModel),
]; ];

2
app/client/ui/AddNewButton.ts
View File

@ -10,7 +10,7 @@ export function addNewButton(isOpen: Observable<boolean> | boolean = true, ...ar
cssAddNewButton.cls('-open', isOpen), cssAddNewButton.cls('-open', isOpen),
// Setting spacing as flex items allows them to shrink faster when there isn't enough space. // Setting spacing as flex items allows them to shrink faster when there isn't enough space.
cssLeftMargin(), cssLeftMargin(),
cssAddText(t('AddNew')), cssAddText(t("Add New")),
dom('div', {style: 'flex: 1 1 16px'}), dom('div', {style: 'flex: 1 1 16px'}),
cssPlusButton(cssPlusIcon('Plus')), cssPlusButton(cssPlusIcon('Plus')),
dom('div', {style: 'flex: 0 1 16px'}), dom('div', {style: 'flex: 0 1 16px'}),

12
app/client/ui/ApiKey.ts
View File

@ -55,7 +55,7 @@ export class ApiKey extends Disposable {
}, },
dom.attr('type', (use) => use(this._isHidden) ? 'password' : 'text'), dom.attr('type', (use) => use(this._isHidden) ? 'password' : 'text'),
testId('key'), testId('key'),
{title: t('ClickToShow')}, {title: t("Click to show")},
dom.on('click', (_ev, el) => { dom.on('click', (_ev, el) => {
this._isHidden.set(false); this._isHidden.set(false);
setTimeout(() => el.select(), 0); setTimeout(() => el.select(), 0);
@ -67,7 +67,7 @@ export class ApiKey extends Disposable {
this._inputArgs this._inputArgs
), ),
cssTextBtn( cssTextBtn(
cssTextBtnIcon('Remove'), t('Remove'), cssTextBtnIcon('Remove'), t("Remove"),
dom.on('click', () => this._showRemoveKeyModal()), dom.on('click', () => this._showRemoveKeyModal()),
testId('delete'), testId('delete'),
dom.boolAttr('disabled', (use) => use(this._loading) || this._anonymous) dom.boolAttr('disabled', (use) => use(this._loading) || this._anonymous)
@ -76,9 +76,9 @@ export class ApiKey extends Disposable {
description(this._getDescription(), testId('description')), description(this._getDescription(), testId('description')),
)), )),
dom.maybe((use) => !(use(this._apiKey) || this._anonymous), () => [ dom.maybe((use) => !(use(this._apiKey) || this._anonymous), () => [
basicButton(t('Create'), dom.on('click', () => this._onCreate()), testId('create'), basicButton(t("Create"), dom.on('click', () => this._onCreate()), testId('create'),
dom.boolAttr('disabled', this._loading)), dom.boolAttr('disabled', this._loading)),
description(t('ByGenerating'), testId('description')), description(t("By generating an API key, you will be able to make API calls for your own account."), testId('description')),
]), ]),
); );
} }
@ -110,9 +110,9 @@ export class ApiKey extends Disposable {
private _showRemoveKeyModal(): void { private _showRemoveKeyModal(): void {
confirmModal( confirmModal(
t('RemoveAPIKey'), t('Remove'), t("Remove API Key"), t("Remove"),
() => this._onDelete(), () => this._onDelete(),
t("AboutToDeleteAPIKey") t("You're about to delete an API key. This will cause all future requests using this API key to be rejected. Do you still want to delete?")
); );
} }
} }

6
app/client/ui/App.ts
View File

@ -93,8 +93,8 @@ export class App extends DisposableWithEvents {
dom('table.g-help-table', dom('table.g-help-table',
dom('thead', dom('thead',
dom('tr', dom('tr',
dom('th', t('Key')), dom('th', t("Key")),
dom('th', t('Description')) dom('th', t("Description"))
) )
), ),
dom.forEach(commandList.groups, (group: any) => { dom.forEach(commandList.groups, (group: any) => {
@ -234,7 +234,7 @@ export class App extends DisposableWithEvents {
if (message.match(/MemoryError|unmarshallable object/)) { if (message.match(/MemoryError|unmarshallable object/)) {
if (err.message.length > 30) { if (err.message.length > 30) {
// TLDR // TLDR
err.message = t('MemoryError'); err.message = t("Memory Error");
} }
this._mostRecentDocPageModel?.offerRecovery(err); this._mostRecentDocPageModel?.offerRecovery(err);
} }

6
app/client/ui/AppHeader.ts
View File

@ -57,11 +57,11 @@ export class AppHeader extends Disposable {
this._orgName && cssDropdownIcon('Dropdown'), this._orgName && cssDropdownIcon('Dropdown'),
menu(() => [ menu(() => [
menuSubHeader( menuSubHeader(
this._appModel.isTeamSite ? t('TeamSite') : t('PersonalSite') this._appModel.isTeamSite ? t("Team Site") : t("Personal Site")
+ (this._appModel.isLegacySite ? ` (${t('Legacy')})` : ''), + (this._appModel.isLegacySite ? ` (${t("Legacy")})` : ''),
testId('orgmenu-title'), testId('orgmenu-title'),
), ),
menuItemLink(urlState().setLinkUrl({}), t('HomePage'), testId('orgmenu-home-page')), menuItemLink(urlState().setLinkUrl({}), t("Home Page"), testId('orgmenu-home-page')),
// Show 'Organization Settings' when on a home page of a valid org. // Show 'Organization Settings' when on a home page of a valid org.
(!this._docPageModel && currentOrg && !currentOrg.owner ? (!this._docPageModel && currentOrg && !currentOrg.owner ?

16
app/client/ui/CellContextMenu.ts
View File

@ -27,7 +27,7 @@ export function CellContextMenu(rowOptions: IRowContextMenu, colOptions: IMultiC
const numRows: number = rowOptions.numRows; const numRows: number = rowOptions.numRows;
const nameDeleteRows = t("DeleteRows", {count: numRows}); const nameDeleteRows = t("DeleteRows", {count: numRows});
const nameClearCells = (numRows > 1 || numCols > 1) ? t('ClearValues') : t('ClearCell'); const nameClearCells = (numRows > 1 || numCols > 1) ? t("Clear values") : t("Clear cell");
const result: Array<Element|null> = []; const result: Array<Element|null> = [];
@ -43,9 +43,9 @@ export function CellContextMenu(rowOptions: IRowContextMenu, colOptions: IMultiC
...( ...(
(numCols > 1 || numRows > 1) ? [] : [ (numCols > 1 || numRows > 1) ? [] : [
menuDivider(), menuDivider(),
menuItemCmd(allCommands.copyLink, t('CopyAnchorLink')), menuItemCmd(allCommands.copyLink, t("Copy anchor link")),
menuDivider(), menuDivider(),
menuItemCmd(allCommands.filterByThisCellValue, t("FilterByValue")), menuItemCmd(allCommands.filterByThisCellValue, t("Filter by this value")),
menuItemCmd(allCommands.openDiscussion, 'Comment', dom.cls('disabled', ( menuItemCmd(allCommands.openDiscussion, 'Comment', dom.cls('disabled', (
isReadonly || numRows === 0 || numCols === 0 isReadonly || numRows === 0 || numCols === 0
)), dom.hide(use => !use(COMMENTS()))) //TODO: i18next )), dom.hide(use => !use(COMMENTS()))) //TODO: i18next
@ -60,19 +60,19 @@ export function CellContextMenu(rowOptions: IRowContextMenu, colOptions: IMultiC
// When the view is sorted, any newly added records get shifts instantly at the top or // When the view is sorted, any newly added records get shifts instantly at the top or
// bottom. It could be very confusing for users who might expect the record to stay above or // bottom. It could be very confusing for users who might expect the record to stay above or
// below the active row. Thus in this case we show a single `insert row` command. // below the active row. Thus in this case we show a single `insert row` command.
[menuItemCmd(allCommands.insertRecordAfter, t("InsertRow"), [menuItemCmd(allCommands.insertRecordAfter, t("Insert row"),
dom.cls('disabled', disableInsert))] : dom.cls('disabled', disableInsert))] :
[menuItemCmd(allCommands.insertRecordBefore, t("InsertRowAbove"), [menuItemCmd(allCommands.insertRecordBefore, t("Insert row above"),
dom.cls('disabled', disableInsert)), dom.cls('disabled', disableInsert)),
menuItemCmd(allCommands.insertRecordAfter, t("InsertRowBelow"), menuItemCmd(allCommands.insertRecordAfter, t("Insert row below"),
dom.cls('disabled', disableInsert))] dom.cls('disabled', disableInsert))]
), ),
menuItemCmd(allCommands.duplicateRows, t("DuplicateRows", {count: numRows}), menuItemCmd(allCommands.duplicateRows, t("DuplicateRows", {count: numRows}),
dom.cls('disabled', disableInsert || numRows === 0)), dom.cls('disabled', disableInsert || numRows === 0)),
menuItemCmd(allCommands.insertFieldBefore, t("InsertColumnLeft"), menuItemCmd(allCommands.insertFieldBefore, t("Insert column to the left"),
disableForReadonlyView), disableForReadonlyView),
menuItemCmd(allCommands.insertFieldAfter, t("InsertColumnRight"), menuItemCmd(allCommands.insertFieldAfter, t("Insert column to the right"),
disableForReadonlyView), disableForReadonlyView),

26
app/client/ui/CustomSectionConfig.ts
View File

@ -61,7 +61,7 @@ class ColumnPicker extends Disposable {
return [ return [
cssLabel( cssLabel(
this._column.title, this._column.title,
this._column.optional ? cssSubLabel(t('Optional')) : null, this._column.optional ? cssSubLabel(t(" (optional)")) : null,
testId('label-for-' + this._column.name), testId('label-for-' + this._column.name),
), ),
this._column.description ? cssHelp( this._column.description ? cssHelp(
@ -73,7 +73,7 @@ class ColumnPicker extends Disposable {
properValue, properValue,
options, options,
{ {
defaultLabel: this._column.typeDesc != "any" ? t('PickAColumnWithType', {"columnType": this._column.typeDesc}) : t('PickAColumn') defaultLabel: this._column.typeDesc != "any" ? t("Pick a {{columnType}} column", {"columnType": this._column.typeDesc}) : t("Pick a column")
} }
), ),
testId('mapping-for-' + this._column.name), testId('mapping-for-' + this._column.name),
@ -105,7 +105,7 @@ class ColumnListPicker extends Disposable {
return [ return [
cssRow( cssRow(
cssAddMapping( cssAddMapping(
cssAddIcon('Plus'), t('Add') + ' ' + this._column.title, cssAddIcon('Plus'), t("Add") + ' ' + this._column.title,
menu(() => { menu(() => {
const otherColumns = this._getNotMappedColumns(); const otherColumns = this._getNotMappedColumns();
const typedColumns = otherColumns.filter(this._typeFilter()); const typedColumns = otherColumns.filter(this._typeFilter());
@ -370,17 +370,17 @@ export class CustomSectionConfig extends Disposable {
return null; return null;
} }
switch(level) { switch(level) {
case AccessLevel.none: return cssConfirmLine(t("WidgetNoPermissison")); case AccessLevel.none: return cssConfirmLine(t("Widget does not require any permissions."));
case AccessLevel.read_table: return cssConfirmLine(t("WidgetNeedRead", {read: dom("b", "read")})); // TODO i18next case AccessLevel.read_table: return cssConfirmLine(t("Widget needs to {{read}} the current table.", {read: dom("b", "read")})); // TODO i18next
case AccessLevel.full: return cssConfirmLine(t("WidgetNeedFullAccess", {fullAccess: dom("b", "full access")})); // TODO i18next case AccessLevel.full: return cssConfirmLine(t("Widget needs {{fullAccess}} to this document.", {fullAccess: dom("b", "full access")})); // TODO i18next
default: throw new Error(`Unsupported ${level} access level`); default: throw new Error(`Unsupported ${level} access level`);
} }
} }
// Options for access level. // Options for access level.
const levels: IOptionFull<string>[] = [ const levels: IOptionFull<string>[] = [
{label: t('NoDocumentAccess'), value: AccessLevel.none}, {label: t("No document access"), value: AccessLevel.none},
{label: t('ReadSelectedTable'), value: AccessLevel.read_table}, {label: t("Read selected table"), value: AccessLevel.read_table},
{label: t('FullDocumentAccess'), value: AccessLevel.full}, {label: t("Full document access"), value: AccessLevel.full},
]; ];
return dom( return dom(
'div', 'div',
@ -388,7 +388,7 @@ export class CustomSectionConfig extends Disposable {
this._canSelect this._canSelect
? cssRow( ? cssRow(
select(this._selectedId, options, { select(this._selectedId, options, {
defaultLabel: t('SelectCustomWidget'), defaultLabel: t("Select Custom Widget"),
menuCssClass: cssMenu.className, menuCssClass: cssMenu.className,
}), }),
testId('select') testId('select')
@ -399,7 +399,7 @@ export class CustomSectionConfig extends Disposable {
cssTextInput( cssTextInput(
this._url, this._url,
async value => this._url.set(value), async value => this._url.set(value),
dom.attr('placeholder', t('EnterCustomURL')), dom.attr('placeholder', t("Enter Custom URL")),
testId('url') testId('url')
) )
), ),
@ -440,7 +440,7 @@ export class CustomSectionConfig extends Disposable {
dom.maybe(this._hasConfiguration, () => dom.maybe(this._hasConfiguration, () =>
cssSection( cssSection(
textButton( textButton(
t('OpenConfiguration'), t("Open configuration"),
dom.on('click', () => this._openConfiguration()), dom.on('click', () => this._openConfiguration()),
testId('open-configuration') testId('open-configuration')
) )
@ -450,7 +450,7 @@ export class CustomSectionConfig extends Disposable {
cssLink( cssLink(
dom.attr('href', 'https://support.getgrist.com/widget-custom'), dom.attr('href', 'https://support.getgrist.com/widget-custom'),
dom.attr('target', '_blank'), dom.attr('target', '_blank'),
t('LearnMore') t("Learn more about custom widgets")
) )
), ),
dom.maybeOwned(use => use(this._section.columnsToMap), (owner, columns) => { dom.maybeOwned(use => use(this._section.columnsToMap), (owner, columns) => {

16
app/client/ui/DocHistory.ts
View File

@ -28,8 +28,8 @@ export class DocHistory extends Disposable implements IDomComponent {
public buildDom() { public buildDom() {
const tabs = [ const tabs = [
{value: 'activity', label: t('Activity')}, {value: 'activity', label: t("Activity")},
{value: 'snapshots', label: t('Snapshots')}, {value: 'snapshots', label: t("Snapshots")},
]; ];
return [ return [
cssSubTabs( cssSubTabs(
@ -79,7 +79,7 @@ export class DocHistory extends Disposable implements IDomComponent {
return dom( return dom(
'div', 'div',
dom.maybe(snapshotsDenied, () => cssSnapshotDenied( dom.maybe(snapshotsDenied, () => cssSnapshotDenied(
t('SnapshotsUnavailable'), t("Snapshots are unavailable."),
testId('doc-history-error'))), testId('doc-history-error'))),
// Note that most recent snapshots are first. // Note that most recent snapshots are first.
dom.domComputed(snapshots, (snapshotList) => snapshotList.map((snapshot, index) => { dom.domComputed(snapshots, (snapshotList) => snapshotList.map((snapshot, index) => {
@ -98,11 +98,11 @@ export class DocHistory extends Disposable implements IDomComponent {
), ),
cssMenuDots(icon('Dots'), cssMenuDots(icon('Dots'),
menu(() => [ menu(() => [
menuItemLink(setLink(snapshot), t('OpenSnapshot')), menuItemLink(setLink(snapshot), t("Open Snapshot")),
menuItemLink(setLink(snapshot, origUrlId), t('CompareToCurrent'), menuItemLink(setLink(snapshot, origUrlId), t("Compare to Current"),
menuAnnotate(t('Beta'))), menuAnnotate(t("Beta"))),
prevSnapshot && menuItemLink(setLink(prevSnapshot, snapshot.docId), t('CompareToPrevious'), prevSnapshot && menuItemLink(setLink(prevSnapshot, snapshot.docId), t("Compare to Previous"),
menuAnnotate(t('Beta'))), menuAnnotate(t("Beta"))),
], ],
{placement: 'bottom-end', parentSelectorToMark: '.' + cssSnapshotCard.className} {placement: 'bottom-end', parentSelectorToMark: '.' + cssSnapshotCard.className}
), ),

76
app/client/ui/DocMenu.ts
View File

@ -71,8 +71,8 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
return css.docList( return css.docList(
css.docMenu( css.docMenu(
dom.maybe(!home.app.currentFeatures.workspaces, () => [ dom.maybe(!home.app.currentFeatures.workspaces, () => [
css.docListHeader(t('ServiceNotAvailable')), css.docListHeader(t("This service is not available right now")),
dom('span', t('NeedPaidPlan')), dom('span', t("(The organization needs a paid plan)")),
]), ]),
// currentWS and showIntro observables change together. We capture both in one domComputed call. // currentWS and showIntro observables change together. We capture both in one domComputed call.
@ -98,7 +98,7 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
// TODO: this is shown on all pages, but there is a hack in currentWSPinnedDocs that // TODO: this is shown on all pages, but there is a hack in currentWSPinnedDocs that
// removes all pinned docs when on trash page. // removes all pinned docs when on trash page.
dom.maybe((use) => use(home.currentWSPinnedDocs).length > 0, () => [ dom.maybe((use) => use(home.currentWSPinnedDocs).length > 0, () => [
css.docListHeader(css.pinnedDocsIcon('PinBig'), t('PinnedDocuments')), css.docListHeader(css.pinnedDocsIcon('PinBig'), t("Pinned Documents")),
createPinnedDocs(home, home.currentWSPinnedDocs), createPinnedDocs(home, home.currentWSPinnedDocs),
]), ]),
@ -106,7 +106,7 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
dom.maybe((use) => page === 'templates' && use(home.featuredTemplates).length > 0, () => [ dom.maybe((use) => page === 'templates' && use(home.featuredTemplates).length > 0, () => [
css.featuredTemplatesHeader( css.featuredTemplatesHeader(
css.featuredTemplatesIcon('Idea'), css.featuredTemplatesIcon('Idea'),
t('Featured'), t("Featured"),
testId('featured-templates-header') testId('featured-templates-header')
), ),
createPinnedDocs(home, home.featuredTemplates, true), createPinnedDocs(home, home.featuredTemplates, true),
@ -118,12 +118,12 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
null : null :
css.docListHeader( css.docListHeader(
( (
page === 'all' ? t('AllDocuments') : page === 'all' ? t("All Documents") :
page === 'templates' ? page === 'templates' ?
dom.domComputed(use => use(home.featuredTemplates).length > 0, (hasFeaturedTemplates) => dom.domComputed(use => use(home.featuredTemplates).length > 0, (hasFeaturedTemplates) =>
hasFeaturedTemplates ? t('MoreExamplesAndTemplates') : t('ExamplesAndTemplates') hasFeaturedTemplates ? t("More Examples and Templates") : t("Examples and Templates")
) : ) :
page === 'trash' ? t('Trash') : page === 'trash' ? t("Trash") :
workspace && [css.docHeaderIcon('Folder'), workspaceName(home.app, workspace)] workspace && [css.docHeaderIcon('Folder'), workspaceName(home.app, workspace)]
), ),
testId('doc-header'), testId('doc-header'),
@ -138,9 +138,9 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
) : ) :
(page === 'trash') ? (page === 'trash') ?
dom('div', dom('div',
css.docBlock(t('DocStayInTrash')), css.docBlock(t("Documents stay in Trash for 30 days, after which they get deleted permanently.")),
dom.maybe((use) => use(home.trashWorkspaces).length === 0, () => dom.maybe((use) => use(home.trashWorkspaces).length === 0, () =>
css.docBlock(t("EmptyTrash")) css.docBlock(t("Trash is empty."))
), ),
buildAllDocsBlock(home, home.trashWorkspaces, false, flashDocId, viewSettings), buildAllDocsBlock(home, home.trashWorkspaces, false, flashDocId, viewSettings),
) : ) :
@ -155,7 +155,7 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
) : ) :
workspace && !workspace.isSupportWorkspace && workspace.docs?.length === 0 ? workspace && !workspace.isSupportWorkspace && workspace.docs?.length === 0 ?
buildWorkspaceIntro(home) : buildWorkspaceIntro(home) :
css.docBlock(t('WorkspaceNotFound')) css.docBlock(t("Workspace not found"))
) )
]), ]),
]; ];
@ -187,7 +187,7 @@ function buildAllDocsBlock(
(ws.removedAt ? (ws.removedAt ?
[ [
css.docRowUpdatedAt(t('Deleted', {at:getTimeFromNow(ws.removedAt)})), css.docRowUpdatedAt(t("Deleted {{at}}", {at:getTimeFromNow(ws.removedAt)})),
css.docMenuTrigger(icon('Dots')), css.docMenuTrigger(icon('Dots')),
menu(() => makeRemovedWsOptionsMenu(home, ws), menu(() => makeRemovedWsOptionsMenu(home, ws),
{placement: 'bottom-end', parentSelectorToMark: '.' + css.docRowWrapper.className}), {placement: 'bottom-end', parentSelectorToMark: '.' + css.docRowWrapper.className}),
@ -221,7 +221,7 @@ function buildAllDocsTemplates(home: HomeModel, viewSettings: ViewSettings) {
dom.autoDispose(hideTemplatesObs), dom.autoDispose(hideTemplatesObs),
css.templatesHeaderWrap( css.templatesHeaderWrap(
css.templatesHeader( css.templatesHeader(
t('Examples&Templates'), t("Examples & Templates"),
dom.domComputed(hideTemplatesObs, (collapsed) => dom.domComputed(hideTemplatesObs, (collapsed) =>
collapsed ? css.templatesHeaderIcon('Expand') : css.templatesHeaderIcon('Collapse') collapsed ? css.templatesHeaderIcon('Expand') : css.templatesHeaderIcon('Collapse')
), ),
@ -233,7 +233,7 @@ function buildAllDocsTemplates(home: HomeModel, viewSettings: ViewSettings) {
dom.maybe((use) => !use(hideTemplatesObs), () => [ dom.maybe((use) => !use(hideTemplatesObs), () => [
buildTemplateDocs(home, templates, viewSettings), buildTemplateDocs(home, templates, viewSettings),
bigBasicButton( bigBasicButton(
t('DiscoverMoreTemplates'), t("Discover More Templates"),
urlState().setLinkUrl({homePage: 'templates'}), urlState().setLinkUrl({homePage: 'templates'}),
testId('all-docs-templates-discover-more'), testId('all-docs-templates-discover-more'),
) )
@ -281,7 +281,7 @@ function buildOtherSites(home: HomeModel) {
return css.otherSitesBlock( return css.otherSitesBlock(
dom.autoDispose(hideOtherSitesObs), dom.autoDispose(hideOtherSitesObs),
css.otherSitesHeader( css.otherSitesHeader(
t('OtherSites'), t("Other Sites"),
dom.domComputed(hideOtherSitesObs, (collapsed) => dom.domComputed(hideOtherSitesObs, (collapsed) =>
collapsed ? css.otherSitesHeaderIcon('Expand') : css.otherSitesHeaderIcon('Collapse') collapsed ? css.otherSitesHeaderIcon('Expand') : css.otherSitesHeaderIcon('Collapse')
), ),
@ -293,7 +293,7 @@ function buildOtherSites(home: HomeModel) {
const siteName = home.app.currentOrgName; const siteName = home.app.currentOrgName;
return [ return [
dom('div', dom('div',
t('OtherSitesWelcome', { siteName, context: personal ? 'personal' : '' }), t("You are on the {{siteName}} site. You also have access to the following sites:", { siteName, context: personal ? 'personal' : '' }),
testId('other-sites-message') testId('other-sites-message')
), ),
css.otherSitesButtons( css.otherSitesButtons(
@ -329,8 +329,8 @@ function buildPrefs(
// The Sort selector. // The Sort selector.
options.hideSort ? null : dom.update( options.hideSort ? null : dom.update(
select<SortPref>(viewSettings.currentSort, [ select<SortPref>(viewSettings.currentSort, [
{value: 'name', label: t('ByName')}, {value: 'name', label: t("By Name")},
{value: 'date', label: t('ByDateModified')}, {value: 'date', label: t("By Date Modified")},
], ],
{ buttonCssClass: css.sortSelector.className }, { buttonCssClass: css.sortSelector.className },
), ),
@ -386,8 +386,8 @@ function buildWorkspaceDocBlock(home: HomeModel, workspace: Workspace, flashDocI
), ),
css.docRowUpdatedAt( css.docRowUpdatedAt(
(doc.removedAt ? (doc.removedAt ?
t('Deleted', {at: getTimeFromNow(doc.removedAt)}) : t("Deleted {{at}}", {at: getTimeFromNow(doc.removedAt)}) :
t('Edited', {at: getTimeFromNow(doc.updatedAt)})), t("Edited {{at}}", {at: getTimeFromNow(doc.updatedAt)})),
testId('doc-time') testId('doc-time')
), ),
(doc.removedAt ? (doc.removedAt ?
@ -421,7 +421,7 @@ function buildWorkspaceDocBlock(home: HomeModel, workspace: Workspace, flashDocI
save: (val) => doRename(home, doc, val, flashDocId), save: (val) => doRename(home, doc, val, flashDocId),
close: () => renaming.set(null), close: () => renaming.set(null),
}, testId('doc-name-editor')), }, testId('doc-name-editor')),
css.docRowUpdatedAt(t('Edited', {at: getTimeFromNow(doc.updatedAt)}), testId('doc-time')), css.docRowUpdatedAt(t("Edited {{at}}", {at: getTimeFromNow(doc.updatedAt)}), testId('doc-time')),
), ),
), ),
testId('doc') testId('doc')
@ -462,9 +462,9 @@ export function makeDocOptionsMenu(home: HomeModel, doc: Document, renaming: Obs
const orgAccess: roles.Role|null = org ? org.access : null; const orgAccess: roles.Role|null = org ? org.access : null;
function deleteDoc() { function deleteDoc() {
confirmModal(t('DeleteDoc', {name: doc.name}), t('Delete'), confirmModal(t("Delete {{name}}", {name: doc.name}), t("Delete"),
() => home.deleteDoc(doc.id, false).catch(reportError), () => home.deleteDoc(doc.id, false).catch(reportError),
t('DocumentMoveToTrash')); t("Document will be moved to Trash."));
} }
async function manageUsers() { async function manageUsers() {
@ -487,7 +487,7 @@ export function makeDocOptionsMenu(home: HomeModel, doc: Document, renaming: Obs
dom.cls('disabled', !roles.canEdit(doc.access)), dom.cls('disabled', !roles.canEdit(doc.access)),
testId('rename-doc') testId('rename-doc')
), ),
menuItem(() => showMoveDocModal(home, doc), t('Move'), menuItem(() => showMoveDocModal(home, doc), t("Move"),
// Note that moving the doc requires ACL access on the doc. Moving a doc to a workspace // Note that moving the doc requires ACL access on the doc. Moving a doc to a workspace
// that confers descendant ACL access could otherwise increase the user's access to the doc. // that confers descendant ACL access could otherwise increase the user's access to the doc.
// By requiring the user to have ACL edit access on the doc to move it prevents using this // By requiring the user to have ACL edit access on the doc to move it prevents using this
@ -498,16 +498,16 @@ export function makeDocOptionsMenu(home: HomeModel, doc: Document, renaming: Obs
dom.cls('disabled', !roles.canEditAccess(doc.access)), dom.cls('disabled', !roles.canEditAccess(doc.access)),
testId('move-doc') testId('move-doc')
), ),
menuItem(deleteDoc, t('Remove'), menuItem(deleteDoc, t("Remove"),
dom.cls('disabled', !roles.isOwner(doc)), dom.cls('disabled', !roles.isOwner(doc)),
testId('delete-doc') testId('delete-doc')
), ),
menuItem(() => home.pinUnpinDoc(doc.id, !doc.isPinned).catch(reportError), menuItem(() => home.pinUnpinDoc(doc.id, !doc.isPinned).catch(reportError),
doc.isPinned ? t("UnpinDocument"): t("PinDocument"), doc.isPinned ? t("Unpin Document"): t("Pin Document"),
dom.cls('disabled', !roles.canEdit(orgAccess)), dom.cls('disabled', !roles.canEdit(orgAccess)),
testId('pin-doc') testId('pin-doc')
), ),
menuItem(manageUsers, roles.canEditAccess(doc.access) ? t("ManageUsers"): t("AccessDetails"), menuItem(manageUsers, roles.canEditAccess(doc.access) ? t("Manage Users"): t("Access Details"),
testId('doc-access') testId('doc-access')
) )
]; ];
@ -515,22 +515,22 @@ export function makeDocOptionsMenu(home: HomeModel, doc: Document, renaming: Obs
export function makeRemovedDocOptionsMenu(home: HomeModel, doc: Document, workspace: Workspace) { export function makeRemovedDocOptionsMenu(home: HomeModel, doc: Document, workspace: Workspace) {
function hardDeleteDoc() { function hardDeleteDoc() {
confirmModal(t("DeleteForeverDoc", {name: doc.name}), t("DeleteForever"), confirmModal(t("Permanently Delete \"{{name}}\"?", {name: doc.name}), t("Delete Forever"),
() => home.deleteDoc(doc.id, true).catch(reportError), () => home.deleteDoc(doc.id, true).catch(reportError),
t('DeleteDocPerma')); t("Document will be permanently deleted."));
} }
return [ return [
menuItem(() => home.restoreDoc(doc), t('Restore'), menuItem(() => home.restoreDoc(doc), t("Restore"),
dom.cls('disabled', !roles.isOwner(doc) || !!workspace.removedAt), dom.cls('disabled', !roles.isOwner(doc) || !!workspace.removedAt),
testId('doc-restore') testId('doc-restore')
), ),
menuItem(hardDeleteDoc, t('DeleteForever'), menuItem(hardDeleteDoc, t("Delete Forever"),
dom.cls('disabled', !roles.isOwner(doc)), dom.cls('disabled', !roles.isOwner(doc)),
testId('doc-delete-forever') testId('doc-delete-forever')
), ),
(workspace.removedAt ? (workspace.removedAt ?
menuText(t('RestoreThisDocument')) : menuText(t("To restore this document, restore the workspace first.")) :
null null
) )
]; ];
@ -538,16 +538,16 @@ export function makeRemovedDocOptionsMenu(home: HomeModel, doc: Document, worksp
function makeRemovedWsOptionsMenu(home: HomeModel, ws: Workspace) { function makeRemovedWsOptionsMenu(home: HomeModel, ws: Workspace) {
return [ return [
menuItem(() => home.restoreWorkspace(ws), t('Restore'), menuItem(() => home.restoreWorkspace(ws), t("Restore"),
dom.cls('disabled', !roles.canDelete(ws.access)), dom.cls('disabled', !roles.canDelete(ws.access)),
testId('ws-restore') testId('ws-restore')
), ),
menuItem(() => home.deleteWorkspace(ws.id, true), t('DeleteForever'), menuItem(() => home.deleteWorkspace(ws.id, true), t("Delete Forever"),
dom.cls('disabled', !roles.canDelete(ws.access) || ws.docs.length > 0), dom.cls('disabled', !roles.canDelete(ws.access) || ws.docs.length > 0),
testId('ws-delete-forever') testId('ws-delete-forever')
), ),
(ws.docs.length > 0 ? (ws.docs.length > 0 ?
menuText(t('DeleteWorkspaceForever')) : menuText(t("You may delete a workspace forever once it has no documents in it.")) :
null null
) )
]; ];
@ -565,8 +565,8 @@ function showMoveDocModal(home: HomeModel, doc: Document) {
const disabled = isCurrent || !isEditable; const disabled = isCurrent || !isEditable;
return css.moveDocListItem( return css.moveDocListItem(
css.moveDocListText(workspaceName(home.app, ws)), css.moveDocListText(workspaceName(home.app, ws)),
isCurrent ? css.moveDocListHintText(t('CurrentWorkspace')) : null, isCurrent ? css.moveDocListHintText(t("Current workspace")) : null,
!isEditable ? css.moveDocListHintText(t('RequiresEditPermissions')) : null, !isEditable ? css.moveDocListHintText(t("Requires edit permissions")) : null,
css.moveDocListItem.cls('-disabled', disabled), css.moveDocListItem.cls('-disabled', disabled),
css.moveDocListItem.cls('-selected', (use) => use(selected) === ws.id), css.moveDocListItem.cls('-selected', (use) => use(selected) === ws.id),
dom.on('click', () => disabled || selected.set(ws.id)), dom.on('click', () => disabled || selected.set(ws.id)),
@ -576,11 +576,11 @@ function showMoveDocModal(home: HomeModel, doc: Document) {
) )
); );
return { return {
title: t('MoveDocToWorkspace', {name: doc.name}), title: t("Move {{name}} to workspace", {name: doc.name}),
body, body,
saveDisabled: Computed.create(owner, (use) => !use(selected)), saveDisabled: Computed.create(owner, (use) => !use(selected)),
saveFunc: async () => !selected.get() || home.moveDoc(doc.id, selected.get()!).catch(reportError), saveFunc: async () => !selected.get() || home.moveDoc(doc.id, selected.get()!).catch(reportError),
saveLabel: t('Move'), saveLabel: t("Move"),
}; };
}); });
} }

4
app/client/ui/DocTour.ts
View File

@ -20,8 +20,8 @@ export async function startDocTour(docData: DocData, docComm: DocComm, onFinishC
} }
const invalidDocTour: IOnBoardingMsg[] = [{ const invalidDocTour: IOnBoardingMsg[] = [{
title: t('InvalidDocTourTitle'), title: t("No valid document tour"),
body: t('InvalidDocTourBody'), body: t("Cannot construct a document tour from the data in this document. Ensure there is a table named GristDocTour with columns Title, Body, Placement, and Location."),
selector: 'document', selector: 'document',
showHasModal: true, showHasModal: true,
}]; }];

16
app/client/ui/DocumentSettings.ts
View File

@ -42,23 +42,23 @@ export async function showDocSettingsModal(docInfo: DocInfoRec, docPageModel: Do
const canChangeEngine = getSupportedEngineChoices().length > 0; const canChangeEngine = getSupportedEngineChoices().length > 0;
return { return {
title: t('DocumentSettings'), title: t("Document Settings"),
body: [ body: [
cssDataRow(t('ThisDocumentID')), cssDataRow(t("This document's ID (for API use):")),
cssDataRow(dom('tt', docPageModel.currentDocId.get())), cssDataRow(dom('tt', docPageModel.currentDocId.get())),
cssDataRow(t('TimeZone')), cssDataRow(t("Time Zone:")),
cssDataRow(dom.create(buildTZAutocomplete, moment, timezoneObs, (val) => timezoneObs.set(val))), cssDataRow(dom.create(buildTZAutocomplete, moment, timezoneObs, (val) => timezoneObs.set(val))),
cssDataRow(t('Locale')), cssDataRow(t("Locale:")),
cssDataRow(dom.create(buildLocaleSelect, localeObs)), cssDataRow(dom.create(buildLocaleSelect, localeObs)),
cssDataRow(t('Currency')), cssDataRow(t("Currency:")),
cssDataRow(dom.domComputed(localeObs, (l) => cssDataRow(dom.domComputed(localeObs, (l) =>
dom.create(buildCurrencyPicker, currencyObs, (val) => currencyObs.set(val), dom.create(buildCurrencyPicker, currencyObs, (val) => currencyObs.set(val),
{defaultCurrencyLabel: t('LocalCurrency', {currency: getCurrency(l)})}) {defaultCurrencyLabel: t("Local currency ({{currency}})", {currency: getCurrency(l)})})
)), )),
canChangeEngine ? [ canChangeEngine ? [
// Small easter egg: you can click on the skull-and-crossbones to // Small easter egg: you can click on the skull-and-crossbones to
// force a reload of the document. // force a reload of the document.
cssDataRow(t('EngineRisk', {span: cssDataRow(t("Engine (experimental {{span}} change at own risk):", {span:
dom('span', '☠', dom('span', '☠',
dom.style('cursor', 'pointer'), dom.style('cursor', 'pointer'),
dom.on('click', async () => { dom.on('click', async () => {
@ -71,7 +71,7 @@ export async function showDocSettingsModal(docInfo: DocInfoRec, docPageModel: Do
], ],
// Modal label is "Save", unless engine is changed. If engine is changed, the document will // Modal label is "Save", unless engine is changed. If engine is changed, the document will
// need a reload to switch engines, so we replace the label with "Save and Reload". // need a reload to switch engines, so we replace the label with "Save and Reload".
saveLabel: dom.text((use) => (use(engineObs) === docSettings.engine) ? t('Save') : t('SaveAndReload')), saveLabel: dom.text((use) => (use(engineObs) === docSettings.engine) ? t("Save") : t("Save and Reload")),
saveFunc: async () => { saveFunc: async () => {
await docInfo.updateColValues({ await docInfo.updateColValues({
timezone: timezoneObs.get(), timezone: timezoneObs.get(),

8
app/client/ui/DuplicateTable.ts
View File

@ -74,7 +74,7 @@ class DuplicateTableModal extends Disposable {
input( input(
this._newTableName, this._newTableName,
{onInput: true}, {onInput: true},
{placeholder: t('NewName')}, {placeholder: t("Name for new table")},
(elem) => { setTimeout(() => { elem.focus(); }, 20); }, (elem) => { setTimeout(() => { elem.focus(); }, 20); },
dom.on('focus', (_ev, elem) => { elem.select(); }), dom.on('focus', (_ev, elem) => { elem.select(); }),
dom.cls(cssInput.className), dom.cls(cssInput.className),
@ -85,19 +85,19 @@ class DuplicateTableModal extends Disposable {
cssWarningIcon('Warning'), cssWarningIcon('Warning'),
dom('div', dom('div',
t("AdviceWithLink", {link: cssLink({href: commonUrls.helpLinkingWidgets, target: '_blank'}, 'Read More.')}) t("Instead of duplicating tables, it's usually better to segment data using linked views. {{link}}", {link: cssLink({href: commonUrls.helpLinkingWidgets, target: '_blank'}, 'Read More.')})
), //TODO: i18next ), //TODO: i18next
), ),
cssField( cssField(
cssCheckbox( cssCheckbox(
this._includeData, this._includeData,
t('CopyAllData'), t("Copy all data in addition to the table structure."),
testId('copy-all-data'), testId('copy-all-data'),
), ),
), ),
dom.maybe(this._includeData, () => cssWarning( dom.maybe(this._includeData, () => cssWarning(
cssWarningIcon('Warning'), cssWarningIcon('Warning'),
dom('div', t('WarningACL')), dom('div', t("Only the document default access rules will apply to the copy.")),
testId('acl-warning'), testId('acl-warning'),
)), )),
]; ];

20
app/client/ui/FieldConfig.ts
View File

@ -54,7 +54,7 @@ export function buildNameConfig(
}; };
return [ return [
cssLabel(t('ColumnLabel')), cssLabel(t("COLUMN LABEL AND ID")),
cssRow( cssRow(
dom.cls(cssBlockedCursor.className, origColumn.disableModify), dom.cls(cssBlockedCursor.className, origColumn.disableModify),
cssColLabelBlock( cssColLabelBlock(
@ -84,7 +84,7 @@ export function buildNameConfig(
) )
), ),
dom.maybe(isSummaryTable, dom.maybe(isSummaryTable,
() => cssRow(t('ColumnOptionsLimited'))) () => cssRow(t("Column options are limited in summary tables.")))
]; ];
} }
@ -250,7 +250,7 @@ export function buildFormulaConfig(
// Clears the column // Clears the column
const clearAndResetOption = () => selectOption( const clearAndResetOption = () => selectOption(
() => gristDoc.clearColumns([origColumn.id.peek()]), () => gristDoc.clearColumns([origColumn.id.peek()]),
t('ClearAndReset'), 'CrossSmall'); t("Clear and reset"), 'CrossSmall');
// Actions on text buttons: // Actions on text buttons:
@ -314,7 +314,7 @@ export function buildFormulaConfig(
cssRow(formulaField = buildFormula( cssRow(formulaField = buildFormula(
origColumn, origColumn,
buildEditor, buildEditor,
t('EnterFormula'), t("Enter formula"),
disableOtherActions, disableOtherActions,
onSave, onSave,
clearState)), clearState)),
@ -322,21 +322,21 @@ export function buildFormulaConfig(
]; ];
return dom.maybe(behavior, (type: BEHAVIOR) => [ return dom.maybe(behavior, (type: BEHAVIOR) => [
cssLabel(t('ColumnBehavior')), cssLabel(t("COLUMN BEHAVIOR")),
...(type === "empty" ? [ ...(type === "empty" ? [
menu(behaviorLabel(), [ menu(behaviorLabel(), [
convertToDataOption(), convertToDataOption(),
]), ]),
cssEmptySeparator(), cssEmptySeparator(),
cssRow(textButton( cssRow(textButton(
t('SetFormula'), t("Set formula"),
dom.on("click", setFormula), dom.on("click", setFormula),
dom.prop("disabled", disableOtherActions), dom.prop("disabled", disableOtherActions),
testId("field-set-formula") testId("field-set-formula")
)), )),
cssRow(withInfoTooltip( cssRow(withInfoTooltip(
textButton( textButton(
t('SetTriggerFormula'), t("Set trigger formula"),
dom.on("click", setTrigger), dom.on("click", setTrigger),
dom.prop("disabled", use => use(isSummaryTable) || use(disableOtherActions)), dom.prop("disabled", use => use(isSummaryTable) || use(disableOtherActions)),
testId("field-set-trigger") testId("field-set-trigger")
@ -344,7 +344,7 @@ export function buildFormulaConfig(
GristTooltips.setTriggerFormula(), GristTooltips.setTriggerFormula(),
)), )),
cssRow(textButton( cssRow(textButton(
t('MakeIntoDataColumn'), t("Make into data column"),
dom.on("click", convertToData), dom.on("click", convertToData),
dom.prop("disabled", use => use(isSummaryTable) || use(disableOtherActions)), dom.prop("disabled", use => use(isSummaryTable) || use(disableOtherActions)),
testId("field-set-data") testId("field-set-data")
@ -377,7 +377,7 @@ export function buildFormulaConfig(
), ),
// If data column is or wants to be a trigger formula: // If data column is or wants to be a trigger formula:
dom.maybe((use) => use(maybeTrigger) || use(origColumn.hasTriggerFormula), () => [ dom.maybe((use) => use(maybeTrigger) || use(origColumn.hasTriggerFormula), () => [
cssLabel(t('TriggerFormula')), cssLabel(t("TRIGGER FORMULA")),
formulaBuilder(onSaveConvertToTrigger), formulaBuilder(onSaveConvertToTrigger),
dom.create(buildFormulaTriggers, origColumn, { dom.create(buildFormulaTriggers, origColumn, {
disabled: disableOtherActions, disabled: disableOtherActions,
@ -389,7 +389,7 @@ export function buildFormulaConfig(
cssEmptySeparator(), cssEmptySeparator(),
cssRow(withInfoTooltip( cssRow(withInfoTooltip(
textButton( textButton(
t("SetTriggerFormula"), t("Set trigger formula"),
dom.on("click", convertDataColumnToTriggerColumn), dom.on("click", convertDataColumnToTriggerColumn),
dom.prop("disabled", disableOtherActions), dom.prop("disabled", disableOtherActions),
testId("field-set-trigger") testId("field-set-trigger")

2
app/client/ui/FilterConfig.ts
View File

@ -87,7 +87,7 @@ export class FilterConfig extends Disposable {
dom.domComputed((use) => { dom.domComputed((use) => {
const filters = use(this._section.filters); const filters = use(this._section.filters);
return cssTextBtn( return cssTextBtn(
t('AddColumn'), t("Add Column"),
addFilterMenu(filters, this._popupControls, { addFilterMenu(filters, this._popupControls, {
menuOptions: { menuOptions: {
placement: 'bottom-end', placement: 'bottom-end',

8
app/client/ui/GridOptions.ts
View File

@ -20,23 +20,23 @@ export class GridOptions extends Disposable {
public buildDom() { public buildDom() {
const section = this._section; const section = this._section;
return [ return [
cssLabel(t('GridOptions')), cssLabel(t("Grid Options")),
dom('div', [ dom('div', [
cssRow( cssRow(
checkbox(setSaveValueFromKo(this, section.optionsObj.prop('verticalGridlines'))), checkbox(setSaveValueFromKo(this, section.optionsObj.prop('verticalGridlines'))),
t('VerticalGridlines'), t("Vertical Gridlines"),
testId('v-grid-button') testId('v-grid-button')
), ),
cssRow( cssRow(
checkbox(setSaveValueFromKo(this, section.optionsObj.prop('horizontalGridlines'))), checkbox(setSaveValueFromKo(this, section.optionsObj.prop('horizontalGridlines'))),
t('HorizontalGridlines'), t("Horizontal Gridlines"),
testId('h-grid-button') testId('h-grid-button')
), ),
cssRow( cssRow(
checkbox(setSaveValueFromKo(this, section.optionsObj.prop('zebraStripes'))), checkbox(setSaveValueFromKo(this, section.optionsObj.prop('zebraStripes'))),
t('ZebraStripes'), t("Zebra Stripes"),
testId('zebra-stripe-button') testId('zebra-stripe-button')
), ),

26
app/client/ui/GridViewMenus.ts
View File

@ -26,13 +26,13 @@ interface IViewSection {
*/ */
export function ColumnAddMenu(gridView: IView, viewSection: IViewSection) { export function ColumnAddMenu(gridView: IView, viewSection: IViewSection) {
return [ return [
menuItem(() => gridView.addNewColumn(), t('AddColumn')), menuItem(() => gridView.addNewColumn(), t("Add Column")),
menuDivider(), menuDivider(),
...viewSection.hiddenColumns().map((col: any) => menuItem( ...viewSection.hiddenColumns().map((col: any) => menuItem(
() => { () => {
gridView.showColumn(col.id(), viewSection.viewFields().peekLength); gridView.showColumn(col.id(), viewSection.viewFields().peekLength);
// .then(() => gridView.scrollPaneRight()); // .then(() => gridView.scrollPaneRight());
}, t('ShowColumn', {label: col.label()}))) }, t("Show column {{- label}}", {label: col.label()})))
]; ];
} }
export interface IMultiColumnContextMenu { export interface IMultiColumnContextMenu {
@ -68,13 +68,13 @@ export function ColumnContextMenu(options: IColumnContextMenu) {
const addToSortLabel = getAddToSortLabel(sortSpec, colId); const addToSortLabel = getAddToSortLabel(sortSpec, colId);
return [ return [
menuItemCmd(allCommands.fieldTabOpen, t('ColumnOptions')), menuItemCmd(allCommands.fieldTabOpen, t("Column Options")),
menuItem(filterOpenFunc, t('FilterData')), menuItem(filterOpenFunc, t("Filter Data")),
menuDivider({style: 'margin-bottom: 0;'}), menuDivider({style: 'margin-bottom: 0;'}),
cssRowMenuItem( cssRowMenuItem(
customMenuItem( customMenuItem(
allCommands.sortAsc.run, allCommands.sortAsc.run,
dom('span', t('Sort'), {style: 'flex: 1 0 auto; margin-right: 8px;'}, dom('span', t("Sort"), {style: 'flex: 1 0 auto; margin-right: 8px;'},
testId('sort-label')), testId('sort-label')),
icon('Sort', dom.style('transform', 'scaley(-1)')), icon('Sort', dom.style('transform', 'scaley(-1)')),
'A-Z', 'A-Z',
@ -112,9 +112,9 @@ export function ColumnContextMenu(options: IColumnContextMenu) {
), ),
] : null, ] : null,
menuDivider({style: 'margin-bottom: 0; margin-top: 0;'}), menuDivider({style: 'margin-bottom: 0; margin-top: 0;'}),
menuItem(allCommands.sortFilterTabOpen.run, t('MoreSortOptions'), testId('more-sort-options')), menuItem(allCommands.sortFilterTabOpen.run, t("More sort options ..."), testId('more-sort-options')),
menuDivider({style: 'margin-top: 0;'}), menuDivider({style: 'margin-top: 0;'}),
menuItemCmd(allCommands.renameField, t('RenameColumn'), disableForReadonlyColumn), menuItemCmd(allCommands.renameField, t("Rename column"), disableForReadonlyColumn),
freezeMenuItemCmd(options), freezeMenuItemCmd(options),
menuDivider(), menuDivider(),
MultiColumnMenu((options.disableFrozenMenu = true, options)), MultiColumnMenu((options.disableFrozenMenu = true, options)),
@ -144,20 +144,20 @@ export function MultiColumnMenu(options: IMultiColumnContextMenu) {
frozenMenu ? [frozenMenu, menuDivider()]: null, frozenMenu ? [frozenMenu, menuDivider()]: null,
// Offered only when selection includes formula columns, and converts only those. // Offered only when selection includes formula columns, and converts only those.
(options.isFormula ? (options.isFormula ?
menuItemCmd(allCommands.convertFormulasToData, t('ConvertFormulaToData'), menuItemCmd(allCommands.convertFormulasToData, t("Convert formula to data"),
disableForReadonlyColumn) : null), disableForReadonlyColumn) : null),
// With data columns selected, offer an additional option to clear out selected cells. // With data columns selected, offer an additional option to clear out selected cells.
(options.isFormula !== true ? (options.isFormula !== true ?
menuItemCmd(allCommands.clearValues, t('ClearValues'), disableForReadonlyColumn) : null), menuItemCmd(allCommands.clearValues, t("Clear values"), disableForReadonlyColumn) : null),
(!options.isRaw ? menuItemCmd(allCommands.hideFields, nameHideColumns, disableForReadonlyView) : null), (!options.isRaw ? menuItemCmd(allCommands.hideFields, nameHideColumns, disableForReadonlyView) : null),
menuItemCmd(allCommands.clearColumns, nameClearColumns, disableForReadonlyColumn), menuItemCmd(allCommands.clearColumns, nameClearColumns, disableForReadonlyColumn),
menuItemCmd(allCommands.deleteFields, nameDeleteColumns, disableForReadonlyColumn), menuItemCmd(allCommands.deleteFields, nameDeleteColumns, disableForReadonlyColumn),
menuDivider(), menuDivider(),
menuItemCmd(allCommands.insertFieldBefore, t('InsertColumn', {to: 'left'}), disableForReadonlyView), menuItemCmd(allCommands.insertFieldBefore, t("Insert column to the {{to}}", {to: 'left'}), disableForReadonlyView),
menuItemCmd(allCommands.insertFieldAfter, t('InsertColumn', {to: 'right'}), disableForReadonlyView) menuItemCmd(allCommands.insertFieldAfter, t("Insert column to the {{to}}", {to: 'right'}), disableForReadonlyView)
]; ];
} }
@ -278,9 +278,9 @@ function getAddToSortLabel(sortSpec: Sort.SortSpec, colId: number): string|undef
if (sortSpec.length !== 0 && !isEqual(columnsInSpec, [colId])) { if (sortSpec.length !== 0 && !isEqual(columnsInSpec, [colId])) {
const index = columnsInSpec.indexOf(colId); const index = columnsInSpec.indexOf(colId);
if (index > -1) { if (index > -1) {
return t('AddToSort', {count: index + 1, context: 'added'}); return t("Add to sort", {count: index + 1, context: 'added'});
} else { } else {
return t('AddToSort'); return t("Add to sort");
} }
} }
} }

42
app/client/ui/HomeIntro.ts
View File

@ -37,7 +37,7 @@ export function buildHomeIntro(homeModel: HomeModel): DomContents {
export function buildWorkspaceIntro(homeModel: HomeModel): DomContents { export function buildWorkspaceIntro(homeModel: HomeModel): DomContents {
const isViewer = homeModel.currentWS.get()?.access === roles.VIEWER; const isViewer = homeModel.currentWS.get()?.access === roles.VIEWER;
const isAnonym = !homeModel.app.currentValidUser; const isAnonym = !homeModel.app.currentValidUser;
const emptyLine = cssIntroLine(testId('empty-workspace-info'), t('EmptyWorkspace')); const emptyLine = cssIntroLine(testId('empty-workspace-info'), t("This workspace is empty."));
if (isAnonym || isViewer) { if (isAnonym || isViewer) {
return emptyLine; return emptyLine;
} else { } else {
@ -58,38 +58,38 @@ function makeViewerTeamSiteIntro(homeModel: HomeModel) {
const docLink = (dom.maybe(personalOrg, org => { const docLink = (dom.maybe(personalOrg, org => {
return cssLink( return cssLink(
urlState().setLinkUrl({org: org.domain ?? undefined}), urlState().setLinkUrl({org: org.domain ?? undefined}),
t('PersonalSite'), t("personal site"),
testId('welcome-personal-url')); testId('welcome-personal-url'));
})); }));
return [ return [
css.docListHeader( css.docListHeader(
dom.autoDispose(personalOrg), dom.autoDispose(personalOrg),
t('WelcomeTo', {orgName: homeModel.app.currentOrgName}), t("Welcome to {{orgName}}", {orgName: homeModel.app.currentOrgName}),
productPill(homeModel.app.currentOrg, {large: true}), productPill(homeModel.app.currentOrg, {large: true}),
testId('welcome-title') testId('welcome-title')
), ),
cssIntroLine( cssIntroLine(
testId('welcome-info'), testId('welcome-info'),
t('WelcomeInfoNoDocuments'), t("You have read-only access to this site. Currently there are no documents."),
dom('br'), dom('br'),
t('WelcomeInfoAppearHere'), t("Any documents created in this site will appear here."),
), ),
cssIntroLine( cssIntroLine(
t('WelcomeTextVistGrist'), docLink, '.', t("Interested in using Grist outside of your team? Visit your free "), docLink, '.',
testId('welcome-text') testId('welcome-text')
) )
]; ];
} }
function makeTeamSiteIntro(homeModel: HomeModel) { function makeTeamSiteIntro(homeModel: HomeModel) {
const sproutsProgram = cssLink({href: commonUrls.sproutsProgram, target: '_blank'}, t('SproutsProgram')); const sproutsProgram = cssLink({href: commonUrls.sproutsProgram, target: '_blank'}, t("Sprouts Program"));
return [ return [
css.docListHeader( css.docListHeader(
t('WelcomeTo', {orgName: homeModel.app.currentOrgName}), t("Welcome to {{orgName}}", {orgName: homeModel.app.currentOrgName}),
productPill(homeModel.app.currentOrg, {large: true}), productPill(homeModel.app.currentOrg, {large: true}),
testId('welcome-title') testId('welcome-title')
), ),
cssIntroLine(t('TeamSiteIntroGetStarted')), cssIntroLine(t("Get started by inviting your team and creating your first Grist document.")),
(shouldHideUiElement('helpCenter') ? null : (shouldHideUiElement('helpCenter') ? null :
cssIntroLine( cssIntroLine(
'Learn more in our ', helpCenterLink(), ', or find an expert via our ', sproutsProgram, '.', // TODO i18n 'Learn more in our ', helpCenterLink(), ', or find an expert via our ', sproutsProgram, '.', // TODO i18n
@ -102,10 +102,10 @@ function makeTeamSiteIntro(homeModel: HomeModel) {
function makePersonalIntro(homeModel: HomeModel, user: FullUser) { function makePersonalIntro(homeModel: HomeModel, user: FullUser) {
return [ return [
css.docListHeader(t('WelcomeUser', {name: user.name}), testId('welcome-title')), css.docListHeader(t("Welcome to Grist, {{name}}!", {name: user.name}), testId('welcome-title')),
cssIntroLine(t('PersonalIntroGetStarted')), cssIntroLine(t("Get started by creating your first Grist document.")),
(shouldHideUiElement('helpCenter') ? null : (shouldHideUiElement('helpCenter') ? null :
cssIntroLine(t('VisitHelpCenter', { link: helpCenterLink() }), cssIntroLine(t("Visit our {{link}} to learn more.", { link: helpCenterLink() }),
testId('welcome-text')) testId('welcome-text'))
), ),
makeCreateButtons(homeModel), makeCreateButtons(homeModel),
@ -113,19 +113,19 @@ function makePersonalIntro(homeModel: HomeModel, user: FullUser) {
} }
function makeAnonIntro(homeModel: HomeModel) { function makeAnonIntro(homeModel: HomeModel) {
const signUp = cssLink({href: getLoginOrSignupUrl()}, t('SignUp')); const signUp = cssLink({href: getLoginOrSignupUrl()}, t("Sign up"));
return [ return [
css.docListHeader(t('Welcome'), testId('welcome-title')), css.docListHeader(t("Welcome to Grist!"), testId('welcome-title')),
cssIntroLine(t('AnonIntroGetStarted')), cssIntroLine(t("Get started by exploring templates, or creating your first Grist document.")),
cssIntroLine(signUp, ' to save your work. ', // TODO i18n cssIntroLine(signUp, ' to save your work. ', // TODO i18n
(shouldHideUiElement('helpCenter') ? null : t('VisitHelpCenter', { link: helpCenterLink() })), (shouldHideUiElement('helpCenter') ? null : t("Visit our {{link}} to learn more.", { link: helpCenterLink() })),
testId('welcome-text')), testId('welcome-text')),
makeCreateButtons(homeModel), makeCreateButtons(homeModel),
]; ];
} }
function helpCenterLink() { function helpCenterLink() {
return cssLink({href: commonUrls.help, target: '_blank'}, cssInlineIcon('Help'), t('HelpCenter')); return cssLink({href: commonUrls.help, target: '_blank'}, cssInlineIcon('Help'), t("Help Center"));
} }
function buildButtons(homeModel: HomeModel, options: { function buildButtons(homeModel: HomeModel, options: {
@ -136,22 +136,22 @@ function buildButtons(homeModel: HomeModel, options: {
}) { }) {
return cssBtnGroup( return cssBtnGroup(
!options.invite ? null : !options.invite ? null :
cssBtn(cssBtnIcon('Help'), t('InviteTeamMembers'), testId('intro-invite'), cssBtn(cssBtnIcon('Help'), t("Invite Team Members"), testId('intro-invite'),
cssButton.cls('-primary'), cssButton.cls('-primary'),
dom.on('click', () => manageTeamUsersApp(homeModel.app)), dom.on('click', () => manageTeamUsersApp(homeModel.app)),
), ),
!options.templates ? null : !options.templates ? null :
cssBtn(cssBtnIcon('FieldTable'), t('BrowseTemplates'), testId('intro-templates'), cssBtn(cssBtnIcon('FieldTable'), t("Browse Templates"), testId('intro-templates'),
cssButton.cls('-primary'), cssButton.cls('-primary'),
dom.hide(shouldHideUiElement("templates")), dom.hide(shouldHideUiElement("templates")),
urlState().setLinkUrl({homePage: 'templates'}), urlState().setLinkUrl({homePage: 'templates'}),
), ),
!options.import ? null : !options.import ? null :
cssBtn(cssBtnIcon('Import'), t('ImportDocument'), testId('intro-import-doc'), cssBtn(cssBtnIcon('Import'), t("Import Document"), testId('intro-import-doc'),
dom.on('click', () => importDocAndOpen(homeModel)), dom.on('click', () => importDocAndOpen(homeModel)),
), ),
!options.empty ? null : !options.empty ? null :
cssBtn(cssBtnIcon('Page'), t('CreateEmptyDocument'), testId('intro-create-doc'), cssBtn(cssBtnIcon('Page'), t("Create Empty Document"), testId('intro-create-doc'),
dom.on('click', () => createDocAndOpen(homeModel)), dom.on('click', () => createDocAndOpen(homeModel)),
), ),
); );

18
app/client/ui/HomeLeftPane.ts
View File

@ -42,14 +42,14 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom
cssPageEntry( cssPageEntry(
cssPageEntry.cls('-selected', (use) => use(home.currentPage) === "all"), cssPageEntry.cls('-selected', (use) => use(home.currentPage) === "all"),
cssPageLink(cssPageIcon('Home'), cssPageLink(cssPageIcon('Home'),
cssLinkText(t('AllDocuments')), cssLinkText(t("All Documents")),
urlState().setLinkUrl({ws: undefined, homePage: undefined}), urlState().setLinkUrl({ws: undefined, homePage: undefined}),
testId('dm-all-docs'), testId('dm-all-docs'),
), ),
), ),
dom.maybe(use => !use(home.singleWorkspace), () => dom.maybe(use => !use(home.singleWorkspace), () =>
cssSectionHeader( cssSectionHeader(
t('Workspaces'), t("Workspaces"),
// Give it a testId, because it's a good element to simulate "click-away" in tests. // Give it a testId, because it's a good element to simulate "click-away" in tests.
testId('dm-ws-label') testId('dm-ws-label')
), ),
@ -108,7 +108,7 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom
cssPageEntry( cssPageEntry(
dom.hide(shouldHideUiElement("templates")), dom.hide(shouldHideUiElement("templates")),
cssPageEntry.cls('-selected', (use) => use(home.currentPage) === "templates"), cssPageEntry.cls('-selected', (use) => use(home.currentPage) === "templates"),
cssPageLink(cssPageIcon('FieldTable'), cssLinkText(t("ExamplesAndTemplates")), cssPageLink(cssPageIcon('FieldTable'), cssLinkText(t("Examples & Templates")),
urlState().setLinkUrl({homePage: "templates"}), urlState().setLinkUrl({homePage: "templates"}),
testId('dm-templates-page'), testId('dm-templates-page'),
), ),
@ -176,11 +176,11 @@ function addMenu(home: HomeModel, creating: Observable<boolean>): DomElementArg[
const needUpgrade = home.app.currentFeatures.maxWorkspacesPerOrg === 1; const needUpgrade = home.app.currentFeatures.maxWorkspacesPerOrg === 1;
return [ return [
menuItem(() => createDocAndOpen(home), menuIcon('Page'), t("CreateEmptyDocument"), menuItem(() => createDocAndOpen(home), menuIcon('Page'), t("Create Empty Document"),
dom.cls('disabled', !home.newDocWorkspace.get()), dom.cls('disabled', !home.newDocWorkspace.get()),
testId("dm-new-doc") testId("dm-new-doc")
), ),
menuItem(() => importDocAndOpen(home), menuIcon('Import'), t("ImportDocument"), menuItem(() => importDocAndOpen(home), menuIcon('Import'), t("Import Document"),
dom.cls('disabled', !home.newDocWorkspace.get()), dom.cls('disabled', !home.newDocWorkspace.get()),
testId("dm-import") testId("dm-import")
), ),
@ -195,7 +195,7 @@ function addMenu(home: HomeModel, creating: Observable<boolean>): DomElementArg[
])), ])),
// For workspaces: if ACL says we can create them, but product says we can't, // For workspaces: if ACL says we can create them, but product says we can't,
// then offer an upgrade link. // then offer an upgrade link.
upgradableMenuItem(needUpgrade, () => creating.set(true), menuIcon('Folder'), t("CreateWorkspace"), upgradableMenuItem(needUpgrade, () => creating.set(true), menuIcon('Folder'), t("Create Workspace"),
dom.cls('disabled', (use) => !roles.canEdit(orgAccess) || !use(home.available)), dom.cls('disabled', (use) => !roles.canEdit(orgAccess) || !use(home.available)),
testId("dm-new-workspace") testId("dm-new-workspace")
), ),
@ -205,9 +205,9 @@ function addMenu(home: HomeModel, creating: Observable<boolean>): DomElementArg[
function workspaceMenu(home: HomeModel, ws: Workspace, renaming: Observable<Workspace|null>) { function workspaceMenu(home: HomeModel, ws: Workspace, renaming: Observable<Workspace|null>) {
function deleteWorkspace() { function deleteWorkspace() {
confirmModal(t('WorkspaceDeleteTitle', {workspace: ws.name}), t('Delete'), confirmModal(t("Delete {{workspace}} and all included documents?", {workspace: ws.name}), t("Delete"),
() => home.deleteWorkspace(ws.id, false), () => home.deleteWorkspace(ws.id, false),
t('WorkspaceDeleteText')); t("Workspace will be moved to Trash."));
} }
async function manageWorkspaceUsers() { async function manageWorkspaceUsers() {
@ -235,7 +235,7 @@ function workspaceMenu(home: HomeModel, ws: Workspace, renaming: Observable<Work
// should formally be documented and defined in `Features`, with this check updated // should formally be documented and defined in `Features`, with this check updated
// to look there instead. // to look there instead.
home.app.isPersonal ? null : upgradableMenuItem(needUpgrade, manageWorkspaceUsers, home.app.isPersonal ? null : upgradableMenuItem(needUpgrade, manageWorkspaceUsers,
roles.canEditAccess(ws.access) ? t("ManageUsers") : t("AccessDetails"), roles.canEditAccess(ws.access) ? t("Manage Users") : t("Access Details"),
testId('dm-workspace-access')), testId('dm-workspace-access')),
upgradeText(needUpgrade, () => home.app.showUpgradeModal()), upgradeText(needUpgrade, () => home.app.showUpgradeModal()),
]; ];

2
app/client/ui/LeftPanelCommon.ts
View File

@ -34,7 +34,7 @@ export function createHelpTools(appModel: AppModel): DomContents {
return cssSplitPageEntry( return cssSplitPageEntry(
cssPageEntryMain( cssPageEntryMain(
cssPageLink(cssPageIcon('Help'), cssPageLink(cssPageIcon('Help'),
cssLinkText(t('HelpCenter')), cssLinkText(t("Help Center")),
dom.cls('tour-help-center'), dom.cls('tour-help-center'),
dom.on('click', (ev) => beaconOpenMessage({appModel})), dom.on('click', (ev) => beaconOpenMessage({appModel})),
testId('left-feedback'), testId('left-feedback'),

42
app/client/ui/MakeCopyMenu.ts
View File

@ -26,29 +26,29 @@ export async function replaceTrunkWithFork(user: FullUser|null, doc: Document, a
const trunkAccess = (await app.api.getDoc(origUrlId)).access; const trunkAccess = (await app.api.getDoc(origUrlId)).access;
if (!roles.canEdit(trunkAccess)) { if (!roles.canEdit(trunkAccess)) {
modal((ctl) => [ modal((ctl) => [
cssModalBody(t('CannotEditOriginal')), cssModalBody(t("Replacing the original requires editing rights on the original document.")),
cssModalButtons( cssModalButtons(
bigBasicButton(t('Cancel'), dom.on('click', () => ctl.close())), bigBasicButton(t("Cancel"), dom.on('click', () => ctl.close())),
) )
]); ]);
return; return;
} }
const docApi = app.api.getDocAPI(origUrlId); const docApi = app.api.getDocAPI(origUrlId);
const cmp = await docApi.compareDoc(doc.id); const cmp = await docApi.compareDoc(doc.id);
let titleText = t('UpdateOriginal'); let titleText = t("Update Original");
let buttonText = t('Update'); let buttonText = t("Update");
let warningText = t('WarningOriginalWillBeUpdated'); let warningText = t("The original version of this document will be updated.");
if (cmp.summary === 'left' || cmp.summary === 'both') { if (cmp.summary === 'left' || cmp.summary === 'both') {
titleText = t('OriginalHasModifications'); titleText = t("Original Has Modifications");
buttonText = t('Overwrite'); buttonText = t("Overwrite");
warningText = `${warningText} ${t('WarningOverwriteOriginalChanges')}`; warningText = `${warningText} ${t("Be careful, the original has changes not in this document. Those changes will be overwritten.")}`;
} else if (cmp.summary === 'unrelated') { } else if (cmp.summary === 'unrelated') {
titleText = t('OriginalLooksUnrelated'); titleText = t("Original Looks Unrelated");
buttonText = t('Overwrite'); buttonText = t("Overwrite");
warningText = `${warningText} ${t('WarningWillBeOverwritten')}`; warningText = `${warningText} ${t("It will be overwritten, losing any content not in this document.")}`;
} else if (cmp.summary === 'same') { } else if (cmp.summary === 'same') {
titleText = 'Original Looks Identical'; titleText = 'Original Looks Identical';
warningText = `${warningText} ${t('WarningAlreadyIdentical')}`; warningText = `${warningText} ${t("However, it appears to be already identical.")}`;
} }
confirmModal(titleText, buttonText, confirmModal(titleText, buttonText,
async () => { async () => {
@ -66,8 +66,8 @@ function signupModal(message: string) {
return modal((ctl) => [ return modal((ctl) => [
cssModalBody(message), cssModalBody(message),
cssModalButtons( cssModalButtons(
bigPrimaryButtonLink(t('SignUp'), {href: getLoginOrSignupUrl(), target: '_blank'}, testId('modal-signup')), bigPrimaryButtonLink(t("Sign up"), {href: getLoginOrSignupUrl(), target: '_blank'}, testId('modal-signup')),
bigBasicButton(t('Cancel'), dom.on('click', () => ctl.close())), bigBasicButton(t("Cancel"), dom.on('click', () => ctl.close())),
), ),
cssModalWidth('normal'), cssModalWidth('normal'),
]); ]);
@ -96,7 +96,7 @@ function allowOtherOrgs(doc: Document, app: AppModel): boolean {
*/ */
export async function makeCopy(doc: Document, app: AppModel, modalTitle: string): Promise<void> { export async function makeCopy(doc: Document, app: AppModel, modalTitle: string): Promise<void> {
if (!app.currentValidUser) { if (!app.currentValidUser) {
signupModal(t('ToSaveSignUpAndReload')); signupModal(t("To save your changes, please sign up, then reload this page."));
return; return;
} }
let orgs = allowOtherOrgs(doc, app) ? await app.api.getOrgs(true) : null; let orgs = allowOtherOrgs(doc, app) ? await app.api.getOrgs(true) : null;
@ -150,7 +150,7 @@ class SaveCopyModal extends Disposable {
public async save() { public async save() {
const ws = this._destWS.get(); const ws = this._destWS.get();
if (!ws) { throw new Error(t('NoDestinationWorkspace')); } if (!ws) { throw new Error(t("No destination workspace")); }
const api = this._app.api; const api = this._app.api;
const org = this._destOrg.get(); const org = this._destOrg.get();
const docWorker = await api.getWorkerAPI('import'); const docWorker = await api.getWorkerAPI('import');
@ -173,7 +173,7 @@ class SaveCopyModal extends Disposable {
return [ return [
cssField( cssField(
cssLabel(t("Name")), cssLabel(t("Name")),
input(this._destName, {onInput: true}, {placeholder: t('EnterDocumentName')}, dom.cls(cssInput.className), input(this._destName, {onInput: true}, {placeholder: t("Enter document name")}, dom.cls(cssInput.className),
// modal dialog grabs focus after 10ms delay; so to focus this input, wait a bit longer // modal dialog grabs focus after 10ms delay; so to focus this input, wait a bit longer
// (see the TODO in app/client/ui2018/modals.ts about weasel.js and focus). // (see the TODO in app/client/ui2018/modals.ts about weasel.js and focus).
(elem) => { setTimeout(() => { elem.focus(); }, 20); }, (elem) => { setTimeout(() => { elem.focus(); }, 20); },
@ -181,8 +181,8 @@ class SaveCopyModal extends Disposable {
testId('copy-dest-name')) testId('copy-dest-name'))
), ),
cssField( cssField(
cssLabel(t("AsTemplate")), cssLabel(t("As Template")),
cssCheckbox(this._asTemplate, t('IncludeStructureWithoutData'), cssCheckbox(this._asTemplate, t("Include the structure without any of the data."),
testId('save-as-template')) testId('save-as-template'))
), ),
// Show the team picker only when saving to other teams is allowed and there are other teams // Show the team picker only when saving to other teams is allowed and there are other teams
@ -199,7 +199,7 @@ class SaveCopyModal extends Disposable {
// Show the workspace picker only when destOrg is a team site, because personal orgs do not have workspaces. // Show the workspace picker only when destOrg is a team site, because personal orgs do not have workspaces.
dom.domComputed((use) => use(this._showWorkspaces) && use(this._workspaces), (wss) => dom.domComputed((use) => use(this._showWorkspaces) && use(this._workspaces), (wss) =>
wss === false ? null : wss === false ? null :
wss && wss.length === 0 ? cssWarningText(t("NoWriteAccessToSite"), wss && wss.length === 0 ? cssWarningText(t("You do not have write access to this site"),
testId('copy-warning')) : testId('copy-warning')) :
[ [
cssField( cssField(
@ -216,7 +216,7 @@ class SaveCopyModal extends Disposable {
), ),
wss ? dom.domComputed(this._destWS, (destWs) => wss ? dom.domComputed(this._destWS, (destWs) =>
destWs && !roles.canEdit(destWs.access) ? destWs && !roles.canEdit(destWs.access) ?
cssWarningText(t("NoWriteAccessToWorkspace"), cssWarningText(t("You do not have write access to the selected workspace"),
testId('copy-warning') testId('copy-warning')
) : null ) : null
) : null ) : null

20
app/client/ui/NotifyUI.ts
View File

@ -24,10 +24,10 @@ function buildAction(action: NotifyAction, item: Notification, options: IBeaconO
switch (action) { switch (action) {
case 'upgrade': case 'upgrade':
if (appModel) { if (appModel) {
return cssToastAction(t('UpgradePlan'), dom.on('click', () => return cssToastAction(t("Upgrade Plan"), dom.on('click', () =>
appModel.showUpgradeModal())); appModel.showUpgradeModal()));
} else { } else {
return dom('a', cssToastAction.cls(''), t('UpgradePlan'), {target: '_blank'}, return dom('a', cssToastAction.cls(''), t("Upgrade Plan"), {target: '_blank'},
{href: commonUrls.plans}); {href: commonUrls.plans});
} }
case 'renew': case 'renew':
@ -37,22 +37,22 @@ function buildAction(action: NotifyAction, item: Notification, options: IBeaconO
if (appModel && appModel.currentOrg && appModel.currentOrg.billingAccount && if (appModel && appModel.currentOrg && appModel.currentOrg.billingAccount &&
!appModel.currentOrg.billingAccount.isManager) { return null; } !appModel.currentOrg.billingAccount.isManager) { return null; }
// Otherwise return a link to the billing page. // Otherwise return a link to the billing page.
return dom('a', cssToastAction.cls(''), t('Renew'), {target: '_blank'}, return dom('a', cssToastAction.cls(''), t("Renew"), {target: '_blank'},
{href: urlState().makeUrl({billing: 'billing'})}); {href: urlState().makeUrl({billing: 'billing'})});
case 'personal': case 'personal':
if (!appModel) { return null; } if (!appModel) { return null; }
return cssToastAction(t('GoToPersonalSite'), dom.on('click', async () => { return cssToastAction(t("Go to your free personal site"), dom.on('click', async () => {
const info = await appModel.api.getSessionAll(); const info = await appModel.api.getSessionAll();
const orgs = info.orgs.filter(org => org.owner && org.owner.id === appModel.currentUser?.id); const orgs = info.orgs.filter(org => org.owner && org.owner.id === appModel.currentUser?.id);
if (orgs.length !== 1) { if (orgs.length !== 1) {
throw new Error(t('ErrorCannotFindPersonalSite')); throw new Error(t("Cannot find personal site, sorry!"));
} }
window.location.assign(urlState().makeUrl({org: orgs[0].domain || undefined})); window.location.assign(urlState().makeUrl({org: orgs[0].domain || undefined}));
})); }));
case 'report-problem': case 'report-problem':
return cssToastAction(t('ReportProblem'), testId('toast-report-problem'), return cssToastAction(t("Report a problem"), testId('toast-report-problem'),
dom.on('click', () => beaconOpenMessage({...options, includeAppErrors: true}))); dom.on('click', () => beaconOpenMessage({...options, includeAppErrors: true})));
case 'ask-for-help': { case 'ask-for-help': {
@ -60,7 +60,7 @@ function buildAction(action: NotifyAction, item: Notification, options: IBeaconO
error: new Error(item.options.message as string), error: new Error(item.options.message as string),
timestamp: item.options.timestamp, timestamp: item.options.timestamp,
}]; }];
return cssToastAction(t('AskForHelp'), return cssToastAction(t("Ask for help"),
dom.on('click', () => beaconOpenMessage({...options, includeAppErrors: true, errors}))); dom.on('click', () => beaconOpenMessage({...options, includeAppErrors: true, errors})));
} }
@ -154,11 +154,11 @@ function buildNotifyDropdown(ctl: IOpenController, notifier: Notifier, appModel:
cssDropdownContent( cssDropdownContent(
cssDropdownHeader( cssDropdownHeader(
cssDropdownHeaderTitle(t('Notifications')), cssDropdownHeaderTitle(t("Notifications")),
shouldHideUiElement("helpCenter") ? null : shouldHideUiElement("helpCenter") ? null :
cssDropdownFeedbackLink( cssDropdownFeedbackLink(
cssDropdownFeedbackIcon('Feedback'), cssDropdownFeedbackIcon('Feedback'),
t('GiveFeedback'), t("Give feedback"),
dom.on('click', () => beaconOpenMessage({appModel, onOpen: () => ctl.close(), route: '/ask/message/'})), dom.on('click', () => beaconOpenMessage({appModel, onOpen: () => ctl.close(), route: '/ask/message/'})),
testId('feedback'), testId('feedback'),
) )
@ -171,7 +171,7 @@ function buildNotifyDropdown(ctl: IOpenController, notifier: Notifier, appModel:
), ),
dom.maybe((use) => use(dropdownItems).length === 0 && !use(disconnectMsg), () => dom.maybe((use) => use(dropdownItems).length === 0 && !use(disconnectMsg), () =>
cssDropdownStatus( cssDropdownStatus(
dom('div', cssDropdownStatusText(t('NoNotifications'))), dom('div', cssDropdownStatusText(t("No notifications"))),
) )
), ),
dom.forEach(dropdownItems, item => dom.forEach(dropdownItems, item =>

2
app/client/ui/OnBoardingPopups.ts
View File

@ -299,7 +299,7 @@ class OnBoardingPopupsCtl extends Disposable {
{style: `margin-right: 8px; visibility: ${isFirstStep ? 'hidden' : 'visible'}`}, {style: `margin-right: 8px; visibility: ${isFirstStep ? 'hidden' : 'visible'}`},
), ),
bigPrimaryButton( bigPrimaryButton(
isLastStep ? t('Finish') : t('Next'), testId('next'), isLastStep ? t("Finish") : t("Next"), testId('next'),
dom.on('click', () => this._move(+1, true)), dom.on('click', () => this._move(+1, true)),
), ),
) )

6
app/client/ui/OpenVideoTour.ts
View File

@ -28,7 +28,7 @@ const testId = makeTestId('test-video-tour-');
cssVideo( cssVideo(
{ {
src: commonUrls.videoTour, src: commonUrls.videoTour,
title: t('YouTubeVideoPlayer'), title: t("YouTube video player"),
frameborder: '0', frameborder: '0',
allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture', allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
allowfullscreen: '', allowfullscreen: '',
@ -51,7 +51,7 @@ const testId = makeTestId('test-video-tour-');
export function createVideoTourTextButton(): HTMLDivElement { export function createVideoTourTextButton(): HTMLDivElement {
const elem: HTMLDivElement = cssVideoTourTextButton( const elem: HTMLDivElement = cssVideoTourTextButton(
cssVideoIcon('Video'), cssVideoIcon('Video'),
t('GristVideoTour'), t("Grist Video Tour"),
dom.on('click', () => openVideoTour(elem)), dom.on('click', () => openVideoTour(elem)),
testId('text-button'), testId('text-button'),
); );
@ -77,7 +77,7 @@ export function createVideoTourToolsButton(): HTMLDivElement | null {
dom.autoDispose(commandsGroup), dom.autoDispose(commandsGroup),
cssPageLink( cssPageLink(
iconElement = cssPageIcon('Video'), iconElement = cssPageIcon('Video'),
cssLinkText(t('VideoTour')), cssLinkText(t("Video Tour")),
dom.cls('tour-help-center'), dom.cls('tour-help-center'),
dom.on('click', () => openVideoTour(iconElement)), dom.on('click', () => openVideoTour(iconElement)),
testId('tools-button'), testId('tools-button'),

10
app/client/ui/PageWidgetPicker.ts
View File

@ -183,7 +183,7 @@ export function buildPageWidgetPicker(
// should be handle by the caller. // should be handle by the caller.
if (await isLongerThan(savePromise, DELAY_BEFORE_SPINNER_MS)) { if (await isLongerThan(savePromise, DELAY_BEFORE_SPINNER_MS)) {
const label = getWidgetTypes(type).label; const label = getWidgetTypes(type).label;
await spinnerModal(t('BuildingWidget', { label }), savePromise); await spinnerModal(t("Building {{- label}} widget", { label }), savePromise);
} }
} }
} }
@ -285,7 +285,7 @@ export class PageWidgetSelect extends Disposable {
testId('container'), testId('container'),
cssBody( cssBody(
cssPanel( cssPanel(
header(t('SelectWidget')), header(t("Select Widget")),
sectionTypes.map((value) => { sectionTypes.map((value) => {
const {label, icon: iconName} = getWidgetTypes(value); const {label, icon: iconName} = getWidgetTypes(value);
const disabled = computed(this._value.table, (use, tid) => this._isTypeDisabled(value, tid)); const disabled = computed(this._value.table, (use, tid) => this._isTypeDisabled(value, tid));
@ -302,7 +302,7 @@ export class PageWidgetSelect extends Disposable {
), ),
cssPanel( cssPanel(
testId('data'), testId('data'),
header(t('SelectData')), header(t("Select Data")),
cssEntry( cssEntry(
cssIcon('TypeTable'), 'New Table', cssIcon('TypeTable'), 'New Table',
// prevent the selection of 'New Table' if it is disabled // prevent the selection of 'New Table' if it is disabled
@ -336,7 +336,7 @@ export class PageWidgetSelect extends Disposable {
)), )),
), ),
cssPanel( cssPanel(
header(t('GroupBy')), header(t("Group by")),
dom.hide((use) => !use(this._value.summarize)), dom.hide((use) => !use(this._value.summarize)),
domComputed( domComputed(
(use) => use(this._columns) (use) => use(this._columns)
@ -378,7 +378,7 @@ export class PageWidgetSelect extends Disposable {
bigPrimaryButton( bigPrimaryButton(
// TODO: The button's label of the page widget picker should read 'Close' instead when // TODO: The button's label of the page widget picker should read 'Close' instead when
// there are no changes. // there are no changes.
this._options.buttonLabel || t('AddToPage'), this._options.buttonLabel || t("Add to Page"),
dom.prop('disabled', (use) => !isValidSelection( dom.prop('disabled', (use) => !isValidSelection(
use(this._value.table), use(this._value.type), this._options.isNewPage) use(this._value.table), use(this._value.type), this._options.isNewPage)
), ),

4
app/client/ui/Pages.ts
View File

@ -142,7 +142,7 @@ function buildPrompt(tableNames: string[], onSave: (option: RemoveOption) => Pro
testId('popup'), testId('popup'),
buildWarning(tableNames), buildWarning(tableNames),
cssOptions( cssOptions(
buildOption(selected, 'data', t('DeleteDataAndPage')), buildOption(selected, 'data', t("Delete data and this page.")),
buildOption(selected, 'page', buildOption(selected, 'page',
[ // TODO i18n [ // TODO i18n
`Keep data and delete page. `, `Keep data and delete page. `,
@ -153,7 +153,7 @@ function buildPrompt(tableNames: string[], onSave: (option: RemoveOption) => Pro
) )
), ),
saveDisabled, saveDisabled,
saveLabel: t('Delete'), saveLabel: t("Delete"),
saveFunc, saveFunc,
width: 'fixed-wide', width: 'fixed-wide',
extraButtons: [], extraButtons: [],

44
app/client/ui/RightPanel.ts
View File

@ -242,7 +242,7 @@ export class RightPanel extends Disposable {
), ),
cssSeparator(), cssSeparator(),
dom.maybe<FieldBuilder|null>(fieldBuilder, builder => [ dom.maybe<FieldBuilder|null>(fieldBuilder, builder => [
cssLabel(t('ColumnType')), cssLabel(t("COLUMN TYPE")),
cssSection( cssSection(
builder.buildSelectTypeDom(), builder.buildSelectTypeDom(),
), ),
@ -265,7 +265,7 @@ export class RightPanel extends Disposable {
cssRow(refSelect.buildDom()), cssRow(refSelect.buildDom()),
cssSeparator() cssSeparator()
]), ]),
cssLabel(t('Transform')), cssLabel(t("TRANSFORM")),
dom.maybe<FieldBuilder|null>(fieldBuilder, builder => builder.buildTransformDom()), dom.maybe<FieldBuilder|null>(fieldBuilder, builder => builder.buildTransformDom()),
dom.maybe(isMultiSelect, () => disabledSection()), dom.maybe(isMultiSelect, () => disabledSection()),
testId('panel-transform'), testId('panel-transform'),
@ -295,15 +295,15 @@ export class RightPanel extends Disposable {
private _buildPageWidgetContent(_owner: MultiHolder) { private _buildPageWidgetContent(_owner: MultiHolder) {
return [ return [
cssSubTabContainer( cssSubTabContainer(
cssSubTab(t('Widget'), cssSubTab(t("Widget"),
cssSubTab.cls('-selected', (use) => use(this._subTab) === 'widget'), cssSubTab.cls('-selected', (use) => use(this._subTab) === 'widget'),
dom.on('click', () => this._subTab.set("widget")), dom.on('click', () => this._subTab.set("widget")),
testId('config-widget')), testId('config-widget')),
cssSubTab(t('SortAndFilter'), cssSubTab(t("Sort & Filter"),
cssSubTab.cls('-selected', (use) => use(this._subTab) === 'sortAndFilter'), cssSubTab.cls('-selected', (use) => use(this._subTab) === 'sortAndFilter'),
dom.on('click', () => this._subTab.set("sortAndFilter")), dom.on('click', () => this._subTab.set("sortAndFilter")),
testId('config-sortAndFilter')), testId('config-sortAndFilter')),
cssSubTab(t('Data'), cssSubTab(t("Data"),
cssSubTab.cls('-selected', (use) => use(this._subTab) === 'data'), cssSubTab.cls('-selected', (use) => use(this._subTab) === 'data'),
dom.on('click', () => this._subTab.set("data")), dom.on('click', () => this._subTab.set("data")),
testId('config-data')), testId('config-data')),
@ -345,7 +345,7 @@ export class RightPanel extends Disposable {
}); });
return dom.maybe(viewConfigTab, (vct) => [ return dom.maybe(viewConfigTab, (vct) => [
this._disableIfReadonly(), this._disableIfReadonly(),
cssLabel(dom.text(use => use(activeSection.isRaw) ? t('DataTableName') : t('WidgetTitle')), cssLabel(dom.text(use => use(activeSection.isRaw) ? t("DATA TABLE NAME") : t("WIDGET TITLE")),
dom.style('margin-bottom', '14px'), dom.style('margin-bottom', '14px'),
), ),
cssRow(cssTextInput( cssRow(cssTextInput(
@ -362,7 +362,7 @@ export class RightPanel extends Disposable {
dom.maybe( dom.maybe(
(use) => !use(activeSection.isRaw), (use) => !use(activeSection.isRaw),
() => cssRow( () => cssRow(
primaryButton(t('ChangeWidget'), this._createPageWidgetPicker()), primaryButton(t("Change Widget"), this._createPageWidgetPicker()),
cssRow.cls('-top-space') cssRow.cls('-top-space')
), ),
), ),
@ -370,7 +370,7 @@ export class RightPanel extends Disposable {
cssSeparator(), cssSeparator(),
dom.maybe((use) => ['detail', 'single'].includes(use(this._pageWidgetType)!), () => [ dom.maybe((use) => ['detail', 'single'].includes(use(this._pageWidgetType)!), () => [
cssLabel(t('Theme')), cssLabel(t("Theme")),
dom('div', dom('div',
vct._buildThemeDom(), vct._buildThemeDom(),
vct._buildLayoutDom()) vct._buildLayoutDom())
@ -385,22 +385,22 @@ export class RightPanel extends Disposable {
if (use(this._pageWidgetType) !== 'record') { return null; } if (use(this._pageWidgetType) !== 'record') { return null; }
return [ return [
cssSeparator(), cssSeparator(),
cssLabel(t('RowStyleUpper')), cssLabel(t("ROW STYLE")),
domAsync(imports.loadViewPane().then(ViewPane => domAsync(imports.loadViewPane().then(ViewPane =>
dom.create(ViewPane.ConditionalStyle, t("RowStyle"), activeSection, this._gristDoc) dom.create(ViewPane.ConditionalStyle, t("Row Style"), activeSection, this._gristDoc)
)) ))
]; ];
}), }),
dom.maybe((use) => use(this._pageWidgetType) === 'chart', () => [ dom.maybe((use) => use(this._pageWidgetType) === 'chart', () => [
cssLabel(t('ChartType')), cssLabel(t("CHART TYPE")),
vct._buildChartConfigDom(), vct._buildChartConfigDom(),
]), ]),
dom.maybe((use) => use(this._pageWidgetType) === 'custom', () => { dom.maybe((use) => use(this._pageWidgetType) === 'custom', () => {
const parts = vct._buildCustomTypeItems() as any[]; const parts = vct._buildCustomTypeItems() as any[];
return [ return [
cssLabel(t('Custom')), cssLabel(t("CUSTOM")),
// If 'customViewPlugin' feature is on, show the toggle that allows switching to // If 'customViewPlugin' feature is on, show the toggle that allows switching to
// plugin mode. Note that the default mode for a new 'custom' view is 'url', so that's // plugin mode. Note that the default mode for a new 'custom' view is 'url', so that's
// the only one that will be shown without the feature flag. // the only one that will be shown without the feature flag.
@ -465,15 +465,15 @@ export class RightPanel extends Disposable {
link.onWrite((val) => this._gristDoc.saveLink(val)); link.onWrite((val) => this._gristDoc.saveLink(val));
return [ return [
this._disableIfReadonly(), this._disableIfReadonly(),
cssLabel(t('DataTable')), cssLabel(t("DATA TABLE")),
cssRow( cssRow(
cssIcon('TypeTable'), cssDataLabel(t('SourceData')), cssIcon('TypeTable'), cssDataLabel(t("SOURCE DATA")),
cssContent(dom.text((use) => use(use(table).primaryTableId)), cssContent(dom.text((use) => use(use(table).primaryTableId)),
testId('pwc-table')) testId('pwc-table'))
), ),
dom( dom(
'div', 'div',
cssRow(cssIcon('Pivot'), cssDataLabel(t('GroupedBy'))), cssRow(cssIcon('Pivot'), cssDataLabel(t("GROUPED BY"))),
cssRow(domComputed(groupedBy, (cols) => cssList(cols.map((c) => ( cssRow(domComputed(groupedBy, (cols) => cssList(cols.map((c) => (
cssListItem(dom.text(c.label), cssListItem(dom.text(c.label),
testId('pwc-groupedBy-col')) testId('pwc-groupedBy-col'))
@ -485,12 +485,12 @@ export class RightPanel extends Disposable {
), ),
dom.maybe((use) => !use(activeSection.isRaw), () => dom.maybe((use) => !use(activeSection.isRaw), () =>
cssButtonRow(primaryButton(t('EditDataSelection'), this._createPageWidgetPicker(), cssButtonRow(primaryButton(t("Edit Data Selection"), this._createPageWidgetPicker(),
testId('pwc-editDataSelection')), testId('pwc-editDataSelection')),
dom.maybe( dom.maybe(
use => Boolean(use(use(activeSection.table).summarySourceTable)), use => Boolean(use(use(activeSection.table).summarySourceTable)),
() => basicButton( () => basicButton(
t('Detach'), t("Detach"),
dom.on('click', () => this._gristDoc.docData.sendAction( dom.on('click', () => this._gristDoc.docData.sendAction(
["DetachSummaryViewSection", activeSection.getRowId()])), ["DetachSummaryViewSection", activeSection.getRowId()])),
testId('detach-button'), testId('detach-button'),
@ -507,10 +507,10 @@ export class RightPanel extends Disposable {
cssSeparator(), cssSeparator(),
dom.maybe((use) => !use(activeSection.isRaw), () => [ dom.maybe((use) => !use(activeSection.isRaw), () => [
cssLabel(t('SelectBy')), cssLabel(t("SELECT BY")),
cssRow( cssRow(
dom.update( dom.update(
select(link, linkOptions, {defaultLabel: t('SelectWidget')}), select(link, linkOptions, {defaultLabel: t("Select Widget")}),
dom.on('click', () => { dom.on('click', () => {
refreshTrigger.set(!refreshTrigger.get()); refreshTrigger.set(!refreshTrigger.get());
}) })
@ -526,7 +526,7 @@ export class RightPanel extends Disposable {
// TODO: sections should be listed following the order of appearance in the view layout (ie: // TODO: sections should be listed following the order of appearance in the view layout (ie:
// left/right - top/bottom); // left/right - top/bottom);
return selectorFor.length ? [ return selectorFor.length ? [
cssLabel(t('SelectorFor'), testId('selector-for')), cssLabel(t("SELECTOR FOR"), testId('selector-for')),
cssRow(cssList(selectorFor.map((sec) => this._buildSectionItem(sec)))) cssRow(cssList(selectorFor.map((sec) => this._buildSectionItem(sec))))
] : null; ] : null;
}), }),
@ -538,7 +538,7 @@ export class RightPanel extends Disposable {
const section = gristDoc.viewModel.activeSection; const section = gristDoc.viewModel.activeSection;
const onSave = (val: IPageWidget) => gristDoc.saveViewSection(section.peek(), val); const onSave = (val: IPageWidget) => gristDoc.saveViewSection(section.peek(), val);
return (elem) => { attachPageWidgetPicker(elem, gristDoc, onSave, { return (elem) => { attachPageWidgetPicker(elem, gristDoc, onSave, {
buttonLabel: t('Save'), buttonLabel: t("Save"),
value: () => toPageWidget(section.peek()), value: () => toPageWidget(section.peek()),
selectBy: (val) => gristDoc.selectBy(val), selectBy: (val) => gristDoc.selectBy(val),
}); }; }); };
@ -559,7 +559,7 @@ export class RightPanel extends Disposable {
return dom.maybe(this._gristDoc.docPageModel.isReadonly, () => ( return dom.maybe(this._gristDoc.docPageModel.isReadonly, () => (
cssOverlay( cssOverlay(
testId('disable-overlay'), testId('disable-overlay'),
cssBottomText(t('NoEditAccess')), cssBottomText(t("You do not have edit access to this document")),
) )
)); ));
} }

10
app/client/ui/RowContextMenu.ts
View File

@ -19,14 +19,14 @@ export function RowContextMenu({ disableInsert, disableDelete, isViewSorted, num
// bottom. It could be very confusing for users who might expect the record to stay above or // bottom. It could be very confusing for users who might expect the record to stay above or
// below the active row. Thus in this case we show a single `insert row` command. // below the active row. Thus in this case we show a single `insert row` command.
result.push( result.push(
menuItemCmd(allCommands.insertRecordAfter, t('InsertRow'), menuItemCmd(allCommands.insertRecordAfter, t("Insert row"),
dom.cls('disabled', disableInsert)), dom.cls('disabled', disableInsert)),
); );
} else { } else {
result.push( result.push(
menuItemCmd(allCommands.insertRecordBefore, t('InsertRowAbove'), menuItemCmd(allCommands.insertRecordBefore, t("Insert row above"),
dom.cls('disabled', disableInsert)), dom.cls('disabled', disableInsert)),
menuItemCmd(allCommands.insertRecordAfter, t('InsertRowBelow'), menuItemCmd(allCommands.insertRecordAfter, t("Insert row below"),
dom.cls('disabled', disableInsert)), dom.cls('disabled', disableInsert)),
); );
} }
@ -37,11 +37,11 @@ export function RowContextMenu({ disableInsert, disableDelete, isViewSorted, num
result.push( result.push(
menuDivider(), menuDivider(),
// TODO: should show `Delete ${num} rows` when multiple are selected // TODO: should show `Delete ${num} rows` when multiple are selected
menuItemCmd(allCommands.deleteRecords, t('Delete'), menuItemCmd(allCommands.deleteRecords, t("Delete"),
dom.cls('disabled', disableDelete)), dom.cls('disabled', disableDelete)),
); );
result.push( result.push(
menuDivider(), menuDivider(),
menuItemCmd(allCommands.copyLink, t('CopyAnchorLink'))); menuItemCmd(allCommands.copyLink, t("Copy anchor link")));
return result; return result;
} }

42
app/client/ui/ShareMenu.ts
View File

@ -35,18 +35,18 @@ export function buildShareMenuButton(pageModel: DocPageModel): DomContents {
// available (a user quick enough to open the menu in this state would have to re-open it). // available (a user quick enough to open the menu in this state would have to re-open it).
return dom.maybe(pageModel.currentDoc, (doc) => { return dom.maybe(pageModel.currentDoc, (doc) => {
const appModel = pageModel.appModel; const appModel = pageModel.appModel;
const saveCopy = () => makeCopy(doc, appModel, t('SaveDocument')).catch(reportError); const saveCopy = () => makeCopy(doc, appModel, t("Save Document")).catch(reportError);
if (doc.idParts.snapshotId) { if (doc.idParts.snapshotId) {
const backToCurrent = () => urlState().pushUrl({doc: buildOriginalUrlId(doc.id, true)}); const backToCurrent = () => urlState().pushUrl({doc: buildOriginalUrlId(doc.id, true)});
return shareButton(t('BackToCurrent'), () => [ return shareButton(t("Back to Current"), () => [
menuManageUsers(doc, pageModel), menuManageUsers(doc, pageModel),
menuSaveCopy(t('SaveCopy'), doc, appModel), menuSaveCopy(t("Save Copy"), doc, appModel),
menuOriginal(doc, appModel, true), menuOriginal(doc, appModel, true),
menuExports(doc, pageModel), menuExports(doc, pageModel),
], {buttonAction: backToCurrent}); ], {buttonAction: backToCurrent});
} else if (doc.isPreFork || doc.isBareFork) { } else if (doc.isPreFork || doc.isBareFork) {
// A new unsaved document, or a fiddle, or a public example. // A new unsaved document, or a fiddle, or a public example.
const saveActionTitle = doc.isBareFork ? t('SaveDocument') : t('SaveCopy'); const saveActionTitle = doc.isBareFork ? t("Save Document") : t("Save Copy");
return shareButton(saveActionTitle, () => [ return shareButton(saveActionTitle, () => [
menuManageUsers(doc, pageModel), menuManageUsers(doc, pageModel),
menuSaveCopy(saveActionTitle, doc, appModel), menuSaveCopy(saveActionTitle, doc, appModel),
@ -58,16 +58,16 @@ export function buildShareMenuButton(pageModel: DocPageModel): DomContents {
// Copy" primary and keep it as an action button on top. Otherwise, show a tag without a // Copy" primary and keep it as an action button on top. Otherwise, show a tag without a
// default action; click opens the menu where the user can choose. // default action; click opens the menu where the user can choose.
if (!roles.canEdit(doc.trunkAccess || null)) { if (!roles.canEdit(doc.trunkAccess || null)) {
return shareButton(t('SaveCopy'), () => [ return shareButton(t("Save Copy"), () => [
menuManageUsers(doc, pageModel), menuManageUsers(doc, pageModel),
menuSaveCopy(t('SaveCopy'), doc, appModel), menuSaveCopy(t("Save Copy"), doc, appModel),
menuOriginal(doc, appModel, false), menuOriginal(doc, appModel, false),
menuExports(doc, pageModel), menuExports(doc, pageModel),
], {buttonAction: saveCopy}); ], {buttonAction: saveCopy});
} else { } else {
return shareButton(t('Unsaved'), () => [ return shareButton(t("Unsaved"), () => [
menuManageUsers(doc, pageModel), menuManageUsers(doc, pageModel),
menuSaveCopy(t('SaveCopy'), doc, appModel), menuSaveCopy(t("Save Copy"), doc, appModel),
menuOriginal(doc, appModel, false), menuOriginal(doc, appModel, false),
menuExports(doc, pageModel), menuExports(doc, pageModel),
]); ]);
@ -75,7 +75,7 @@ export function buildShareMenuButton(pageModel: DocPageModel): DomContents {
} else { } else {
return shareButton(null, () => [ return shareButton(null, () => [
menuManageUsers(doc, pageModel), menuManageUsers(doc, pageModel),
menuSaveCopy(t('DuplicateDocument'), doc, appModel), menuSaveCopy(t("Duplicate Document"), doc, appModel),
menuWorkOnCopy(pageModel), menuWorkOnCopy(pageModel),
menuExports(doc, pageModel), menuExports(doc, pageModel),
]); ]);
@ -132,7 +132,7 @@ function shareButton(buttonText: string|null, menuCreateFunc: MenuCreateFunc,
function menuManageUsers(doc: DocInfo, pageModel: DocPageModel) { function menuManageUsers(doc: DocInfo, pageModel: DocPageModel) {
return [ return [
menuItem(() => manageUsers(doc, pageModel), menuItem(() => manageUsers(doc, pageModel),
roles.canEditAccess(doc.access) ? t('ManageUsers') : t('AccessDetails'), roles.canEditAccess(doc.access) ? t("Manage Users") : t("Access Details"),
dom.cls('disabled', doc.isFork), dom.cls('disabled', doc.isFork),
testId('tb-share-option') testId('tb-share-option')
), ),
@ -143,7 +143,7 @@ function menuManageUsers(doc: DocInfo, pageModel: DocPageModel) {
// Renders "Return to Original" and "Replace Original" menu items. When used with snapshots, we // Renders "Return to Original" and "Replace Original" menu items. When used with snapshots, we
// say "Current Version" in place of the word "Original". // say "Current Version" in place of the word "Original".
function menuOriginal(doc: Document, appModel: AppModel, isSnapshot: boolean) { function menuOriginal(doc: Document, appModel: AppModel, isSnapshot: boolean) {
const termToUse = isSnapshot ? t("CurrentVersion") : t("Original"); const termToUse = isSnapshot ? t("Current Version") : t("Original");
const origUrlId = buildOriginalUrlId(doc.id, isSnapshot); const origUrlId = buildOriginalUrlId(doc.id, isSnapshot);
const originalUrl = urlState().makeUrl({doc: origUrlId}); const originalUrl = urlState().makeUrl({doc: origUrlId});
@ -166,18 +166,18 @@ function menuOriginal(doc: Document, appModel: AppModel, isSnapshot: boolean) {
} }
return [ return [
cssMenuSplitLink({href: originalUrl}, cssMenuSplitLink({href: originalUrl},
cssMenuSplitLinkText(t('ReturnToTermToUse', {termToUse})), testId('return-to-original'), cssMenuSplitLinkText(t("Return to {{termToUse}}", {termToUse})), testId('return-to-original'),
cssMenuIconLink({href: originalUrl, target: '_blank'}, testId('open-original'), cssMenuIconLink({href: originalUrl, target: '_blank'}, testId('open-original'),
cssMenuIcon('FieldLink'), cssMenuIcon('FieldLink'),
) )
), ),
menuItem(replaceOriginal, t('ReplaceTermToUse', {termToUse}), menuItem(replaceOriginal, t("Replace {{termToUse}}...", {termToUse}),
// Disable if original is not writable, and also when comparing snapshots (since it's // Disable if original is not writable, and also when comparing snapshots (since it's
// unclear which of the versions to use). // unclear which of the versions to use).
dom.cls('disabled', !roles.canEdit(doc.trunkAccess || null) || comparingSnapshots), dom.cls('disabled', !roles.canEdit(doc.trunkAccess || null) || comparingSnapshots),
testId('replace-original'), testId('replace-original'),
), ),
menuItemLink(compareHref, {target: '_blank'}, t('CompareTermToUse', {termToUse}), menuItemLink(compareHref, {target: '_blank'}, t("Compare to {{termToUse}}", {termToUse}),
menuAnnotate('Beta'), menuAnnotate('Beta'),
testId('compare-original'), testId('compare-original'),
), ),
@ -205,10 +205,10 @@ function menuWorkOnCopy(pageModel: DocPageModel) {
}; };
return [ return [
menuItem(makeUnsavedCopy, t('WorkOnCopy'), testId('work-on-copy')), menuItem(makeUnsavedCopy, t("Work on a Copy"), testId('work-on-copy')),
menuText( menuText(
withInfoTooltip( withInfoTooltip(
t('EditWithoutAffecting'), t("Edit without affecting the original"),
GristTooltips.workOnACopy(), GristTooltips.workOnACopy(),
{tooltipMenuOptions: {attach: null}} {tooltipMenuOptions: {attach: null}}
) )
@ -229,21 +229,21 @@ function menuExports(doc: Document, pageModel: DocPageModel) {
menuDivider(), menuDivider(),
(isElectron ? (isElectron ?
menuItem(() => gristDoc.app.comm.showItemInFolder(doc.name), menuItem(() => gristDoc.app.comm.showItemInFolder(doc.name),
t('ShowInFolder'), testId('tb-share-option')) : t("Show in folder"), testId('tb-share-option')) :
menuItemLink({ menuItemLink({
href: pageModel.appModel.api.getDocAPI(doc.id).getDownloadUrl(), href: pageModel.appModel.api.getDocAPI(doc.id).getDownloadUrl(),
target: '_blank', download: '' target: '_blank', download: ''
}, },
menuIcon('Download'), t('Download'), testId('tb-share-option')) menuIcon('Download'), t("Download"), testId('tb-share-option'))
), ),
menuItemLink({ href: gristDoc.getCsvLink(), target: '_blank', download: ''}, menuItemLink({ href: gristDoc.getCsvLink(), target: '_blank', download: ''},
menuIcon('Download'), t('ExportCSV'), testId('tb-share-option')), menuIcon('Download'), t("Export CSV"), testId('tb-share-option')),
menuItemLink({ menuItemLink({
href: pageModel.appModel.api.getDocAPI(doc.id).getDownloadXlsxUrl(), href: pageModel.appModel.api.getDocAPI(doc.id).getDownloadXlsxUrl(),
target: '_blank', download: '' target: '_blank', download: ''
}, menuIcon('Download'), t('ExportXLSX'), testId('tb-share-option')), }, menuIcon('Download'), t("Export XLSX"), testId('tb-share-option')),
menuItem(() => sendToDrive(doc, pageModel), menuItem(() => sendToDrive(doc, pageModel),
menuIcon('Download'), t('SendToGoogleDrive'), testId('tb-share-option')), menuIcon('Download'), t("Send to Google Drive"), testId('tb-share-option')),
]; ];
} }

4
app/client/ui/SiteSwitcher.ts
View File

@ -33,7 +33,7 @@ export function buildSiteSwitcher(appModel: AppModel) {
const orgs = appModel.topAppModel.orgs; const orgs = appModel.topAppModel.orgs;
return [ return [
menuSubHeader(t('SwitchSites')), menuSubHeader(t("Switch Sites")),
dom.forEach(orgs, (org) => dom.forEach(orgs, (org) =>
menuItemLink(urlState().setLinkUrl({ org: org.domain || undefined }), menuItemLink(urlState().setLinkUrl({ org: org.domain || undefined }),
cssOrgSelected.cls('', appModel.currentOrg ? org.id === appModel.currentOrg.id : false), cssOrgSelected.cls('', appModel.currentOrg ? org.id === appModel.currentOrg.id : false),
@ -45,7 +45,7 @@ export function buildSiteSwitcher(appModel: AppModel) {
menuItem( menuItem(
() => appModel.showNewSiteModal(), () => appModel.showNewSiteModal(),
menuIcon('Plus'), menuIcon('Plus'),
t('CreateNewTeamSite'), t("Create new team site"),
testId('create-new-site'), testId('create-new-site'),
), ),
]; ];

10
app/client/ui/SortConfig.ts
View File

@ -149,9 +149,9 @@ export class SortConfig extends Disposable {
}); });
return {computed, allowedTypes, flag, label}; return {computed, allowedTypes, flag, label};
}; };
const orderByChoice = computedFlag('orderByChoice', ['Choice'], t('UseChoicePosition')); const orderByChoice = computedFlag('orderByChoice', ['Choice'], t("Use choice position"));
const naturalSort = computedFlag('naturalSort', ['Text'], t('NaturalSort')); const naturalSort = computedFlag('naturalSort', ['Text'], t("Natural sort"));
const emptyLast = computedFlag('emptyLast', null, t('EmptyValuesLast')); const emptyLast = computedFlag('emptyLast', null, t("Empty values last"));
const flags = [orderByChoice, emptyLast, naturalSort]; const flags = [orderByChoice, emptyLast, naturalSort];
const column = columns.get().find(c => c.value === Sort.getColRef(colRef)); const column = columns.get().find(c => c.value === Sort.getColRef(colRef));
@ -222,7 +222,7 @@ export class SortConfig extends Disposable {
dom.domComputed(use => { dom.domComputed(use => {
const cols = use(available); const cols = use(available);
return cssTextBtn( return cssTextBtn(
t('AddColumn'), t("Add Column"),
menu((ctl) => [ menu((ctl) => [
...cols.map((col) => ( ...cols.map((col) => (
menuItem( menuItem(
@ -249,7 +249,7 @@ export class SortConfig extends Disposable {
private _buildUpdateDataButton() { private _buildUpdateDataButton() {
return dom.maybe(this._section.isSorted, () => return dom.maybe(this._section.isSorted, () =>
cssButtonRow( cssButtonRow(
cssTextBtn(t('UpdateData'), cssTextBtn(t("Update Data"),
dom.on('click', () => updatePositions(this._gristDoc, this._section)), dom.on('click', () => updatePositions(this._gristDoc, this._section)),
testId('update'), testId('update'),
dom.show((use) => ( dom.show((use) => (

4
app/client/ui/ThemeConfig.ts
View File

@ -26,7 +26,7 @@ export class ThemeConfig extends Disposable {
public buildDom() { public buildDom() {
return dom('div', return dom('div',
css.subHeader(t('Appearance'), css.betaTag('Beta')), css.subHeader(t("Appearance "), css.betaTag('Beta')),
css.dataRow( css.dataRow(
cssAppearanceSelect( cssAppearanceSelect(
select( select(
@ -42,7 +42,7 @@ export class ThemeConfig extends Disposable {
css.dataRow( css.dataRow(
labeledSquareCheckbox( labeledSquareCheckbox(
this._syncWithOS, this._syncWithOS,
t('SyncWithOS'), t("Switch appearance automatically to match system"),
testId('sync-with-os'), testId('sync-with-os'),
), ),
), ),

18
app/client/ui/Tools.ts
View File

@ -30,14 +30,14 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
updateCanViewAccessRules(); updateCanViewAccessRules();
return cssTools( return cssTools(
cssTools.cls('-collapsed', (use) => !use(leftPanelOpen)), cssTools.cls('-collapsed', (use) => !use(leftPanelOpen)),
cssSectionHeader(t("Tools")), cssSectionHeader(t("TOOLS")),
cssPageEntry( cssPageEntry(
cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'acl'), cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'acl'),
cssPageEntry.cls('-disabled', (use) => !use(canViewAccessRules)), cssPageEntry.cls('-disabled', (use) => !use(canViewAccessRules)),
dom.domComputed(canViewAccessRules, (_canViewAccessRules) => { dom.domComputed(canViewAccessRules, (_canViewAccessRules) => {
return cssPageLink( return cssPageLink(
cssPageIcon('EyeShow'), cssPageIcon('EyeShow'),
cssLinkText(t('AccessRules'), cssLinkText(t("Access Rules"),
menuAnnotate('Beta', cssBetaTag.cls('')) menuAnnotate('Beta', cssBetaTag.cls(''))
), ),
_canViewAccessRules ? urlState().setLinkUrl({docPage: 'acl'}) : null, _canViewAccessRules ? urlState().setLinkUrl({docPage: 'acl'}) : null,
@ -49,25 +49,25 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'data'), cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'data'),
cssPageLink( cssPageLink(
cssPageIcon('Database'), cssPageIcon('Database'),
cssLinkText(t('RawData')), cssLinkText(t("Raw Data")),
testId('raw'), testId('raw'),
urlState().setLinkUrl({docPage: 'data'}) urlState().setLinkUrl({docPage: 'data'})
) )
), ),
cssPageEntry( cssPageEntry(
cssPageLink(cssPageIcon('Log'), cssLinkText(t('DocumentHistory')), testId('log'), cssPageLink(cssPageIcon('Log'), cssLinkText(t("Document History")), testId('log'),
dom.on('click', () => gristDoc.showTool('docHistory'))) dom.on('click', () => gristDoc.showTool('docHistory')))
), ),
// TODO: polish validation and add it back // TODO: polish validation and add it back
dom.maybe((use) => use(gristDoc.app.features).validationsTool, () => dom.maybe((use) => use(gristDoc.app.features).validationsTool, () =>
cssPageEntry( cssPageEntry(
cssPageLink(cssPageIcon('Validation'), cssLinkText(t('ValidateData')), testId('validate'), cssPageLink(cssPageIcon('Validation'), cssLinkText(t("Validate Data")), testId('validate'),
dom.on('click', () => gristDoc.showTool('validations')))) dom.on('click', () => gristDoc.showTool('validations'))))
), ),
cssPageEntry( cssPageEntry(
cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'code'), cssPageEntry.cls('-selected', (use) => use(gristDoc.activeViewId) === 'code'),
cssPageLink(cssPageIcon('Code'), cssPageLink(cssPageIcon('Code'),
cssLinkText(t('CodeView')), cssLinkText(t("Code View")),
urlState().setLinkUrl({docPage: 'code'}) urlState().setLinkUrl({docPage: 'code'})
), ),
testId('code'), testId('code'),
@ -77,7 +77,7 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
const ex = buildExamples().find(e => e.urlId === doc.urlId); const ex = buildExamples().find(e => e.urlId === doc.urlId);
if (!ex || !ex.tutorialUrl) { return null; } if (!ex || !ex.tutorialUrl) { return null; }
return cssPageEntry( return cssPageEntry(
cssPageLink(cssPageIcon('Page'), cssLinkText(t('HowToTutorial')), testId('tutorial'), cssPageLink(cssPageIcon('Page'), cssLinkText(t("How-to Tutorial")), testId('tutorial'),
{href: ex.tutorialUrl, target: '_blank'}, {href: ex.tutorialUrl, target: '_blank'},
cssExampleCardOpener( cssExampleCardOpener(
icon('TypeDetails'), icon('TypeDetails'),
@ -97,14 +97,14 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse
cssSplitPageEntry( cssSplitPageEntry(
cssPageEntryMain( cssPageEntryMain(
cssPageLink(cssPageIcon('Page'), cssPageLink(cssPageIcon('Page'),
cssLinkText(t('DocumentTour')), cssLinkText(t("Tour of this Document")),
urlState().setLinkUrl({docTour: true}), urlState().setLinkUrl({docTour: true}),
testId('doctour'), testId('doctour'),
), ),
), ),
!isDocOwner ? null : cssPageEntrySmall( !isDocOwner ? null : cssPageEntrySmall(
cssPageLink(cssPageIcon('Remove'), cssPageLink(cssPageIcon('Remove'),
dom.on('click', () => confirmModal(t('DeleteDocumentTour'), t('Delete'), () => dom.on('click', () => confirmModal(t("Delete document tour?"), t("Delete"), () =>
gristDoc.docData.sendAction(['RemoveTable', 'GristDocTour'])) gristDoc.docData.sendAction(['RemoveTable', 'GristDocTour']))
), ),
testId('remove-doctour') testId('remove-doctour')

2
app/client/ui/TopBar.ts
View File

@ -29,7 +29,7 @@ export function createTopBarHome(appModel: AppModel) {
(appModel.isTeamSite && roles.canEditAccess(appModel.currentOrg?.access || null) ? (appModel.isTeamSite && roles.canEditAccess(appModel.currentOrg?.access || null) ?
[ [
basicButton( basicButton(
t('ManageTeam'), t("Manage Team"),
dom.on('click', () => manageTeamUsersApp(appModel)), dom.on('click', () => manageTeamUsersApp(appModel)),
testId('topbar-manage-team') testId('topbar-manage-team')
), ),

16
app/client/ui/TriggerFormulas.ts
View File

@ -73,7 +73,7 @@ export function buildFormulaTriggers(owner: MultiHolder, column: ColumnRec, opti
const docModel = column._table.docModel; const docModel = column._table.docModel;
const summaryText = Computed.create(owner, use => { const summaryText = Computed.create(owner, use => {
if (use(column.recalcWhen) === RecalcWhen.MANUAL_UPDATES) { if (use(column.recalcWhen) === RecalcWhen.MANUAL_UPDATES) {
return t('AnyField'); return t("Any field");
} }
const deps = decodeObject(use(column.recalcDeps)) as number[]|null; const deps = decodeObject(use(column.recalcDeps)) as number[]|null;
if (!deps || deps.length === 0) { return ''; } if (!deps || deps.length === 0) { return ''; }
@ -98,7 +98,7 @@ export function buildFormulaTriggers(owner: MultiHolder, column: ColumnRec, opti
cssRow( cssRow(
labeledSquareCheckbox( labeledSquareCheckbox(
applyToNew, applyToNew,
t('NewRecords'), t("Apply to new records"),
dom.boolAttr('disabled', newRowsDisabled), dom.boolAttr('disabled', newRowsDisabled),
testId('field-formula-apply-to-new'), testId('field-formula-apply-to-new'),
), ),
@ -107,8 +107,8 @@ export function buildFormulaTriggers(owner: MultiHolder, column: ColumnRec, opti
labeledSquareCheckbox( labeledSquareCheckbox(
applyOnChanges, applyOnChanges,
dom.text(use => use(applyOnChanges) ? dom.text(use => use(applyOnChanges) ?
t('ChangesTo') : t("Apply on changes to:") :
t('RecordChanges') t("Apply on record changes")
), ),
dom.boolAttr('disabled', changesDisabled), dom.boolAttr('disabled', changesDisabled),
testId('field-formula-apply-on-changes'), testId('field-formula-apply-on-changes'),
@ -200,14 +200,14 @@ function buildTriggerSelectors(ctl: IOpenController, tableRec: TableRec, column:
cssItemsFixed( cssItemsFixed(
cssSelectorItem( cssSelectorItem(
labeledSquareCheckbox(current, labeledSquareCheckbox(current,
[t('CurrentField'), cssSelectorNote('(data cleaning)')], [t("Current field "), cssSelectorNote('(data cleaning)')],
dom.boolAttr('disabled', allUpdates), dom.boolAttr('disabled', allUpdates),
), ),
), ),
menuDivider(), menuDivider(),
cssSelectorItem( cssSelectorItem(
labeledSquareCheckbox(allUpdates, labeledSquareCheckbox(allUpdates,
[`${t('AnyField')} `, cssSelectorNote('(except formulas)')] [`${t("Any field")} `, cssSelectorNote('(except formulas)')]
), ),
), ),
), ),
@ -224,12 +224,12 @@ function buildTriggerSelectors(ctl: IOpenController, tableRec: TableRec, column:
cssItemsFixed( cssItemsFixed(
cssSelectorFooter( cssSelectorFooter(
dom.maybe(isChanged, () => dom.maybe(isChanged, () =>
primaryButton(t('OK'), primaryButton(t("OK"),
dom.on('click', () => close(true)), dom.on('click', () => close(true)),
testId('trigger-deps-apply') testId('trigger-deps-apply')
), ),
), ),
basicButton(dom.text(use => use(isChanged) ? t('Cancel') : t('Close')), basicButton(dom.text(use => use(isChanged) ? t("Cancel") : t("Close")),
dom.on('click', () => close(false)), dom.on('click', () => close(false)),
testId('trigger-deps-cancel') testId('trigger-deps-cancel')
), ),

24
app/client/ui/ViewLayoutMenu.ts
View File

@ -24,11 +24,11 @@ export function makeViewLayoutMenu(viewSection: ViewSectionRec, isReadonly: bool
const contextMenu = [ const contextMenu = [
menuItemCmd(allCommands.deleteRecords, menuItemCmd(allCommands.deleteRecords,
t('DeleteRecord'), t("Delete record"),
testId('section-delete-card'), testId('section-delete-card'),
dom.cls('disabled', isReadonly || isAddRow)), dom.cls('disabled', isReadonly || isAddRow)),
menuItemCmd(allCommands.copyLink, menuItemCmd(allCommands.copyLink,
t('CopyAnchorLink'), t("Copy anchor link"),
testId('section-card-link'), testId('section-card-link'),
), ),
menuDivider(), menuDivider(),
@ -39,30 +39,30 @@ export function makeViewLayoutMenu(viewSection: ViewSectionRec, isReadonly: bool
return [ return [
dom.maybe((use) => ['single'].includes(use(viewSection.parentKey)), () => contextMenu), dom.maybe((use) => ['single'].includes(use(viewSection.parentKey)), () => contextMenu),
dom.maybe((use) => !use(viewSection.isRaw) && !isLight, dom.maybe((use) => !use(viewSection.isRaw) && !isLight,
() => menuItemCmd(allCommands.showRawData, t('ShowRawData'), testId('show-raw-data')), () => menuItemCmd(allCommands.showRawData, t("Show raw data"), testId('show-raw-data')),
), ),
menuItemCmd(allCommands.printSection, t('PrintWidget'), testId('print-section')), menuItemCmd(allCommands.printSection, t("Print widget"), testId('print-section')),
menuItemLink({ href: gristDoc.getCsvLink(), target: '_blank', download: ''}, menuItemLink({ href: gristDoc.getCsvLink(), target: '_blank', download: ''},
t('DownloadCSV'), testId('download-section')), t("Download as CSV"), testId('download-section')),
menuItemLink({ href: gristDoc.getXlsxActiveViewLink(), target: '_blank', download: ''}, menuItemLink({ href: gristDoc.getXlsxActiveViewLink(), target: '_blank', download: ''},
t('DownloadXLSX'), testId('download-section')), t("Download as XLSX"), testId('download-section')),
dom.maybe((use) => ['detail', 'single'].includes(use(viewSection.parentKey)), () => dom.maybe((use) => ['detail', 'single'].includes(use(viewSection.parentKey)), () =>
menuItemCmd(allCommands.editLayout, t('EditCardLayout'), menuItemCmd(allCommands.editLayout, t("Edit Card Layout"),
dom.cls('disabled', isReadonly))), dom.cls('disabled', isReadonly))),
dom.maybe(!isLight, () => [ dom.maybe(!isLight, () => [
menuDivider(), menuDivider(),
menuItemCmd(allCommands.viewTabOpen, t('WidgetOptions'), testId('widget-options')), menuItemCmd(allCommands.viewTabOpen, t("Widget options"), testId('widget-options')),
menuItemCmd(allCommands.sortFilterTabOpen, t('AdvancedSortFilter')), menuItemCmd(allCommands.sortFilterTabOpen, t("Advanced Sort & Filter")),
menuItemCmd(allCommands.dataSelectionTabOpen, t('DataSelection')), menuItemCmd(allCommands.dataSelectionTabOpen, t("Data selection")),
]), ]),
menuDivider(), menuDivider(),
dom.maybe((use) => use(viewSection.parentKey) === 'custom' && use(viewSection.hasCustomOptions), () => dom.maybe((use) => use(viewSection.parentKey) === 'custom' && use(viewSection.hasCustomOptions), () =>
menuItemCmd(allCommands.openWidgetConfiguration, t('OpenConfiguration'), menuItemCmd(allCommands.openWidgetConfiguration, t("Open configuration"),
testId('section-open-configuration')), testId('section-open-configuration')),
), ),
menuItemCmd(allCommands.deleteSection, t('DeleteWidget'), menuItemCmd(allCommands.deleteSection, t("Delete widget"),
dom.cls('disabled', !viewRec.getRowId() || viewRec.viewSections().peekLength <= 1 || isReadonly), dom.cls('disabled', !viewRec.getRowId() || viewRec.viewSections().peekLength <= 1 || isReadonly),
testId('section-delete')), testId('section-delete')),
]; ];

18
app/client/ui/ViewSectionMenu.ts
View File

@ -19,7 +19,7 @@ const t = makeT('ViewSectionMenu');
// Handler for [Save] button. // Handler for [Save] button.
async function doSave(docModel: DocModel, viewSection: ViewSectionRec): Promise<void> { async function doSave(docModel: DocModel, viewSection: ViewSectionRec): Promise<void> {
await docModel.docData.bundleActions(t("UpdateSortFilterSettings"), () => Promise.all([ await docModel.docData.bundleActions(t("Update Sort&Filter settings"), () => Promise.all([
viewSection.activeSortJson.save(), // Save sort viewSection.activeSortJson.save(), // Save sort
viewSection.saveFilters(), // Save filter viewSection.saveFilters(), // Save filter
viewSection.activeCustomOptions.save(), // Save widget options viewSection.activeCustomOptions.save(), // Save widget options
@ -73,7 +73,7 @@ export function viewSectionMenu(
// [Save] [Revert] buttons when there are unsaved options. // [Save] [Revert] buttons when there are unsaved options.
dom.maybe(displaySaveObs, () => cssSectionSaveButtonsWrapper( dom.maybe(displaySaveObs, () => cssSectionSaveButtonsWrapper(
cssSaveTextButton( cssSaveTextButton(
t('Save'), t("Save"),
cssSaveTextButton.cls('-accent'), cssSaveTextButton.cls('-accent'),
dom.on('click', save), dom.on('click', save),
hoverTooltip('Save sort & filter settings', {key: 'sortFilterBtnTooltip'}), hoverTooltip('Save sort & filter settings', {key: 'sortFilterBtnTooltip'}),
@ -99,10 +99,10 @@ export function viewSectionMenu(
// [Save] [Revert] buttons // [Save] [Revert] buttons
dom.domComputed(displaySaveObs, displaySave => [ dom.domComputed(displaySaveObs, displaySave => [
displaySave ? cssSaveButtonsRow( displaySave ? cssSaveButtonsRow(
cssSaveButton(t('Save'), testId('btn-save'), cssSaveButton(t("Save"), testId('btn-save'),
dom.on('click', () => { ctl.close(); save(); }), dom.on('click', () => { ctl.close(); save(); }),
dom.boolAttr('disabled', isReadonly)), dom.boolAttr('disabled', isReadonly)),
basicButton(t('Revert'), testId('btn-revert'), basicButton(t("Revert"), testId('btn-revert'),
dom.on('click', () => { ctl.close(); revert(); })) dom.on('click', () => { ctl.close(); revert(); }))
) : null, ) : null,
]), ]),
@ -142,7 +142,7 @@ export function viewSectionMenu(
function makeSortPanel(section: ViewSectionRec, gristDoc: GristDoc) { function makeSortPanel(section: ViewSectionRec, gristDoc: GristDoc) {
return [ return [
cssLabel(t('Sort'), testId('heading-sort')), cssLabel(t("SORT"), testId('heading-sort')),
dom.create(SortConfig, section, gristDoc, { dom.create(SortConfig, section, gristDoc, {
// Attach content to triggerElem's parent, which is needed to prevent view // Attach content to triggerElem's parent, which is needed to prevent view
// section menu to close when clicking an item in the advanced sort menu. // section menu to close when clicking an item in the advanced sort menu.
@ -153,7 +153,7 @@ function makeSortPanel(section: ViewSectionRec, gristDoc: GristDoc) {
function makeFilterPanel(section: ViewSectionRec) { function makeFilterPanel(section: ViewSectionRec) {
return [ return [
cssLabel(t('Filter'), testId('heading-filter')), cssLabel(t("FILTER"), testId('heading-filter')),
dom.create(FilterConfig, section, { dom.create(FilterConfig, section, {
// Attach content to triggerElem's parent, which is needed to prevent view // Attach content to triggerElem's parent, which is needed to prevent view
// section menu to close when clicking an item of the add filter menu. // section menu to close when clicking an item of the add filter menu.
@ -168,13 +168,13 @@ function makeCustomOptions(section: ViewSectionRec) {
const color = Computed.create(null, use => use(section.activeCustomOptions.isSaved) ? "-normal" : "-accent"); const color = Computed.create(null, use => use(section.activeCustomOptions.isSaved) ? "-normal" : "-accent");
const text = Computed.create(null, use => { const text = Computed.create(null, use => {
if (use(section.activeCustomOptions)) { if (use(section.activeCustomOptions)) {
return use(section.activeCustomOptions.isSaved) ? t("Customized") : t("Modified"); return use(section.activeCustomOptions.isSaved) ? t("(customized)") : t("(modified)");
} else { } else {
return t("Empty"); return t("(empty)");
} }
}); });
return [ return [
cssMenuInfoHeader(t('CustomOptions'), testId('heading-widget-options')), cssMenuInfoHeader(t("Custom options"), testId('heading-widget-options')),
cssMenuText( cssMenuText(
dom.autoDispose(text), dom.autoDispose(text),
dom.autoDispose(color), dom.autoDispose(color),

12
app/client/ui/VisibleFieldsConfig.ts
View File

@ -163,8 +163,8 @@ export class VisibleFieldsConfig extends Disposable {
options.hiddenFields.itemCreateFunc, options.hiddenFields.itemCreateFunc,
{ {
itemClass: cssDragRow.className, itemClass: cssDragRow.className,
reorder() { throw new Error(t('NoReorderHiddenField')); }, reorder() { throw new Error(t("Hidden Fields cannot be reordered")); },
receive() { throw new Error(t('NoDropInHiddenField')); }, receive() { throw new Error(t("Cannot drop items into Hidden Fields")); },
remove(item: ColumnRec) { remove(item: ColumnRec) {
// Return the column object. This value is passed to the viewFields // Return the column object. This value is passed to the viewFields
// receive function as its respective item parameter // receive function as its respective item parameter
@ -204,7 +204,7 @@ export class VisibleFieldsConfig extends Disposable {
() => ( () => (
cssControlLabel( cssControlLabel(
icon('Tick'), icon('Tick'),
t('SelectAll'), t("Select All"),
dom.on('click', () => this._setVisibleCheckboxes(fieldsDraggable, true)), dom.on('click', () => this._setVisibleCheckboxes(fieldsDraggable, true)),
testId('visible-fields-select-all'), testId('visible-fields-select-all'),
) )
@ -219,7 +219,7 @@ export class VisibleFieldsConfig extends Disposable {
dom.on('click', () => this._removeSelectedFields()), dom.on('click', () => this._removeSelectedFields()),
), ),
basicButton( basicButton(
t('Clear'), t("Clear"),
dom.on('click', () => this._setVisibleCheckboxes(fieldsDraggable, false)), dom.on('click', () => this._setVisibleCheckboxes(fieldsDraggable, false)),
), ),
testId('visible-batch-buttons') testId('visible-batch-buttons')
@ -240,7 +240,7 @@ export class VisibleFieldsConfig extends Disposable {
() => ( () => (
cssControlLabel( cssControlLabel(
icon('Tick'), icon('Tick'),
t('SelectAll'), t("Select All"),
dom.on('click', () => this._setHiddenCheckboxes(hiddenFieldsDraggable, true)), dom.on('click', () => this._setHiddenCheckboxes(hiddenFieldsDraggable, true)),
testId('hidden-fields-select-all'), testId('hidden-fields-select-all'),
) )
@ -261,7 +261,7 @@ export class VisibleFieldsConfig extends Disposable {
dom.on('click', () => this._addSelectedFields()), dom.on('click', () => this._addSelectedFields()),
), ),
basicButton( basicButton(
t('Clear'), t("Clear"),
dom.on('click', () => this._setHiddenCheckboxes(hiddenFieldsDraggable, false)), dom.on('click', () => this._setHiddenCheckboxes(hiddenFieldsDraggable, false)),
), ),
testId('hidden-batch-buttons') testId('hidden-batch-buttons')

8
app/client/ui/WelcomeQuestions.ts
View File

@ -31,7 +31,7 @@ export function showWelcomeQuestions(userPrefsObs: Observable<UserPrefs>): boole
async function onConfirm() { async function onConfirm() {
const selected = choices.filter((c, i) => selection[i].get()).map(c => t(c.textKey)); const selected = choices.filter((c, i) => selection[i].get()).map(c => t(c.textKey));
const use_cases = ['L', ...selected]; // Format to populate a ChoiceList column const use_cases = ['L', ...selected]; // Format to populate a ChoiceList column
const use_other = selected.includes(t('Other')) ? otherText.get() : ''; const use_other = selected.includes(t("Other")) ? otherText.get() : '';
const submitUrl = new URL(window.location.href); const submitUrl = new URL(window.location.href);
submitUrl.pathname = '/welcome/info'; submitUrl.pathname = '/welcome/info';
@ -51,7 +51,7 @@ export function showWelcomeQuestions(userPrefsObs: Observable<UserPrefs>): boole
}); });
return { return {
title: [cssLogo(), dom('div', t('WelcomeToGrist'))], title: [cssLogo(), dom('div', t("Welcome to Grist!"))],
body: buildInfoForm(selection, otherText), body: buildInfoForm(selection, otherText),
saveLabel: 'Start using Grist', saveLabel: 'Start using Grist',
saveFunc: onConfirm, saveFunc: onConfirm,
@ -79,7 +79,7 @@ const choices: Array<{icon: IconName, color: string, textKey: string}> = [
function buildInfoForm(selection: Observable<boolean>[], otherText: Observable<string>) { function buildInfoForm(selection: Observable<boolean>[], otherText: Observable<string>) {
return [ return [
dom('span', t('WhatBringsYouToGrist')), dom('span', t("What brings you to Grist? Please help us serve you better.")),
cssChoices( cssChoices(
choices.map((item, i) => cssChoice( choices.map((item, i) => cssChoice(
cssIcon(icon(item.icon), {style: `--icon-color: ${item.color}`}), cssIcon(icon(item.icon), {style: `--icon-color: ${item.color}`}),
@ -89,7 +89,7 @@ function buildInfoForm(selection: Observable<boolean>[], otherText: Observable<s
t(item.textKey) : t(item.textKey) :
[ [
cssOtherLabel(t(item.textKey)), cssOtherLabel(t(item.textKey)),
cssOtherInput(otherText, {}, {type: 'text', placeholder: t('TypeHere')}, cssOtherInput(otherText, {}, {type: 'text', placeholder: t("Type here")},
// The following subscribes to changes to selection observable, and focuses the input when // The following subscribes to changes to selection observable, and focuses the input when
// this item is selected. // this item is selected.
(elem) => subscribeElem(elem, selection[i], val => val && setTimeout(() => elem.focus(), 0)), (elem) => subscribeElem(elem, selection[i], val => val && setTimeout(() => elem.focus(), 0)),

12
app/client/ui/WidgetTitle.ts
View File

@ -67,7 +67,7 @@ function buildWidgetRenamePopup(ctrl: IOpenController, vs: ViewSectionRec, optio
// Placeholder for widget title: // Placeholder for widget title:
// - when widget title is empty shows a default widget title (what would be shown when title is empty) // - when widget title is empty shows a default widget title (what would be shown when title is empty)
// - when widget title is set, shows just a text to override it. // - when widget title is set, shows just a text to override it.
const inputWidgetPlaceholder = !vs.title.peek() ? t('OverrideTitle') : vs.defaultWidgetTitle.peek(); const inputWidgetPlaceholder = !vs.title.peek() ? t("Override widget title") : vs.defaultWidgetTitle.peek();
const disableSave = Computed.create(ctrl, (use) => { const disableSave = Computed.create(ctrl, (use) => {
const newTableName = use(inputTableName)?.trim() ?? ''; const newTableName = use(inputTableName)?.trim() ?? '';
@ -137,29 +137,29 @@ function buildWidgetRenamePopup(ctrl: IOpenController, vs: ViewSectionRec, optio
testId('popup'), testId('popup'),
dom.cls(menuCssClass), dom.cls(menuCssClass),
dom.maybe(!options.tableNameHidden, () => [ dom.maybe(!options.tableNameHidden, () => [
cssLabel(t('DataTableName')), cssLabel(t("DATA TABLE NAME")),
// Update tableName on key stroke - this will show the default widget name as we type. // Update tableName on key stroke - this will show the default widget name as we type.
// above this modal. // above this modal.
tableInput = cssInput( tableInput = cssInput(
inputTableName, inputTableName,
updateOnKey, updateOnKey,
{disabled: isSummary, placeholder: t('NewTableName')}, {disabled: isSummary, placeholder: t("Provide a table name")},
testId('table-name-input') testId('table-name-input')
), ),
]), ]),
dom.maybe(!options.widgetNameHidden, () => [ dom.maybe(!options.widgetNameHidden, () => [
cssLabel(t('WidgetTitle')), cssLabel(t("WIDGET TITLE")),
widgetInput = cssInput(inputWidgetTitle, updateOnKey, {placeholder: inputWidgetPlaceholder}, widgetInput = cssInput(inputWidgetTitle, updateOnKey, {placeholder: inputWidgetPlaceholder},
testId('section-name-input') testId('section-name-input')
), ),
]), ]),
cssButtons( cssButtons(
primaryButton(t('Save'), primaryButton(t("Save"),
dom.on('click', doSave), dom.on('click', doSave),
dom.boolAttr('disabled', use => use(disableSave) || use(modalCtl.workInProgress)), dom.boolAttr('disabled', use => use(disableSave) || use(modalCtl.workInProgress)),
testId('save'), testId('save'),
), ),
basicButton(t('Cancel'), basicButton(t("Cancel"),
testId('cancel'), testId('cancel'),
dom.on('click', () => modalCtl.close()) dom.on('click', () => modalCtl.close())
), ),

42
app/client/ui/errorPages.ts
View File

@ -28,24 +28,24 @@ export function createErrPage(appModel: AppModel) {
* Creates a page to show that the user has no access to this org. * Creates a page to show that the user has no access to this org.
*/ */
export function createForbiddenPage(appModel: AppModel, message?: string) { export function createForbiddenPage(appModel: AppModel, message?: string) {
document.title = t('AccessDenied', {suffix: getPageTitleSuffix(getGristConfig())}); document.title = t("Access denied{{suffix}}", {suffix: getPageTitleSuffix(getGristConfig())});
const isAnonym = () => !appModel.currentValidUser; const isAnonym = () => !appModel.currentValidUser;
const isExternal = () => appModel.currentValidUser?.loginMethod === 'External'; const isExternal = () => appModel.currentValidUser?.loginMethod === 'External';
return pagePanelsError(appModel, t('AccessDenied', {suffix: ''}), [ return pagePanelsError(appModel, t("Access denied{{suffix}}", {suffix: ''}), [
dom.domComputed(appModel.currentValidUser, user => user ? [ dom.domComputed(appModel.currentValidUser, user => user ? [
cssErrorText(message || t("DeniedOrganizationDocuments")), cssErrorText(message || t("You do not have access to this organization's documents.")),
cssErrorText(t("SignInWithDifferentAccount", {email: dom('b', user.email)})), // TODO: i18next cssErrorText(t("You are signed in as {{email}}. You can sign in with a different account, or ask an administrator for access.", {email: dom('b', user.email)})), // TODO: i18next
] : [ ] : [
// This page is not normally shown because a logged out user with no access will get // This page is not normally shown because a logged out user with no access will get
// redirected to log in. But it may be seen if a user logs out and returns to a cached // redirected to log in. But it may be seen if a user logs out and returns to a cached
// version of this page or is an external user (connected through GristConnect). // version of this page or is an external user (connected through GristConnect).
cssErrorText(t("SignInToAccess")), cssErrorText(t("Sign in to access this organization's documents.")),
]), ]),
cssButtonWrap(bigPrimaryButtonLink( cssButtonWrap(bigPrimaryButtonLink(
isExternal() ? t("GoToMainPage") : isExternal() ? t("Go to main page") :
isAnonym() ? t("SignIn") : isAnonym() ? t("Sign in") :
t("AddAcount"), t("Add account"),
{href: isExternal() ? getMainOrgUrl() : getLoginUrl()}, {href: isExternal() ? getMainOrgUrl() : getLoginUrl()},
testId('error-signin'), testId('error-signin'),
)) ))
@ -56,12 +56,12 @@ export function createForbiddenPage(appModel: AppModel, message?: string) {
* Creates a page that shows the user is logged out. * Creates a page that shows the user is logged out.
*/ */
export function createSignedOutPage(appModel: AppModel) { export function createSignedOutPage(appModel: AppModel) {
document.title = t('SignedOut', {suffix: getPageTitleSuffix(getGristConfig())}); document.title = t("Signed out{{suffix}}", {suffix: getPageTitleSuffix(getGristConfig())});
return pagePanelsError(appModel, t('SignedOut', {suffix: ''}), [ return pagePanelsError(appModel, t("Signed out{{suffix}}", {suffix: ''}), [
cssErrorText(t('SignedOutNow')), cssErrorText(t("You are now signed out.")),
cssButtonWrap(bigPrimaryButtonLink( cssButtonWrap(bigPrimaryButtonLink(
t('SignedInAgain'), {href: getLoginUrl()}, testId('error-signin') t("Sign in again"), {href: getLoginUrl()}, testId('error-signin')
)) ))
]); ]);
} }
@ -70,13 +70,13 @@ export function createSignedOutPage(appModel: AppModel) {
* Creates a "Page not found" page. * Creates a "Page not found" page.
*/ */
export function createNotFoundPage(appModel: AppModel, message?: string) { export function createNotFoundPage(appModel: AppModel, message?: string) {
document.title = t('PageNotFound', {suffix: getPageTitleSuffix(getGristConfig())}); document.title = t("Page not found{{suffix}}", {suffix: getPageTitleSuffix(getGristConfig())});
return pagePanelsError(appModel, t('PageNotFound', {suffix: ''}), [ return pagePanelsError(appModel, t("Page not found{{suffix}}", {suffix: ''}), [
cssErrorText(message || t('NotFoundMainText', {separator: dom('br')})), // TODO: i18next cssErrorText(message || t("The requested page could not be found.{{separator}}Please check the URL and try again.", {separator: dom('br')})), // TODO: i18next
cssButtonWrap(bigPrimaryButtonLink(t('GoToMainPage'), testId('error-primary-btn'), cssButtonWrap(bigPrimaryButtonLink(t("Go to main page"), testId('error-primary-btn'),
urlState().setLinkUrl({}))), urlState().setLinkUrl({}))),
cssButtonWrap(bigBasicButtonLink(t('ContactSupport'), {href: 'https://getgrist.com/contact'})), cssButtonWrap(bigBasicButtonLink(t("Contact support"), {href: 'https://getgrist.com/contact'})),
]); ]);
} }
@ -84,14 +84,14 @@ export function createNotFoundPage(appModel: AppModel, message?: string) {
* Creates a generic error page with the given message. * Creates a generic error page with the given message.
*/ */
export function createOtherErrorPage(appModel: AppModel, message?: string) { export function createOtherErrorPage(appModel: AppModel, message?: string) {
document.title = t('GenericError', {suffix: getPageTitleSuffix(getGristConfig())}); document.title = t("Error{{suffix}}", {suffix: getPageTitleSuffix(getGristConfig())});
return pagePanelsError(appModel, t('SomethingWentWrong'), [ return pagePanelsError(appModel, t("Something went wrong"), [
cssErrorText(message ? t('ErrorHappened', {context: 'message', message: addPeriod(message)}) : cssErrorText(message ? t('ErrorHappened', {context: 'message', message: addPeriod(message)}) :
t('ErrorHappened', {context: 'unknown'})), t('ErrorHappened', {context: 'unknown'})),
cssButtonWrap(bigPrimaryButtonLink(t('GoToMainPage'), testId('error-primary-btn'), cssButtonWrap(bigPrimaryButtonLink(t("Go to main page"), testId('error-primary-btn'),
urlState().setLinkUrl({}))), urlState().setLinkUrl({}))),
cssButtonWrap(bigBasicButtonLink(t('ContactSupport'), {href: 'https://getgrist.com/contact'})), cssButtonWrap(bigBasicButtonLink(t("Contact support"), {href: 'https://getgrist.com/contact'})),
]); ]);
} }

2
app/client/ui/sendToDrive.ts
View File

@ -24,7 +24,7 @@ export async function sendToDrive(doc: Document, pageModel: DocPageModel) {
// Create send to google drive handler (it will return a spreadsheet url). // Create send to google drive handler (it will return a spreadsheet url).
const send = (code: string) => const send = (code: string) =>
// Decorate it with a spinner // Decorate it with a spinner
spinnerModal(t('SendingToGoogleDrive'), spinnerModal(t("Sending file to Google Drive"),
pageModel.appModel.api.getDocAPI(doc.id) pageModel.appModel.api.getDocAPI(doc.id)
.sendToDrive(code, pageModel.currentDocTitle.get()) .sendToDrive(code, pageModel.currentDocTitle.get())
); );