Close dropdown without selecting an option with keyboard

close #7999
tutao · Dec 6, 2024 · 122b5dc · 122b5dc
1 parent 72191b5
commit 122b5dc
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/src/common/gui/base/Dropdown.ts b/src/common/gui/base/Dropdown.ts
@@ -18,6 +18,7 @@ import { IconButtonAttrs } from "./IconButton.js"
 import { AllIcons } from "./Icon.js"
 import { RowButton, RowButtonAttrs } from "./buttons/RowButton.js"
 import { AriaRole } from "../AriaUtils.js"
+import { BaseButton } from "./buttons/BaseButton"
 
 assertMainOrNode()
 export type DropdownInfoAttrs = {
@@ -208,6 +209,16 @@ export class Dropdown implements ModalComponent {
 				}),
 			)
 		}
+		const closeBtn = () => {
+			return m(BaseButton, {
+				label: lang.get("close_alt"),
+				text: lang.get("close_alt"),
+				class: "hidden-until-focus content-accent-fg button-content",
+				onclick: () => {
+					this.onClose()
+				},
+			})
+		}
 
 		this.view = (): Children => {
 			return m(
@@ -224,7 +235,7 @@ export class Dropdown implements ModalComponent {
 						}
 					},
 				},
-				[inputField(), contents()],
+				[inputField(), contents(), closeBtn()],
 			)
 		}
 	}

diff --git a/src/common/gui/main-styles.ts b/src/common/gui/main-styles.ts
@@ -2420,6 +2420,18 @@ styles.registerStyle("main", () => {
 			"font-size": px(size.font_size_base * 1.4),
 			"line-height": `${px(size.font_size_base * 1.4 + 2)} !important`,
 		},
+		".hidden-until-focus": {
+			position: "absolute",
+			left: "-9999px",
+			"z-index": "999",
+			opacity: "0",
+		},
+		".hidden-until-focus:focus": {
+			// position: "initial",
+			left: "50%",
+			transform: "translate(-50%)",
+			opacity: "1",
+		},
 		[`@media (max-width: ${size.desktop_layout_width - 1}px)`]: {
 			".main-view": {
 				top: 0,

diff --git a/src/mail-app/mail/view/LabelsPopup.ts b/src/mail-app/mail/view/LabelsPopup.ts
@@ -4,7 +4,7 @@ import { focusNext, focusPrevious, Shortcut } from "../../../common/misc/KeyMana
 import { BaseButton, BaseButtonAttrs } from "../../../common/gui/base/buttons/BaseButton.js"
 import { PosRect, showDropdown } from "../../../common/gui/base/Dropdown.js"
 import { MailFolder } from "../../../common/api/entities/tutanota/TypeRefs.js"
-import { size } from "../../../common/gui/size.js"
+import { px, size } from "../../../common/gui/size.js"
 import { AllIcons, Icon, IconSize } from "../../../common/gui/base/Icon.js"
 import { Icons } from "../../../common/gui/base/icons/Icons.js"
 import { theme } from "../../../common/gui/theme.js"
@@ -13,6 +13,7 @@ import { getElementId } from "../../../common/api/common/utils/EntityUtils.js"
 import { getLabelColor } from "../../../common/gui/base/Label.js"
 import { LabelState } from "../model/MailModel.js"
 import { AriaRole } from "../../../common/gui/AriaUtils.js"
+import { lang } from "../../../common/misc/LanguageViewModel.js"
 
 /**
  * Popup that displays assigned labels and allows changing them
@@ -33,7 +34,9 @@ export class LabelsPopup implements ModalComponent {
 
 	async hideAnimation(): Promise<void> {}
 
-	onClose(): void {}
+	onClose(): void {
+		modal.remove(this)
+	}
 
 	shortcuts(): Shortcut[] {
 		return this.shortCuts
@@ -59,7 +62,7 @@ export class LabelsPopup implements ModalComponent {
 					const { label, state } = labelState
 					const color = theme.content_button
 					return m(
-						".flex.items-center.plr.state-bg.cursor-pointer",
+						"label-item.flex.items-center.plr.state-bg.cursor-pointer",
 
 						{
 							"data-labelid": getElementId(label),
@@ -89,6 +92,14 @@ export class LabelsPopup implements ModalComponent {
 					this.applyLabels()
 				},
 			} satisfies BaseButtonAttrs),
+			m(BaseButton, {
+				label: lang.get("close_alt"),
+				text: lang.get("close_alt"),
+				class: "hidden-until-focus content-accent-fg button-content",
+				onclick: () => {
+					modal.remove(this)
+				},
+			}),
 		])
 	}