PB-985: Make Layer Info Movable

[ismailsunni]

Update screencast:

I'm not super expert in CSS, so any suggestions are welcome :)

Test link

[cypress]

web-mapviewer    Run #3597

Run Properties:   Passed #3597  •  a72d5edc6a: PB-985: Fix failed unit test.

Project	web-mapviewer
Run status	Passed #3597
Run duration	05m 12s
Commit	a72d5edc6a: PB-985: Fix failed unit test.
Committer	Ismail Sunni
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	21
Skipped	0
Passing	211

[ismailsunni]

Need to fix the test first, it seems the approach is wrong :)

[ltkum]

In the ticket, there was also the idea of adding a 'minimize' button if this did not take too much effort. In the mapPopoverComponent, this is handled with this button :

web-mapviewer/src/modules/map/components/MapPopover.vue

Lines 156 to 163 in 693e590

	<button
	class="btn btn-sm btn-light d-flex align-items-center"
	data-cy="map-popover-close-button"
	@click="showContent = !showContent"
	@mousedown.stop=""
	>
	<FontAwesomeIcon :icon="`caret-${showContent ? 'up' : 'down'}`" />
	</button>

, which toggles a boolean telling us if we should show the content or not. If it's not too much effort, this could be a good idea to add it now.

[pakb]

As stated by Martin, it would make more sense to share the "movable" part of the MapPopover.vue here (through some composable or component hierarchy) instead of recreating it.

[pakb]

I would also shrink the width of the container to fit its content, but not to go further anymore.
You can also get rid of the black backdrop as soon as this is movable (that's the end goal, have the legend visible, but still be able to manipulate the map)

[pakb]

If possible, I'd lower the width of the movable layer info to somewhat similar width as the feature tooltip

[ismailsunni]

Hi @ltkum @pakb

I have updated my works, now it contains:

• The usage of useMovableComponent (add new prop to handle initial position)
• Add button to minimize
• Reduce the width, now it's more or less similar as the info box
• Remove the black backdrop (add some new props)

I have updated the screencast in the first comment

Feel free to test and suggestions are welcomed.

[pakb]

works well on desktop, but still needs a bit of work on smaller screen (I think some max-width are messing with the size of the element)

You might want to try out with your "Device toolbar" on and play a bit with a phone sized screen

[ismailsunni]

hi @pakb
could you show me tje issue in a smaller screen? I have tried different device size, and it seems all works well. The only difference is the width of the layer description (now it sets to $overlay-width)

[ltshb]

It breaks the normal modal windows like the third party disclaimer and the import file window. In this case the black drop is removed and the close function when clicking outside of the window don't work anymore.
For the import file window, it might also good to make it movable by adding the movable option to it. For the disclaimer the modal with backdrop should be kept.
But to be honest I would not add the movable to the ModalWithBackdrop, to me a modal window should not be movable.

Can you not replace the ModalWithBackrop by the MapPopover component for the layer description ? Or even better use the SimpleWindow component like for the report a problem and add the movable to it. This component is used by the report a problem window which is not movable but would be surely nice to have it movable as well.

[ismailsunni]

@ltshb I have used SimpleWindow for the LayerDescription, add movable to it, and make the report window movable.