Bootstrap and fontawesome fixes

contribs/gmf/src/controllers/desktop.scss

@@ -721,8 +721,7 @@ ngeo-rule {
     font-size: $font-size-small;
   }
 
-  .dropdown > a.btn {
-    display: block;
+  .dropdown > .dropdown-toggle {
     text-align: left;
   }
 

contribs/gmf/src/filters/filterselectorcomponent.html

@@ -15,14 +15,14 @@
     <hr class="gmf-filterselector-separator" />
 
     <div class="dropdown gmf-filterselector-savedfilters">
-      <a
+      <button
           class="btn btn-link dropdown-toggle ngeo-filter-condition-button"
           ng-class="{disabled: $ctrl.aRuleIsActive || $ctrl.gmfSavedFilters.currentDataSourceItems.length === 0}"
           type="button"
           data-toggle="dropdown"
           ng-disabled="$ctrl.aRuleIsActive || $ctrl.gmfSavedFilters.currentDataSourceItems.length === 0">
         <span translate>Saved</span>
-      </a>
+      </button>
       <ul class="dropdown-menu">
         <li ng-repeat="item in $ctrl.gmfSavedFilters.currentDataSourceItems">
           <a
@@ -53,15 +53,14 @@
     </ngeo-filter>
 
     <div>
-      <a
-          class="btn btn-link gmf-filterselector-savebtn dropdown-toggle"
+      <button
+          class="btn btn-link gmf-filterselector-savebtn"
           type="button"
-          data-toggle="dropdown"
           ng-click="!$ctrl.aRuleIsActive && $ctrl.saveFilterShowModal()"
           ng-disabled="$ctrl.aRuleIsActive">
         <span class="fa fa-save"></span>
         <span translate>Save</span>
-      </a>
+      </button>
     </div>
   </div>
 

contribs/gmf/src/layertree/TreeManager.js

@@ -528,7 +528,7 @@ exports.prototype.getFirstLevelGroupFullState_ = function(treeCtrl) {
     const nodeElement = $(`#gmf-layertree-layer-group-${treeCtrl.uid}`);
     // Set isExpanded only in groups.
     if (nodeElement) {
-      isExpanded = nodeElement.hasClass('in');
+      isExpanded = nodeElement.hasClass('show');
     }
   } else {
     // Set state and isLegendExpanded only in leaves.

contribs/gmf/src/layertree/component.html

@@ -236,7 +236,7 @@
 <div
   ng-if="::!layertreeCtrl.isRoot && gmfLayertreeCtrl.getLegendsObject(layertreeCtrl) && layertreeCtrl.node.metadata.legend" id="gmf-layertree-node-{{::layertreeCtrl.uid}}-legend"
   class="collapse gmf-layertree-legend"
-  ng-class="::[layertreeCtrl.node.metadata.isLegendExpanded ? 'in' : '']">
+  ng-class="::[layertreeCtrl.node.metadata.isLegendExpanded ? 'show' : '']">
 
   <a
     title="{{'Hide legend'|translate}}"
@@ -279,7 +279,7 @@
 <ul
   id="gmf-layertree-layer-group-{{::layertreeCtrl.uid}}"
   ng-if="::layertreeCtrl.node.children"
-  ng-class="{collapse: !layertreeCtrl.isRoot, in : layertreeCtrl.node.metadata.isExpanded}"
+  ng-class="{collapse: !layertreeCtrl.isRoot, show: layertreeCtrl.node.metadata.isExpanded}"
   ngeo-sortable="::layertreeCtrl.isRoot && layertreeCtrl.node.children"
   ngeo-sortable-options="{handleClassName: 'ngeo-sortable-handle', draggerClassName: 'gmf-layertree-dragger', placeholderClassName : 'gmf-layertree-curr-drag-item'}"
   ngeo-sortable-callback="::gmfLayertreeCtrl.afterReorder"

src/filter/component.html

@@ -1,12 +1,12 @@
 <div class="dropdown">
-  <a
+  <button
       class="btn btn-link dropdown-toggle ngeo-filter-condition-button"
       ng-class="{disabled: $ctrl.aRuleIsActive}"
       type="button"
       data-toggle="dropdown"
       ng-disabled="$ctrl.aRuleIsActive">
     <span class="fa fa-cog"></span>
-  </a>
+  </button>
   <ul class="dropdown-menu">
     <li
         class="ngeo-filter-condition-criteria-header"
@@ -42,7 +42,7 @@
       ng-click="!$ctrl.aRuleIsActive && $ctrl.removeCustomRule(rule)"
       ng-disabled="$ctrl.aRuleIsActive"
       href>
-    <span class="fa fa-remove"></span>
+    <span class="fa fa-times"></span>
   </a>
   <ngeo-rule
       feature-overlay="::$ctrl.featureOverlay"
@@ -54,14 +54,14 @@
 </div>
 
 <div class="dropdown">
-  <a
+  <button
       class="btn btn-link dropdown-toggle"
       ng-class="{disabled: $ctrl.aRuleIsActive}"
       type="button"
       data-toggle="dropdown"
       ng-disabled="$ctrl.aRuleIsActive">
     <span translate>+ Add a new criteria</span>
-  </a>
+  </button>
   <ul class="dropdown-menu">
     <li ng-repeat="attribute in ::$ctrl.geometryAttributes">
       <a
@@ -83,20 +83,20 @@
 
 <hr class="ngeo-filter-separator-criteria" />
 
-<a
+<button
     class="btn btn-link"
     type="button"
     ng-click="$ctrl.apply()"
     ng-disabled="$ctrl.hasARule() === false || $ctrl.datasource.visible === false">
   <span class="fa fa-check"></span>
   <span translate>Apply filter</span>
-</a>
+</button>
 
-<a
+<button
     class="btn btn-link"
     type="button"
     ng-click="$ctrl.getData()"
     ng-disabled="$ctrl.hasARule() === false || $ctrl.datasource.visible === false">
   <span class="fa fa-chevron-right"></span>
   <span translate>Get data</span>
-</a>
+</button>

src/filter/rulecomponent.html

@@ -1,13 +1,13 @@
 <div
     class="dropdown"
     ng-class="{open: $ctrl.rule.active}">
-  <a
-      class="btn btn-default btn-sm dropdown-toggle"
+  <button
+      class="btn btn-default btn-sm btn-block dropdown-toggle"
       type="button"
+      data-toggle="dropdown"
       ng-click="$ctrl.toggle()">
     <span>{{ ::$ctrl.clone.name | translate }}</span>
-    <span class="caret"></span>
-  </a>
+  </button>
   <div class="dropdown-menu form-group">
 
     <select
@@ -228,7 +228,7 @@
       ng-click="!$ctrl.rule.active && $ctrl.reset()"
       ng-disabled="$ctrl.rule.active"
       href>
-    <span class="fa fa-remove"></span>
+    <span class="fa fa-times"></span>
   </a>
 
   <div ng-switch="::$ctrl.rule.type">

src/message/Disclaimer.js

@@ -168,7 +168,7 @@ exports.prototype.showMessage = function(message) {
     }
 
     container.append(el);
-    el.addClass('in');
+    el.addClass('show');
 
     // Listen when the message gets closed to cleanup the cache of messages
     el.on('closed.bs.alert', () => {
@@ -213,7 +213,7 @@ exports.prototype.closeMessage_ = function(message) {
   } else {
     // (2.2) Check if the message hasn't been closed using the UI, i.e. by
     //       clicking the close button. If not, then close it.
-    if (obj.hasClass('in')) {
+    if (obj.hasClass('show')) {
       obj.alert('close');
     }
   }

src/message/Notification.js

@@ -120,7 +120,7 @@ exports.prototype.showMessage = function(message) {
   }
 
   container.append(el);
-  el.html(message.msg).addClass('in');
+  el.html(message.msg).addClass('show');
 
   const delay = message.delay !== undefined ? message.delay :
     exports.DEFAULT_DELAY_;