Add hints and feedback for optional layers tree usage (#263)
This commit is contained in:
Norbert Renner
GitHub
parent
064e0869b4
commit
a71dfe7895
4 changed files with 134 additions and 7 deletions
112
css/style.css
112
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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@
|
|||
"help": "□ = 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",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue