Merge remote-tracking branch 'origin/main' into fix/styling

Author: dkastl

app/views/settings/gtt/_settings.html.erb

@@ -1,6 +1,6 @@
 <h3><%= l(:select_default_tracker_icon) %></h3>
 
-<% Tracker.all.each do |t| %>
+<% Tracker.sorted.each do |t| %>
   <p>
     <%= content_tag :label, t.name %>
     <%= select_tag "settings[tracker_#{t.id}]", "<option>#{@settings["tracker_#{t.id}"]}</option>".html_safe %>
@@ -11,7 +11,7 @@
 <div class="box tabular settings">
 <h3><%= l(:select_default_status_color) %></h3>
 
-<% IssueStatus.all.sort.each do |t| %>
+<% IssueStatus.sorted.each do |t| %>
   <p>
     <%= content_tag :label, t.name %>
     <%= color_field_tag "settings[status_#{t.id}]", @settings["status_#{t.id}"] %>

config/locales/de.yml

@@ -1,7 +1,7 @@
 # German strings go here for Rails i18n
 de:
-  error_unable_to_update_project_gtt_settings: Die GTT-Einstellungen des Projekts können
-    nicht aktualisiert werden (%{value})
+  error_unable_to_update_project_gtt_settings: Die GTT-Einstellungen des Projekts
+    können nicht aktualisiert werden (%{value})
   field_gtt_tile_source_ids: Tile-Resourcen
   label_nearby: in der Nähe (lat,lng)
   label_type: Typ
@@ -17,9 +17,10 @@ de:
   label_parameters: Parameter
   label_tab_geocoder: Geocoder
   geocoder_options: Geocoder Optionen
-  gtt_tile_sources_info: Wählen Sie die Tile Resourcen aus, die in diesem Projekt verfügbar
-    sein sollen.
-  gtt_settings_general_maxzoom_level: Standardwert für die maximale Zoomstufe der Karte
+  gtt_tile_sources_info: Wählen Sie die Tile Resourcen aus, die in diesem Projekt
+    verfügbar sein sollen.
+  gtt_settings_general_maxzoom_level: Standardwert für die maximale Zoomstufe der
+    Karte
   label_default_collapsed_issues_page_map: Standardmäßig ausgeblendete Karte für Tickets
   field_default: Standard für neue Projekte
   field_geometry: Geomtrie
@@ -42,10 +43,11 @@ de:
   label_gtt_point: Punkt
   label_gtt_linestring: Linie
   label_gtt_polygon: Polygon
-  error_invalid_json: muss gültiges JSON sein
+  error_invalid_json: Muss gültiges JSON sein
   label_editable_geometry_types_on_issue_map: Editierbare Geometrietypen auf der Ausgabekarte
   select_default_tracker_icon: 'Auswahl des Standard-Tracker-Symbols:'
-  label_enable_geojson_upload_on_issue_map: Aktivieren von GeoJSON-Upload auf der Themenkarte
+  label_enable_geojson_upload_on_issue_map: Aktivieren von GeoJSON-Upload auf der
+    Themenkarte
   label_enable_geocoding_on_map: Geokodierung auf der Karte aktivieren
   select_default_status_color: 'Auswahl der Standard-Statusfarbe:'
   select_default_map_settings: 'Standardmäßige Kartenvoreinstellungen festlegen:'
@@ -57,7 +59,7 @@ de:
   gtt_tile_sources_select: -- Typ auswählen --
   gtt_tile_sources_select_osm: OpenStreetMap
   gtt_tile_sources_select_tilewms: Tiled WMS
-  gtt_tile_sources_load_example: Beispielkonfiguration laden
+  gtt_tile_sources_load_example: Beispielkonfiguration laden.
   label_baselayer: Basislayer
   gtt_tile_sources_select_imagewms: Image WMS
   gtt_tile_sources_select_xyz: XYZ Tiles

config/locales/en.yml

@@ -1,7 +1,8 @@
 # English strings go here for Rails i18n
 en:
-  error_invalid_json: must be valid JSON
-  error_unable_to_update_project_gtt_settings: "Unable to update project GTT settings (%{value})"
+  error_invalid_json: Must be valid JSON
+  error_unable_to_update_project_gtt_settings: "Unable to update project GTT settings\
+    \ (%{value})"
 
   field_default: Default for new projects
   field_geometry: "Geometry"
@@ -42,7 +43,8 @@ en:
 
   geocoder_options: "Geocoder Options"
 
-  gtt_tile_sources_info: "Select the tile sources that should be available in this project."
+  gtt_tile_sources_info: "Select the tile sources that should be available in this\
+    \ project."
   gtt_tile_sources_select: "-- Select type --"
   gtt_tile_sources_select_imagewms: "Image WMS"
   gtt_tile_sources_select_osm: "OpenStreetMap"

config/locales/ja.yml

@@ -48,7 +48,7 @@ ja:
   gtt_tile_sources_select_osm: "OpenStreetMap"
   gtt_tile_sources_select_tilewms: "Tiled WMS"
   gtt_tile_sources_select_xyz: "XYZ Tiles"
-  gtt_tile_sources_load_example: "サンプル設定をロード"
+  gtt_tile_sources_load_example: "サンプル設定をロード。"
 
   gtt_settings_general_center_lon: "既定の地図中心経度"
   gtt_settings_general_center_lat: "既定の地図中心緯度"

src/components/gtt-setting.ts

@@ -11,11 +11,24 @@ export const gtt_setting = ():void => {
       const wrapper = $('<div>', {
         text: ''
       })
-      $('<i>', {
-        class: "ui-icons material-icons",
-        title: item.label,
-        text: item.value
-      }).prependTo(wrapper)
+      const style = item.optgroup.toLowerCase().split(' ').join('-')
+      switch (style) {
+        case 'material-icons':
+          $('<i>', {
+            class: 'ui-icons ' + style,
+            title: item.label,
+            text: item.value
+          }).prependTo(wrapper)
+          break;
+
+        default:
+          $('<i>', {
+            class: 'ui-icons ' + style + ' icon-' + item.value,
+            title: item.label,
+            text: ''
+          }).prependTo(wrapper)
+          break;
+      }
       return li.append(wrapper).appendTo(ul)
     }
   });
@@ -25,44 +38,58 @@ export const gtt_setting = ():void => {
     const selectedValue = element.value
     if (element.length === 1 && selectedValue !== "") {
       element.remove(0)
-      element.append(new Option("", "", false, false))
+      // element.append(new Option("", "", false, false))
     }
     for (let font in FontSymbol.prototype.defs.fonts) {
+      const optgroup = document.createElement('optgroup')
+      optgroup.label = FontSymbol.prototype.defs.fonts[font].name
       for (let i in glyph) {
         if (glyph[i].font == font) {
           const selected = selectedValue === i
           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))
+          }).join(' ')
+          optgroup.appendChild(new Option(text, i, selected, selected))
           if (selected) {
-            element.nextElementSibling.className = "material-icons"
-            element.nextElementSibling.textContent = i
+            const style = font.toLowerCase().split(' ').join('-')
+            switch (style) {
+              case 'material-icons':
+                element.nextElementSibling.className = style
+                element.nextElementSibling.textContent = i
+                break;
+
+              default:
+                element.nextElementSibling.className = style + ' icon-' + i
+                element.nextElementSibling.textContent = ''
+                break;
+            }
           }
         }
       }
+      element.append(optgroup)
     }
 
     // Apply better Selector styling with jQuery UI (available in Redmine)
     $(element)
       .selectmenu({
         change: function(event: any, data: any) {
-          console.log(data.item.value)
-          document.querySelector(`#icon_${element.id}`).textContent = data.item.value
+          const style = data.item.optgroup.toLowerCase().split(' ').join('-')
+          switch (style) {
+            case 'material-icons':
+              document.querySelector(`#icon_${element.id}`).className = style
+              document.querySelector(`#icon_${element.id}`).textContent = data.item.value
+              break;
+
+            default:
+              document.querySelector(`#icon_${element.id}`).className = style + ' icon-' + data.item.value
+              document.querySelector(`#icon_${element.id}`).textContent = ''
+              break;
+          }
         }
       })
       .selectmenu('menuWidget')
       .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/index.ts

@@ -2,10 +2,14 @@ import 'ol/ol.css'
 import 'ol-ext/dist/ol-ext.min.css'
 import './stylesheets/app.scss'
 
+// Custom Icons
+import './stylesheets/custom-icons.css'
+import './stylesheets/CustomIconsDef.js'
+
 // Material Design Icons
 // https://github.com/marella/material-design-icons/tree/main/font#readme
 import '@material-design-icons/font/filled.css'
-import './fonts/MaterialDesignDef.js'
+import './stylesheets/MaterialDesignDef.js'
 
 import { GttClient } from './components/gtt-client'
 import { gtt_setting } from './components/gtt-setting'

src/stylesheets/CustomIconsDef.js

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

src/fonts/MaterialDesignDef.js renamed to src/stylesheets/MaterialDesignDef.js

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: "custom-icons";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("./custom-icons.woff2") format("woff2");
+}
+
+.custom-icons {
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  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 {
+  content: "\f102";
+}
+.icon-road:before {
+  content: "\f103";
+}
+.icon-waste:before {
+  content: "\f104";
+}