Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add hints and feedback for optional layers tree usage #263

Merged
merged 3 commits into from
Dec 6, 2019
Merged

Add hints and feedback for optional layers tree usage #263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
52a0d5f
Add hints and feedback for optional layers tree usage (#211)
nrenner Nov 28, 2019
1412fa6
Separate hover styles for checkbox and text
nrenner Dec 2, 2019
51d487e
Fix tree-code increasing parent height in Firefox also
nrenner Dec 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 109 additions & 3 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -497,16 +509,110 @@ 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;
/* 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;
Expand Down
6 changes: 5 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down
22 changes: 19 additions & 3 deletions js/control/LayersTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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')
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down
1 change: 1 addition & 0 deletions locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down