Skip to content

Conversation

@frwg
Copy link
Contributor

@frwg frwg commented Jan 23, 2026

DataManager & Digitizer: Dialog Improvements and Mobile Optimization

This PR implements comprehensive improvements to the DataManager and Digitizer dialogs, focusing on usability, mobile responsiveness, and enhanced configuration options.

Dialog System Modernization

  • Migrate to Mapbender.Popup: Complete migration from jQuery UI dialogs to Mapbender.Popup for better integration
  • Code modernization: Convert ES5 pseudo-classes to ES6 classes (DialogFactory, FormRenderer, FormUtil, TableRenderer, FeatureEditor, FeatureRenderer, FeatureStyleEditor, StyleAdapter, ContextMenu, Toolset)
  • File structure: Rename files to start with uppercase letters for consistency

Dialog Configuration Enhancements

  • Dynamic popup titles: Support data expressions in popup titles (e.g., data.title + " - " + data.ort)
  • Template literal syntax: Add support for ${data.property} syntax in expressions
  • Remove close button: Hide redundant close/cancel button in edit dialogs (X button in title bar remains)

Form Item Improvements

  • Label type enhancements: Add title attribute support for type: label
  • Dynamic expressions: Enable expression evaluation for title, label and text types (similar to existing html type)
    • Supports JavaScript expressions: "'Titel lautet: ' + data.title"
    • Supports template literals: "${data.title}"
    • Supports complex expressions with functions: "(function(){ return data.gemarkung ? 'Gemarkung: ' + data.gemarkung : 'Gemarkung:'; })()"
  • Image preview layout: Display image preview below the title instead of next to it for better mobile experience

Display-Only Mode Detection

  • Automatic Save button hiding: Hide Save button when form contains only display fields (no editable inputs)
  • Visual feedback: Show magnifying glass icon instead of pencil in table rows for display-only forms
  • Smart detection: Automatically detect editable vs. display-only fields

Mobile Optimization

  • Responsive dialogs: On mobile devices (max-width: 767px):
    • Dialogs take full viewport width
    • Limited to upper portion of screen (max 60vh)
    • Content area scrollable for long forms
  • Improved usability: Better touch-friendly interface on mobile devices

frwg added 11 commits January 20, 2026 13:16
…ove Structure

- Introduced FeatureStyleEditor class to manage feature styling in a more structured way.
- Refactored StyleAdapter to use ES6 class syntax, enhancing readability and maintainability.
- Updated TableRenderer to extend from DataManager.TableRenderer, simplifying event handling.
- Created Toolset class for managing drawing tools, improving organization of tool-related logic.
- Removed legacy featureStyleEditor.js file in favor of the new FeatureStyleEditor class.
- Introduce ExpressionEvaluator class for dynamic expression handling
- Implement dynamic title expressions in DataManager
- Update FormRenderer to recognize dynamic expressions
…and 'text' and implement title attribute handling
…fy FormRenderer to apply 'd-block' class for responsive images
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants