Merge pull request #604 from mind84/bootstrap_5_tooltip

update html tooltip to handle bootstrap 5 tabs

lizmap/plugin.py

@@ -3013,7 +3013,10 @@ def maptip_from_form(self):
 
  root = config.invisibleRootContainer()
  relation_manager = self.project.relationManager()
- html_content = Tooltip.create_popup_node_item_from_form(layer, root, 0, [], '', relation_manager)
+ html_content = Tooltip.create_popup_node_item_from_form(
+ layer, root, 0, [], '', relation_manager,
+ bootstrap_5=self.current_lwc_version() >= LwcVersions.Lizmap_3_9,
+ )
  html_content = Tooltip.create_popup(html_content)
  html_content += Tooltip.css()
  self._set_maptip(layer, html_content)

lizmap/test/test_tooltip.py

@@ -503,7 +503,7 @@ def test_tooltip_layer(self):
  root = config.invisibleRootContainer()
  # noinspection PyArgumentList
  html_content = Tooltip.create_popup_node_item_from_form(
- layer, root, 0, [], '', QgsProject.instance().relationManager())
+ layer, root, 0, [], '', QgsProject.instance().relationManager(), bootstrap_5=False)
 
  self.maxDiff = None
  expected = '''<ul class="nav nav-tabs">
@@ -554,3 +554,9 @@ def test_tooltip_layer(self):
 </div>'''
 
  self.assertEqual(expected, html_content, html_content)
+ self.assertFalse('data-bs-toggle="tab"' in html_content)
+
+ # Same but with Bootstrap 5
+ html_content = Tooltip.create_popup_node_item_from_form(
+ layer, root, 0, [], '', QgsProject.instance().relationManager(), bootstrap_5=True)
+ self.assertTrue('data-bs-toggle="tab"' in html_content)

lizmap/tooltip.py

@@ -60,6 +60,7 @@ def create_popup_node_item_from_form(
  headers: list,
  html: str,
  relation_manager: QgsRelationManager,
+ bootstrap_5: bool = False,
  ) -> str:
  regex = re.compile(r"[^a-zA-Z0-9_]", re.IGNORECASE)
  a = ''
@@ -173,9 +174,22 @@ def create_popup_node_item_from_form(
  if visibility and not active:
  active = visibility
  h += '\n' + SPACES
- h += (
- '<li class="{}"><a href="#popup_dd_[% $id %]_{}" data-toggle="tab">{}</a></li>'
- ).format(active, regex.sub('_', node.name()), node.name())
+ id_tab = regex.sub('_', node.name())
+ if bootstrap_5:
+ h += (
+ f'<li class="nav-item">'
+ f'<button class="nav-link {active}" data-bs-toggle="tab" '
+ f'data-bs-target="#popup_dd_[% $id %]_{id_tab}">'
+ f'{node.name()}'
+ f'</button>'
+ f'</li>'
+ )
+ else:
+ h += (
+ f'<li class="{active}">'
+ f'<a href="#popup_dd_[% $id %]_{id_tab}" data-toggle="tab">{node.name()}</a>'
+ f'</li>'
+ )
  headers.append(h)
 
  if lvl > 1:
@@ -190,7 +204,8 @@ def create_popup_node_item_from_form(
 
  level += 1
  for n in node.children():
- h = Tooltip.create_popup_node_item_from_form(layer, n, level, headers, html, relation_manager)
+ h = Tooltip.create_popup_node_item_from_form(
+ layer, n, level, headers, html, relation_manager, bootstrap_5)
  # If it is not root children, add html
  if lvl > 0:
  a += h