Set style of gmf-drawfeature closer to the end-result

camptocamp · Apr 13, 2016 · 7bd2dd9 · 7bd2dd9
1 parent 789ed82
commit 7bd2dd9
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 35 deletions.
diff --git a/contribs/gmf/examples/drawfeature.html b/contribs/gmf/examples/drawfeature.html
@@ -8,6 +8,7 @@
     <meta name="mobile-web-app-capable" content="yes">
     <link rel="stylesheet" href="../../../node_modules/openlayers/css/ol.css" type="text/css">
     <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.css" type="text/css">
+<link rel="stylesheet" href="../../../node_modules/font-awesome/css/font-awesome.css" type="text/css">
 
     <style>
       gmf-map > div {
@@ -20,7 +21,7 @@
       gmf-drawfeature {
         display: block;
         margin: 20px;
-        width: 425px;
+        width: 300px;
       }
 
       .ngeo-drawfeature-actionbuttons {
@@ -36,29 +37,22 @@
         clear: both;
       }
 
+      gmf-featurestyle {
+        display: block;
+        margin: 10px 0 0 0;
+      }
+
+      .gmf-drawfeature-featurelist {
+        margin: 10px 0 0 0;
+        padding: 0;
+        list-style: none;
+      }
+
       /* drawfeature */
 
       ngeo-drawfeature {
         margin: 10px 0;
       }
-      .ngeo-drawfeature-circle:before {
-        content: 'Circle'
-      }
-      .ngeo-drawfeature-linestring:before {
-        content: 'LineString'
-      }
-      .ngeo-drawfeature-point:before {
-        content: 'Point'
-      }
-      .ngeo-drawfeature-polygon:before {
-        content: 'Polygon'
-      }
-      .ngeo-drawfeature-rectangle:before {
-        content: 'Rectangle'
-      }
-      .ngeo-drawfeature-text:before {
-        content: 'Text'
-      }
       .tooltip {
         position: relative;
         background: rgba(0, 0, 0, 0.5);

diff --git a/contribs/gmf/fonts/gmf-icons.svg b/contribs/gmf/fonts/gmf-icons.svg
diff --git a/contribs/gmf/less/icons.less b/contribs/gmf/less/icons.less
@@ -33,4 +33,28 @@
   &.gmf-icon-check-o:after {
     content: '\e604';
   }
+
+  &.gmf-icon-circle:after {
+    content: '\e901';
+  }
+
+  &.gmf-icon-line:after {
+    content: '\e902';
+  }
+
+  &.gmf-icon-point:after {
+    content: '\e903';
+  }
+
+  &.gmf-icon-polygon:after {
+    content: '\e904';
+  }
+
+  &.gmf-icon-rectangle:after {
+    content: '\e905';
+  }
+
+  &.gmf-icon-text:after {
+    content: '\e906';
+  }
 }
diff --git a/contribs/gmf/src/directives/partials/drawfeature.html b/contribs/gmf/src/directives/partials/drawfeature.html
@@ -16,47 +16,59 @@ <h2>{{'Draw & Measure' | translate}}</h2>
       ngeo-drawpoint
       class="btn btn-default ngeo-drawfeature-point"
       ng-class="{active: dfCtrl.drawPoint.active}"
-      ng-model="dfCtrl.drawPoint.active"></a>
+      ng-model="dfCtrl.drawPoint.active">
+      <span class="fa fa-circle"></span>
+    </a>
     <a
       href
       translate
       ngeo-btn
       ngeo-measurelength
       class="btn btn-default ngeo-drawfeature-linestring"
       ng-class="{active: dfCtrl.measureLength.active}"
-      ng-model="dfCtrl.measureLength.active"></a>
+      ng-model="dfCtrl.measureLength.active">
+      <span class="fa fa-arrows-h"></span>
+    </a>
     <a
       href
       translate
       ngeo-btn
       ngeo-measurearea
       class="btn btn-default ngeo-drawfeature-polygon"
       ng-class="{active: dfCtrl.measureArea.active}"
-      ng-model="dfCtrl.measureArea.active"></a>
+      ng-model="dfCtrl.measureArea.active">
+      <span class="fa fa-square"></span>
+    </a>
     <a
       href
       translate
       ngeo-btn
       ngeo-measureazimut
       class="btn btn-default ngeo-drawfeature-circle"
       ng-class="{active: dfCtrl.measureAzimut.active}"
-      ng-model="dfCtrl.measureAzimut.active"></a>
+      ng-model="dfCtrl.measureAzimut.active">
+      <span class="fa fa-circle-o"></span>
+    </a>
     <a
       href
       translate
       ngeo-btn
       ngeo-drawrectangle
       class="btn btn-default ngeo-drawfeature-rectangle"
       ng-class="{active: dfCtrl.drawRectangle.active}"
-      ng-model="dfCtrl.drawRectangle.active"></a>
+      ng-model="dfCtrl.drawRectangle.active">
+      <span class="fa fa-square-o"></span>
+    </a>
     <a
       href
       translate
       ngeo-btn
       ngeo-drawtext
       class="btn btn-default ngeo-drawfeature-text"
       ng-class="{active: dfCtrl.drawText.active}"
-      ng-model="dfCtrl.drawText.active"></a>
+      ng-model="dfCtrl.drawText.active">
+      <span class="fa fa-trademark"></span>
+    </a>
   </ngeo-drawfeature>
 
   <hr />
@@ -66,20 +78,23 @@ <h2>{{'Draw & Measure' | translate}}</h2>
     <div ng-switch-when="null">
       <div class="ngeo-drawfeature-actionbuttons">
         <button
-            class="btn btn-default">
+            class="btn btn-sm btn-default">
+          <span class="fa fa-mail-forward"></span>
           {{'Export' | translate}}
         </button>
         <button
             ng-click="efCtrl.features.clear();"
-            class="btn btn-default">
+            class="btn btn-sm btn-default">
+          <span class="fa fa-trash"></span>
           {{'Delete All' | translate}}
         </button>
       </div>
 
       <div class="gmf-eol"></div>
 
-      <ul class="gmf-drawfeature-featurelist">
+      <ul class="list-group gmf-drawfeature-featurelist">
         <li
+            class="list-group-item"
             ng-repeat="feature in efCtrl.features.getArray()"
             ng-click="efCtrl.selectedFeature = feature;">
           {{ feature.get(efCtrl.nameProperty) }}
@@ -90,23 +105,28 @@ <h2>{{'Draw & Measure' | translate}}</h2>
 
     <div ng-switch-default>
 
+      <button
+          ng-click="efCtrl.selectedFeature = null;"
+          class="btn btn-sm btn-default">
+        <span class="fa fa-arrow-left"></span>
+        {{'List' | translate}}
+      </button>
       <div class="ngeo-drawfeature-actionbuttons">
         <button
-            ng-click="efCtrl.selectedFeature = null;"
-            class="btn btn-default">
-          {{'<- List' | translate}}
-        </button>
-        <button
-            class="btn btn-default">
+            class="btn btn-sm btn-default">
+          <span class="fa fa-mail-forward"></span>
           {{'Export' | translate}}
         </button>
         <button
             ng-click="efCtrl.features.remove(efCtrl.selectedFeature);"
-            class="btn btn-default">
+            class="btn btn-sm btn-default">
+          <span class="fa fa-trash"></span>
           {{'Delete' | translate}}
         </button>
       </div>
 
+      <div class="gmf-eol"></div>
+
       <gmf-featurestyle
         gmf-featurestyle-feature="efCtrl.selectedFeature">
       </gmf-featurestyle>