Add hints and feedback for optional layers tree usage (#211)

nrenner · Nov 28, 2019 · 52a0d5f · 52a0d5f
1 parent 09a185c
commit 52a0d5f
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 5 deletions.
diff --git a/css/style.css b/css/style.css
@@ -186,10 +186,20 @@ input#trackname:focus:invalid {
 #message {
     position: absolute;
     margin: 10px 46px; /* 10 + 26 + 10 */
-    z-index: 3000;
+    z-index: 3001;
     font-size: 1rem;
     cursor: auto;
 }
+#preview {
+    position: absolute;
+    top: 10px;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    z-index: 3000;
+    font-size: 1.5rem;
+    background-color: rgba(0, 116, 217, 0.6);
+    color: white;
+}
 
 /* Override Bootstrap tabs that set `display` from `none` to `block` when activating */
 #profileEditorTabsContent.tab-content > .active {
@@ -463,9 +473,11 @@ table.dataTable.display tbody tr.even:hover {
 
 .leaflet-sidebar-pane#tab_profile .help-block {
     display: block;
-    color: #737373;
     margin-bottom: 0.5rem;
 }
+.help-block {
+    color: #737373;
+}
 
 .leaflet-sidebar-content {
     /* for optional-layers-tree */
@@ -497,16 +509,82 @@ table.dataTable.display tbody tr.even:hover {
     margin-right: 5px;
 }
 
-#optional-layers-tree {
+#optional-layers {
     margin-top: 5px;
 }
+#optional-layers .help-block {
+    font-style: italic;
+    margin-bottom: 0.3rem;
+}
 
 .tree-code {
     font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
     margin-right: 7px;
     color: #666; /* like root nodes, jstree-disabled */
 }
 
+/* icon tooltips as hints and feedback for add/remove and preview actions of optional layer tree nodes */
+
+.jstree-default .jstree-anchor {
+    position: relative;
+}
+
+.jstree-default .jstree-hovered:not(.jstree-checked):not(.jstree-disabled):not(.added):not(.removed)::before,
+.jstree-default .jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)::before,
+.jstree-default .jstree-hovered:not(.jstree-disabled)::after,
+.jstree-default .jstree-clicked:not(.jstree-disabled)::after,
+.jstree-anchor.added::before,
+.jstree-anchor.removed::before {
+    font-family: FontAwesome;
+    font-style: normal;
+    font-size: 14px;
+    color: #bbb;
+    position: absolute;
+}
+
+.jstree-default .jstree-hovered:not(.jstree-checked):not(.jstree-disabled):not(.added):not(.removed)::before,
+.jstree-default .jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)::before,
+.jstree-anchor.added::before,
+.jstree-anchor.removed::before {
+    left: -15px;
+}
+.jstree-default .jstree-hovered:not(.jstree-checked):not(.jstree-disabled):not(.added):not(.removed)::before,
+.jstree-anchor.added::before {
+    content: '\f067'; /* fa-plus */
+}
+.jstree-default .jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)::before,
+.jstree-anchor.removed::before {
+    content: '\f068'; /* fa-minus */
+}
+.jstree-anchor.added::before,
+.jstree-anchor.removed::before {
+    animation: addremove 1s;
+}
+@keyframes addremove {
+    30% {
+        color: #0074d9;
+        font-weight: bold;
+    }
+    70% {
+        color: #0074d9;
+        font-weight: bold;
+    }
+}
+
+.jstree-default .jstree-hovered:not(.jstree-disabled)::after,
+.jstree-default .jstree-clicked:not(.jstree-disabled)::after {
+    content: '\f06e'; /* fa-eye */
+    right: -17px;
+}
+.jstree-default .jstree-clicked:not(.jstree-disabled)::after {
+    color: #0074d9;
+}
+
+.jstree-default .jstree-disabled > .jstree-icon {
+    opacity: 0.5;
+    cursor: default;
+}
+
 /* hide currently unused bottom tabs container because of touch border artefacts */
 .leaflet-sidebar-tabs > ul:last-child {
     display: none;

diff --git a/index.html b/index.html
@@ -579,6 +579,7 @@ <h4 class="modal-title" data-i18n="export.title">
             <div class="leaflet-sidebar-flex-row flexgrow">
                 <div id="map" class="leaflet-sidebar-map">
                     <div id="message"></div>
+                    <div id="preview" hidden data-i18n="map.preview">Preview</div>
                 </div>
 
                 <div id="sidebar" class="leaflet-sidebar collapsed">
@@ -645,7 +646,10 @@ <h1 class="leaflet-sidebar-header">
                                     </button>
                                 </div>
                             </div>
-                            <div hidden id="optional-layers-tree"></div>
+                            <div hidden id="optional-layers">
+                                <div class="help-block" data-i18n="sidebar.layers.optional"></div>
+                                <div id="optional-layers-tree"></div>
+                            </div>
                         </div>
 
                         <div class="leaflet-sidebar-pane" id="tab_profile">

diff --git a/js/control/LayersTab.js b/js/control/LayersTab.js
@@ -69,7 +69,7 @@ BR.LayersTab = BR.ControlLayers.extend({
         var toggleOptionalLayers = function(e) {
             var button = L.DomUtil.get('optional_layers_button');
             var treeButtons = L.DomUtil.get('tree-button-group');
-            var div = L.DomUtil.get('optional-layers-tree');
+            var div = L.DomUtil.get('optional-layers');
 
             div.hidden = !div.hidden;
             treeButtons.hidden = !treeButtons.hidden;
@@ -121,6 +121,12 @@ BR.LayersTab = BR.ControlLayers.extend({
             }
 
             this.storeDefaultLayers();
+
+            var ele = document.getElementById(data.node.a_attr.id);
+            ele.classList.add('added');
+            setTimeout(function() {
+                ele.classList.remove('added');
+            }, 1000);
         };
 
         var onUncheckNode = function(e, data) {
@@ -137,6 +143,12 @@ BR.LayersTab = BR.ControlLayers.extend({
             }
 
             this.storeDefaultLayers();
+
+            var ele = document.getElementById(data.node.a_attr.id);
+            ele.classList.add('removed');
+            setTimeout(function() {
+                ele.classList.remove('removed');
+            }, 1000);
         };
 
         $('#optional-layers-tree')
@@ -393,13 +405,17 @@ BR.LayersTab = BR.ControlLayers.extend({
         this.previewLayer = layer;
 
         this.showPreviewBounds(layerData);
+
+        L.DomUtil.get('preview').hidden = false;
     },
 
     hidePreview: function(layer) {
         this._map.off('baselayerchange', this.onBaselayerchange, this);
         this.removePreviewBounds();
         this.removePreviewLayer();
         this.restoreActiveLayers();
+
+        L.DomUtil.get('preview').hidden = true;
     },
 
     toLayerString: function(obj) {

diff --git a/locales/en.json b/locales/en.json
@@ -117,6 +117,7 @@
       "help": "&square; = move / resize, <span class=\"fa fa-trash-o\"></span> = delete,<br>click circle to quit editing"
     },
     "opacity-slider": "Set transparency of route track and markers",
+    "preview": "Preview",
     "privacy": "Privacy",
     "reverse-route": "Reverse route",
     "route-quality-altitude": "Altitude coding",