create overlay for bubble text field suggestions, #2949

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

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/src/calendar/view/CalendarEventEditDialog.js b/src/calendar/view/CalendarEventEditDialog.js
@@ -366,6 +366,7 @@ export function showCalendarEventDialog(date: Date, calendars: Map<Id, CalendarI
 					renderChangesMessage(),
 					m(".mb", m(ExpanderPanelN, {
 							expanded: attendeesExpanded,
+							overflowVisible: true // TODO get rid of this?
 						},
 						[
 							m(".flex-grow", renderInvitationField()),
@@ -534,7 +535,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
@@ -71,8 +71,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 +105,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 +121,9 @@ export class BubbleTextField<T> {
 						})
 					}
 				}),
-				m(".suggestions.text-ellipsis.ml-negative-l", {
+				m(`.suggestions-overlay.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
@@ -20,6 +20,7 @@ export type ExpanderAttrs = {
 
 export type ExpanderPanelAttrs = {
 	expanded: Stream<boolean>,
+	overflowVisible?: boolean,
 }
 
 export class ExpanderButtonN implements MComponent<ExpanderAttrs> {
@@ -110,7 +111,8 @@ export class ExpanderPanelN implements MComponent<ExpanderPanelAttrs> {
 			: 0
 		// The expander panel children are wrapped in an extra div so that we can calculate the height properly,
 		// since offsetHeight doesn't include borders or margins
-		return m(".expander-panel.overflow-hidden",
+		// by default we hide overflow
+		return m(`.expander-panel${vnode.attrs.overflowVisible ? "" : ".overflow-hidden"}`,
 			m("div", {
 				style: {
 					opacity: expanded() ? "1" : "0",

diff --git a/src/gui/main-styles.js b/src/gui/main-styles.js
@@ -574,6 +574,15 @@ styles.registerStyle('main', () => {
 			'margin-top': requiresStatusBarHack() ? "20px" : 'env(safe-area-inset-top)' // insets for iPhone X)
 		},
 
+		'.bubble-text-field': {'position': 'relative'},
+		'.suggestions-overlay': {
+			'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),