add option to just download inline images on long press, fix #2925

Also, change the positioning handling for the dropdown, so that it appears underneath the mouse, rather than below the image element

src/gui/base/DropdownN.js

@@ -18,6 +18,7 @@ import type {PosRect} from "./Dropdown"
 import {Keys} from "../../api/common/TutanotaConstants"
 import {newMouseEvent} from "../HtmlUtils"
 import {filterNull} from "../../api/common/utils/ArrayUtils"
+import {DomRectReadOnlyPolyfilled} from "./Dropdown"
 
 assertMainOrNode()
 
@@ -321,6 +322,12 @@ export function createAsyncDropdown(lazyButtons: lazyAsync<$ReadOnlyArray<?Dropd
 	}: clickHandler)
 }
 
+export function showDropdownAtPosition(buttons: $ReadOnlyArray<DropdownChildAttrs>, xPos: number, yPos: number, width: number = 200) {
+	const dropdown = new DropdownN(() => buttons, width)
+	dropdown.setOrigin(new DomRectReadOnlyPolyfilled(xPos, yPos, 0, 0))
+	modal.displayUnique(dropdown, false)
+}
+
 // We override type of click to be optional because we wrap it in our own
 export type DropdownButtonAttrs = $Rest<ButtonAttrs, {click?: clickHandler}>
 

src/gui/base/GuiUtils.js

@@ -1,19 +1,18 @@
 //@flow
-import m from "mithril"
 import type {Country} from "../../api/common/CountryList"
 import {Countries} from "../../api/common/CountryList"
 import {DropDownSelector} from "./DropDownSelector"
 import type {TranslationKey} from "../../misc/LanguageViewModel"
 import {lang} from "../../misc/LanguageViewModel"
-import {ButtonColors, ButtonN, ButtonType} from "./ButtonN"
+import type {ButtonAttrs} from "./ButtonN"
+import {ButtonColors, ButtonType} from "./ButtonN"
 import {Icons} from "./icons/Icons"
 import type {DropdownChildAttrs} from "./DropdownN"
 import {attachDropdown} from "./DropdownN"
 import type {MaybeLazy} from "../../api/common/utils/Utils"
-import {mapLazily, noOp} from "../../api/common/utils/Utils"
+import {assertNotNull, mapLazily, noOp} from "../../api/common/utils/Utils"
 import {promiseMap} from "../../api/common/utils/PromiseUtils"
 import {Dialog} from "./Dialog"
-import type {ButtonAttrs} from "./ButtonN"
 
 // TODO Use DropDownSelectorN
 export function createCountryDropdown(selectedCountry: Stream<?Country>, helpLabel?: lazy<string>, label: TranslationKey | lazy<string> = "invoiceCountry_label"): DropDownSelector<?Country> {
@@ -84,4 +83,22 @@ export function getConfirmation(message: TranslationKey | lazy<string>, confirmM
 	}
 
 	return confirmation
+}
+
+/**
+ * Get either the coord of a mouseevent or the coord of the first touch of a touch event
+ * @param event
+ * @returns {{x: number, y: number}}
+ */
+export function getCoordsOfMouseOrTouchEvent(event: MouseEvent | TouchEvent): {x: number, y: number} {
+	return event instanceof MouseEvent
+		? {
+			x: event.clientX,
+			y: event.clientY
+		}
+		: {
+			// Why would touches be empty?
+			x: assertNotNull(event.touches.item(0)).clientX,
+			y: assertNotNull(event.touches.item(0)).clientY
+		}
 }

src/mail/view/MailGuiUtils.js

@@ -103,7 +103,7 @@ export function getMailFolderIcon(mail: Mail): AllIconsEnum {
 }
 
 export function replaceCidsWithInlineImages(dom: HTMLElement, inlineImages: InlineImages,
-                                            onContext: (TutanotaFile | DataFile, Event, HTMLElement) => mixed): Array<HTMLElement> {
+                                            onContext: (TutanotaFile | DataFile, (MouseEvent | TouchEvent), HTMLElement) => mixed): Array<HTMLElement> {
 	// all image tags which have cid attribute. The cid attribute has been set by the sanitizer for adding a default image.
 	const imageElements: Array<HTMLElement> = Array.from(dom.querySelectorAll("img[cid]"))
 	const elementsWithCid = []

src/mail/view/MailViewer.js

@@ -88,7 +88,7 @@ import type {ButtonAttrs, ButtonColorEnum} from "../../gui/base/ButtonN"
 import {ButtonColors, ButtonN, ButtonType} from "../../gui/base/ButtonN"
 import {styles} from "../../gui/styles"
 import {worker} from "../../api/main/WorkerClient"
-import {createAsyncDropdown, createDropdown} from "../../gui/base/DropdownN"
+import {createAsyncDropdown, createDropdown, showDropdownAtPosition} from "../../gui/base/DropdownN"
 import {navButtonRoutes} from "../../misc/RouteChange"
 import {createEmailSenderListElement} from "../../api/entities/sys/EmailSenderListElement"
 import {RecipientButton} from "../../gui/base/RecipientButton"
@@ -115,6 +115,7 @@ import {locator} from "../../api/main/MainLocator"
 import {makeMailBundle} from "../export/Bundler"
 import {createReportMailPostData} from "../../api/entities/tutanota/ReportMailPostData"
 import {exportMails} from "../export/Exporter"
+import {getCoordsOfMouseOrTouchEvent} from "../../gui/base/GuiUtils"
 
 assertMainOrNode()
 
@@ -811,19 +812,23 @@ export class MailViewer {
 	_replaceInlineImages() {
 		this._inlineImages.then((loadedInlineImages) => {
 			this._domBodyDeferred.promise.then(domBody => {
-				replaceCidsWithInlineImages(domBody, loadedInlineImages, (file, event, dom) =>
-					file._type !== "DataFile"
-						? createDropdown(() => [
+				replaceCidsWithInlineImages(domBody, loadedInlineImages, (file, event, dom) => {
+					if (file._type !== "DataFile") {
+						const coords = getCoordsOfMouseOrTouchEvent(event)
+						showDropdownAtPosition([
 							{
 								label: "download_action",
-								click: () => {
-									this._downloadAndOpenAttachment(downcast(file), true)
-								},
+								click: () => this._downloadAndOpenAttachment(file, false),
 								type: ButtonType.Dropdown
-							}
-						])(downcast(event), dom)
-						: noOp
-				)
+							},
+							{
+								label: "open_action",
+								click: () => this._downloadAndOpenAttachment(file, true),
+								type: ButtonType.Dropdown
+							},
+						], coords.x, coords.y)
+					}
+				})
 			})
 		})
 	}