Adjust Mail Export UI

Close #8171

Co-authored-by: hrb-hub <[email protected]>

src/common/misc/TranslationKey.ts

@@ -1835,3 +1835,6 @@ export type TranslationKeyType =
 	| "emptyString_msg"
 	| "exportFinished_label"
 	| "exportRunningElsewhere_label"
+	| "mailExport_label"
+	| "downloadDesktopClient_label"
+	| "mailExportOnlyOnDesktop_label"

src/mail-app/settings/MailExportSettings.ts

@@ -1,18 +1,18 @@
 import m, { Children, Component, Vnode } from "mithril"
 import { lang } from "../../common/misc/LanguageViewModel"
-import { theme } from "../../common/gui/theme"
-import { px } from "../../common/gui/size"
-import { ProgressBar } from "../../common/gui/base/ProgressBar"
 import { DropDownSelector, type DropDownSelectorAttrs } from "../../common/gui/base/DropDownSelector"
 import { MailboxDetail } from "../../common/mailFunctionality/MailboxModel"
 import { getMailboxName } from "../../common/mailFunctionality/SharedMailUtils"
 import { mailLocator } from "../mailLocator"
 import { first } from "@tutao/tutanota-utils"
 import { LoginController } from "../../common/api/main/LoginController"
-import { Button, ButtonType } from "../../common/gui/base/Button"
 import { MailExportController } from "../native/main/MailExportController.js"
-import { formatDate } from "../../common/misc/Formatter"
 import Stream from "mithril/stream"
+import { Button, ButtonType } from "../../common/gui/base/Button"
+import { formatDate } from "../../common/misc/Formatter"
+import { IconButton } from "../../common/gui/base/IconButton"
+import { Icons } from "../../common/gui/base/icons/Icons"
+import { ButtonSize } from "../../common/gui/base/ButtonSize"
 
 interface MailExportSettingsAttrs {
 	mailboxDetails: MailboxDetail[]
@@ -69,23 +69,14 @@ export class MailExportSettings implements Component<MailExportSettingsAttrs> {
 									"{count}": state.exportedMails,
 								}),
 							),
-							m(
-								".rel.full-width.mt-s",
-								{
-									style: {
-										"background-color": theme.content_border,
-										height: px(2),
-									},
-								},
-								m(ProgressBar, { progress: state.progress }),
-							),
 						]),
-						m(Button, {
-							label: "cancel_action",
-							type: ButtonType.Secondary,
+						m(IconButton, {
+							title: "cancel_action",
+							icon: Icons.Cancel,
 							click: () => {
 								controller.cancelExport()
 							},
+							size: ButtonSize.Normal,
 						}),
 					]),
 				]

src/mail-app/settings/MailExportViewer.ts

@@ -0,0 +1,73 @@
+import m, { Children } from "mithril"
+import { assertMainOrNode, isDesktop } from "../../common/api/common/Env"
+import { InfoLink, lang } from "../../common/misc/LanguageViewModel"
+import { UpdatableSettingsViewer } from "../../common/settings/Interfaces.js"
+import { mailLocator } from "../mailLocator.js"
+import { MailExportSettings } from "./MailExportSettings"
+import { MailExportController } from "../native/main/MailExportController.js"
+import { Button, ButtonType } from "../../common/gui/base/Button"
+
+assertMainOrNode()
+
+export class MailExportViewer implements UpdatableSettingsViewer {
+	private mailExportController: MailExportController | null = null
+
+	constructor() {
+		this.view = this.view.bind(this)
+
+		if (isDesktop()) {
+			// export is only available on desktop
+			mailLocator.mailExportController().then((controller) => {
+				this.mailExportController = controller
+				m.redraw()
+			})
+		}
+	}
+
+	view(): Children {
+		return [
+			m(
+				".fill-absolute.scroll.plr-l.pb-xl",
+				m(".h4.mt-l", lang.get("exportMailbox_label")),
+				this.mailExportController
+					? m(MailExportSettings, {
+							mailboxDetails: mailLocator.mailboxModel.mailboxDetails(),
+							logins: mailLocator.logins,
+							mailExportController: this.mailExportController,
+					  })
+					: this.renderExportOnlyOnDesktopText(),
+			),
+		]
+	}
+
+	private renderExportOnlyOnDesktopText() {
+		return [
+			m(
+				".flex-column.center.mt-m",
+				m("img.onboarding-logo.mt-m", {
+					src: `${window.tutao.appState.prefixWithoutFile}/images/tuta-desktop-illustration.webp`,
+					alt: "",
+					rel: "noreferrer",
+					loading: "lazy",
+					decoding: "async",
+					class: "onboarding-logo-large",
+				}),
+				m(".p.mt-m", lang.get("mailExportOnlyOnDesktop_label")),
+				m(
+					".flex-center.mt-m",
+					m(Button, {
+						type: ButtonType.Primary,
+						label: "downloadDesktopClient_label",
+						click: () => {
+							open(InfoLink.Download)
+						},
+					}),
+				),
+			),
+		]
+	}
+
+	async entityEventsReceived(): Promise<void> {
+		return Promise.resolve()
+	}
+}

src/mail-app/settings/MailSettingsViewer.ts

@@ -1,5 +1,5 @@
 import m, { Children } from "mithril"
-import { assertMainOrNode, isApp, isDesktop } from "../../common/api/common/Env"
+import { assertMainOrNode, isApp } from "../../common/api/common/Env"
 import { lang } from "../../common/misc/LanguageViewModel"
 import type { MailboxGroupRoot, MailboxProperties, OutOfOfficeNotification, TutanotaProperties } from "../../common/api/entities/tutanota/TypeRefs.js"
 import {
@@ -49,8 +49,6 @@ import { UpdatableSettingsViewer } from "../../common/settings/Interfaces.js"
 import { mailLocator } from "../mailLocator.js"
 import { getDefaultSenderFromUser, getFolderName } from "../mail/model/MailUtils.js"
 import { elementIdPart } from "../../common/api/common/utils/EntityUtils.js"
-import { MailExportSettings } from "./MailExportSettings"
-import { MailExportController } from "../native/main/MailExportController.js"
 
 assertMainOrNode()
 
@@ -72,8 +70,6 @@ export class MailSettingsViewer implements UpdatableSettingsViewer {
 	private customerInfo: CustomerInfo | null
 	private mailAddressTableModel: MailAddressTableModel | null = null
 	private mailAddressTableExpanded: boolean
-	private mailExportController: MailExportController | null = null
-
 	private offlineStorageSettings = new OfflineStorageSettingsModel(mailLocator.logins.getUserController(), deviceConfig)
 
 	constructor() {
@@ -90,13 +86,6 @@ export class MailSettingsViewer implements UpdatableSettingsViewer {
 		this._inboxRulesTableLines = stream<Array<TableLineAttrs>>([])
 		this._outOfOfficeStatus = stream(lang.get("deactivated_label"))
 		this._indexStateWatch = null
-		if (isDesktop()) {
-			// export is only available on desktop
-			mailLocator.mailExportController().then((controller) => {
-				this.mailExportController = controller
-				m.redraw()
-			})
-		}
 		// normally we would maybe like to get it as an argument but these viewers are created in an odd way
 		mailLocator.mailAddressTableModelForOwnMailbox().then((model) => {
 			this.mailAddressTableModel = model
@@ -392,14 +381,6 @@ export class MailSettingsViewer implements UpdatableSettingsViewer {
 									}),
 								),
 						  ],
-					this.mailExportController && [
-						m(".h4.mt-l", lang.get("exportMailbox_label")),
-						m(MailExportSettings, {
-							mailboxDetails: mailLocator.mailboxModel.mailboxDetails(),
-							logins: mailLocator.logins,
-							mailExportController: this.mailExportController,
-						}),
-					],
 				],
 			),
 		]

src/mail-app/settings/SettingsView.ts

@@ -67,7 +67,7 @@ import { NotificationSettingsViewer } from "./NotificationSettingsViewer.js"
 import { SettingsViewAttrs, UpdatableSettingsDetailsViewer, UpdatableSettingsViewer } from "../../common/settings/Interfaces.js"
 import { AffiliateSettingsViewer } from "../../common/settings/AffiliateSettingsViewer.js"
 import { AffiliateKpisViewer } from "../../common/settings/AffiliateKpisViewer.js"
-import { showAppRatingDialog } from "../../common/ratings/InAppRatingDialog.js"
+import { MailExportViewer } from "./MailExportViewer"
 
 assertMainOrNode()
 
@@ -152,6 +152,16 @@ export class SettingsView extends BaseTopLevelView implements TopLevelView<Setti
 			)
 		}
 
+		this._userFolders.push(
+			new SettingsFolder(
+				"mailExport_label",
+				() => Icons.Export,
+				"mailExport",
+				() => new MailExportViewer(),
+				undefined,
+			),
+		)
+
 		this._adminFolders = []
 		this._templateFolders = []
 

src/mail-app/translations/de.ts

@@ -1853,6 +1853,9 @@ export default {
 		"yourFolders_action": "DEINE ORDNER",
 		"yourMessage_label": "Deine Nachricht",
 		"you_label": "Du",
-		"exportRunningElsewhere_label": "Export may be running in another window."
+		"exportRunningElsewhere_label": "Export may be running in another window.",
+		"mailExport_label": "Mail export",
+		"downloadDesktopClient_label": "Download desktop client",
+		"mailExportOnlyOnDesktop_label": "Email export is currently only available in our desktop client."
 	}
 }

src/mail-app/translations/de_sie.ts

@@ -1853,6 +1853,9 @@ export default {
 		"yourFolders_action": "Ihre ORDNER",
 		"yourMessage_label": "Ihre Nachricht",
 		"you_label": "Sie",
-		"exportRunningElsewhere_label": "Export may be running in another window."
+		"exportRunningElsewhere_label": "Export may be running in another window.",
+		"mailExport_label": "Mail export",
+		"downloadDesktopClient_label": "Download desktop client",
+		"mailExportOnlyOnDesktop_label": "Email export is currently only available in our desktop client."
 	}
 }

src/mail-app/translations/en.ts

@@ -1849,6 +1849,9 @@ export default {
 		"yourFolders_action": "YOUR FOLDERS",
 		"yourMessage_label": "Your message",
 		"you_label": "You",
-		"exportRunningElsewhere_label": "Export may be running in another window."
+		"exportRunningElsewhere_label": "Export may be running in another window.",
+		"mailExport_label": "Mail export",
+		"downloadDesktopClient_label": "Download desktop client",
+		"mailExportOnlyOnDesktop_label": "Email export is currently only available in our desktop client."
 	}
 }