search

GeoNode / geonode

GeoNode is an open source platform that facilitates the creation, sharing, and collaborative use of geospatial data.
https://geonode.org/
Other
1.45k stars 1.13k forks source link

Hierarchical keyword tree widget issues #5419

Closed dhlambert closed 4 years ago

dhlambert commented 4 years ago

Expected Behaviour

Hierarchical keyword tree widget expands keywords successfully when any part of the folder is clicked on.

Note: Autocomplete light is currently being upgraded to a new version which integrates with select2 widgets on frontend https://github.com/GeoNode/geonode/pull/5410. Hierarchical keyword tree widget will also need to be fixed to work with select2 once #5410 has landed. The autocomplete light branch currently has this widget commented out:

Actual Behaviour

Clicking a keyword doesn't open the hierarchy as expected - it only opens when clicking the very edge of the right side of the folder.

Steps to Reproduce the Problem

  1. Sign in as an admin user
  2. Navigate to the django admin panel and add some hierarchical keywords with children like the following. image
  3. Navigate to Documents (or other resource page)
  4. Add a document (resource) and click into it
  5. Click on "Edit Document"
  6. Click the either Advanced Edit or the Wizard option
  7. Find the Free-text Keywords field and expand the tree widget using the folder icon on the right of the input
  8. Navigate to the parent keyword which was created earlier ie 'layer 1'
  9. Try click on the keyword such that it displays 'layer 2' - this behaviour only seems to work when clicking on the very edge of the right side of the folder.
  10. If 'layer 2' appears successfully try and click on 'layer 2' such that it displays 'layer 3'

This should look as the following: image

Specifications

t-book commented 4 years ago

This is caused by two problems.

1

The icons for tag/folder and expand overlap which you can see when applying some margin. (There are actually two icons)

span.expand-icon.fa.fa-folder {
    margin-right: 25px;
}
Bildschirmfoto 2019-12-20 um 15 31 35

2

Both fa-tag and fa-folder use the same icon which is semantically wrong. Instead in IMHO fa-folder should be fa-plus

Is

Bildschirmfoto 2019-12-20 um 15 31 52

should

Bildschirmfoto 2019-12-20 um 15 37 26

to look like

Bildschirmfoto 2019-12-20 um 15 35 10
t-book commented 4 years ago

@afabiani changed the milestone to 2.12.2 hope that is fine for you if not feel free to revert.