Merge pull request #260 from nrenner/profile-tabs

Profile tabs

css/style.css

@@ -191,8 +191,9 @@ input#trackname:focus:invalid {
     cursor: auto;
 }
 
-#profile_editor {
+/* Override Bootstrap tabs that set `display` from `none` to `block` when activating */
-    display: none;
+#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 {
+#profile_params,
-    min-height: 100%;
+.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 {
+#profile_params {
-    margin-bottom: 5px;
+    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;

index.html

@@ -651,22 +651,55 @@
                                 ><span data-i18n="sidebar.customize-profile.title">Customize profile</span>
                             </h1>
                             <form class="flexcolumn flexgrow">
-                                <div id="profile_params_container">
+                                <ul class="nav nav-tabs" id="profileEditorTabs" role="tablist">
+                                    <li class="nav-item">
+                                        <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
+                                        >
+                                    </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 type="button" class="btn btn-info btn-sm" id="profile_advanced">
+                                            <button id="save" type="button" class="btn btn-primary btn-sm">
-                                            <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>
+                                                <span data-i18n="sidebar.profile.apply">Apply</span>
                                             </button>
                                         </div>
                                     </div>
-                                <div id="profile_editor" class="flexcolumn flexgrow">
+                                    <div
+                                        id="profile_editor"
+                                        class="flexcolumn flexgrow tab-pane"
+                                        role="tabpanel"
+                                        aria-labelledby="profile-editor-tab"
+                                    >
                                         <textarea
                                             class="form-control flexgrow"
                                             id="profile_upload"
@@ -677,14 +710,9 @@
                                         ></textarea>
                                         <div id="profile_message"></div>
                                         <div class="form-group" id="profile_buttons">
-                                        <button
+                                            <button id="upload" type="button" class="btn btn-primary btn-sm">
-                                            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>
+                                                <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>
@@ -697,10 +725,7 @@
                                                 ><span class="fa fa-question"></span>
                                                 <span data-i18n="sidebar.profile.help">Help</span></a
                                             >
-
+                                        </div>
-                                        <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>
                                     </div>
                                 </div>
                             </form>

js/control/Profile.js

@@ -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;
+        $('#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('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) {
+            callback: L.bind(function(err, profileId, profileText) {
-                $(button).button('reset');
                 $(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) {
+    _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
             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() {
+    _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());
         } else {
-            L.DomUtil.get('profile_params_container').style.display = 'none';
-            L.DomUtil.get('profile_editor').style.display = 'flex';
             this._setValue(this._buildCustomProfile());
         }
     }

js/index.js

@@ -33,8 +33,7 @@
             drawButton,
             deleteRouteButton,
             pois,
-            urlHash,
+            urlHash;
-            saveWarningShown = false;
 
         // 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) {

locales/en.json

@@ -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",
+      "apply": "Apply"
-      "switch_advanced": "Switch to advanced editor",
-      "switch_basic": "Switch to basic editor",
-      "upload": "Upload"
     }
   },
   "title": "BRouter web client",