mirror
/
OpenDroneMap-WebODM
kopia lustrzana https://github.com/OpenDroneMap/WebODM
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Autolayers --> basemaps, layers control component skeleton, new icons

pull/746/head
Piero Toffanin 2019-11-07 16:24:02 -05:00
rodzic 115d860179
commit 120bdd6447
28 zmienionych plików z 459 dodań i 182 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

4
app/static/app/js/components/EditTaskForm.jsx
Wyświetl plik

@ -525,7 +525,7 @@ class EditTaskForm extends React.Component {
</li>
}
<li className={this.state.selectedPreset.system ? "disabled" : ""}>
<a href="javascript:void(0);" onClick={this.handleDeletePreset}><i className="fa fa-trash-o"></i> Delete</a>
<a href="javascript:void(0);" onClick={this.handleDeletePreset}><i className="fa fa-trash"></i> Delete</a>
</li>
</ul>
</div>
@ -570,7 +570,7 @@ class EditTaskForm extends React.Component {
);
}else{
taskOptions = (<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">Loading processing nodes and presets... <i className="fa fa-refresh fa-spin fa-fw"></i></div>
<div className="col-sm-offset-2 col-sm-10">Loading processing nodes and presets... <i className="fa fa-sync fa-spin fa-fw"></i></div>
</div>);
}

2
app/static/app/js/components/EditTaskPanel.jsx
Wyświetl plik

@ -75,7 +75,7 @@ class EditTaskPanel extends React.Component {
<button type="button" className="btn btn-sm btn-primary save" onClick={this.handleSave} disabled={this.state.saving || !this.state.editTaskFormLoaded}>
{this.state.saving ?
<span>
<i className="fa fa-circle-o-notch fa-spin"></i> Saving...
<i className="fa fa-circle-notch fa-spin"></i> Saving...
</span>
: <span>
<i className="fa fa-edit"></i> Save

4
app/static/app/js/components/FormDialog.jsx
Wyświetl plik

@ -151,7 +151,7 @@ class FormDialog extends React.Component {
<button type="button" className="btn btn-primary save" onClick={this.handleSave} disabled={this.state.saving}>
{this.state.saving ?
<span>
<i className="fa fa-circle-o-notch fa-spin"></i> {this.props.savingLabel}
<i className="fa fa-circle-notch fa-spin"></i> {this.props.savingLabel}
</span>
: <span>
<i className={this.props.saveIcon}></i> {this.props.saveLabel}
@ -166,7 +166,7 @@ class FormDialog extends React.Component {
onClick={this.handleDelete}>
{this.state.deleting ?
<span>
<i className="fa fa-circle-o-notch fa-spin"></i> Deleting...
<i className="fa fa-circle-notch fa-spin"></i> Deleting...
</span>
: <span>
<i className="glyphicon glyphicon-trash"></i> Delete

55
app/static/app/js/components/LayersControl.jsx 100644
Wyświetl plik

@ -0,0 +1,55 @@
import L from 'leaflet';
import ReactDOM from 'ReactDOM';
import React from 'react';
import PropTypes from 'prop-types';
import '../css/LayersControl.scss';
import LayersControlPanel from './LayersControlPanel';
class LayersControlButton extends React.Component {
static propTypes = {
tasks: PropTypes.object.isRequired,
map: PropTypes.object.isRequired
}
constructor(props){
super(props);
this.state = {
showPanel: false
};
}
handleOpen = () => {
this.setState({showPanel: true});
}
handleClose = () => {
this.setState({showPanel: false});
}
render(){
const { showPanel } = this.state;
return (<div className={showPanel ? "open" : ""}>
<a href="javascript:void(0);"
onClick={this.handleOpen}
className="leaflet-control-layers-control-button leaflet-bar-part theme-secondary"></a>
<LayersControlPanel map={this.props.map} tasks={this.props.tasks} onClose={this.handleClose} />
</div>);
}
}
export default L.Control.extend({
options: {
position: 'topright'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-control-layers-control leaflet-bar leaflet-control');
L.DomEvent.disableClickPropagation(container);
ReactDOM.render(<LayersControlButton map={this.options.map} tasks={this.options.tasks} />, container);
return container;
}
});

61
app/static/app/js/components/LayersControlPanel.jsx 100644
Wyświetl plik

@ -0,0 +1,61 @@
import React from 'react';
import PropTypes from 'prop-types';
import Storage from '../classes/Storage';
import L from 'leaflet';
import '../css/LayersControlPanel.scss';
import ErrorMessage from './ErrorMessage';
export default class LayersControlPanel extends React.Component {
static defaultProps = {
};
static propTypes = {
onClose: PropTypes.func.isRequired,
tasks: PropTypes.object.isRequired,
map: PropTypes.object.isRequired
}
constructor(props){
super(props);
this.state = {
error: "",
// epsg: Storage.getItem("last_contours_epsg") || "4326",
loading: true
};
}
componentWillUnmount(){
// if (this.loadingReq){
// this.loadingReq.abort();
// this.loadingReq = null;
// }
}
render(){
const { loading } = this.state;
let content = "";
if (loading) content = (<span><i className="fa fa-circle-notch fa-spin"></i> Loading...</span>);
else{
content = (<div>
<ErrorMessage bind={[this, "error"]} />
<div className="row form-group form-inline">
<label className="col-sm-3 control-label">Filter:</label>
<div className="col-sm-9 ">
<select className="form-control" value={interval} onChange={this.handleSelectInterval}>
{/*intervalValues.map(iv => <option value={iv}>{iv} meter</option>)*/}
<option value="custom">Custom</option>
</select>
</div>
</div>
</div>);
}
return (<div className="layers-control-panel">
<span className="close-button" onClick={this.props.onClose}/>
<div className="title">Layers Control</div>
<hr/>
{content}
</div>);
}
}

9
app/static/app/js/components/Map.jsx
Wyświetl plik

@ -18,6 +18,7 @@ import PropTypes from 'prop-types';
import PluginsAPI from '../classes/plugins/API';
import Basemaps from '../classes/Basemaps';
import Standby from './Standby';
import LayersControl from './LayersControl';
import update from 'immutability-helper';
class Map extends React.Component {
@ -139,7 +140,7 @@ class Map extends React.Component {
<div class="popup-opacity-slider">Opacity: <input id="layerOpacity" type="range" value="${layer.options.opacity}" min="0" max="1" step="0.01" /></div>
<div>Bounds: [${layer.options.bounds.toBBoxString().split(",").join(", ")}]</div>
<ul class="asset-links loading">
<li><i class="fa fa-spin fa-refresh fa-spin fa-fw"></i></li>
<li><i class="fa fa-spin fa-sync fa-spin fa-fw"></i></li>
</ul>
<button
@ -162,7 +163,7 @@ class Map extends React.Component {
this.mapBounds = mapBounds;
// Add layer to layers control
this.autolayers.addOverlay(layer, name);
// this.autolayers.addOverlay(layer, name);
done();
})
@ -263,12 +264,16 @@ https://a.tile.openstreetmap.org/{z}/{x}/{y}.png
this.basemaps["None"] = L.layerGroup();
}
this.layersControl = new LayersControl({
}).addTo(this.map);
this.autolayers = Leaflet.control.autolayers({
overlays: {},
selectedOverlays: [],
baseLayers: this.basemaps
}).addTo(this.map);
this.map.fitWorld();
this.map.attributionControl.setPrefix("");

2
app/static/app/js/components/NewTaskPanel.jsx
Wyświetl plik

@ -183,7 +183,7 @@ class NewTaskPanel extends React.Component {
<div className="col-sm-offset-2 col-sm-10 text-right">
{this.props.onCancel !== undefined && <button type="submit" className="btn btn-danger" onClick={this.cancel} style={{marginRight: 4}}><i className="glyphicon glyphicon-remove-circle"></i> Cancel</button>}
{this.state.loading ?
<button type="submit" className="btn btn-primary" disabled={true}><i className="fa fa-circle-o-notch fa-spin fa-fw"></i>Loading...</button>
<button type="submit" className="btn btn-primary" disabled={true}><i className="fa fa-circle-notch fa-spin fa-fw"></i>Loading...</button>
:
<button type="submit" className="btn btn-primary" onClick={this.save} disabled={this.props.filesCount <= 1}><i className="glyphicon glyphicon-saved"></i> {!this.state.inReview ? "Review" : "Start Processing"}</button>
}

2
app/static/app/js/components/ProjectList.jsx
Wyświetl plik

@ -87,7 +87,7 @@ class ProjectList extends Paginated {
render() {
if (this.state.loading){
return (<div className="project-list">Loading projects... <i className="fa fa-refresh fa-spin fa-fw"></i></div>);
return (<div className="project-list">Loading projects... <i className="fa fa-sync fa-spin fa-fw"></i></div>);
}else{
return (<div className="project-list">
<ErrorMessage bind={[this, 'error']} />

2
app/static/app/js/components/SharePopup.jsx
Wyświetl plik

@ -88,7 +88,7 @@ class SharePopup extends React.Component{
<label onClick={this.handleEnableSharing}>
{this.state.togglingShare ?
<i className="fa fa-refresh fa-spin fa-fw"></i>
<i className="fa fa-sync fa-spin fa-fw"></i>
: ""}
<input

2
app/static/app/js/components/TaskList.jsx
Wyświetl plik

@ -71,7 +71,7 @@ class TaskList extends React.Component {
render() {
let message = "";
if (this.state.loading){
message = (<span>Loading... <i className="fa fa-refresh fa-spin fa-fw"></i></span>);
message = (<span>Loading... <i className="fa fa-sync fa-spin fa-fw"></i></span>);
}else if (this.state.error){
message = (<span>Error: {this.state.error}. <a href="javascript:void(0);" onClick={this.retry}>Try again</a></span>);
}else if (this.state.tasks.length === 0){

4
app/static/app/js/components/TaskListItem.jsx
Wyświetl plik

@ -521,7 +521,7 @@ class TaskListItem extends React.Component {
<div className="task-warning"><i className="fa fa-info-circle"></i> <div className="inline">
"Process exited with code 1" means that part of the processing failed. Sometimes it's a problem with the dataset, sometimes it can be solved by tweaking the <a href="javascript:void(0);" onClick={this.startEditing}>Task Options</a> and sometimes it might be a bug!
If you need help, upload your images somewhere like <a href="https://www.dropbox.com/" target="_blank">Dropbox</a> or <a href="https://drive.google.com/drive/u/0/" target="_blank">Google Drive</a> and <a href="http://community.opendronemap.org/c/webodm" target="_blank">open a topic</a> on our community forum, making
sure to include a <a href="javascript:void(0);" onClick={this.setView("console")}>copy of your task's output</a>. Our awesome contributors will try to help you! <i className="fa fa-smile-o"></i>
sure to include a <a href="javascript:void(0);" onClick={this.setView("console")}>copy of your task's output</a>. Our awesome contributors will try to help you! <i className="far fa-smile"></i>
</div>
</div>
: ""}
@ -596,7 +596,7 @@ class TaskListItem extends React.Component {
<div className="task-list-item">
<div className="row">
<div className="col-sm-5 name">
<i onClick={this.toggleExpanded} className={"clickable fa " + (this.state.expanded ? "fa-minus-square-o" : " fa-plus-square-o")}></i> <a href="javascript:void(0);" onClick={this.toggleExpanded}>{name}</a>
<i onClick={this.toggleExpanded} className={"clickable far " + (this.state.expanded ? "fa-minus-square" : " fa-plus-square")}></i> <a href="javascript:void(0);" onClick={this.toggleExpanded}>{name}</a>
</div>
<div className="col-sm-1 details">
<i className="far fa-image"></i> {task.images_count}

24
app/static/app/js/css/LayersControl.scss 100644
Wyświetl plik

@ -0,0 +1,24 @@
.leaflet-control-layers-control{
z-index: 999;
a.leaflet-control-layers-control-button{
background: url(../icons/layers.svg) 0 0 no-repeat;
background-size: 26px 26px;
border-radius: 2px;
}
div.layers-control-panel{ display: none; }
.open{
a.leaflet-control-layers-control-button{
display: none;
}
div.layers-control-panel{
display: block;
}
}
}
.leaflet-touch .leaflet-control-layers-control a {
background-position: 2px 2px;
}

41
app/static/app/js/css/LayersControlPanel.scss 100644
Wyświetl plik

@ -0,0 +1,41 @@
.leaflet-control-layers-control .layers-control-panel{
padding: 6px 10px 6px 6px;
background: #fff;
min-width: 250px;
max-width: 300px;
.close-button{
display: inline-block;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAkUlEQVR4AZWRxQGDUBAFJ9pMflNIP/iVSkIb2wgccXd7g7O+3JXCQUgqBAfFSl8CMooJGQHfuUlEwZpoahZQ7ODTSXWJQkxyioock7BL2tXmdF4moJNX6IDZfbUBQNrX7qfeXfPuqwBAQjEz60w64htGJ+luFH48gt+NYe6v5b/cnr9asM+HlRQ2Qlwh2CjuqQQ9vKsKTwhQ1wAAAABJRU5ErkJggg==);
height: 18px;
width: 18px;
margin-right: 0;
float: right;
vertical-align: middle;
text-align: right;
margin-top: 0px;
margin-left: 16px;
position: relative;
left: 2px;
&:hover{
opacity: 0.7;
cursor: pointer;
}
}
.title{
font-size: 120%;
margin-right: 60px;
}
hr{
clear: both;
margin: 6px 0px;
border-color: #ddd;
}
*{
font-size: 12px;
}
}

5
app/static/app/js/css/Map.scss
Wyświetl plik

@ -13,6 +13,11 @@
padding-bottom: 6px;
}
.leaflet-control-layers-toggle{
border-radius: 1px;
background: url(../icons/basemap.svg) 5px 5px no-repeat;
}
.leaflet-popup-content{
.title{
font-weight: bold;

2
app/static/app/js/css/SharePopup.scss
Wyświetl plik

@ -40,7 +40,7 @@
margin-top: 0;
}
.fa-refresh{
.fa-sync{
margin-left: -25px;
margin-right: 5px;
}

119
app/static/app/js/icons/basemap.svg 100644
Wyświetl plik

@ -0,0 +1,119 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg6"
viewBox="0 0 64 64"
height="64"
width="64"
version="1.1">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>stack</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs10" />
<title
id="title2">stack</title>
<g
transform="translate(-2.1328826,-2.0378473)"
id="g4538">
<g
transform="translate(0.76703143,1.0067283)"
id="g4544">
<g
style="stroke:#7f7f7f"
transform="translate(1.3423044,1.3423044)"
id="g877">
<rect
ry="0"
y="7.0311184"
x="7.3658504"
height="20.122564"
width="20.122564"
id="rect873"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#7f7f7f;stroke-width:5.40427303;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#7f7f7f;stroke-width:5.40427303;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect875"
width="20.122564"
height="20.122564"
x="39.24329"
y="7.0311184"
ry="0" />
</g>
<g
id="g883"
transform="matrix(0.83444179,0,0,0.83444179,4.8662952,36.688317)"
style="stroke:#7f7f7f;stroke-opacity:1">
<rect
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#7f7f7f;stroke-width:6.47651291;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect879"
width="24.115"
height="24.115"
x="4.6041079"
y="4.2693753"
ry="0" />
<rect
ry="0"
y="4.2693753"
x="42.806221"
height="24.115"
width="24.115"
id="rect881"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#7f7f7f;stroke-width:6.47651291;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
id="g4541">
<rect
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#191919;stroke-width:5.40427303;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4526"
width="20.122564"
height="20.122564"
x="7.3658504"
y="7.0311184"
ry="0" />
<rect
ry="0"
y="7.0311184"
x="39.24329"
height="20.122564"
width="20.122564"
id="use832"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#191919;stroke-width:5.40427303;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="stroke:#191919;stroke-opacity:1"
transform="matrix(0.83444179,0,0,0.83444179,3.5239906,35.346011)"
id="use4543">
<rect
ry="0"
y="4.2693753"
x="4.6041079"
height="24.115"
width="24.115"
id="rect824"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#191919;stroke-width:6.47651291;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#191919;stroke-width:6.47651291;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:1.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect826"
width="24.115"
height="24.115"
x="42.806221"
y="4.2693753"
ry="0" />
</g>
</g>
</g>
</svg>
Side by Side

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 4.5 KiB

45
app/static/app/js/icons/layers.svg 100644
Wyświetl plik

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg6"
viewBox="0 0 64 64"
height="64"
width="64"
version="1.1">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>stack</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs10" />
<title
id="title2">stack</title>
<path
style="fill:#292929;fill-opacity:1;stroke-width:0.83820438"
id="path828"
d="M 58.82254,21.941547 32,8.5302773 5.1774597,21.941547 32,35.352818 Z" />
<path
style="fill:none;fill-opacity:1;stroke-width:0.83820438"
id="path826"
d="M 32,12.981981 49.919972,21.941547 32,30.901114 14.080028,21.941547 Z" />
<path
style="fill:#212121;fill-opacity:1;stroke-width:0.83820438"
id="path824"
d="M 53.44965,29.313555 58.82254,32 32,45.41127 5.1774597,32 10.55035,29.313555 32,40.03838 Z" />
<path
style="fill:#191919;fill-opacity:1;stroke-width:0.83820438"
id="path4"
d="M 53.44965,39.372008 58.82254,42.058453 32,55.469723 5.1774597,42.058453 10.55035,39.372008 32,50.096833 Z" />
</svg>
Side by Side

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 1.5 KiB

127
app/static/app/js/vendor/leaflet/Leaflet.Autolayers/leaflet-autolayers.js vendored
Wyświetl plik

@ -39,6 +39,7 @@ L.Control.AutoLayers = L.Control.extend({
selectedBasemap: null,
layersToAdd: {},
countZIndexBase: function(layers) {
for (var i = 0; i < layers.length; i++) {
var layer = layers[i];
@ -127,7 +128,7 @@ L.Control.AutoLayers = L.Control.extend({
var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
link.href = '#';
link.title = 'Layers';
link.title = 'Base Maps';
if (L.Browser.touch) {
L.DomEvent
@ -165,9 +166,14 @@ L.Control.AutoLayers = L.Control.extend({
//overlays are done here
var overlaysLayersDiv = this._overlaysDiv = L.DomUtil.create('div',
'leaflet-control-layers-tab', form);
// We hide the overlays
overlaysLayersDiv.style.display = 'none';
this._overlaysLayersTitle = L.DomUtil.create('div', 'leaflet-control-autolayers-title',
overlaysLayersDiv);
this._overlaysLayersTitle.innerHTML = 'Tasks';
this._overlaysLayersTitle.innerHTML = 'Overlays';
var overlaysLayersBox = this._overlaysLayersBox = L.DomUtil.create('div', 'map-filter',
overlaysLayersDiv);
var overlaysLayersFilter = this._overlaysLayersFilter = L.DomUtil.create('input',
@ -241,65 +247,68 @@ L.Control.AutoLayers = L.Control.extend({
//open and close setup
var titles = this._form.getElementsByClassName('leaflet-control-autolayers-title');
var onTitleClick = function(e) {
var overlayOrBase;
if (e.currentTarget.innerText === 'Overlays') {
overlayOrBase = 'overlays';
}
if (e.currentTarget.innerText === 'Base Maps') {
overlayOrBase = 'base';
}
var allTabs = this.parentNode.parentNode.getElementsByClassName(
'leaflet-control-layers-tab');
for (var i = 0; i < allTabs.length; i++) {
var tab = allTabs[i].getElementsByTagName('div');
for (var m = 0; m < tab.length; m++) {
var tabContent = tab[m];
if (tabContent.className === "leaflet-control-layers-item-container") continue;
if (tabContent.className !== 'leaflet-control-autolayers-title') {
tabContent.style.display = 'none';
}
}
}
var thisTab = this.parentNode.children;
for (var i = 0; i < thisTab.length; i++) {
thisTab[i].style.display = 'block';
var filter = thisTab[i].getElementsByClassName('map-filter-box-' + overlayOrBase);
if (filter.length > 0) {
filter[0].style.display = 'block';
}
}
if (e.currentTarget.innerText === 'Overlays' || e.currentTarget
.innerText === 'Base Maps') {
var filterBoxValue = this.parentNode.getElementsByClassName('map-filter')[0].children[0].value
.toLowerCase();
var displayLayers = this.parentNode.getElementsByClassName('leaflet-control-layers-' +
overlayOrBase)[0].getElementsByTagName('label');
if (filterBoxValue.length > 2) {
for (var i = 0; i < displayLayers.length; i++) {
if (displayLayers[i].innerText.toLowerCase().indexOf(
filterBoxValue) > -1) {
displayLayers[i].style.display = 'block';
} else {
displayLayers[i].style.display = 'none';
}
}
}
} else {
// for (var i = 0; i < displayLayers.length; i++) {
// displayLayers[i].style.display = 'block';
// }
}
};
for (var t = 0; t < titles.length; t++) {
L.DomEvent.addListener(titles[t], 'click', function(e) {
var overlayOrBase;
if (e.currentTarget.innerText === 'Overlays') {
overlayOrBase = 'overlays';
}
if (e.currentTarget.innerText === 'Base Maps') {
overlayOrBase = 'base';
}
var allTabs = this.parentNode.parentNode.getElementsByClassName(
'leaflet-control-layers-tab');
for (var i = 0; i < allTabs.length; i++) {
var tab = allTabs[i].getElementsByTagName('div');
for (var m = 0; m < tab.length; m++) {
var tabContent = tab[m];
if (tabContent.className === "leaflet-control-layers-item-container") continue;
if (tabContent.className !== 'leaflet-control-autolayers-title') {
tabContent.style.display = 'none';
}
}
}
var thisTab = this.parentNode.children;
for (var i = 0; i < thisTab.length; i++) {
thisTab[i].style.display = 'block';
var filter = thisTab[i].getElementsByClassName('map-filter-box-' + overlayOrBase);
if (filter.length > 0) {
filter[0].style.display = 'block';
}
}
if (e.currentTarget.innerText === 'Overlays' || e.currentTarget
.innerText === 'Base Maps') {
var filterBoxValue = this.parentNode.getElementsByClassName('map-filter')[0].children[0].value
.toLowerCase();
var displayLayers = this.parentNode.getElementsByClassName('leaflet-control-layers-' +
overlayOrBase)[0].getElementsByTagName('label');
if (filterBoxValue.length > 2) {
for (var i = 0; i < displayLayers.length; i++) {
if (displayLayers[i].innerText.toLowerCase().indexOf(
filterBoxValue) > -1) {
displayLayers[i].style.display = 'block';
} else {
displayLayers[i].style.display = 'none';
}
}
}
} else {
// for (var i = 0; i < displayLayers.length; i++) {
// displayLayers[i].style.display = 'block';
// }
}
});
L.DomEvent.addListener(titles[t], 'click', onTitleClick);
}
//x in the corner to close
var closeControl = this._baseLayersClose;
L.DomEvent.addListener(closeControl, 'click', function(e) {
@ -325,6 +334,8 @@ L.Control.AutoLayers = L.Control.extend({
//make sure we collapse the control on mapclick
this._map.on('click', this._collapse, this);
onTitleClick.call(titles[0], {currentTarget: {innerText: "Base Maps"}});
},
_initMaps: function(mapLayers) {

45
app/static/app/themes/fa/fa.js
Wyświetl plik

@ -1,45 +0,0 @@
/*!
* bootstrap-fileinput v4.3.3
* http://plugins.krajee.com/file-input
*
* Font Awesome icon theme configuration for bootstrap-fileinput. Requires font awesome assets to be loaded.
*
* Author: Kartik Visweswaran
* Copyright: 2014 - 2016, Kartik Visweswaran, Krajee.com
*
* Licensed under the BSD 3-Clause
* https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
*/
(function ($) {
"use strict";
$.fn.fileinputThemes.fa = {
fileActionSettings: {
removeIcon: '<i class="fa fa-trash text-danger"></i>',
uploadIcon: '<i class="fa fa-upload text-info"></i>',
zoomIcon: '<i class="fa fa-search-plus"></i>',
dragIcon: '<i class="fa fa-bars"></i>',
indicatorNew: '<i class="fa fa-hand-o-down text-warning"></i>',
indicatorSuccess: '<i class="fa fa-check-circle text-success"></i>',
indicatorError: '<i class="fa fa-exclamation-circle text-danger"></i>',
indicatorLoading: '<i class="fa fa-hand-o-up text-muted"></i>'
},
layoutTemplates: {
fileIcon: '<i class="fa fa-file kv-caption-icon"></i> '
},
previewZoomButtonIcons: {
prev: '<i class="fa fa-caret-left fa-lg"></i>',
next: '<i class="fa fa-caret-right fa-lg"></i>',
toggleheader: '<i class="fa fa-arrows-v"></i>',
fullscreen: '<i class="fa fa-arrows-alt"></i>',
borderless: '<i class="fa fa-external-link"></i>',
close: '<i class="fa fa-remove"></i>'
},
previewFileIcon: '<i class="fa fa-file"></i>',
browseIcon: '<i class="fa fa-folder-open"></i>',
removeIcon: '<i class="fa fa-trash"></i>',
cancelIcon: '<i class="fa fa-ban"></i>',
uploadIcon: '<i class="fa fa-upload"></i>',
msgValidationErrorIcon: '<i class="fa fa-exclamation-circle"></i> '
};
})(window.jQuery);

45
app/static/app/themes/gly/gly.js
Wyświetl plik

@ -1,45 +0,0 @@
/*!
* bootstrap-fileinput v4.3.3
* http://plugins.krajee.com/file-input
*
* Glyphicon (default) theme configuration for bootstrap-fileinput.
*
* Author: Kartik Visweswaran
* Copyright: 2014 - 2016, Kartik Visweswaran, Krajee.com
*
* Licensed under the BSD 3-Clause
* https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
*/
(function ($) {
"use strict";
$.fn.fileinputThemes.gly = {
fileActionSettings: {
removeIcon: '<i class="glyphicon glyphicon-trash text-danger"></i>',
uploadIcon: '<i class="glyphicon glyphicon-upload text-info"></i>',
zoomIcon: '<i class="glyphicon glyphicon-zoom-in"></i>',
dragIcon: '<i class="glyphicon glyphicon-menu-hamburger"></i>',
indicatorNew: '<i class="glyphicon glyphicon-hand-down text-warning"></i>',
indicatorSuccess: '<i class="glyphicon glyphicon-ok-sign text-success"></i>',
indicatorError: '<i class="glyphicon glyphicon-exclamation-sign text-danger"></i>',
indicatorLoading: '<i class="glyphicon glyphicon-hand-up text-muted"></i>'
},
layoutTemplates: {
fileIcon: '<i class="glyphicon glyphicon-file kv-caption-icon"></i>'
},
previewZoomButtonIcons: {
prev: '<i class="glyphicon glyphicon-triangle-left"></i>',
next: '<i class="glyphicon glyphicon-triangle-right"></i>',
toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',
fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',
borderless: '<i class="glyphicon glyphicon-resize-full"></i>',
close: '<i class="glyphicon glyphicon-remove"></i>'
},
previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>&nbsp;',
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
cancelIcon: '<i class="glyphicon glyphicon-ban-circle"></i>',
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
msgValidationErrorIcon: '<i class="glyphicon glyphicon-exclamation-sign"></i> '
};
})(window.jQuery);

2
plugins/cesium-ion/public/components/UploadDialog.jsx
Wyświetl plik

@ -201,7 +201,7 @@ export default class UploadDialog extends Component {
{isLoading && (
<Button bsStyle="primary" disabled>
<i
className={"fa fa-refresh fa-spin"}
className={"fa fa-sync fa-spin"}
/>
Submitting...
</Button>

10
plugins/contours/public/ContoursPanel.jsx
Wyświetl plik

@ -257,7 +257,7 @@ export default class ContoursPanel extends React.Component {
(simplify === "custom" && !customSimplify);
let content = "";
if (loading) content = (<span><i className="fa fa-circle-o-notch fa-spin"></i> Loading...</span>);
if (loading) content = (<span><i className="fa fa-circle-notch fa-spin"></i> Loading...</span>);
else if (permanentError) content = (<div className="alert alert-warning">{permanentError}</div>);
else{
content = (<div>
@ -335,12 +335,12 @@ export default class ContoursPanel extends React.Component {
<div className="col-sm-9 text-right">
<button onClick={this.handleShowPreview}
disabled={disabled || previewLoading} type="button" className="btn btn-sm btn-primary btn-preview">
{previewLoading ? <i className="fa fa-spin fa-circle-o-notch"/> : <i className="glyphicon glyphicon-eye-open"/>} Preview
{previewLoading ? <i className="fa fa-spin fa-circle-notch"/> : <i className="glyphicon glyphicon-eye-open"/>} Preview
</button>
<div className="btn-group">
<button disabled={disabled || exportLoading} type="button" className="btn btn-sm btn-primary" data-toggle="dropdown">
{exportLoading ? <i className="fa fa-spin fa-circle-o-notch"/> : <i className="glyphicon glyphicon-download" />} Export
{exportLoading ? <i className="fa fa-spin fa-circle-notch"/> : <i className="glyphicon glyphicon-download" />} Export
</button>
<button disabled={disabled|| exportLoading} type="button" className="btn btn-sm dropdown-toggle btn-primary" data-toggle="dropdown"><span className="caret"></span></button>
<ul className="dropdown-menu pull-right">
@ -351,7 +351,7 @@ export default class ContoursPanel extends React.Component {
</li>
<li>
<a href="javascript:void(0);" onClick={this.handleExport("DXF")}>
<i className="fa fa-file-o fa-fw"></i> AutoCAD (.DXF)
<i className="fa fa-file fa-fw"></i> AutoCAD (.DXF)
</a>
</li>
<li>
@ -361,7 +361,7 @@ export default class ContoursPanel extends React.Component {
</li>
<li>
<a href="javascript:void(0);" onClick={this.handleExport("ESRI Shapefile")}>
<i className="fa fa-file-zip-o fa-fw"></i> ShapeFile (.SHP)
<i className="fa fa-file-archive fa-fw"></i> ShapeFile (.SHP)
</a>
</li>
</ul>

10
plugins/elevationmap/public/ElevationMapPanel.jsx
Wyświetl plik

@ -308,7 +308,7 @@ export default class ElevationMapPanel extends React.Component {
(noiseFilterSize === "custom" && !customNoiseFilterSize);
let content = "";
if (loading) content = (<span><i className="fa fa-circle-o-notch fa-spin"></i> Loading...</span>);
if (loading) content = (<span><i className="fa fa-circle-notch fa-spin"></i> Loading...</span>);
else if (permanentError) content = (<div className="alert alert-warning">{permanentError}</div>);
else{
content = (<div>
@ -384,12 +384,12 @@ export default class ElevationMapPanel extends React.Component {
<div className="col-sm-9 text-right">
<button onClick={this.handleShowPreview}
disabled={disabled || previewLoading} type="button" className="btn btn-sm btn-primary btn-preview">
{previewLoading ? <i className="fa fa-spin fa-circle-o-notch"/> : <i className="glyphicon glyphicon-eye-open"/>} Preview
{previewLoading ? <i className="fa fa-spin fa-circle-notch"/> : <i className="glyphicon glyphicon-eye-open"/>} Preview
</button>
<div className="btn-group">
<button disabled={disabled || exportLoading} type="button" className="btn btn-sm btn-primary" data-toggle="dropdown">
{exportLoading ? <i className="fa fa-spin fa-circle-o-notch"/> : <i className="glyphicon glyphicon-download" />} Export
{exportLoading ? <i className="fa fa-spin fa-circle-notch"/> : <i className="glyphicon glyphicon-download" />} Export
</button>
<button disabled={disabled|| exportLoading} type="button" className="btn btn-sm dropdown-toggle btn-primary" data-toggle="dropdown"><span className="caret"></span></button>
<ul className="dropdown-menu pull-right">
@ -400,7 +400,7 @@ export default class ElevationMapPanel extends React.Component {
</li>
<li>
<a href="javascript:void(0);" onClick={this.handleExport("DXF")}>
<i className="fa fa-file-o fa-fw"></i> AutoCAD (.DXF)
<i className="fa fa-file fa-fw"></i> AutoCAD (.DXF)
</a>
</li>
<li>
@ -410,7 +410,7 @@ export default class ElevationMapPanel extends React.Component {
</li>
<li>
<a href="javascript:void(0);" onClick={this.handleExport("ESRI Shapefile")}>
<i className="fa fa-file-zip-o fa-fw"></i> ShapeFile (.SHP)
<i className="fa fa-file-archive fa-fw"></i> ShapeFile (.SHP)
</a>
</li>
</ul>

2
plugins/lightning/public/CostEstimateItem.jsx
Wyświetl plik

@ -138,7 +138,7 @@ export default class CostEstimateItem extends React.Component {
<label className="col-sm-2 control-label">Credits Estimate</label>
<div className="col-sm-10 num-credits">
{loading ?
<i className="fa fa-circle-o-notch fa-spin"></i> :
<i className="fa fa-circle-notch fa-spin"></i> :
<div>
{ credits }
</div>}

10
plugins/lightning/public/Dashboard.jsx
Wyświetl plik

@ -112,35 +112,35 @@ export default class Dashboard extends React.Component {
<ErrorMessage bind={[this, "error"]} />
{ loading ?
<div className="text-center loading">{ loadingMessage } <i className="fa fa-spin fa-circle-o-notch"></i></div> :
<div className="text-center loading">{ loadingMessage } <i className="fa fa-spin fa-circle-notch"></i></div> :
<div>
{ user ?
<div>
<div className="balance">
Balance: <strong>{ user.balance }</strong> credits
<button className="btn btn-primary btn-sm" onClick={this.handleBuyCredits}><i className="fa fa-shopping-cart"></i> Buy Credits</button>
<button className="btn btn-primary btn-sm" onClick={this.handleRefresh}><i className="fa fa-refresh"></i> Refresh Balance</button>
<button className="btn btn-primary btn-sm" onClick={this.handleRefresh}><i className="fa fa-sync"></i> Refresh Balance</button>
</div>
<h4>Hello, <a href="javascript:void(0)" onClick={this.handleOpenDashboard}>{ user.email }</a></h4>
<div className="lightning-nodes">
<h5>Synced Nodes</h5>
{ syncingNodes ? <i className="fa fa-spin fa-refresh"></i> :
{ syncingNodes ? <i className="fa fa-spin fa-sync"></i> :
<div>
<ul>
{nodes.map(n =>
<li key={n.id}><i className="fa fa-laptop"></i> <a href={`/processingnode/${n.id}/`}>{n.label}</a></li>
)}
</ul>
<button className="btn btn-sm btn-default" onClick={this.handleSyncProcessingNode}><i className="fa fa-refresh"></i> Resync</button>
<button className="btn btn-sm btn-default" onClick={this.handleSyncProcessingNode}><i className="fa fa-sync"></i> Resync</button>
</div> }
</div>
{nodes.length > 0 ?
<div>
<hr/>
<i className="fa fa-thumbs-o-up"></i> You are all set! When creating a new task from the <a href="/dashboard">Dashboard</a>, select <strong>{nodes[0].label}</strong> from the <strong>Processing Node</strong> drop-down instead of Auto.
<i className="far fa-thumbs-up"></i> You are all set! When creating a new task from the <a href="/dashboard">Dashboard</a>, select <strong>{nodes[0].label}</strong> from the <strong>Processing Node</strong> drop-down instead of Auto.
</div> : ""}
<div className="buttons text-right">

2
plugins/lightning/public/Login.jsx
Wyświetl plik

@ -105,7 +105,7 @@ export default class Login extends React.Component {
</div>
<p><button className="btn btn-primary" onClick={this.handleLogin} disabled={this.state.loggingIn}>
{this.state.loggingIn ?
<span><i className="fa fa-spin fa-circle-o-notch"></i></span> :
<span><i className="fa fa-spin fa-circle-notch"></i></span> :
<span><i className="fa fa-lock"></i> Login and Sync</span>}
</button></p>
</div>

2
plugins/openaerialmap/public/ShareButton.jsx
Wyświetl plik

@ -111,7 +111,7 @@ export default class ShareButton extends React.Component{
const { loading, taskInfo } = this.state;
const getButtonIcon = () => {
if (loading || taskInfo.sharing) return "fa fa-circle-o-notch fa-spin fa-fw";
if (loading || taskInfo.sharing) return "fa fa-circle-notch fa-spin fa-fw";
else return "oam-icon fa";
};

3
webpack.config.js
Wyświetl plik

@ -89,7 +89,8 @@ module.exports = {
// on the global let jQuery
"jquery": "jQuery",
"SystemJS": "SystemJS",
"React": "React"
"React": "React",
"ReactDOM": "ReactDOM"
},
watchOptions: {