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

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 {
@@ -467,9 +477,11 @@ table.dataTable.display tbody tr:hover.selected {
 
 .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 */
@@ -501,16 +513,110 @@ table.dataTable.display tbody tr:hover.selected {
     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;
+    /* fix 1px increased parent span height (hover inset box-shadow outside background) */
+    line-height: normal;
     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 {
+    padding: 0;
+}
+.jstree-default .jstree-checkbox,
+.tree-text {
+    position: relative;
+}
+.jstree-default .jstree-checkbox {
+    padding-left: 1px;
+}
+.tree-text {
+    display: inline-block;
+    padding-right: 4px;
+}
+
+.jstree-default
+    .jstree-hovered:not(.jstree-checked):not(.jstree-disabled):not(.added):not(.removed)
+    .jstree-checkbox:hover::before,
+.jstree-default
+    .jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)
+    .jstree-checkbox:hover::before,
+.jstree-default .jstree-hovered:not(.jstree-disabled) .tree-text::after,
+.jstree-default .jstree-clicked:not(.jstree-disabled) .tree-text::after,
+.jstree-anchor.added .jstree-checkbox::before,
+.jstree-anchor.removed .jstree-checkbox::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)
+    .jstree-checkbox:hover::before,
+.jstree-default
+    .jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)
+    .jstree-checkbox:hover::before,
+.jstree-anchor.added .jstree-checkbox::before,
+.jstree-anchor.removed .jstree-checkbox::before {
+    left: -15px;
+}
+.jstree-default
+    .jstree-hovered:not(.jstree-checked):not(.jstree-disabled):not(.added):not(.removed)
+    .jstree-checkbox:hover::before,
+.jstree-anchor.added .jstree-checkbox::before {
+    content: '\f067'; /* fa-plus */
+}
+.jstree-default
+    .jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)
+    .jstree-checkbox:hover::before,
+.jstree-anchor.removed .jstree-checkbox::before {
+    content: '\f068'; /* fa-minus */
+}
+.jstree-anchor.added .jstree-checkbox::before,
+.jstree-anchor.removed .jstree-checkbox::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) .tree-text:hover::after,
+.jstree-default .jstree-clicked:not(.jstree-disabled) .tree-text::after {
+    content: '\f06e'; /* fa-eye */
+    right: -17px;
+}
+.tree-text:hover {
+    box-shadow: inset 0 -1px rgba(224, 172, 104, 0.8);
+}
+
+.jstree-default .jstree-clicked:not(.jstree-disabled) .tree-text::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;

index.html

@@ -579,6 +579,7 @@
             <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 @@
                                     </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">

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')
@@ -183,14 +195,14 @@ BR.LayersTab = BR.ControlLayers.extend({
         }
 
         function getText(props, parent) {
-            var text = '';
+            var text = '<span class="tree-text">';
             var code = props.country_code || props.language_code;
             if (code && parent.text !== code) {
                 text += '<span class="tree-code">' + code + '</span>';
             }
             text += props.name;
 
-            return text;
+            return text + '</span>';
         }
 
         function createNode(id, layerData, parent) {
@@ -393,6 +405,8 @@ BR.LayersTab = BR.ControlLayers.extend({
         this.previewLayer = layer;
 
         this.showPreviewBounds(layerData);
+
+        L.DomUtil.get('preview').hidden = false;
     },
 
     hidePreview: function(layer) {
@@ -400,6 +414,8 @@ BR.LayersTab = BR.ControlLayers.extend({
         this.removePreviewBounds();
         this.removePreviewLayer();
         this.restoreActiveLayers();
+
+        L.DomUtil.get('preview').hidden = true;
     },
 
     toLayerString: function(obj) {

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",