BS5: migrate remaining dropdowns

Author: nboisteault

assets/src/components/FeatureToolbar.js

@@ -57,13 +57,12 @@ export default class FeatureToolbar extends HTMLElement {
 
             ${this.isFeatureExportable
                 ? html`<div class="btn-group feature-export">
-                        <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-toggle="tooltip" data-bs-title="${lizDict['attributeLayers.toolbar.btn.data.export.title']}">
+                        <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="${lizDict['attributeLayers.toolbar.btn.data.export.title']}">
                             <i class="icon-download"></i>
-                            <span class="caret"></span>
                         </button>
-                        <ul class="dropdown-menu pull-right" role="menu">
+                        <ul class="dropdown-menu">
                             ${this._downloadFormats.map((format) =>
-                                html`<li><a href="#" @click=${() => this.export(format)}>${format}</a></li>`)}
+                                html`<li><a class="dropdown-item" href="#" @click=${() => this.export(format)}>${format}</a></li>`)}
                         </ul>
                     </div>`
                 : ''
@@ -104,13 +103,12 @@ export default class FeatureToolbar extends HTMLElement {
             ${this.editableChildrenLayers.length
                 ? html`
                 <div class="btn-group feature-create-child" style="margin-left: 0px;">
-                    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-title="${lizDict['attributeLayers.toolbar.btn.data.createFeature.title']}">
+                    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="${lizDict['attributeLayers.toolbar.btn.data.createFeature.title']}">
                         <i class="icon-plus-sign"></i>
-                        <span class="caret"></span>
                     </button>
-                    <ul class="dropdown-menu" role="menu">
+                    <ul class="dropdown-menu">
                         ${this.editableChildrenLayers.map((child) =>
-                            html`<li><a data-child-layer-id="${child.layerId}" @click=${() => this.createChild(child)}>${child.title}</a></li>`)}
+                            html`<li><a class="dropdown-item" href="#" data-child-layer-id="${child.layerId}" @click=${() => this.createChild(child)}>${child.title}</a></li>`)}
                     </ul>
                 </div>
                 `

assets/src/components/SelectionTool.js

@@ -86,7 +86,6 @@ export default class SelectionTool extends HTMLElement {
                         <div class="btn-group dropup selectiontool-export" role="group" title="${mainLizmap.selectionTool.isExportable ? '' : lizDict['switcher.layer.export.warn']}">
                             <button type="button" class="btn btn-sm dropdown-toggle" ?disabled=${ !mainLizmap.selectionTool.isExportable } data-bs-toggle="dropdown" aria-expanded="false">
                                 ${lizDict['switcher.layer.export.title']}
-                            <span class="caret"></span>
                             </button>
                             <ul class="selectiontool-export-formats dropdown-menu dropdown-menu-right" role="menu">
                                 <li><a href="#" class="btn-export-selection dropdown-item">GeoJSON</a></li>

assets/src/legacy/attributeTable.js

@@ -1144,7 +1144,7 @@ var lizAttributeTable = function() {
                                 childCreateButtonItems.push(childButtonItem);
 
                                 // Link parent with the selected features of the child
-                                layerLinkButtonItems.push('<li><a href="#' + lizMap.cleanName(isNToM ? pivotConfig[0] : childLayerName) + '" class="btn-linkFeatures-attributeTable">' + (isNToM ? pivotConfig[1].title : childLayerConfig.title) +'</a></li>' );
+                                layerLinkButtonItems.push('<li><a href="#' + lizMap.cleanName(isNToM ? pivotConfig[0] : childLayerName) + '" class="btn-linkFeatures-attributeTable dropdown-item">' + (isNToM ? pivotConfig[1].title : childLayerConfig.title) +'</a></li>' );
                             }
                         }
                     }
@@ -1163,9 +1163,8 @@ var lizAttributeTable = function() {
                         layerLinkButton+= '&nbsp;<div class="btn-group" role="group" >';
                         layerLinkButton+= '    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">';
                         layerLinkButton+= lizDict['attributeLayers.toolbar.btn.data.linkFeatures.title'];
-                        layerLinkButton+= '      <span class="caret"></span>';
                         layerLinkButton+= '    </button>';
-                        layerLinkButton+= '    <ul class="dropdown-menu" role="menu">';
+                        layerLinkButton+= '    <ul class="dropdown-menu">';
                         for( var i in  layerLinkButtonItems){
                             var li = layerLinkButtonItems[i];
                             layerLinkButton+= li;