Merge pull request #4085 from camptocamp/svg-icons

Replace GMF font by icons

.gitignore

@@ -11,9 +11,6 @@
 /contribs/gmf/apps/.tx/ngeo.gmf-*
 /examples/simple.min.js
 /contribs/gmf/build/
-/contribs/gmf/src/fonts/gmf-icons.eot
-/contribs/gmf/src/fonts/gmf-icons.ttf
-/contribs/gmf/src/fonts/gmf-icons.woff
 /contribs/gmf/src/fonts/FontAwesome*
 /contribs/gmf/src/fonts/fontawesome*
 /contribs/gmf/examples/https.js

.npmignore

@@ -1,9 +1,6 @@
 /karma-conf.js
 /lingua.cfg
 /Makefile
-/ngeo_deploy_key
-/TODO.md
-/npm.mk
 /secrets.tar
 /secrets.tar.enc
 /test/

Makefile

@@ -400,19 +400,6 @@ contribs/gmf/build/gmf-%.json: \
 	mkdir -p $(dir $@)
 	node buildtools/compile-catalog $(filter-out .build/node_modules.timestamp, $^) > $@
 
-.PHONY: generate-gmf-fonts
-generate-gmf-fonts: contribs/gmf/src/fonts/gmf-icons.ttf contribs/gmf/src/fonts/gmf-icons.eot contribs/gmf/src/fonts/gmf-icons.woff
-
-contribs/gmf/src/fonts/gmf-icons.ttf: contribs/gmf/src/fonts/gmf-icons.svg .build/node_modules.timestamp
-	node_modules/svg2ttf/svg2ttf.js $< $@
-
-contribs/gmf/src/fonts/gmf-icons.eot: contribs/gmf/src/fonts/gmf-icons.ttf .build/node_modules.timestamp
-	node_modules/ttf2eot/ttf2eot.js $< $@
-
-contribs/gmf/src/fonts/gmf-icons.woff: contribs/gmf/src/fonts/gmf-icons.ttf .build/node_modules.timestamp
-	node_modules/ttf2woff/ttf2woff.js $< $@
-
-# clean
 
 .PHONY: clean
 clean:
@@ -431,9 +418,6 @@ clean:
 	rm -f .build/locale/demo.pot
 	rm -rf contribs/gmf/build
 	rm -f $(ANGULAR_LOCALES_FILES)
-	rm -f contribs/gmf/src/fonts/gmf-icons.eot
-	rm -f contribs/gmf/src/fonts/gmf-icons.ttf
-	rm -f contribs/gmf/src/fonts/gmf-icons.woff
 
 .PHONY: cleanall
 cleanall: clean

buildtools/webpack.commons.js

@@ -111,14 +111,22 @@ const sassRule = {
 
 const htmlRule = {
   test: /\.html$/,
+  use: 'ejs-loader',
+};
+
+const svgRule = {
+  test: /\.svg$/,
   use: [{
-    loader: 'html-loader',
+    loader: 'svg-inline-loader',
     options: {
-      minimize: true
-    }
+      removeSVGTagAttrs: false,
+    },
+  }, {
+    loader: 'svgo-loader',
   }]
 };
 
+
 const config = {
   context: path.resolve(__dirname, '../'),
   devtool: 'source-map',
@@ -134,6 +142,7 @@ const config = {
       cssRule,
       sassRule,
       htmlRule,
+      svgRule,
       ngeoRule,
       ngeoExamplesRule,
       gmfAppsRule,

buildtools/webpack.dev.js

@@ -2,12 +2,12 @@ const webpack = require('webpack');
 
 
 const resourcesRule = {
-  test: /\.(jpeg|png|svg|ico|cur|eot|ttf|woff|woff2)$/,
+  test: /\.(jpeg|png|ico|cur|eot|ttf|woff|woff2)$/,
   use: {
     loader: 'file-loader',
     options: {
-      name: 'build/[path][name].[ext]'
-    }
+      name: '[name].[ext]'
+    },
   }
 };
 

buildtools/webpack.prod.js

@@ -4,18 +4,7 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 
 const resourcesRule = {
-  test: /\.(jpeg|png|svg|ico|cur)$/,
-  use: {
-    loader: 'url-loader',
-    options: {
-      limit: 1000,
-      name: '[name].[hash:6].[ext]'
-    }
-  }
-};
-
-const fontRule = {
-  test: /\.(eot|ttf|woff|woff2)$/,
+  test: /\.(jpeg|png|ico|cur|eot|ttf|woff|woff2)$/,
   use: {
     loader: 'file-loader',
     options: {
@@ -35,7 +24,6 @@ module.exports = {
   module: {
     rules: [
       resourcesRule,
-      fontRule,
     ]
   },
   optimization: {

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

@@ -41,7 +41,7 @@
       </div>
       <button class="gmf-mobile-nav-trigger gmf-mobile-nav-left-trigger"
         ng-click="mainCtrl.toggleLeftNavVisibility()">
-        <span class="gmf-icon gmf-icon-layers"></span>
+        <%=require('gmf/icons/layers.svg')%>
       </button>
       <gmf-search gmf-search-map="::mainCtrl.map"
         gmf-search-datasources="::mainCtrl.searchDatasources"

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

@@ -46,7 +46,7 @@
       </div>
       <button class="gmf-mobile-nav-trigger gmf-mobile-nav-left-trigger"
         ng-click="mainCtrl.toggleLeftNavVisibility()">
-        <span class="gmf-icon gmf-icon-layers"></span>
+        <%=require('gmf/icons/layers.svg')%>
       </button>
       <gmf-search gmf-search-map="mainCtrl.map"
         gmf-search-datasources="mainCtrl.searchDatasources"

contribs/gmf/examples/importdatasource.css

@@ -1,18 +1,3 @@
-/**
- * Fonts definition
- */
-@font-face {
-  font-family: "gmf-icons";
-  src: url("~gmf/fonts/gmf-icons.eot");
-  src: url("~gmf/fonts/gmf-icons.eot?#iefix") format("embedded-opentype"),
-       url("~gmf/fonts/gmf-icons.woff") format("woff"),
-       url("~gmf/fonts/gmf-icons.ttf") format("truetype"),
-       url("~gmf/fonts/gmf-icons.svg#gmf-icons") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-
-
 /* CSS stolen from https://github.com/bassjobsen/typeahead.js-bootstrap-css/ */
 span.twitter-typeahead .tt-menu {
   position: absolute;

contribs/gmf/src/controllers/desktop.scss

@@ -24,14 +24,15 @@ $border-color: darken($brand-primary, $standard-variation) !default;
 @import '~gmf/sass/font.scss';
 @import '~gmf/sass/base.scss';
 @import '~gmf/sass/map.scss';
-@import '~gmf/sass/icons.scss';
 @import '~gmf/sass/input-range.scss';
 @import '~gmf/sass/popover.scss';
 @import '~gmf/sass/datepicker.scss';
 @import '~gmf/sass/fullscreenpopup.scss';
 
 @import '~gmf/layertree/desktop.scss';
 
+@import "~font-awesome/scss/font-awesome.scss";
+
 html, body {
   position: relative;
   height: 100%;

contribs/gmf/src/controllers/mobile-nav.scss

@@ -274,7 +274,7 @@ nav.gmf-mobile-nav-right {
   z-index: $above-search-index;
   height: $map-tools-size;
   border: 0.06rem solid $border-color;
-  .fa, .gmf-icon {
+  .fa {
     font-size: 1.25rem;
   }
 }

contribs/gmf/src/controllers/mobile.scss

@@ -11,10 +11,8 @@ $border-color: black !default;
 @import "~bootstrap/scss/_variables.scss";
 @import "~font-awesome/scss/_variables.scss";
 
-@import '~gmf/sass/font.scss';
 @import '~gmf/sass/base.scss';
 @import '~gmf/sass/map.scss';
-@import '~gmf/sass/icons.scss';
 @import '~gmf/sass/input-range.scss';
 @import '~gmf/sass/fullscreenpopup.scss';
 @import '~gmf/sass/iphone.scss';
@@ -23,6 +21,8 @@ $border-color: black !default;
 
 @import '~gmf/layertree/mobile.scss';
 
+@import "~font-awesome/scss/font-awesome.scss";
+
 /**
  * Mobile specific css only !
  * Please, use shared less files to describe desktop-mobile shared css

contribs/gmf/src/drawing/drawFeatureComponent.html

@@ -13,7 +13,7 @@
     class="btn btn-default ngeo-drawfeature-point"
     ng-class="{active: dfCtrl.drawPoint.active}"
     ng-model="dfCtrl.drawPoint.active">
-    <span class="gmf-icon gmf-icon-point"></span>
+    <%=require('gmf/icons/point.svg')%>
   </a>
   <a
     data-toggle="tooltip"
@@ -24,7 +24,7 @@
     class="btn btn-default ngeo-drawfeature-linestring"
     ng-class="{active: dfCtrl.measureLength.active}"
     ng-model="dfCtrl.measureLength.active">
-    <span class="gmf-icon gmf-icon-line"></span>
+    <%=require('gmf/icons/line.svg')%>
   </a>
   <a
     data-toggle="tooltip"
@@ -35,7 +35,7 @@
     class="btn btn-default ngeo-drawfeature-polygon"
     ng-class="{active: dfCtrl.measureArea.active}"
     ng-model="dfCtrl.measureArea.active">
-    <span class="gmf-icon gmf-icon-polygon"></span>
+    <%=require('gmf/icons/polygon.svg')%>
   </a>
   <a
     data-toggle="tooltip"
@@ -46,7 +46,7 @@
     class="btn btn-default ngeo-drawfeature-circle"
     ng-class="{active: dfCtrl.measureAzimut.active}"
     ng-model="dfCtrl.measureAzimut.active">
-    <span class="gmf-icon gmf-icon-circle"></span>
+    <%=require('gmf/icons/circle.svg')%>
   </a>
   <a
     data-toggle="tooltip"
@@ -57,7 +57,7 @@
     class="btn btn-default ngeo-drawfeature-rectangle"
     ng-class="{active: dfCtrl.drawRectangle.active}"
     ng-model="dfCtrl.drawRectangle.active">
-    <span class="gmf-icon gmf-icon-rectangle"></span>
+    <%=require('gmf/icons/rectangle.svg')%>
   </a>
   <a
     data-toggle="tooltip"
@@ -68,7 +68,7 @@
     class="btn btn-default ngeo-drawfeature-text"
     ng-class="{active: dfCtrl.drawText.active}"
     ng-model="dfCtrl.drawText.active">
-    <span class="gmf-icon gmf-icon-text"></span>
+    <%=require('gmf/icons/text.svg')%>
   </a>
 </ngeo-drawfeature>
 

contribs/gmf/src/editing/editFeatureComponent.html

@@ -15,27 +15,27 @@
       ng-model="efCtrl.createActive">
       <span ng-switch="::efCtrl.geomType">
         <span ng-switch-when="Point">
-          <span class="gmf-icon gmf-icon-point"></span>
+          <%=require('gmf/icons/point.svg')%>
           {{'Draw new point' | translate}}
         </span>
         <span ng-switch-when="MultiPoint">
-          <span class="gmf-icon gmf-icon-point"></span>
+          <%=require('gmf/icons/point.svg')%>
           {{'Draw new point' | translate}}
         </span>
         <span ng-switch-when="LineString">
-          <span class="gmf-icon gmf-icon-line"></span>
+          <%=require('gmf/icons/line.svg')%>
           {{'Draw new linestring' | translate}}
         </span>
         <span ng-switch-when="MultiLineString">
-          <span class="gmf-icon gmf-icon-line"></span>
+          <%=require('gmf/icons/line.svg')%>
           {{'Draw new linestring' | translate}}
         </span>
         <span ng-switch-when="Polygon">
-          <span class="gmf-icon gmf-icon-polygon"></span>
+          <%=require('gmf/icons/polygon.svg')%>
           {{'Draw new polygon' | translate}}
         </span>
         <span ng-switch-when="MultiPolygon">
-          <span class="gmf-icon gmf-icon-polygon"></span>
+          <%=require('gmf/icons/polygon.svg')%>
           {{'Draw new polygon' | translate}}
         </span>
       </span>