Replace profile options/editor switch buttons with Bootstrap tabs
This commit is contained in:
Norbert Renner
parent
ef9cc7abe7
commit
21a8d8b5de
4 changed files with 94 additions and 68 deletions
|
|
@ -191,8 +191,9 @@ input#trackname:focus:invalid {
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#profile_editor {
|
/* Override Bootstrap tabs that set `display` from `none` to `block` when activating */
|
||||||
display: none;
|
.tab-content > #profile_editor.active {
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
#profile_buttons {
|
#profile_buttons {
|
||||||
|
|
@ -440,7 +441,7 @@ table.dataTable.display tbody tr.even:hover {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leaflet-sidebar-pane#tab_profile .form-group {
|
#profile_params_container .form-group {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
126
index.html
126
index.html
|
|
@ -651,56 +651,86 @@
|
||||||
><span data-i18n="sidebar.customize-profile.title">Customize profile</span>
|
><span data-i18n="sidebar.customize-profile.title">Customize profile</span>
|
||||||
</h1>
|
</h1>
|
||||||
<form class="flexcolumn flexgrow">
|
<form class="flexcolumn flexgrow">
|
||||||
<div id="profile_params_container">
|
<ul class="nav nav-tabs " id="profileEditorTabs" role="tablist">
|
||||||
<div id="profile_params"></div>
|
<li class="nav-item">
|
||||||
<div class="form-group" id="profile_buttons">
|
|
||||||
<button type="button" class="btn btn-info btn-sm" id="profile_advanced">
|
|
||||||
<span data-i18n="sidebar.profile.switch_advanced"
|
|
||||||
>Switch to advanced editor</span
|
|
||||||
>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button id="save" type="button" class="btn btn-primary btn-sm pull-right">
|
|
||||||
<span class="fa fa-cloud-upload"></span>
|
|
||||||
<span data-i18n="sidebar.profile.save">Save</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="profile_editor" class="flexcolumn flexgrow">
|
|
||||||
<textarea
|
|
||||||
class="form-control flexgrow"
|
|
||||||
id="profile_upload"
|
|
||||||
spellcheck="false"
|
|
||||||
wrap="off"
|
|
||||||
data-i18n="[placeholder]sidebar.profile.placeholder"
|
|
||||||
placeholder="Write your custom profile here."
|
|
||||||
></textarea>
|
|
||||||
<div id="profile_message"></div>
|
|
||||||
<div class="form-group" id="profile_buttons">
|
|
||||||
<button
|
|
||||||
id="upload"
|
|
||||||
type="button"
|
|
||||||
class="btn btn-primary btn-sm"
|
|
||||||
data-uploading-text="Uploading…"
|
|
||||||
>
|
|
||||||
<span class="fa fa-cloud-upload"></span>
|
|
||||||
<span data-i18n="sidebar.profile.upload">Upload</span>
|
|
||||||
</button>
|
|
||||||
<button id="clear" type="button" class="btn btn-secondary btn-sm">
|
|
||||||
<span class="fa fa-eraser"></span>
|
|
||||||
<span data-i18n="sidebar.profile.clear">Clear</span>
|
|
||||||
</button>
|
|
||||||
<a
|
<a
|
||||||
href="https://brouter.de/brouter/costfunctions.html"
|
class="nav-link active"
|
||||||
target="_blank"
|
id="params-tab"
|
||||||
class="btn btn-info btn-sm pull-right"
|
data-toggle="tab"
|
||||||
><span class="fa fa-question"></span>
|
href="#profile_params_container"
|
||||||
<span data-i18n="sidebar.profile.help">Help</span></a
|
role="tab"
|
||||||
|
aria-controls="profile_params_container"
|
||||||
|
aria-selected="true"
|
||||||
|
data-i18n="sidebar.profile.options"
|
||||||
|
>Options</a
|
||||||
>
|
>
|
||||||
|
</li>
|
||||||
<button type="button" class="btn btn-info btn-sm" id="profile_basic">
|
<li class="nav-item">
|
||||||
<span data-i18n="sidebar.profile.switch_basic">Switch to basic editor</span>
|
<a
|
||||||
</button>
|
class="nav-link"
|
||||||
|
id="profile-editor-tab"
|
||||||
|
data-toggle="tab"
|
||||||
|
href="#profile_editor"
|
||||||
|
role="tab"
|
||||||
|
aria-controls="profile_editor"
|
||||||
|
aria-selected="false"
|
||||||
|
data-i18n="sidebar.profile.profile"
|
||||||
|
>Profile</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="tab-content flexcolumn flexgrow" id="profileEditorTabsContent">
|
||||||
|
<div
|
||||||
|
id="profile_params_container"
|
||||||
|
class="tab-pane show active"
|
||||||
|
role="tabpanel"
|
||||||
|
aria-labelledby="params-tab"
|
||||||
|
>
|
||||||
|
<div id="profile_params"></div>
|
||||||
|
<div class="form-group" id="profile_buttons">
|
||||||
|
<button id="save" type="button" class="btn btn-primary btn-sm">
|
||||||
|
<span class="fa fa-cloud-upload"></span>
|
||||||
|
<span data-i18n="sidebar.profile.save">Save</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="profile_editor"
|
||||||
|
class="flexcolumn flexgrow tab-pane"
|
||||||
|
role="tabpanel"
|
||||||
|
aria-labelledby="profile-editor-tab"
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
class="form-control flexgrow"
|
||||||
|
id="profile_upload"
|
||||||
|
spellcheck="false"
|
||||||
|
wrap="off"
|
||||||
|
data-i18n="[placeholder]sidebar.profile.placeholder"
|
||||||
|
placeholder="Write your custom profile here."
|
||||||
|
></textarea>
|
||||||
|
<div id="profile_message"></div>
|
||||||
|
<div class="form-group" id="profile_buttons">
|
||||||
|
<button
|
||||||
|
id="upload"
|
||||||
|
type="button"
|
||||||
|
class="btn btn-primary btn-sm"
|
||||||
|
data-uploading-text="Uploading…"
|
||||||
|
>
|
||||||
|
<span class="fa fa-cloud-upload"></span>
|
||||||
|
<span data-i18n="sidebar.profile.upload">Upload</span>
|
||||||
|
</button>
|
||||||
|
<button id="clear" type="button" class="btn btn-secondary btn-sm">
|
||||||
|
<span class="fa fa-eraser"></span>
|
||||||
|
<span data-i18n="sidebar.profile.clear">Clear</span>
|
||||||
|
</button>
|
||||||
|
<a
|
||||||
|
href="https://brouter.de/brouter/costfunctions.html"
|
||||||
|
target="_blank"
|
||||||
|
class="btn btn-info btn-sm pull-right"
|
||||||
|
><span class="fa fa-question"></span>
|
||||||
|
<span data-i18n="sidebar.profile.help">Help</span></a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
|
|
@ -7,13 +7,12 @@ BR.Profile = L.Evented.extend({
|
||||||
lineNumbers: true
|
lineNumbers: true
|
||||||
});
|
});
|
||||||
|
|
||||||
var that = this;
|
$('#profileEditorTabs a[data-toggle="tab"]').on(
|
||||||
L.DomUtil.get('profile_advanced').addEventListener('click', function() {
|
'shown.bs.tab',
|
||||||
that._toggleAdvanced();
|
L.bind(function(e) {
|
||||||
});
|
this._activateSecondaryTab();
|
||||||
L.DomUtil.get('profile_basic').addEventListener('click', function() {
|
}, this)
|
||||||
that._toggleAdvanced();
|
);
|
||||||
});
|
|
||||||
|
|
||||||
L.DomUtil.get('save').onclick = L.bind(this._save, this);
|
L.DomUtil.get('save').onclick = L.bind(this._save, this);
|
||||||
L.DomUtil.get('upload').onclick = L.bind(this._upload, this);
|
L.DomUtil.get('upload').onclick = L.bind(this._upload, this);
|
||||||
|
|
@ -131,8 +130,8 @@ BR.Profile = L.Evented.extend({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
_setValue: function(profileText) {
|
_setValue: function(profileText, profileEditorActivated) {
|
||||||
if (L.DomUtil.get('profile_editor').style.display == 'flex') {
|
if (L.DomUtil.get('profile_editor').classList.contains('active')) {
|
||||||
// Set value of the full editor and exit
|
// Set value of the full editor and exit
|
||||||
this.editor.setValue(profileText);
|
this.editor.setValue(profileText);
|
||||||
this.editor.markClean();
|
this.editor.markClean();
|
||||||
|
|
@ -272,14 +271,10 @@ BR.Profile = L.Evented.extend({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
_toggleAdvanced: function() {
|
_activateSecondaryTab: function() {
|
||||||
if (L.DomUtil.get('profile_editor').style.display == 'flex') {
|
if (L.DomUtil.get('profile_params_container').classList.contains('active')) {
|
||||||
L.DomUtil.get('profile_params_container').style.display = 'initial';
|
|
||||||
L.DomUtil.get('profile_editor').style.display = 'none';
|
|
||||||
this._setValue(this.editor.getValue());
|
this._setValue(this.editor.getValue());
|
||||||
} else {
|
} else {
|
||||||
L.DomUtil.get('profile_params_container').style.display = 'none';
|
|
||||||
L.DomUtil.get('profile_editor').style.display = 'flex';
|
|
||||||
this._setValue(this._buildCustomProfile());
|
this._setValue(this._buildCustomProfile());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -203,13 +203,13 @@
|
||||||
"title": "Layers"
|
"title": "Layers"
|
||||||
},
|
},
|
||||||
"profile": {
|
"profile": {
|
||||||
|
"profile": "Profile",
|
||||||
|
"options": "Options",
|
||||||
"clear": "Clear",
|
"clear": "Clear",
|
||||||
"help": "Help",
|
"help": "Help",
|
||||||
"no_easy_configuration_warning": "No easy configuration is available for this profile.",
|
"no_easy_configuration_warning": "No easy configuration is available for this profile.",
|
||||||
"placeholder": "Write your custom profile here.",
|
"placeholder": "Write your custom profile here.",
|
||||||
"save": "Save",
|
"save": "Save",
|
||||||
"switch_advanced": "Switch to advanced editor",
|
|
||||||
"switch_basic": "Switch to basic editor",
|
|
||||||
"upload": "Upload"
|
"upload": "Upload"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue