show suggestions for bubble text field in overlay dropdown, #2949

tutao · Apr 27, 2021 · 494f46d · 494f46d
1 parent a745c12
commit 494f46d
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 35 deletions.
diff --git a/src/calendar/view/CalendarEventEditDialog.js b/src/calendar/view/CalendarEventEditDialog.js
@@ -364,7 +364,7 @@ export function showCalendarEventDialog(date: Date, calendars: Map<Id, CalendarI
 			return m(".calendar-edit-container.pb", [
 					renderHeading(),
 					renderChangesMessage(),
-					m(".mb", m(ExpanderPanelN, {
+					m(".mb.rel", m(ExpanderPanelN, {
 							expanded: attendeesExpanded,
 						},
 						[
@@ -534,7 +534,7 @@ function makeBubbleTextField(viewModel: CalendarEventViewModel, contactModel: Co
 		},
 	}, contactModel)
 
-	const invitePeopleValueTextField = new BubbleTextField("addGuest_label", bubbleHandler, {marginLeft: 0})
+	const invitePeopleValueTextField = new BubbleTextField("addGuest_label", bubbleHandler)
 	invitePeopleValueTextField.textField._injectionsRight = () => renderConfidentialButton(viewModel)
 	return invitePeopleValueTextField
 }

diff --git a/src/gui/base/BubbleTextField.js b/src/gui/base/BubbleTextField.js
@@ -57,6 +57,11 @@ export interface Suggestion {
 	selected: boolean;
 }
 
+/**
+ * Some parent element of the BubbleTextField needs to have position relative for the suggestions to be correctly positioned.
+ * We do not add position relative here because it allows us to show the suggestions dropdown even if a parent has overflow hidden
+ * by making the element with position relative a parent of that element!
+ */
 export class BubbleTextField<T> {
 	loading: ?Promise<void>;
 	textField: TextField;
@@ -71,8 +76,7 @@ export class BubbleTextField<T> {
 
 	_domSuggestions: HTMLElement;
 
-	constructor(labelIdOrLabelTextFunction: TranslationKey | lazy<string>, bubbleHandler: BubbleHandler<T, any>,
-	            suggestionStyle: {[string]: any} = {}) {
+	constructor(labelIdOrLabelTextFunction: TranslationKey | lazy<string>, bubbleHandler: BubbleHandler<T, any>) {
 		this.loading = null
 		this.suggestions = []
 		this.selectedSuggestion = null
@@ -106,7 +110,6 @@ export class BubbleTextField<T> {
 		this.textField._keyHandler = key => this.handleKey(key)
 
 		this.bubbleHandler = bubbleHandler
-
 		this.view = () => {
 			return m('.bubble-text-field', [
 				m(this.textField, {
@@ -123,10 +126,9 @@ export class BubbleTextField<T> {
 						})
 					}
 				}),
-				m(".suggestions.text-ellipsis.ml-negative-l", {
+				m(`.suggestions.text-ellipsis${this.suggestions.length ? ".dropdown-shadow" : ""}`, {
 					oncreate: vnode => this._domSuggestions = vnode.dom,
 					onmousedown: e => this.textField.skipNextBlur = true,
-					style: suggestionStyle,
 				}, this.suggestions.map(s => m(s, {
 					mouseDownHandler: e => {
 						this.selectedSuggestion = s

diff --git a/src/gui/base/Expander.js b/src/gui/base/Expander.js
@@ -29,31 +29,31 @@ export class ExpanderButtonN implements MComponent<ExpanderAttrs> {
 		const a = vnode.attrs
 		return m(".flex.limit-width", [ // .limit-width does not work without .flex in IE11
 			m("button.expander.bg-transparent.pt-s.hover-ul.limit-width", {
-					style: a.style,
-					onclick: (event: MouseEvent) => {
-						a.expanded(!a.expanded())
-						event.stopPropagation()
+				style: a.style,
+				onclick: (event: MouseEvent) => {
+					a.expanded(!a.expanded())
+					event.stopPropagation()
+				},
+				oncreate: vnode => addFlash(vnode.dom),
+				onremove: (vnode) => removeFlash(vnode.dom),
+				"aria-expanded": String(!!a.expanded()),
+			}, m(".flex.items-center", [ // TODO remove wrapper after Firefox 52 has been deployed widely https://bugzilla.mozilla.org/show_bug.cgi?id=984869
+				(a.showWarning) ? m(Icon, {
+					icon: Icons.Warning,
+					style: {
+						fill: a.color ? a.color : theme.content_button,
+					}
+				}) : null,
+				m("small.b.text-ellipsis", {style: {color: a.color || theme.content_button}}, lang.getMaybeLazy(a.label).toUpperCase()),
+				m(Icon, {
+					icon: BootIcons.Expand,
+					class: "flex-center items-center",
+					style: {
+						fill: a.color ? a.color : theme.content_button,
+						'margin-right': px(-4), // icon is has 4px whitespace to the right,
+						transform: `rotateZ(${a.expanded() ? 180 : 0}deg)`,
+						transition: `transform ${DefaultAnimationTime}ms`
 					},
-					oncreate: vnode => addFlash(vnode.dom),
-					onremove: (vnode) => removeFlash(vnode.dom),
-					"aria-expanded": String(!!a.expanded()),
-				}, m(".flex.items-center", [ // TODO remove wrapper after Firefox 52 has been deployed widely https://bugzilla.mozilla.org/show_bug.cgi?id=984869
-					(a.showWarning) ? m(Icon, {
-						icon: Icons.Warning,
-						style: {
-							fill: a.color ? a.color : theme.content_button,
-						}
-					}) : null,
-					m("small.b.text-ellipsis", {style: {color: a.color || theme.content_button}}, lang.getMaybeLazy(a.label).toUpperCase()),
-					m(Icon, {
-						icon: BootIcons.Expand,
-						class: "flex-center items-center",
-						style: {
-							fill: a.color ? a.color : theme.content_button,
-							'margin-right': px(-4), // icon is has 4px whitespace to the right,
-							transform: `rotateZ(${a.expanded() ? 180 : 0}deg)`,
-							transition: `transform ${DefaultAnimationTime}ms`
-						},
 				}),
 			])),
 		])

diff --git a/src/gui/main-styles.js b/src/gui/main-styles.js
@@ -574,6 +574,14 @@ styles.registerStyle('main', () => {
 			'margin-top': requiresStatusBarHack() ? "20px" : 'env(safe-area-inset-top)' // insets for iPhone X)
 		},
 
+		'.suggestions': {
+			'z-index': '999',
+			'position': "absolute",
+			'width': '100%',
+			'box-shadow': boxShadow,
+			'background-color': theme.elevated_bg
+		},
+
 		'bottom-nav': {
 			'box-shadow': `0 -2px 4px 0 ${theme.header_box_shadow_bg}`,
 			height: positionValue(size.bottom_nav_bar),

diff --git a/src/mail/editor/MailEditor.js b/src/mail/editor/MailEditor.js
@@ -398,8 +398,8 @@ export class MailEditor implements MComponent<MailEditorAttrs> {
 			onload: (ev) => {
 			}
 		}, [
-			m(this.recipientFields.to.component),
-			m(ExpanderPanelN, {expanded: a.areDetailsExpanded},
+			m(".rel", m(this.recipientFields.to.component)),
+			m(".rel", m(ExpanderPanelN, {expanded: a.areDetailsExpanded},
 				m(".details", [
 					m(this.recipientFields.cc.component),
 					m(this.recipientFields.bcc.component),
@@ -415,7 +415,7 @@ export class MailEditor implements MComponent<MailEditorAttrs> {
 
 					]),
 				])
-			),
+			)),
 			isConfidential
 				? m(".external-recipients.overflow-hidden", {
 					oncreate: vnode => animate(vnode.dom, true),

diff --git a/src/sharing/view/GroupSharingDialog.js b/src/sharing/view/GroupSharingDialog.js
@@ -192,7 +192,7 @@ function showAddParticipantDialog(model: GroupSharingModel, texts: GroupSharingT
 		title: () => lang.get("addParticipant_action"),
 		child: () => [
 			m(".pt", texts.addMemberMessage(customGroupName || realGroupName)),
-			m(invitePeopleValueTextField),
+			m(".rel", m(invitePeopleValueTextField)),
 			m(DropDownSelectorN, {
 				label: "permissions_label",
 				items: [