Merge pull request #4068 from camptocamp/font

Fix font loading

.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.plugin.js

@@ -216,7 +216,7 @@ function fillDependency(pluginOptions, usedContext, compilation, assetName, asse
           console.log(err);
           reject(err);
         } else {
-          fs.readFile(resolvedFile, 'utf8', (err, data) => {
+          fs.readFile(resolvedFile, (err, data) => {
             if (err) {
               console.log(err);
               reject(err);
@@ -236,7 +236,7 @@ function fillDependency(pluginOptions, usedContext, compilation, assetName, asse
         }
       });
     } else {
-      fs.readFile(assetName, 'utf8', (err, data) => {
+      fs.readFile(assetName, (err, data) => {
         if (err) {
           console.log(err);
           reject(err);

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

@@ -322,6 +322,6 @@
     <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
     <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
     <% } %>
-    <script src="https://geomapfish-demo.camptocamp.com/2.3/wsgi/dynamic.js?interface=desktop"></script>
+    <script src="https://geomapfish-demo.camptocamp.com/docker/dynamic.js?interface=desktop"></script>
   </body>
 </html>

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

@@ -353,6 +353,6 @@
     <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
     <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
     <% } %>
-    <script src="https://geomapfish-demo.camptocamp.com/2.3/wsgi/dynamic.js?interface=desktop_alt"></script>
+    <script src="https://geomapfish-demo.camptocamp.com/docker/wsgi/dynamic.js?interface=desktop"></script>
   </body>
 </html>

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>
+        <img src="<%=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>
+        <img src="<%=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

@@ -32,6 +32,8 @@ $border-color: darken($brand-primary, $standard-variation) !default;
 
 @import '~gmf/layertree/desktop.scss';
 
+@import "~font-awesome/scss/font-awesome.scss";
+
 html, body {
   position: relative;
   height: 100%;

contribs/gmf/src/controllers/mobile.scss

@@ -11,7 +11,6 @@ $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';
@@ -23,6 +22,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>
+    <img src="<%=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>
+    <img src="<%=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>
+    <img src="<%=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>
+    <img src="<%=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>
+    <img src="<%=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>
+    <img src="<%=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>
+          <img src="<%=require("gmf/icons/point.svg")%>" />
           {{'Draw new point' | translate}}
         </span>
         <span ng-switch-when="MultiPoint">
-          <span class="gmf-icon gmf-icon-point"></span>
+          <img src="<%=require("gmf/icons/point.svg")%>" />
           {{'Draw new point' | translate}}
         </span>
         <span ng-switch-when="LineString">
-          <span class="gmf-icon gmf-icon-line"></span>
+          <img src="<%=require("gmf/icons/line.svg")%>" />
           {{'Draw new linestring' | translate}}
         </span>
         <span ng-switch-when="MultiLineString">
-          <span class="gmf-icon gmf-icon-line"></span>
+          <img src="<%=require("gmf/icons/line.svg")%>" />
           {{'Draw new linestring' | translate}}
         </span>
         <span ng-switch-when="Polygon">
-          <span class="gmf-icon gmf-icon-polygon"></span>
+          <img src="<%=require("gmf/icons/polygon.svg")%>" />
           {{'Draw new polygon' | translate}}
         </span>
         <span ng-switch-when="MultiPolygon">
-          <span class="gmf-icon gmf-icon-polygon"></span>
+          <img src="<%=require("gmf/icons/polygon.svg")%>" />
           {{'Draw new polygon' | translate}}
         </span>
       </span>