From 52a0d5fe7dcd6a0d8cff3e7e797451d14587a395 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Thu, 28 Nov 2019 18:02:58 +0100 Subject: [PATCH] Add hints and feedback for optional layers tree usage (#211) --- css/style.css | 84 +++++++++++++++++++++++++++++++++++++++-- index.html | 6 ++- js/control/LayersTab.js | 18 ++++++++- locales/en.json | 1 + 4 files changed, 104 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 3cb191af..85598488 100644 --- 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,9 +509,13 @@ 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; @@ -507,6 +523,68 @@ table.dataTable.display tbody tr.even:hover { 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 index 52a41323..a563631e 100644 --- a/index.html +++ b/index.html @@ -579,6 +579,7 @@

+
- +
diff --git a/js/control/LayersTab.js b/js/control/LayersTab.js index 2be06249..24ed5e58 100644 --- 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,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) { diff --git a/locales/en.json b/locales/en.json index ede04e4e..c4615020 100644 --- a/locales/en.json +++ b/locales/en.json @@ -117,6 +117,7 @@ "help": "□ = move / resize, = delete,
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",