Fixes styling issues

Signed-off-by: Daniel Kastl <[email protected]>

Author: dkastl

src/components/gtt-setting.ts

@@ -15,16 +15,17 @@ export const gtt_setting = ():void => {
       switch (style) {
         case 'material-icons':
           $('<i>', {
-            class: "ui-icons " + style,
+            class: 'ui-icons ' + style,
             title: item.label,
             text: item.value
           }).prependTo(wrapper)
           break;
 
         default:
           $('<i>', {
-            class: "ui-icons icon-" + item.value,
-            title: item.label
+            class: 'ui-icons ' + style + ' icon-' + item.value,
+            title: item.label,
+            text: ''
           }).prependTo(wrapper)
           break;
       }
@@ -41,7 +42,7 @@ export const gtt_setting = ():void => {
     }
     for (let font in FontSymbol.prototype.defs.fonts) {
       const optgroup = document.createElement('optgroup')
-      optgroup.label = font
+      optgroup.label = FontSymbol.prototype.defs.fonts[font].name
       for (let i in glyph) {
         if (glyph[i].font == font) {
           const selected = selectedValue === i
@@ -59,7 +60,8 @@ export const gtt_setting = ():void => {
                 break;
 
               default:
-                element.nextElementSibling.className = "icon-" + i
+                element.nextElementSibling.className = style + ' icon-' + i
+                element.nextElementSibling.textContent = ''
                 break;
             }
           }
@@ -80,7 +82,8 @@ export const gtt_setting = ():void => {
               break;
 
             default:
-              document.querySelector(`#icon_${element.id}`).className = 'icon-' + data.item.value
+              document.querySelector(`#icon_${element.id}`).className = style + ' icon-' + data.item.value
+              document.querySelector(`#icon_${element.id}`).textContent = ''
               break;
           }
         }
@@ -89,13 +92,4 @@ export const gtt_setting = ():void => {
       .addClass('select-overflow')
       .addClass('ui-menu-icons customicons')
   })
-
-  // document.querySelectorAll("[id^='settings_tracker_']").forEach((element: HTMLSelectElement) => {
-  //   element.addEventListener('change', (ev) => {
-  //     const currentTarget = ev.currentTarget as HTMLSelectElement
-  //     const trackerId = currentTarget.id
-  //     document.querySelector(`#icon_${trackerId}`).className = "material-icons"
-  //     document.querySelector(`#icon_${trackerId}`).textContent = currentTarget.value
-  //   })
-  // })
 }

src/stylesheets/CustomIconsDef.js

@@ -1,13 +1,13 @@
 import ol_style_FontSymbol from 'ol-ext/style/FontSymbol'
 
 ol_style_FontSymbol.addDefs(
-{	"font":"Custom Icons",
+{	"font":"custom-icons",
 	"name":"Custom Icons",
 	"copyright":"Apache-2.0",
 	"prefix": "gtt"
 },
 { "lobsta": "\uf101",
-  "park-bench": "\uf102",
+  "park_bench": "\uf102",
   "road": "\uf103",
   "waste": "\uf104"
 });

src/stylesheets/custom-icons.css

@@ -6,11 +6,9 @@
   src: url("./custom-icons.woff2") format("woff2");
 }
 
-i[class^="icon-"]:before, i[class*=" icon-"]:before {
-  font-family: custom-icons !important;
+.custom-icons {
+  font-weight: normal;
   font-style: normal;
-  font-weight: normal !important;
-  font-variant: normal;
   font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
@@ -25,10 +23,21 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   font-feature-settings: "liga";
 }
 
+i[class^="icon-"]:before, i[class*=" icon-"]:before {
+  font-family: custom-icons !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .icon-lobsta:before {
   content: "\f101";
 }
-.icon-park-bench:before {
+.icon-park_bench:before {
   content: "\f102";
 }
 .icon-road:before {