Bootstrap and fontawesome fixes

contribs/gmf/apps/desktop/index.html.ejs

@@ -20,7 +20,7 @@
       <div class="gmf-app-data-panel" ng-cloak>
         <div class="gmf-app-header">
           <div class="dropdown">
-            <a href class="btn btn-block prime"
+            <a href class="btn btn-block prime dropdown-toggle"
               data-toggle="dropdown">
               <span class="fa fa-grid"></span>
               <span ng-if="mainCtrl.gmfThemeManager.modeFlush">
@@ -31,7 +31,6 @@
               <span ng-if="!mainCtrl.gmfThemeManager.modeFlush">
                 <b ng-if="!mainCtrl.gmfThemeManager.themeName" translate>Themes</b>
               </span>
-              <span class="caret"></span>
             </a>
             <gmf-themeselector class="dropdown-menu"
               gmf-themeselector-currenttheme="mainCtrl.theme"
@@ -68,11 +67,11 @@
             <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.editFeatureActive"
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Editing'|translate}}"
               ng-show="mainCtrl.hasEditableLayers" ng-cloak>
-              <span class="fa fa-pencil"></span>
+              <span class="fa fa-edit"></span>
             </button>
             <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.drawProfilePanelActive"
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Profile'|translate}}">
-              <span class="fa fa-area-chart"></span>
+              <span class="fa fa-chart-area"></span>
             </button>
             <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.googleStreetViewActive"
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Street View'|translate}}">

contribs/gmf/apps/desktop_alt/index.html.ejs

@@ -20,14 +20,13 @@
       <div class="gmf-app-data-panel">
         <div class="gmf-app-header">
           <div class="dropdown" ng-cloak>
-            <a href class="btn btn-block prime" data-toggle="dropdown">
+            <a href class="btn btn-block prime dropdown-toggle" data-toggle="dropdown">
               <span ng-if="mainCtrl.gmfThemeManager.isLoading()">
                 <span translate>Loading...</span>
               </span>
               <span ng-if="!mainCtrl.gmfThemeManager.isLoading()">
                 <span class="fa fa-grid"></span>
                 <span translate>Themes</span>
-                <span class="caret"></span>
               </span>
             </a>
             <gmf-themeselector class="dropdown-menu"
@@ -66,11 +65,11 @@
             <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.editFeatureActive"
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Editing'|translate}}"
               ng-show="mainCtrl.hasEditableLayers" ng-cloak>
-              <span class="fa fa-pencil"></span>
+              <span class="fa fa-edit"></span>
             </button>
             <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.drawProfilePanelActive"
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Profile'|translate}}">
-              <span class="fa fa-area-chart"></span>
+              <span class="fa fa-chart-area"></span>
             </button>
             <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.googleStreetViewActive"
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Street View'|translate}}">

contribs/gmf/apps/oeedit/index.html.ejs

@@ -19,7 +19,7 @@
       <div class="gmf-app-data-panel" ng-cloak>
         <div class="gmf-app-header">
           <div class="dropdown">
-            <a href class="btn btn-block prime"
+            <a href class="btn btn-block prime dropdown-toggle"
               data-toggle="dropdown">
               <span class="fa fa-grid"></span>
               <span ng-if="mainCtrl.gmfThemeManager.modeFlush">
@@ -30,7 +30,6 @@
               <span ng-if="!mainCtrl.gmfThemeManager.modeFlush">
                 <b ng-if="!mainCtrl.gmfThemeManager.themeName" translate>Themes</b>
               </span>
-              <span class="caret"></span>
             </a>
             <gmf-themeselector class="dropdown-menu"
               gmf-themeselector-currenttheme="mainCtrl.theme"
@@ -56,7 +55,7 @@
             </button>
             <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.oeEditActive"
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Object Editing'|translate}}">
-              <span class="fa fa-pencil"></span>
+              <span class="fa fa-edit"></span>
             </button>
           </div>
         </div>

contribs/gmf/apps/oeview/index.html.ejs

@@ -19,7 +19,7 @@
       <div class="gmf-app-data-panel" ng-cloak>
         <div class="gmf-app-header">
           <div class="dropdown">
-            <a href class="btn btn-block prime"
+            <a href class="btn btn-block prime dropdown-toggle"
               data-toggle="dropdown">
               <span class="fa fa-grid"></span>
               <span ng-if="mainCtrl.gmfThemeManager.modeFlush">
@@ -30,7 +30,6 @@
               <span ng-if="!mainCtrl.gmfThemeManager.modeFlush">
                 <b ng-if="!mainCtrl.gmfThemeManager.themeName" translate>Themes</b>
               </span>
-              <span class="caret"></span>
             </a>
             <gmf-themeselector class="dropdown-menu"
               gmf-themeselector-currenttheme="mainCtrl.theme"

contribs/gmf/examples/drawfeature.css

@@ -96,7 +96,7 @@ ngeo-drawfeature {
 
 /* featurestyle */
 
-gmf-featurestyle .form-horizontal .control-label {
+gmf-featurestyle .form-horizontal .col-form-label {
   text-align: left;
 }
 .gmf-featurestyle-name {

contribs/gmf/examples/elevation.html

@@ -19,9 +19,8 @@
     </span>
 
     <div class="btn-group dropdown">
-      <button type="button" class="btn btn-default" data-toggle="dropdown" aria-expanded="false">
+      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         Raster layer
-        <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu">
         <li ng-repeat="elevationItem in ::ctrl.elevationLayers">

contribs/gmf/examples/featurestyle.css

@@ -7,7 +7,7 @@ gmf-featurestyle {
   margin: 20px;
   width: 260px;
 }
-gmf-featurestyle .form-horizontal .control-label {
+gmf-featurestyle .col-form-label {
   text-align: left;
 }
 .gmf-featurestyle-name {

contribs/gmf/examples/filterselector.css

@@ -134,12 +134,6 @@ ngeo-rule .dropdown > a.btn {
   text-align: left;
 }
 
-ngeo-rule .dropdown > a.btn > span.caret {
-  position: absolute;
-  right: 1rem;
-  top: 1.4rem;
-}
-
 ngeo-rule .dropdown-menu {
   padding: 1rem;
 }

contribs/gmf/examples/print.html

@@ -53,15 +53,14 @@
               class="gmf-print-layoutinfo">
 
               <div ng-if="attribute.name == 'title'" class="form-group" style="margin-top: 1rem;">
-                <label class="control-label col-md-5">{{ "Title" | translate }}</label>
+                <label class="col-form-label col-md-5">{{ "Title" | translate }}</label>
                 <div class="col-md-7">
                   <div class="btn-group btn-block">
                     <button
                       type="button"
-                      class="btn btn-default form-control"
+                      class="btn btn-default form-control dropdown-toggle"
                       data-toggle="dropdown">
                       <span>{{attribute.value | translate}}&nbsp;</span>
-                      <i class="fa fa-caret-down"></i>
                     </button>
                     <ul class="dropdown-menu dropdown-menu-right btn-block" role="menu">
                       <li><a
@@ -78,15 +77,14 @@
               </div>
 
               <div ng-if="attribute.name == 'comments'" class="form-group">
-                <label class="control-label col-md-5">{{ "Comment" | translate }}</label>
+                <label class="col-form-label col-md-5">{{ "Comment" | translate }}</label>
                 <div class="col-md-7">
                   <div class="btn-group btn-block">
                     <button
                       type="button"
-                      class="btn btn-default form-control"
+                      class="btn btn-default form-control dropdown-toggle"
                       data-toggle="dropdown">
                       <span>{{attribute.value | translate}}&nbsp;</span>
-                      <i class="fa fa-caret-down"></i>
                     </button>
                     <ul class="dropdown-menu dropdown-menu-right btn-block" role="menu">
                       <li><a

contribs/gmf/src/controllers/desktop.scss

@@ -724,12 +724,6 @@ ngeo-rule {
   .dropdown > a.btn {
     display: block;
     text-align: left;
-
-    span.caret {
-      position: absolute;
-      right: 0.62rem;
-      top: 0.87rem;
-    }
   }
 
   .dropdown-menu {

contribs/gmf/src/drawing/drawFeatureComponent.html

@@ -85,14 +85,13 @@
             aria-expanded="false"
             ngeo-exportfeatures
             ngeo-exportfeatures-features="efCtrl.features"
-            class="btn btn-link btn-sm">
-          <span class="fa fa-mail-forward"></span>
+            class="btn btn-link btn-sm dropdown-toggle">
+          <span class="fa fa-file-export"></span>
           {{'Export' | translate}}
-          <span class="caret"></span>
         </button>
         <button
             ng-click="efCtrl.clearFeatures()"
-            class="btn btn-link btn-xs">
+            class="btn btn-link btn-sm">
           <span class="fa fa-trash"></span>
           {{'Delete All' | translate}}
         </button>
@@ -117,7 +116,7 @@
 
     <button
         ng-click="efCtrl.selectedFeature = null;"
-        class="btn btn-link btn-xs">
+        class="btn btn-link btn-sm">
       <span class="fa fa-arrow-left"></span>
       {{'List' | translate}}
     </button>
@@ -129,14 +128,13 @@
           aria-expanded="false"
           ngeo-exportfeatures
           ngeo-exportfeatures-features="efCtrl.selectedFeatures"
-          class="btn btn-link btn-xs">
-        <span class="fa fa-mail-forward"></span>
+          class="btn btn-link btn-sm dropdown-toggle">
+        <span class="fa fa-file-export"></span>
         {{'Export' | translate}}
-        <span class="caret"></span>
       </button>
       <button
           ng-click="efCtrl.removeFeature(efCtrl.selectedFeature);"
-          class="btn btn-link btn-xs">
+          class="btn btn-link btn-sm">
         <span class="fa fa-trash"></span>
         {{'Delete' | translate}}
       </button>

contribs/gmf/src/drawing/featureStyleComponent.html

@@ -17,7 +17,7 @@
         <label
           ng-switch="fsCtrl.type"
           for="gmf-featurestyle-showlabel-{{::fsCtrl.uid}}"
-          class="control-label">
+          class="col-form-label">
           {{'Display label' | translate}}
         </label>
   </div>
@@ -32,7 +32,7 @@
       <label
           ng-switch="fsCtrl.type"
           for="gmf-featurestyle-showmeasure-{{::fsCtrl.uid}}"
-          class="control-label">
+          class="col-form-label">
         <span ng-switch-when="Circle">
           {{'Display azimuth and radius' | translate}}
         </span>
@@ -54,9 +54,7 @@
       </em>
   </div>
 </div>
-<div
-    ng-if="fsCtrl.feature && fsCtrl.type"
-    class="form-horizontal">
+<div ng-if="fsCtrl.feature && fsCtrl.type">
 
   <div class="form-group">
     <div
@@ -69,7 +67,7 @@
   <div
       ng-if="fsCtrl.type === 'Point'"
       class="form-group form-group-nomargin">
-    <label class="control-label col-md-4">{{'Size' | translate}}</label>
+    <label class="col-form-label col-md-4">{{'Size' | translate}}</label>
     <div class="col-md-8">
       <input
           type="range"
@@ -86,7 +84,7 @@
   <div
       ng-if="fsCtrl.type === 'Text'"
       class="form-group form-group-nomargin">
-    <label class="control-label col-md-4">{{'Size' | translate}}</label>
+    <label class="col-form-label col-md-4">{{'Size' | translate}}</label>
     <div class="col-md-8">
       <input
           type="range"
@@ -103,7 +101,7 @@
   <div
       ng-if="fsCtrl.type === 'Circle' || fsCtrl.type === 'LineString' || fsCtrl.type === 'Polygon' || fsCtrl.type === 'Rectangle'"
       class="form-group form-group-nomargin">
-    <label class="control-label col-md-4">{{'Stroke' | translate}}</label>
+    <label class="col-form-label col-md-4">{{'Stroke' | translate}}</label>
     <div class="col-md-8">
       <input
           type="range"
@@ -120,7 +118,7 @@
   <div
       ng-if="fsCtrl.type === 'Circle' || fsCtrl.type === 'Polygon' || fsCtrl.type === 'Rectangle'"
       class="form-group form-group-nomargin">
-    <label class="control-label col-md-4">{{'Opacity' | translate}}</label>
+    <label class="col-form-label col-md-4">{{'Opacity' | translate}}</label>
     <div class="col-md-8">
       <input
           type="range"
@@ -137,7 +135,7 @@
   <div
       ng-if="fsCtrl.type === 'Text'"
       class="form-group form-group-nomargin">
-    <label class="control-label col-md-4">{{'Angle' | translate}}</label>
+    <label class="col-form-label col-md-4">{{'Angle' | translate}}</label>
     <div class="col-md-8">
       <input
           type="range"

contribs/gmf/src/editing/editFeatureSelectorComponent.html

@@ -19,11 +19,11 @@
       <div class="col-sm-12">
         <span translate>Currently editing: </span>
         <b>{{ efsCtrl.selectedEditableTreeCtrl.node.name | translate }}</b>
-        <span class="fa fa-pencil"></span>
+        <span class="fa fa-edit"></span>
         <br>
         <button
             ng-click="efsCtrl.stopEditing()"
-            class="btn btn-link btn-xs pull-right">
+            class="btn btn-link btn-sm pull-right">
           <span class="fa fa-times"></span>
           {{'Stop editing' | translate}}
         </button>

contribs/gmf/src/filters/filterselectorcomponent.html

@@ -22,7 +22,6 @@
           data-toggle="dropdown"
           ng-disabled="$ctrl.aRuleIsActive || $ctrl.gmfSavedFilters.currentDataSourceItems.length === 0">
         <span translate>Saved</span>
-        <span class="caret"></span>
       </a>
       <ul class="dropdown-menu">
         <li ng-repeat="item in $ctrl.gmfSavedFilters.currentDataSourceItems">
@@ -55,7 +54,7 @@
 
     <div>
       <a
-          class="btn btn-link gmf-filterselector-savebtn"
+          class="btn btn-link gmf-filterselector-savebtn dropdown-toggle"
           type="button"
           data-toggle="dropdown"
           ng-click="!$ctrl.aRuleIsActive && $ctrl.saveFilterShowModal()"

contribs/gmf/src/layertree/common.scss

@@ -38,10 +38,10 @@
       color : $color-light;
       display: inline-block;
       &::before {
-        content: $fa-var-chevron-right;
+        content: fa-content($fa-var-chevron-right);
       }
       &[aria-expanded="true"]::before {
-        content: $fa-var-chevron-down;
+        content: fa-content($fa-var-chevron-down);
       }
     }
   }
@@ -122,7 +122,7 @@
     a {
       padding: 0;
       &::after {
-        content: $fa-var-info;
+        content: fa-content($fa-var-info);
         display: inline;
         font-family: FontAwesome;
       }

contribs/gmf/src/layertree/component.html

@@ -112,7 +112,7 @@
     </span>
 
     <span
-      class="fa fa-pencil"
+      class="fa fa-edit"
       data-toggle="tooltip"
       data-placement="right"
       title="{{'Currently editing this layer'|translate}}"

contribs/gmf/src/map/mousepositionComponent.html

@@ -1,7 +1,6 @@
 <div class="btn-group dropup">
   <a type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
     <span class="gmf-mouseposition-control-target"></span>
-    <span class="caret"></span>
   </a>
   <ul class="dropdown-menu dropdown-menu-right" role="menu">
     <li class="dropdown-header" translate>Coordinate systems</li>

contribs/gmf/src/objectediting/component.html

@@ -16,10 +16,10 @@
   ng-show="oeCtrl.queryableLayerListShown">
   <label
     ng-show="oeCtrl.copyFromActive === true"
-    class="control-label">{{'Copy from:' | translate}}</label>
+    class="col-form-label">{{'Copy from:' | translate}}</label>
   <label
     ng-show="oeCtrl.deleteFromActive === true"
-    class="control-label">{{'Cut from:' | translate}}</label>
+    class="col-form-label">{{'Cut from:' | translate}}</label>
   <select
     class="form-control"
     ng-model="oeCtrl.selectedQueryableLayerInfo"