Merge pull request #260 from nrenner/profile-tabs

Profile tabs
This commit is contained in:
Norbert Renner 2019-11-16 20:37:22 +01:00 committed by GitHub
commit cb5941584c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 113 additions and 93 deletions

View file

@ -191,8 +191,9 @@ input#trackname:focus:invalid {
cursor: auto;
}
#profile_editor {
display: none;
/* Override Bootstrap tabs that set `display` from `none` to `block` when activating */
#profileEditorTabsContent.tab-content > .active {
display: flex;
}
#profile_buttons {
@ -429,6 +430,7 @@ table.dataTable.display tbody tr.even:hover {
* leaflet-sidebar-v2
*/
.leaflet-sidebar-pane#tab_profile,
.leaflet-sidebar-pane#tab_data,
.leaflet-sidebar-pane#tab_itinerary {
/* Full height for content with inner scrolling,
@ -436,12 +438,17 @@ table.dataTable.display tbody tr.even:hover {
height: 100%;
}
.leaflet-sidebar-pane#tab_profile {
min-height: 100%;
#profile_params,
.CodeMirror {
/* auto instead of 1 to avoid overflow to content height in Firefox */
flex: auto;
/* override default 300px, behaves like min-height with flex auto */
height: 0;
}
.leaflet-sidebar-pane#tab_profile .form-group {
margin-bottom: 5px;
#profile_params {
overflow-y: scroll;
padding-right: 5px;
}
.leaflet-sidebar-pane#tab_profile label {
@ -466,7 +473,8 @@ table.dataTable.display tbody tr.even:hover {
}
/* layers control as sidebar tab */
#tab_layers_control {
#tab_layers_control,
#profile_params {
font-size: 0.9rem;
line-height: normal;
}
@ -516,11 +524,6 @@ table.dataTable.display tbody tr.even:hover {
*/
.CodeMirror {
/* auto instead of 1 to avoid overflow to content height in Firefox */
flex: auto;
/* override default 300px, behaves like min-height with flex auto */
height: 0;
border: 1px solid #ddd;
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

View file

@ -651,56 +651,81 @@
><span data-i18n="sidebar.customize-profile.title">Customize profile</span>
</h1>
<form class="flexcolumn flexgrow">
<div id="profile_params_container">
<div id="profile_params"></div>
<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>
<ul class="nav nav-tabs" id="profileEditorTabs" role="tablist">
<li class="nav-item">
<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
class="nav-link active"
id="params-tab"
data-toggle="tab"
href="#profile_params_container"
role="tab"
aria-controls="profile_params_container"
aria-selected="true"
data-i18n="sidebar.profile.options"
>Options</a
>
<button type="button" class="btn btn-info btn-sm" id="profile_basic">
<span data-i18n="sidebar.profile.switch_basic">Switch to basic editor</span>
</button>
</li>
<li class="nav-item">
<a
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="flexcolumn flexgrow 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.apply">Apply</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">
<span class="fa fa-cloud-upload"></span>
<span data-i18n="sidebar.profile.apply">Apply</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>
</form>

View file

@ -1,5 +1,6 @@
BR.Profile = L.Evented.extend({
cache: {},
saveWarningShown: false,
initialize: function() {
var textArea = L.DomUtil.get('profile_upload');
@ -7,13 +8,12 @@ BR.Profile = L.Evented.extend({
lineNumbers: true
});
var that = this;
L.DomUtil.get('profile_advanced').addEventListener('click', function() {
that._toggleAdvanced();
});
L.DomUtil.get('profile_basic').addEventListener('click', function() {
that._toggleAdvanced();
});
$('#profileEditorTabs a[data-toggle="tab"]').on(
'shown.bs.tab',
L.bind(function(e) {
this._activateSecondaryTab();
}, this)
);
L.DomUtil.get('save').onclick = L.bind(this._save, this);
L.DomUtil.get('upload').onclick = L.bind(this._upload, this);
@ -79,19 +79,21 @@ BR.Profile = L.Evented.extend({
profile = this.editor.getValue();
this.message.hide();
$(button).button('uploading');
evt.preventDefault();
var that = this;
this.fire('update', {
profileText: profile,
callback: function(err, profileId, profileText) {
$(button).button('reset');
callback: L.bind(function(err, profileId, profileText) {
$(button).blur();
if (!err) {
that.cache[profileId] = profileText;
this.cache[profileId] = profileText;
if (!this.saveWarningShown) {
this.message.showWarning(i18next.t('warning.temporary-profile'));
this.saveWarningShown = true;
}
}
}
}, this)
});
},
@ -131,8 +133,8 @@ BR.Profile = L.Evented.extend({
});
},
_setValue: function(profileText) {
if (L.DomUtil.get('profile_editor').style.display == 'flex') {
_setValue: function(profileText, profileEditorActivated) {
if (L.DomUtil.get('profile_editor').classList.contains('active')) {
// Set value of the full editor and exit
this.editor.setValue(profileText);
this.editor.markClean();
@ -220,7 +222,7 @@ BR.Profile = L.Evented.extend({
if (paramType == 'select') {
var select = document.createElement('select');
select.name = paramName;
select.className = 'form-control';
select.className = 'form-control form-control-sm';
label.htmlFor = select.id = 'customize-profile-' + paramName;
var paramValues = params[param].possible_values;
@ -241,7 +243,7 @@ BR.Profile = L.Evented.extend({
if (paramType == 'number') {
input.type = 'number';
input.value = params[param].value;
input.className = 'form-control';
input.className = 'form-control form-control-sm';
label.append(paramName);
div.appendChild(label);
@ -272,14 +274,10 @@ BR.Profile = L.Evented.extend({
});
},
_toggleAdvanced: function() {
if (L.DomUtil.get('profile_editor').style.display == 'flex') {
L.DomUtil.get('profile_params_container').style.display = 'initial';
L.DomUtil.get('profile_editor').style.display = 'none';
_activateSecondaryTab: function() {
if (L.DomUtil.get('profile_params_container').classList.contains('active')) {
this._setValue(this.editor.getValue());
} else {
L.DomUtil.get('profile_params_container').style.display = 'none';
L.DomUtil.get('profile_editor').style.display = 'flex';
this._setValue(this._buildCustomProfile());
}
}

View file

@ -33,8 +33,7 @@
drawButton,
deleteRouteButton,
pois,
urlHash,
saveWarningShown = false;
urlHash;
// By default bootstrap-select use glyphicons
$('.selectpicker').selectpicker({
@ -179,10 +178,6 @@
updateRoute({
options: routingOptions.getOptions()
});
if (!saveWarningShown) {
profile.message.showWarning(i18next.t('warning.temporary-profile'));
saveWarningShown = true;
}
} else {
profile.message.showError(err);
if (profileId) {

View file

@ -203,14 +203,13 @@
"title": "Layers"
},
"profile": {
"profile": "Profile",
"options": "Options",
"clear": "Clear",
"help": "Help",
"no_easy_configuration_warning": "No easy configuration is available for this profile.",
"placeholder": "Write your custom profile here.",
"save": "Save",
"switch_advanced": "Switch to advanced editor",
"switch_basic": "Switch to basic editor",
"upload": "Upload"
"apply": "Apply"
}
},
"title": "BRouter web client",