From b108efae5c439ce86b0c3c5b0b361ad96f5a5db6 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Sat, 1 Oct 2016 12:30:30 +0200 Subject: [PATCH] switch icons to Font Awesome (for now) --- README.md | 2 ++ bower.json | 12 ++++++++++-- css/style.css | 12 +++++++++++- gulpfile.js | 2 +- index.html | 4 ++-- js/Map.js | 4 ++-- js/control/Message.js | 4 ++-- js/index.js | 6 +++--- 8 files changed, 33 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 86eada9..3f58dee 100644 --- a/README.md +++ b/README.md @@ -118,3 +118,5 @@ Copyright (c) 2015 Kyle Kemp, Rohit Kalkur, and contributors; [MIT License](http Copyright (c) 2012 Makina Corpus, [MIT License](https://github.com/makinacorpus/Leaflet.RestoreView/blob/master/LICENSE) * [Leaflet.Locate](https://github.com/domoritz/leaflet-locatecontrol) Copyright (c) 2014 Dominik Moritz, [MIT License](https://github.com/domoritz/leaflet-locatecontrol/blob/gh-pages/LICENSE) +* [Font Awesome](http://fontawesome.io/license/) +by Dave Gandy; [SIL OFL 1.1](http://scripts.sil.org/OFL) (Font), MIT License (Code), CC BY 3.0 (Documentation) diff --git a/bower.json b/bower.json index beabf88..020d8bb 100644 --- a/bower.json +++ b/bower.json @@ -22,7 +22,8 @@ "seiyria-bootstrap-slider": "~4.8.1", "url-search-params": "~0.5.0", "Leaflet.RestoreView": "makinacorpus/Leaflet.RestoreView#master", - "leaflet.locatecontrol": "^0.52.0" + "leaflet.locatecontrol": "^0.52.0", + "font-awesome": "^4.6.3" }, "overrides": { "leaflet": { @@ -84,9 +85,16 @@ }, "Leaflet.RestoreView": { "main": "leaflet.restoreview.js" + }, + "font-awesome": { + "main": [ + "css/font-awesome.css", + "fonts/*" + ] } }, "resolutions": { - "leaflet.elevation": "master" + "leaflet.elevation": "master", + "font-awesome": "^4.6.3" } } diff --git a/css/style.css b/css/style.css index 1217530..fede1aa 100644 --- a/css/style.css +++ b/css/style.css @@ -243,12 +243,22 @@ textarea:focus { margin-bottom: 0px; padding-left: 35px; } -.alert span.glyphicon { +.alert span.fa { position: relative; left: -23px; margin-right: -1em; } +/* activated Font Awesome icon (for EasyButton add ' active' to icon class property) */ +.fa.active { + /* use same color as leaflet-locatecontrol */ + color: #2074B6; +} + +.leaflet-bar .fa { + font-size: 16px; +} + /* * DataTables */ diff --git a/gulpfile.js b/gulpfile.js index 1a89936..7478b0b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -30,7 +30,7 @@ var paths = { ]), styles: mainBowerFiles('**/*.css').concat('css/*.css'), images: mainBowerFiles('**/*.+(png|gif)'), - fonts: mainBowerFiles('**/fonts/**/*'), + fonts: mainBowerFiles('**/font-awesome/fonts/*'), dest: 'dist', destName: 'brouter-web' }; diff --git a/index.html b/index.html index 3f2ab86..3be5a74 100644 --- a/index.html +++ b/index.html @@ -53,8 +53,8 @@
- - + + Help
diff --git a/js/Map.js b/js/Map.js index 79248cf..353d000 100644 --- a/js/Map.js +++ b/js/Map.js @@ -117,8 +117,8 @@ BR.Map = { layersControl = L.control.layers(baseLayers, overlays).addTo(map); L.control.locate({ - icon: 'glyphicon glyphicon-screenshot', - iconLoading: 'glyphicon glyphicon-refresh', + icon: 'fa fa-location-arrow', + iconLoading: 'fa fa-spinner fa-pulse', }).addTo(map); L.control.scale().addTo(map); diff --git a/js/control/Message.js b/js/control/Message.js index 9407575..fd84f24 100644 --- a/js/control/Message.js +++ b/js/control/Message.js @@ -12,7 +12,7 @@ BR.Message = L.Class.extend({ _show: function (msg, type) { var ele = L.DomUtil.get(this.id), - iconClass = (type === 'warning') ? 'glyphicon-warning-sign' : 'glyphicon-remove', + iconClass = (type === 'warning') ? 'fa-exclamation-triangle' : 'fa-times-circle', alertClass = (type === 'warning') ? 'alert-warning' : 'alert-danger'; ele.innerHTML = @@ -20,7 +20,7 @@ BR.Message = L.Class.extend({ + ' ' - + ' ' + + ' ' + msg + ''; diff --git a/js/index.js b/js/index.js index 7e0f851..ac9790d 100644 --- a/js/index.js +++ b/js/index.js @@ -48,7 +48,7 @@ drawButton = L.easyButton({ states: [{ stateName: 'deactivate-draw', - icon: 'glyphicon-ok', + icon: 'fa-pencil active', onClick: function (control) { routing.draw(false); control.state('activate-draw'); @@ -56,7 +56,7 @@ title: 'Stop drawing route' }, { stateName: 'activate-draw', - icon: 'glyphicon-road', + icon: 'fa-pencil', onClick: function (control) { routing.draw(true); control.state('deactivate-draw'); @@ -66,7 +66,7 @@ }); deleteButton = L.easyButton( - 'glyphicon-trash', + 'fa-trash-o', function () { bootbox.confirm({ size: 'small',