Content controls mobile: Correct section width.

Remove unused event. Correct the class name of dropdown button. Signed-off-by: Gökay Şatır <[email protected]> Change-Id: Ic13b92b745fc9443b28003969cb8e53f1c42d56b
CollaboraOnline · Jan 21, 2025 · 2ee82e7 · 2ee82e7
1 parent 1cf4ca6
commit 2ee82e7
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/browser/src/canvas/sections/ContentControlDropdownSubSection.ts b/browser/src/canvas/sections/ContentControlDropdownSubSection.ts
@@ -60,8 +60,9 @@ class ContentControlDropdownSubSection extends HTMLObjectSection {
 			$('#datepicker').hide();
 		} else {
 			var datePicker = document.getElementById('datepicker');
-			datePicker.style.left = this.position[0] + this.size[0] + 'px';
-			datePicker.style.top = this.position[1] + this.size[1] + 'px';
+			datePicker.style.left = String(this.myTopLeft[0] / app.dpiScale) + 'px';
+			datePicker.style.top =
+				String((this.myTopLeft[1] + this.size[1]) / app.dpiScale) + 'px';
 			$('#datepicker').show();
 		}
 	}
@@ -116,8 +117,8 @@ class ContentControlDropdownSubSection extends HTMLObjectSection {
 		json.children[0].children[0].entries = entries;
 
 		//add position
-		json.posx = this.position[0] + this.size[0];
-		json.posy = this.position[1] + this.size[1];
+		json.posx = this.position[0] / app.dpiScale;
+		json.posy = (this.position[1] + this.size[1]) / app.dpiScale;
 
 		return json;
 	}
@@ -130,9 +131,26 @@ class ContentControlDropdownSubSection extends HTMLObjectSection {
 		app.map.dontHandleMouse = false;
 	}
 
+	public containsPoint(point: number[]) {
+		if (
+			this.position[0] <= point[0] &&
+			this.position[0] + this.size[0] >= point[0]
+		) {
+			if (
+				this.position[1] <= point[1] &&
+				this.position[1] + this.size[1] >= point[1]
+			)
+				return true;
+		}
+
+		return false;
+	}
+
 	onClick(point: number[], e: MouseEvent): void {
-		e.preventDefault();
-		e.stopPropagation();
+		if (e) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
 		this.stopPropagating();
 
 		if (this.sectionProperties.datePicker) {

diff --git a/browser/src/canvas/sections/ContentControlSection.ts b/browser/src/canvas/sections/ContentControlSection.ts
@@ -221,7 +221,7 @@ export class ContentControlSection extends CanvasSectionObject {
 			this.sectionProperties.dropdownMarkerHeight
 		);
 
-		this.sectionProperties.dropdownSection.size[0] = this.sectionProperties.dropdownMarkerWidth;
+		this.sectionProperties.dropdownSection.size[0] = this.sectionProperties.dropdownMarkerWidth * app.dpiScale;
 		this.sectionProperties.dropdownSection.size[1] = this.size[1];
 		this.sectionProperties.dropdownSection.sectionProperties.json = this.sectionProperties.json;
 		app.sectionContainer.addSection(this.sectionProperties.dropdownSection);

diff --git a/browser/src/map/handler/Map.TouchGesture.js b/browser/src/map/handler/Map.TouchGesture.js
@@ -319,14 +319,24 @@ L.Map.TouchGesture = L.Handler.extend({
 		// The validity and content control dropdown marker icon (exists in calc and writer) needs to be notified of tap events if it is the target.
 		var dropDownMarkers;
 		if (this._map._docLayer.isWriter()) {
-			dropDownMarkers = document.getElementsByClassName('leaflet-marker-icon writer-drop-down-marker');
+			dropDownMarkers = document.getElementsByClassName('html-object-section writer-drop-down-marker');
 		} else if (this._map._docLayer.isCalc()) {
 			dropDownMarkers = document.getElementsByClassName('leaflet-marker-icon spreadsheet-drop-down-marker');
 		}
-		if (dropDownMarkers && dropDownMarkers.length == 1 && dropDownMarkers[0] && e.target && e.target == dropDownMarkers[0]) {
-			this._map.fire('dropdownmarkertapped');
-			// don't send the mouse-event to core
-			return;
+		if (dropDownMarkers && dropDownMarkers.length == 1 && dropDownMarkers[0] && e.target) {
+			if (e.target == dropDownMarkers[0])
+				return; // don't send the mouse-event to core
+			else {
+				let section = app.sectionContainer.getSectionWithName(L.CSections.ContentControl.name);
+
+				if (section) {
+					section = section.sectionProperties.dropdownSection;
+					if (section && section.containsPoint(posInTwips.pToArray())) {
+						section.onClick();
+						return; // don't send the mouse-event to core
+					}
+				}
+			}
 		}
 
 		this._map.fire('closepopups');