Merge pull request #170 from gtt-project/ftr/material-icons

Material icons

Author: dkastl

package.json

@@ -21,7 +21,7 @@
   "homepage": "https://github.com/gtt-project/redmine_gtt#readme",
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "font-awesome": "^4.7.0",
+    "@material-design-icons/font": "^0.11.8",
     "geojson": "^0.5.0",
     "ol": "^6.14.1",
     "ol-ext": "^3.2.22"

src/components/gtt-client.ts

@@ -212,8 +212,8 @@ export class GttClient {
       this.layerArray.forEach( (l:Layer) => {
           if( l.get("baseLayer") ) {
             this.map.addLayer(l)
-          } 
-        } 
+          }
+        }
       )
 
       var containsOverlay = false;
@@ -222,8 +222,8 @@ export class GttClient {
           if( !l.get("baseLayer") ) {
             this.map.addLayer(l)
             containsOverlay = true
-          } 
-        } 
+          }
+        }
       )
     }
 
@@ -312,7 +312,7 @@ export class GttClient {
 
     // Control button
     const maximizeCtrl = new Button({
-      html: '<i class="gtt-icon-maximize" ></i>',
+      html: '<i class="material-icons" >zoom_out_map</i>',
       title: "Maximize",
       handleClick: () => {
         this.zoomToExtent(true);
@@ -398,7 +398,7 @@ export class GttClient {
     else {
       this.map.addControl(new LayerPopup())
     }
-        
+
 
     // Because Redmine filter functions are applied later, the Window onload
     // event provides a workaround to have filters loaded before executing
@@ -461,8 +461,21 @@ export class GttClient {
         this.updateForm([evt.feature], true)
       })
 
+      // Material design icon
+      let mdi = 'place'
+
+      switch (type.toLowerCase()) {
+         case 'linestring':
+          mdi = 'polyline'
+          break;
+
+        case 'polygon':
+          mdi = 'format_shapes'
+          break;
+        }
+
       const control = new Toggle({
-        html: `<i class="gtt-icon-${type.toLowerCase()}" ></i>`,
+        html: `<i class="material-icons" >${mdi}</i>`,
         title: type,
         interaction: draw,
         active: (idx === 0)
@@ -473,7 +486,7 @@ export class GttClient {
     // Upload button
     if (this.contents.upload === "true") {
       editbar.addControl(new Button({
-        html: '<i class="gtt-icon-book" ></i>',
+        html: '<i class="material-icons">file_upload</i>',
         title: 'Upload GeoJSON',
         handleClick: () => {
           const data = prompt("Please paste a GeoJSON geometry here")
@@ -496,7 +509,7 @@ export class GttClient {
   setPopover() {
     const popup = new Popup({
       popupClass: 'default',
-      closeBox: true,
+      closeBox: false,
       onclose: () => {},
       positioning: 'auto',
       anim: true
@@ -522,7 +535,7 @@ export class GttClient {
       const url = popup_contents.href.replace(/\[(.+?)\]/g, feature.get('id'))
       content.push(`<a href="${url}">Edit</a>`)
 
-      popup.show(feature.getGeometry().getFirstCoordinate(), content.join(' '))
+      popup.show(feature.getGeometry().getFirstCoordinate(), content.join('') as any)
     })
 
     select.getFeatures().on(['remove'], _ => {
@@ -682,7 +695,7 @@ export class GttClient {
   }
 
   getSymbol(feature: Feature<Geometry>) {
-    let symbol = 'mcr-icon-write'
+    let symbol = 'home'
 
     const plugin_settings = JSON.parse(this.defaults.pluginSettings)
     const issue_tracker = document.querySelector('#issue_tracker_id') as HTMLInputElement
@@ -905,13 +918,13 @@ export class GttClient {
     this.geolocations.push(geolocation)
 
     geolocation.on('change', (evt) => {
-      console.log({
-        accuracy: geolocation.getAccuracy(),
-        altitude: geolocation.getAltitude(),
-        altitudeAccuracy: geolocation.getAltitudeAccuracy(),
-        heading: geolocation.getHeading(),
-        speed: geolocation.getSpeed()
-      })
+      // console.log({
+      //   accuracy: geolocation.getAccuracy(),
+      //   altitude: geolocation.getAltitude(),
+      //   altitudeAccuracy: geolocation.getAltitudeAccuracy(),
+      //   heading: geolocation.getHeading(),
+      //   speed: geolocation.getSpeed()
+      // })
     })
     geolocation.on('error', (error) => {
       // TBD
@@ -957,7 +970,7 @@ export class GttClient {
 
     // Control button
     const geolocationCtrl = new Toggle({
-      html: '<i class="gtt-icon-compass" ></i>',
+      html: '<i class="material-icons">my_location</i>',
       title: "Geolocation",
       active: false,
       onToggle: (active: boolean) => {
@@ -1146,7 +1159,7 @@ export class GttClient {
 
     // Control button
     const geocodingCtrl = new Toggle({
-      html: '<i class="gtt-icon-search" ></i>',
+      html: '<i class="material-icons">manage_search</i>',
       title: "Geocoding",
       className: "ctl-geocoding",
       onToggle: (active: boolean) => {
@@ -1232,7 +1245,7 @@ export class GttClient {
                     return feature.getGeometry().getType() === "Point"
                   })
                   if (pointIndex >= 0) {
-                    console.log("Reloading Features layer")
+                    // console.log("Reloading Features layer")
                     layer.changed()
                   }
                 }

src/components/gtt-setting.ts

@@ -14,9 +14,14 @@ export const gtt_setting = ():void => {
       for (let i in glyph) {
         if (glyph[i].font == font) {
           const selected = selectedValue === i
-          element.append(new Option(i, i, selected, selected))
+          const words = i.split('_')
+          const text = words.map((word) => {
+            return word[0].toUpperCase() + word.substring(1)
+          }).join(" ")
+          element.append(new Option(text, i, selected, selected))
           if (selected) {
-            element.nextElementSibling.className = "fa " + i
+            element.nextElementSibling.className = "material-icons"
+            element.nextElementSibling.textContent = i
           }
         }
       }
@@ -26,7 +31,8 @@ export const gtt_setting = ():void => {
     element.addEventListener('change', (ev) => {
       const currentTarget = ev.currentTarget as HTMLSelectElement
       const trackerId = currentTarget.id
-      document.querySelector(`#icon_${trackerId}`).className = "fa " + currentTarget.value
+      document.querySelector(`#icon_${trackerId}`).className = "material-icons"
+      document.querySelector(`#icon_${trackerId}`).textContent = currentTarget.value
     })
   })
 }